创建高保真的移动Demo(工具篇)
- 格式：pdf
- 大小：871.67 KB
- 文档页数：11
下载文档原格式
合集下载
15款优秀移动APP产品原型设计工具
15款优秀移动APP产品原型设计工具首先，一款优秀的移动APP产品原型设计工具应该具备：①.支持移动端演示（随时随地演示给BOSS，厕所&食堂&电梯…以体现我是那么的敬业——长点工资必备）②.组件库（高效复用，谁用谁知道）③.可以快速生成全局流程（程序猿看不懂拆解的，给丫的看这个）④.在线协作（多个PM狗一起用）⑤.手势操作、转场动画、交互特效…(这些都不需要，留给专业的交互、视觉，搞那么虚的不如多想想产品流程逻辑做做减法、写写xxRD啥的)这些年，产品狗们折腾过的原型工具：1. POP（Prototyping on Paper）算是移动App原型设计神器，很多公司在用：quora、sina、豆瓣、36氪、ifanr…操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在iPhone上给小伙伴们演示了，并且POP内嵌的交互动作如侧滑、展开、消失等，即可满足一般的动态演示需要。
不太明白？2、Pencil ProjectPencil是一款开源的可以用来制作图表和GUI原型的工具，可以作为一个独立的app，也可以作为Firefox插件。
内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面，包括流程图、UI和一般的通用图形。
通过它内置的模板，你可以创建可链接的文档，并输出成为HTML 文件、PNG、OpenOffice文档、Word文档、PDF。
Pencil Project还包含大量移动app模版。
3.Axure大家都很熟悉了，这里主要说下移动端的演示，这样才充分表达原型意图。
按F5生成原型的时候，在“Mobile/Device”选项中可以设置适配移动设备的特殊原型（Axure 6.5以下版本），再用移动设备访问你生成的原型链接即可（该页面创建一个桌面快捷方式）。
4、Proto.ioProto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。
使用FLStudioMobile进行手机音乐制作和编曲
使用FLStudioMobile进行手机音乐制作和编曲使用FL Studio Mobile进行手机音乐制作和编曲第一章：FL Studio Mobile的介绍FL Studio Mobile是一款功能强大的音乐制作和编曲软件，适用于iOS和Android平台。
它具有直观的用户界面和丰富的功能，可以让用户在手机上轻松地创作、编辑和混音音乐。
第二章：基本功能的使用FL Studio Mobile提供了诸多基本功能，包括多轨音频录制、可编程控制器、音效处理、乐器模拟等。
用户可以通过触摸屏幕来创建、编辑和调整音频轨道，调整乐器音色和参数，添加各种音效，实现高质量音频的制作和编曲。
第三章：音频录制和编辑FL Studio Mobile支持多轨音频录制，用户可以使用手机内置麦克风录制声音，或者通过外部设备进行录制。
录制完成后，可以对音频进行剪切、修剪和混合，还可以调整音量、平衡和空间效果，以获得更好的音频效果。
第四章：乐器模拟和创作FL Studio Mobile内置了多种乐器模拟器，如合成器、钢琴、吉他、鼓等。
用户可以通过触摸屏幕或外部MIDI设备来演奏不同的乐器，调整音色和音量，自由创作属于自己的音乐作品。
第五章：音频效果和处理FL Studio Mobile提供了多种音频效果和处理工具，例如均衡器、压缩器、混响等。
用户可以通过添加不同的效果和处理来改变音频的声音质量和空间感，进一步增强音乐作品的表现力。
第六章：混音与后期制作FL Studio Mobile支持多轨混音，用户可以将不同音频轨道进行分组和混合，调整音量和平衡，以实现更好的音频效果和空间感。
此外，还可以对整个音乐作品进行后期制作，如添加特效、调整音频动态范围等。
第七章：与其他软件的兼容性FL Studio Mobile支持与其他音乐制作软件的兼容，用户可以通过导入和导出不同格式的音频文件，与其他软件进行共同制作和编曲。
此外，还可以将制作完成的音乐作品导出为不同格式的文件，方便在不同平台和设备上进行播放和分享。
高保真demo工具
4、PPT：PPT虽然并非交互专精，但这方面的功能其实也是足够强大的，基本界面和交互也可以实现；
5、Flash：不要小看这款看似过时的工具，目前还是有很多产品经理和设计师利用它制作一些特效。
原型工具推荐：
1、Axure RP：一些基本的交互效果都可以实现，让你不会写前端代码也可以做出各种低保真或者高保真的网页原型；
2、prototyper：分为绿色free版和橙色效果也很方便，设计移动产品是它的特点；
3、UIDesigner：腾讯公司出品的一款适合移动产品的原型设计工具，有强大的控件库，操作简单，交互效果也很好；
5、Flash：不要小看这款看似过时的工具，目前还是有很多产品经理和设计师利用它制作一些特效。
原型工具推荐：
1、Axure RP：一些基本的交互效果都可以实现，让你不会写前端代码也可以做出各种低保真或者高保真的网页原型；
2、prototyper：分为绿色free版和橙色效果也很方便，设计移动产品是它的特点；
3、UIDesigner：腾讯公司出品的一款适合移动产品的原型设计工具，有强大的控件库，操作简单，交互效果也很好；
如何分分钟开发高保真交互原型
如何分分钟开发高保真交互原型产品开发，体验先行。
由于软件产品开发的成本比较高，所以在开发之前，往往先由目标用户来验证产品创意的价值，而最高效的方法就是通过高保真交互原型进行测试。
天下武功，唯快不破。
在日新月异的互联网市场，产品经理必须迅速评估创意，挑选具有潜力的点子。
常规的做法是：各个页面的静态效果图评审通过之后，立即交给开发人员评估高保真交互原型的开发工作量，评估的结果往往是需要两三天，甚至两三周的开发时间。
本文介绍4点快速开发交互原型的方法，在各个页面的静态效果图已经准备妥当的前提下，开发高保真交互原型两三小时都不用，两三分钟轻松搞定！4点技巧不懂前端代码（HTML、css、js等）也没关系，我们可以用可视化工具（比如Axure）来开发，这4点技巧都是通用的。
（1）热点跳转在“网页”上贴一整张高保真效果图，然后在可点击的区域（可能是图片、链接等）上覆盖一个透明的“热区”，测试用户只要点击该“热区”，就直接跳转到新的“网页”。
如果您用的是Axure（以Axure RP Pro 7.0为例说明）开发，就利用“Hot Spot”热点控件（如下图），直接覆盖在图片的可交互热区上。
当然，除了热点控件，你还可以使用“Rectangle”矩形控件（将其边框和填充色都设置为透明即可）。
图1 Axure中的热点控件如果您是用前端代码开发，也很简单，直接将一个透明的div绝对定位（position:absolute）到可点击区域上。
就这样，高保真交互原型就开发完了，非常简单、快速。
（2）仅开发那些发生交互区域一方面，有些页面不需要做任何交互效果。
最常见的是“任务流”的最后一个页面，比如，用户的任务是找到收藏列表，用户只要打开收藏列表页就算完成任务，所以这个收藏列表页不需要做任何交互效果，直接贴一整张图。
另一方面，与可用性测试任务流无关的区域也不需要做交互效果。
如下图（图2），假设用户的测试任务是购买3D眼镜，那么，网页底部的页脚（footer），以及与3D眼镜无关的其他商品都不需要做热点链接。
高保真界面操作方法
高保真界面操作方法高保真界面操作方法是指在进行界面设计时，通过模拟真实环境的方式，使得用户可以更加直观地了解和使用界面。
在进行高保真界面设计时，需要考虑以下几个方面。
一、界面元素的布局和排版高保真界面操作方法中，界面元素的布局和排版是非常重要的一环。
首先，需要根据界面的功能和内容确定各个元素的位置和大小，确保它们有良好的可读性和可操作性。
同时，还需要考虑元素之间的间距和对齐方式，使得整个界面看起来更加整洁和美观。
二、使用真实的资源和样式为了使高保真界面更加真实和逼真，可以使用真实的资源和样式。
比如，在设计一个网页界面时，可以使用真实的图片作为背景，使用真实的字体和颜色进行排版。
这样可以使得用户产生更加直观的感受，更好地理解和使用界面。
三、交互效果的模拟除了界面元素的布局和排版，高保真界面操作方法还需要模拟交互效果。
比如，在设计一个手机应用界面时，可以通过添加滑动、点击等动画效果来模拟用户操作，让用户更加真实地感受到界面的使用方式。
此外，还可以通过添加过渡效果、提示窗口等方式来引导用户进行操作，提高用户的体验。
四、注意细节和用户体验在进行高保真界面操作方法时，需要特别注意细节和用户体验。
首先，要保证界面中的每个元素都能被用户正常操作，不出现任何错误和bug。
其次，要注重用户的直观感受，考虑如何让用户更加容易理解和使用界面。
比如，可以通过添加说明文字、提示符号等方式来引导用户操作。
五、多平台适配在进行高保真界面操作方法时，还需要考虑多平台适配。
不同平台（比如PC、手机、平板电脑等）具有不同的屏幕大小和分辨率，需要根据具体平台进行适配。
同时，还要考虑不同平台的操作习惯和交互方式，以确保用户在任何平台上都能正常使用界面。
总之，高保真界面操作方法是一种通过模拟真实环境的方式，使得用户可以更加直观地了解和使用界面的方法。
在进行高保真界面设计时，需要注意布局和排版、使用真实的资源和样式、模拟交互效果、注重细节和用户体验，以及进行多平台适配。
从零开始教你做高保真原型图+UI设计规范
从零开始教你做⾼保真原型图+UI设计规范编者按：《从零开始设计App》系列到这篇已经是第三期了，上期是低保真原型图，这期聊聊如何从零开始制作⾼保真原型图和UI 。
往期回顾：1.2.Hi-fi 输出上篇⽂章提到，在Hi-fi阶段⼤概可以分为前期、中期和后期三个阶段。
这篇⽂章就是对Hi-fi阶段的详细解说。
前期前期的主要任务是hero screen（主功能页⾯）的尝试设计，通过它进⾏视觉风格上的确定。
APP进⼊视觉风格确定的时期，主要确定的内容包括颜⾊、字体、图标三⼤块。
1. 颜⾊确定的过程先做好⼼理准备，很⼤程度上会来回折腾，改来改去。
着⼿点可以从产品点位出发，结合企业视觉系统进⾏统⼀形象设计。
如果企业有⾃⼰的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进⾏APP个性定位。
通俗点说，就是保持统⼀的前提下，有所区别。
打个⽐⽅，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都⽤统⼀的带有运动感的荧光绿作为主⾊调，然后⽤⿊⽩灰进⾏搭配。
三者⼜有⼀定的区别，⽐如说Nike+RunClub的header是绿⾊，Nike+Training的header 是⿊⾊，前者更有活⼒运动感，户外使⽤阅读更⽅便，后者对室内体验更友好。
如果没有企业视觉系统，⼀切从0开始的话，建议从竞品分析开始，市⾯上做得⽐较成功的产品进⾏分析，以及从⾃⾝产品特性和⾏业特性进⾏出发。
⽐⽅说餐饮⾏业代表⾊是橙⾊，运动⾏业蓝⾊，⾼科技领域不同⾊值的篮等等，也可以另辟蹊径做出个性化的尝试，⽐如keep的绿⾊与棕⾊的搭配⽅案。
在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。
⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。
这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。
⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。
高保真原型的这几个秘密，你知道吗?
高保真原型不是一个人可以做的事情，高保真原型需要交互、视觉、产品的配合；高保真原型不是必须的，但有它更好，请在合适的时间和场景下制作高保真；高保真原型是一个最小化的MVP产品之一，它可以帮助你快速验证市场；高保真原型的阅读人群更加广泛，它不仅可以被视觉、开发、产品阅读，还可以被市场、运营、boss和种子用户阅读；原型的保真程度可以分为：低保真、高保真低保真原型（纸面原型、物理原型），下图为低保真下图图为高保真原型原型常被称为线框图、mockuo、demo，原型制作是在正式开始视觉设计和开发之前最具有成本效益的可用性手段之一。
高保真原型可以真实的模拟产品最终的视觉效果、交互效果和用户体验感受。
高保真原型也是最小可行性产品，即MVP产品。
一个登陆页的栗子：二、为什么要做高保真原型？高保真原型是团队成员沟通的有效工具，它也是获取前期用户反馈数据的重要手段之一。
那么，我们来看看一幅关于软件产品的漫画，带着问题继续阅读。
一千个人眼中有一千个哈姆莱特，每个人对需求的理解都不尽相同。
如何让不同的人对与需求，有一个统一的认识？高保真原型无疑是一个很好的选择。
1，它能清楚的告诉你的团队成员，要做的产品是什么样子；2，它能清晰的体现产品的用户体验；它能准确的模拟后台数据的大部分交互效果；3，它能让你的团队成员（市场、运营等）都能更好的理解需求；4，它更加容易的被修改；它还能让目标用户直接参与测试，告诉你他们是否需要；高保真原型对不同人员的影响对于公司1，保证产品质量。
低成本高质量的高保真原型为真正产品提供了保障；2，工作量具体化。
设计、开发、测试等环节评估工作量变得有据可依；3，节约时间成本。
大多会影响产品的隐患，都会在产品原型的时候被发现，在开发阶段之前被解决；4，快速检验产品设计。
用高保真原型去验证产品的市场，获取最早期的市场信息，它是真实产品的试金石；5，加深各个团队对产品需求和具体工作的理解；注：创业公司的首要任务应该是确定开发什么样的产品，千万别在浪费了100W刀之后才醒悟，已经开发了一个用户不需要的产品。
高保真原型设计实验实训主要内容
高保真原型设计实验实训主要内容下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢！本店铺为大家提供各种类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，想了解不同资料格式和写法，敬请关注！Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you! In addition, this shop provides you with various types of practical materials, such as educational essays, diary appreciation, sentence excerpts, ancient poems, classic articles, topic composition, work summary, word parsing, copy excerpts, other materials and so on, want to know different data formats and writing methods, please pay attention!高保真原型设计实验实训主要内容在高保真原型设计实验实训中，学生将通过一系列任务和项目，掌握高保真原型设计的基本原理和技能，提升其在用户界面设计领域的能力。
Cubasis移动音乐制作指南
Cubasis移动音乐制作指南第一章：Cubasis简介Cubasis是一款专业的移动音乐制作软件，适用于iOS设备。
它提供了一整套功能齐全的工具，让用户可以在移动设备上制作高质量的音乐作品。
本章将介绍Cubasis的基本特点和界面设计。
Cubasis提供了多轨录音和编辑功能，使用户可以同时录制和处理多个音轨。
它支持各种常用的音频格式，并且可以与其他音乐软件进行无缝集成。
第二章：Cubasis的功能本章将详细介绍Cubasis的各种功能。
首先是录音和混音功能，用户可以通过内置的录音功能直接录制音频，还可以使用内置的效果器进行混音和信号处理。
Cubasis还提供了强大的编辑功能，用户可以对音频进行剪辑、复制和粘贴操作。
同时，它还支持实时时间拉伸和音高转换。
用户还可以添加效果器、合成器和采样器等音频处理工具，以实现更加丰富的音乐创作。
第三章：MIDI功能Cubasis也支持MIDI音乐制作。
用户可以连接外部MIDI设备，如键盘或控制器，通过MIDI信号进行音乐创作。
Cubasis提供了完善的MIDI编辑工具，用户可以编辑和处理MIDI音符、控制器和效果。
Cubasis还支持MIDI合成器和虚拟乐器，用户可以使用这些工具创建各种音乐样式和声音效果。
通过Cubasis的MIDI功能，用户可以轻松实现复杂的音乐编排和编曲。
第四章：效果器和采样器Cubasis内置了多种效果器和采样器，以满足用户的音效需求。
用户可以使用这些内置工具添加和处理音频效果，如混响、合唱、延迟等。
Cubasis还支持各种采样器格式，用户可以导入自己的采样音源，进行音频处理和创作。
效果器和采样器是Cubasis的重要特点之一，用户可以通过它们为音乐作品添加独特的音色和效果，提升音乐质量和创意。
第五章：工程管理和导出Cubasis提供了完善的工程管理功能，用户可以创建、保存和导入工程文件，以保留音乐作品的完整性和灵活性。
用户还可以对工程文件进行备份和分享，方便与他人合作或在不同设备间进行迁移。
高保真原型的基本特征
高保真原型的基本特征高保真原型是产品设计和开发过程中的重要工具，它能够帮助设计师和开发人员更好地理解产品需求，验证产品功能和交互体验。
下面将介绍高保真原型的基本特征。
一、外观和布局高保真原型的外观和布局应与最终产品尽可能接近，可以使用真实的颜色、字体和图标等元素。
通过准确的外观和布局，可以更好地展现产品的整体形态和视觉效果，使用户能够更直观地理解产品的界面结构和信息组织方式。
二、交互和动效高保真原型应具备与最终产品相似的交互和动效。
通过合理的交互设计和流畅的动效，可以模拟用户与产品的真实交互过程，使用户能够更好地体验产品的功能和操作方式。
例如，可以通过点击、滑动、拖拽等交互方式来展示产品的各种功能和状态变化。
三、功能和数据展示高保真原型应能够准确展示产品的功能和数据内容。
通过真实的功能展示和数据填充，可以让用户更清楚地了解产品的各项功能和数据输入输出。
例如，在一个电商应用的高保真原型中，可以展示商品的详细信息、加入购物车、下单支付等功能，并填充真实的商品数据。
四、响应式设计高保真原型应适配不同的设备和屏幕尺寸，具备响应式设计的特点。
通过展示不同屏幕尺寸下的布局和元素调整，可以让用户更好地了解产品在不同设备上的呈现方式和适应性。
例如，在一个移动应用的高保真原型中，可以展示在手机、平板等设备上的界面布局和元素调整。
五、导航和信息结构高保真原型应能够清晰展示产品的导航和信息结构。
通过合理的导航设计和信息组织，可以使用户能够更方便地浏览和查找所需内容。
例如，在一个新闻应用的高保真原型中，可以展示顶部导航、侧边栏菜单和文章列表等信息结构。
六、反馈和状态提示高保真原型应具备准确的反馈和状态提示功能。
通过合理的交互设计和状态变化提示，可以让用户清楚地了解其操作的结果和当前的状态。
例如，在一个社交应用的高保真原型中，可以展示点赞、评论和消息通知等反馈和状态提示。
七、可测试性和迭代性高保真原型应具备可测试性和迭代性。
六款高保真设计必备软件，收藏
六款高保真设计必备软件，收藏对于设计来说，高保真也是一个非常重要的一环。
高保真设计考验的不止是打工人的技术，另一方面使用的软件好坏与否也有很大的影响。
我这里收集了六款高保真设计必备的软件，分享给有需要的朋友。
1.PixsoPixso是一款非常适合企业团队使用的高保真设计软件。
一方面Pixso能够将设计与交付协作一体化，完稿即交稿，最大程度简化工作流程，节约沟通成本。
另一方面Pixso在矢量设计方面的表现也非常优秀，独特的设计工具能够为用户提供高保真的设计稿件外，还能够帮助用户进行有效的效率提升。
2.即时设计即时设计也是将设计与交付进行一体化的平台。
即时设计给我印象最深刻的，就是它的资源管理库，里面的素材资料非常丰富，上到成熟作品、设计规范，下到图标、界面、插画等等，一键搜索，还可以制定属于用户团队的资源库。
大大节省了找素材的时间。
3.Adobe XDAdobe XD是一款专业级别的矢量化原型设计工具。
Adobe XD适用于网站、应用程序等设计，能够帮助用户实现对于线框、动画创作、原型创建等需求，在保障快速高效的工作效率的同时，能够确保创建出适合任何屏幕的高保真设计。
并且Adobe XD 还拥有支持共享和协作的功能，更有利于团队协作。
4.MockplusMockplus是一款原型设计软件，主要帮助用户提高原型设计的效率、保真性、直观性。
Mockplus除了对于原型设计功能的强大外，它还有一个巨大的资源管理库，里面资源丰富，包括近200个组件、3000个图标素材等等，除了能够为用户减少找素材的时间外，有时还能提供一些灵感。
5.PhotoshopPS，一款位图图片编辑软件，它对于图片的编辑能力，在某这方面是其他任何软件都不可替代的。
PS的应用范围非常广泛，影楼、海报、插画、界面等等，都有它的身影。
它的功能一方面能够保障设计的保真性，另一方面也能够满足用户的绝大部分需求，对于平面类，几乎只有你想不到，没有它做不到。
如何设计出具有可用性的高保真原型
如何设计出具有可用性的高保真原型在产品设计的过程中，高保真原型是非常重要的一环。
它可以帮助设计师和开发人员更好地理解用户需求，同时也可以用于用户测试和验证设计方案的有效性。
然而，设计出具有可用性的高保真原型并不是一件容易的事情。
本文将探讨如何设计出具有可用性的高保真原型，以提高产品设计的效果和用户体验。
1. 确定目标和需求在设计高保真原型之前，首先要明确产品的目标和用户需求。
通过用户调研和需求分析，了解用户的痛点和期望，有助于设计出更符合用户期望的原型。
同时，也要考虑产品的定位和市场竞争情况，以便在设计过程中做出更明智的决策。
2. 选择适当的工具和技术设计高保真原型需要选择适当的工具和技术来实现。
目前市面上有许多原型设计工具可供选择，如Axure、Sketch、Figma等。
这些工具提供了丰富的组件库和交互设计功能，可以帮助设计师快速搭建出高保真原型。
此外，还可以考虑使用HTML、CSS和JavaScript等前端开发技术来设计原型，这样可以更灵活地实现一些复杂的交互效果。
3. 注重细节和交互设计一个具有可用性的高保真原型应该注重细节和交互设计。
在设计过程中，要注意每一个细节，包括按钮样式、字体选择、颜色搭配等。
这些细节可以影响用户的使用体验，因此需要认真对待。
此外，交互设计也是非常重要的一环。
要考虑用户的操作习惯和心理预期，设计出符合用户期望的交互效果，提高用户的满意度和使用效率。
4. 进行用户测试和迭代设计高保真原型后，需要进行用户测试和迭代。
通过与真实用户进行交互，收集用户的反馈和意见，了解用户对产品的看法和需求，从而改进设计方案。
用户测试可以帮助发现原型中存在的问题和不足之处，及时进行修正和优化。
通过多次迭代，逐步完善原型，最终设计出具有可用性的高保真原型。
5. 关注可用性和用户体验设计高保真原型的最终目的是提高产品的可用性和用户体验。
因此，在设计过程中要始终关注这两个方面。
要确保原型的界面设计简洁明了、易于理解和操作，避免过多的复杂性和冗余的功能。
产品经理必知:创建更好的移动Demo:工具篇
2.3 界面元素
这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo 体现的程度， 颜色、质感、字体、图片等等，就是我们常常说的视觉设计(Visual Design);另一个方面就是界面上 内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都 会很不一样，这个时候更加要关注在Demo 中要呈现那些内容和故事。
2.4 互动与反馈
这基本上算是整个Demo 制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生 命一样动起来!本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具 和技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo 的话 ，需要Demo 中涉及到的所有功能的视觉元素的图片：界面整体效果图、各控件切图、各层次的界 面内容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步 骤就是炒菜中的切菜备料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me(目 前仅支持CS6)，Photoshop CC也有类似的功能。
类似的工具还有pro t o .io (类似f lint o ，基于网站的应用)，Pro t o t ypr(类似Brief s，有Mac客户端 和iPhone App，)等等，有兴趣的都可以下载来玩玩，这些都是收费的软件或者服务，几十到几百 人民币，不算贵咯! 2.4.3 更细致的效果 其实做到上面2.4 .2的部分，你的Demo 已经相对完整并可供把玩了，但是总有些人是完美主 义者，还想再进一步怎么办?这时你也许就需要更多的一些时间精力和爱来学新的东西——Xcode 的Storyboard，Quartz Composer，Flash或是After Effects等，当然这需要你具备对细节极致追 求的心态、懂一些基础英文、数学和编程技巧。 有哪些更细致的效果呢：支持除点击之外的手势操作(长按、轻抚、多指操作等);界面切换时有 更逼真的动态效果和视觉引导;支持声音、视频等多媒体的播放。 Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一个便捷图形化 的工具。在开发环境中，没有任何限制，设计师可以嵌入各种各样有趣的交互，动态效果和声音去 创造一个真实的iO S App的体验。这里有同学翻译了一篇很实用并且详尽的教程，我也试着有跟着 边学边做了一个小Demo 。 好处是可以直接使用大量的iO S自带的标准界面控件，支持触摸手势，并且在页面切换时有和 实际iPhone App中一样的动态效果。缺点也很明显，当跳转关系非常复杂的时候，软件的可用性就 打折扣了，不得不眼花花地去找到某条连接(Segue)来调整手势或者是页面转场等动画，就如下图 所示。还有个明显不足，因为Xcode是为工程师和开发者设计的，所以整个界面非常复杂，信息量 极大，不熟悉的话很容易抓狂。过程中也常遇到一些问题，就像那篇教程的作者说的一样，这时候 我们需要身边的iO S工程师的帮忙咯!这里是另一个详尽的入门教程。
五步做一个高保真可交互原型-Principle教程
这个案例用的是Principle这款软件做的。
Principle近段时间非常流行的一款做原型的软件。
很多公司官方对于联动有有一大段的解释，但是如果没有做个是很难看懂的，但没有关系，因为接下来会通过实例来介绍这个功能。
第一步：将素材导入到principle中方法有2种：1、拖动素材到principle中，需要一个个拖2、在sketch中做好素材，将sketch保持打开状态，再打开principle选择导入就可以了第二部步：制作上下滑的动作1、创建一个矩形，把矩形的高度做的很长。
命名为“看不见的控制”，调整Vertical属性为Drag。
这样就可以在preview中上下拖动这个矩形了。
（见下图）为什么第一步要这样做呢？这是因为我们要上下滑动这个矩形的时候，分针和时针可以旋转。
那么这个矩形就是联动源，矩形和分针、时针之间是联动关系。
为了更好的理解这个概念，我们看一下官方的解释：联动源（Driver Sources）想要创建联动，在画板上必须存在一个可改变的属性，这叫做联动源。
在联动视图中列表中，可拖拽图层、可滚动图层，以及选择属性将自动展示出来。
2、然后将这个矩形的Fill属性中的透明度调整到最高。
让这个矩形变透明。
（见下图）但是注意：不能直接调整Opacity这个属性，是因为如果这么做，那拖动这个矩形不会产生任何效果的。
第三步：将分针和“看不见的控制”联动，即上下滑动屏幕时分针会旋转。
1、首先要把分针的图片处理一下。
因为分针要围绕表盘中心转动，所以分针的中心要调整到针的末尾。
但principle暂不能调整中心点（有谁知道如何调整可以告诉我，感激不尽）。
所以我有个笨办法，就是复制一个分针，放到对称的位置，选中这两个分针，按住cmd＋G组合。
再把其中一个分针调整为透明。
就调整好中心了。
2、然后关键时刻到来啦。
选中“分针”这个组，点击Driver，点击时针旁边的＋号选择Angle。
3、然后将下图这拉杆向后拉动到一个位置，在拉动的时候可以看到“看不见的控制”这个矩形在向下移动。
axure面试题
axure面试题Axure是一款广泛应用于交互设计领域的原型设计工具，许多企业在招聘UI/UX设计师时会要求具备Axure使用经验。
本篇文章将为你介绍一些常见的Axure面试题，帮助你更好地准备面试。
一、什么是Axure？Axure是一款功能强大的原型设计工具，它可以帮助设计师快速创建交互式原型，实现各种界面交互效果，让用户更直观地了解产品功能和流程。
Axure具有丰富的交互元件库、强大的状态管理和条件判断功能，适用于各类软件、网站和移动应用的交互设计工作。
二、Axure的主要功能有哪些？1. 快速原型设计：Axure提供了丰富的交互元件库，设计师可以通过简单的拖放操作快速创建页面原型。
2. 界面链接和交互：通过定义元素之间的链接关系和交互行为，实现页面之间的跳转、下拉菜单、弹出框等交互效果。
3. 状态管理：Axure允许设计师在元件上定义多种状态（如正常、悬停、选中等），展示不同状态下的界面效果，提高用户体验。
4. 条件判断：利用条件语句，设计师可以根据用户的操作或输入来触发不同的交互效果，实现更复杂的交互逻辑。
5. 数据驱动：Axure支持在原型中嵌入数据，设计师可以通过输入数据来模拟真实的用户操作。
6. 团队协作和版本控制：Axure提供了团队协作和版本控制功能，方便多人共同协作和管理设计项目。
三、你在项目中如何使用Axure？在回答这个问题时，你可以从以下几个方面来介绍你在项目中使用Axure的经验：1. 需求收集和分析阶段，通过Axure快速创建草图，帮助团队理解用户需求和产品功能。
2. 界面交互设计阶段，使用Axure创建高保真原型，模拟用户界面和交互效果，与团队和客户进行验证和反馈。
3. 与开发团队协作，将Axure原型转化为可交付给开发人员的设计规范和说明文档，确保开发过程中的一致性和准确性。
4. 用户测试和反馈收集阶段，利用Axure创建交互式原型，实现用户测试和收集反馈意见，根据反馈结果进行迭代和优化。
Axure RP 9 高保真原型设计实例教程
感谢观看
目录分析
1.2产品原型设计
1.1关于Axure RP
1.3产品原型设计 思路
2.1菜单栏和工具栏 2.2页面和概要
2.3元件和母版 2.4编辑区域
1
2.5样式、交 互和说明
2
2.6交互设置
3
2.7动作设置
4
2.8条件设置
5
2.9函数设置
01
3.1跳板式 导航（携程）
02
3.2列表式 导航（**）
3.13扩展列表式导 航（千牛）
3.12图片轮盘式导 航（猫眼）
3.14舵式导航（有 道云笔记）
பைடு நூலகம்
4.2关联性导航
4.1结构性导航
4.3实用性导航
作者介绍
这是《Axure RP 9 高保真原型设计实例教程》的读书笔记模板，暂无该书作者的介绍。
精彩摘录
这是《Axure RP 9 高保真原型设计实例教程》的读书笔记模板，可以替换为自己的精彩内容摘录。
03
3.3选项卡 式导航（百 合网）
04
3.4陈列馆 式导航（优 酷）
06
3.6暗喻式 导航（节气）
05
3.5表盘式 导航（随手 记）
1
3.7多选项式 导航（当当）
2
3.8抽屉式导 航（QQ）
3
3.9点聚式导 航（Path）
4
3.10瀑布式导 航（Nice）
5 3.11页面轮盘
式导航 （Flink）
读书笔记
非常好,纯小白，第一次进行原型设计有很多实战案例学习,因为前面耗费的时间比较久,后面很快就过了,看 到这个交互效果就知道该怎么实现了,语言简洁,没有废话,但是有一点吧,就是有些东西不是最佳实践,问了作者 说是为了让初学者好理解就选了一种麻烦的方式实现一个效果,但是我觉得,最佳实践就是难理解也要写上去,因 为这样做是对的,以后自己做的时候就继续按照这种做,也是避免别人继续用这种麻烦的东西,总体非常好,记了一 点笔记,没记多少,因为书里全是干货。
如何用Figma设计高保真原型
如何用Figma设计高保真原型在当今的设计领域，Figma 已经成为众多设计师的得力工具。
它强大的功能和便捷的协作特性，使其在设计高保真原型时具有显著的优势。
接下来，让我们一步步深入了解如何用 Figma 来设计出令人满意的高保真原型。
一、前期准备在开始使用 Figma 设计高保真原型之前，我们需要明确设计目标和用户需求。
这就像是在出发旅行前先确定目的地一样重要。
比如，如果我们要设计一个购物 App 的原型，就需要了解用户在购物过程中的期望和痛点，例如便捷的商品搜索、清晰的商品展示、安全的支付流程等。
同时，收集相关的参考资料也是必不可少的。
可以从其他成功的应用程序、设计网站或者行业报告中获取灵感。
这些参考资料能够帮助我们更好地理解当前的设计趋势和用户喜好。
二、创建项目和页面打开 Figma 后，首先要创建一个新的项目。
给项目取一个清晰明了的名称，方便后续的查找和管理。
在项目中，根据设计的流程和功能模块创建相应的页面。
比如，对于购物 App 原型，可能会有首页、商品列表页、商品详情页、购物车页、支付页等。
每个页面都要有明确的主题和功能定位。
三、选择合适的布局和框架Figma 提供了丰富的布局选项，如单列布局、多列布局、网格布局等。
根据页面的内容和设计需求，选择最合适的布局方式。
比如，在商品列表页，可能会选择网格布局来整齐地展示商品图片和信息；而在商品详情页，则可能采用单列布局来突出商品的详细描述。
同时，要注意页面的框架设计。
确定好页面的边距、标题栏、导航栏等元素的位置和尺寸，以保证页面的整体平衡和美观。
四、绘制图形和组件这是设计高保真原型的核心步骤之一。
Figma 拥有强大的绘图工具，可以轻松绘制各种形状、线条和图标。
对于常见的组件，如按钮、输入框、下拉菜单等，可以使用 Figma的组件库或者自己创建组件。
创建组件的好处是可以在不同的页面中重复使用，提高设计效率的同时保证设计的一致性。
在绘制图形和组件时，要注意细节。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.4.2 添加跳转关系
根据展示的思路（Mindjet ）或者脚本（St o rybo ard）的产出物，我们已经清晰的知道Demo 的展示 逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo 中 会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。
我周围最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HT ML文件的文件夹。 A xure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Ho ver等 操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。
的Storyboard，Quartz Composer，Flash或是After Effects等，当然这需要你具备对细节极致追 求的心态、懂一些基础英文、数学和编程技巧。 有哪些更细致的效果呢：支持除点击之外的手势操作（长按、轻抚、多指操作等）；界面切换时有 更逼真的动态效果和视觉引导；支持声音、视频等多媒体的播放。 Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一个便捷图形化的 工具。在开发环境中，没有任何限制，设计师可以嵌入各种各样有趣的交互，动态效果和声音去创 造一个真实的iO S App的体验。这里有同学翻译了一篇很实用并且详尽的教程，我也试着有跟着边 学边做了一个小Demo 。 好处是可以直接使用大量的iO S自带的标准界面控件，支持触摸手势，并且在页面切换时有和实 际iPhone App中一样的动态效果。缺点也很明显，当跳转关系非常复杂的时候，软件的可用性就打 折扣了，不得不眼花花地去找到某条连接（Segue）来调整手势或者 是页面转场等动画，就如下图 所示。还有个明显不足，因为Xcode是为工程师和开发者设计的，所以整个界面非常复杂，信息量 极大，不熟悉的话很容易抓狂。
2.3 界面元素 这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo 体现的程度，颜色 、质感、字体、图片等等，就是我们常常说的视觉设计 （Visual Design）；另一个方面就是界面上 内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都
什么是”更好”的Demo ：
核心功能完整，主要任务流足够深度 交互保真程度高，操作的体验感真实 根据场合与目的有适当的视觉细节 避免制作过程”过于费工”或”效率底下”
二、工具与步骤
设计师们特别是交互设计师往往需要承担制作Demo 的工作，而这个过程从上涉及到产品想法和主 要功能、信息架构和界面的组织，甚至向下涉及到视觉风 格和互动反馈等各个环节；打交道的人可 能包括了产品经理（提供原始的产品概念，用户需求分析或者是功能完整的产品文档），视觉设计 师（提供UI风格和设计 稿），用户研究员（提出测试用例或者研究需求）。
会很不一样，这个 时候更加要关注在Demo中要呈现那些内容和故事。
我认为，在Demo 界面中呈现的内容都应该更加贴近于软件或服务最终呈现的效果。善用产品 的Persona，结合各个功能的主要使用场景，在这些抽 象出的”目标用户”的角度上来想象和模拟这 些可能会个性化的界面内容（头像、签名、日志、聊天对话等等）。是不是很像导演呢，人物角色 在场景中经历并演绎 着使用产品或者服务的故事，企图 原型绘制 原型绘制算是基本功，根据不同的年代、不同的习惯和不同的机器，最典型的就要算是Visio 、 Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周 围更流行的工具是Axure（Win、Mac系统） 和OmniGraffle（Mac系统），丰富强大的基础绘图 功能，丰富的控件模版库，输出物简洁美观，都使得工作效率大大提高。下图是 OmniGraffle的软 件界面，有兴趣的可以下载试用版哦，A xure，O mniGraf f le。
2.4 互动与反馈
这基本上算是整个Demo 制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生命一 样动起来！本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和 技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo 的话，需 要Demo中涉及到的所有功能的视觉元素的图片：界面 整体效果图、各控件切图、各层次的界面内 容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就 是炒菜中的切菜备 料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me（目前 仅支持CS6），Photoshop CC也有类似的功能。
一、什么是”更好”的Demo 什么是Demo ？Demo 是Demo nst rat io n的缩写，表示”示范”、”展示”，常指具有示范或展示功能及 意味的事物。本文中Demo 的含义更接近与维基百科中的这个解释：一种原型，主要用来展示想法 、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记 者甚至于潜在的用户展示其选择方法的可行性。 在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo 就是指在这三个 纬度（视觉、交互、内容）保真程度都较高的原型。 Demo 往往用在以下几个场合和对象： 1. 新产品 / 功能的演示－投资者、老板、合伙人 2. 用户研究/市场调研－研究员、潜在目标用户 3. 可用性测试－真实用户 4. 交互 / 设计走查－设计师、产品经理、专家
St o rybo ard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作 前期，下 图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于”展示”而非” 使用”，所以可以借助storyboard的方法将产品核心使 用场景下的主要功能用任务的形式在时间线上 做一个规划和梳理。在交互展示性的Demo 中，st o rybo ard的作用就更加强大了，通过对场景和情节 的引 入，往往会使整个产品或服务看起来更有说服力。
类似的工具还有pro t o .io （类似f lint o ，基于网站的应用），Pro t o t ypr（类似Brief s，有Mac客户端 和iPhone App，自备梯子）等等，有兴趣的都可以下载来玩玩，这些都是收费的软件或者服务，几 十到几百人民币，不算贵咯！ 2.4.3 更细致的效果 其实做到上面2.4 .2的部分，你的Demo 已经相对完整并可供把玩了，但是总有些人是完美主义者， 还想再进一步怎么办？这时你也许就需要更多的一 些时间精力和爱来学新的东西——Xcode
这个时候，需要以下方法B：下载一个网盘App（如AirDisk Pro），iPhone链接电脑在iTunes的”应 用程序”下面找到这个A pp并添加这个压缩包，然后在手机的A pp里面解压这个文件夹，浏览就可以 了；同样也可以利用一个内置浏览器的阅读类App 和一个解压App来达成，具体操作看这里）。
创建高保真的移动Demo（工具篇）
学习交互设计的童鞋，都躲不过画原型图这个必考科目。如何创建保真度（视觉、交互、内容）都 较高的 Demo 呢，今天腾讯设计师分享的好文，除了推荐很多简单易上手的画图神器，更宝贵更值 得细读的是她的思路，完全体现了一个设计师该有的严谨与细致。童鞋们感受一 下。 正文：
思维管理软件： MindManager、Mindjet 。也叫思维导图或者心智图，既可以用在放射性思考的展开 过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，
下图就是一个简单的Mindjet的输出物例子。利用思维管理 软件，就能将Demo里要展示的产品主要 功能抽丝剥茧列清楚层级关系，并且安排好主次关系。
Quartz Composer，简单的说是一个强大的动画合成软件，是Apple的开发软件包中自带的软件。 Quartz Composer编辑好的内容可以输出到Interface Builder（就是现在Xcode的Storyboard）。 优势在于它生成的动态效果灵活丰富，自由度相当高（它可以自定义曲线控制运动速度与轨 迹）， 另外它虽然是编程工具，但基本不用写代码就可以实现生成动态效果与交互所需要的逻辑。
综上所述，这个办法可行却麻烦，且由于不支持各种触摸手势的互动只满足基本的页面跳转，故互 动体验和保真程度都不好。
这里推荐一个简单的软件Briefs（Mac 系统），和它的iPhone App，Briefscase。即在Mac制作 好Demo，然后用App打开这个Demo。它的好处在于首先专门为移动应用（基于iO S设备）的原型 制作 而打造，内置各种屏幕尺寸的iO S设备模型。其次，也是最重要的一点，Briefs支持触摸为主的 手势操作。它支持界面间的基本动态切换效果，这样 Demo中页面的呆板跳转就变为了iO S一直倡 导的优雅转场，更好的在空间层面上表达页面间的层级关系和视觉引导。最后，当你连上手机时， 就可以实时修改 和预览你的Demo，就像在Xcode上编程一样避免了来回的上传下载安装，没有什 么比这点更能高效地帮助你工作了。
最常使用视觉软件就是A do be家族的几兄弟了，Pho t o sho p（风格材质制作，图层样式等效果的合 成等）、Illustrator（图标等矢 量图形绘制）、InDesign（页面排版）基本能满足绝大部分的需求。 当然也有大量针对不同的视觉设计细节流程比如图标设计、字体设计、取色配色、切 图、预览、图 片格式转换等等开发的各种软件、网站和插件等工具。实际工作中需要各种软件中切换、各种流程 上的合作，又着实是另一门大学问了！
所以，完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。 工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长 的环节，可以做如下简单的分类和介绍：
思路整理 原型绘制 界面元素 互动与反馈 移动展示
其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作 需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo 的制作和展示上的 有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。
根据展示的思路（Mindjet ）或者脚本（St o rybo ard）的产出物，我们已经清晰的知道Demo 的展示 逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo 中 会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。
我周围最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HT ML文件的文件夹。 A xure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Ho ver等 操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。
的Storyboard，Quartz Composer，Flash或是After Effects等，当然这需要你具备对细节极致追 求的心态、懂一些基础英文、数学和编程技巧。 有哪些更细致的效果呢：支持除点击之外的手势操作（长按、轻抚、多指操作等）；界面切换时有 更逼真的动态效果和视觉引导；支持声音、视频等多媒体的播放。 Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一个便捷图形化的 工具。在开发环境中，没有任何限制，设计师可以嵌入各种各样有趣的交互，动态效果和声音去创 造一个真实的iO S App的体验。这里有同学翻译了一篇很实用并且详尽的教程，我也试着有跟着边 学边做了一个小Demo 。 好处是可以直接使用大量的iO S自带的标准界面控件，支持触摸手势，并且在页面切换时有和实 际iPhone App中一样的动态效果。缺点也很明显，当跳转关系非常复杂的时候，软件的可用性就打 折扣了，不得不眼花花地去找到某条连接（Segue）来调整手势或者 是页面转场等动画，就如下图 所示。还有个明显不足，因为Xcode是为工程师和开发者设计的，所以整个界面非常复杂，信息量 极大，不熟悉的话很容易抓狂。
2.3 界面元素 这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo 体现的程度，颜色 、质感、字体、图片等等，就是我们常常说的视觉设计 （Visual Design）；另一个方面就是界面上 内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都
什么是”更好”的Demo ：
核心功能完整，主要任务流足够深度 交互保真程度高，操作的体验感真实 根据场合与目的有适当的视觉细节 避免制作过程”过于费工”或”效率底下”
二、工具与步骤
设计师们特别是交互设计师往往需要承担制作Demo 的工作，而这个过程从上涉及到产品想法和主 要功能、信息架构和界面的组织，甚至向下涉及到视觉风 格和互动反馈等各个环节；打交道的人可 能包括了产品经理（提供原始的产品概念，用户需求分析或者是功能完整的产品文档），视觉设计 师（提供UI风格和设计 稿），用户研究员（提出测试用例或者研究需求）。
会很不一样，这个 时候更加要关注在Demo中要呈现那些内容和故事。
我认为，在Demo 界面中呈现的内容都应该更加贴近于软件或服务最终呈现的效果。善用产品 的Persona，结合各个功能的主要使用场景，在这些抽 象出的”目标用户”的角度上来想象和模拟这 些可能会个性化的界面内容（头像、签名、日志、聊天对话等等）。是不是很像导演呢，人物角色 在场景中经历并演绎 着使用产品或者服务的故事，企图 原型绘制 原型绘制算是基本功，根据不同的年代、不同的习惯和不同的机器，最典型的就要算是Visio 、 Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周 围更流行的工具是Axure（Win、Mac系统） 和OmniGraffle（Mac系统），丰富强大的基础绘图 功能，丰富的控件模版库，输出物简洁美观，都使得工作效率大大提高。下图是 OmniGraffle的软 件界面，有兴趣的可以下载试用版哦，A xure，O mniGraf f le。
2.4 互动与反馈
这基本上算是整个Demo 制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生命一 样动起来！本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和 技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo 的话，需 要Demo中涉及到的所有功能的视觉元素的图片：界面 整体效果图、各控件切图、各层次的界面内 容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就 是炒菜中的切菜备 料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me（目前 仅支持CS6），Photoshop CC也有类似的功能。
一、什么是”更好”的Demo 什么是Demo ？Demo 是Demo nst rat io n的缩写，表示”示范”、”展示”，常指具有示范或展示功能及 意味的事物。本文中Demo 的含义更接近与维基百科中的这个解释：一种原型，主要用来展示想法 、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记 者甚至于潜在的用户展示其选择方法的可行性。 在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo 就是指在这三个 纬度（视觉、交互、内容）保真程度都较高的原型。 Demo 往往用在以下几个场合和对象： 1. 新产品 / 功能的演示－投资者、老板、合伙人 2. 用户研究/市场调研－研究员、潜在目标用户 3. 可用性测试－真实用户 4. 交互 / 设计走查－设计师、产品经理、专家
St o rybo ard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作 前期，下 图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于”展示”而非” 使用”，所以可以借助storyboard的方法将产品核心使 用场景下的主要功能用任务的形式在时间线上 做一个规划和梳理。在交互展示性的Demo 中，st o rybo ard的作用就更加强大了，通过对场景和情节 的引 入，往往会使整个产品或服务看起来更有说服力。
类似的工具还有pro t o .io （类似f lint o ，基于网站的应用），Pro t o t ypr（类似Brief s，有Mac客户端 和iPhone App，自备梯子）等等，有兴趣的都可以下载来玩玩，这些都是收费的软件或者服务，几 十到几百人民币，不算贵咯！ 2.4.3 更细致的效果 其实做到上面2.4 .2的部分，你的Demo 已经相对完整并可供把玩了，但是总有些人是完美主义者， 还想再进一步怎么办？这时你也许就需要更多的一 些时间精力和爱来学新的东西——Xcode
这个时候，需要以下方法B：下载一个网盘App（如AirDisk Pro），iPhone链接电脑在iTunes的”应 用程序”下面找到这个A pp并添加这个压缩包，然后在手机的A pp里面解压这个文件夹，浏览就可以 了；同样也可以利用一个内置浏览器的阅读类App 和一个解压App来达成，具体操作看这里）。
创建高保真的移动Demo（工具篇）
学习交互设计的童鞋，都躲不过画原型图这个必考科目。如何创建保真度（视觉、交互、内容）都 较高的 Demo 呢，今天腾讯设计师分享的好文，除了推荐很多简单易上手的画图神器，更宝贵更值 得细读的是她的思路，完全体现了一个设计师该有的严谨与细致。童鞋们感受一 下。 正文：
思维管理软件： MindManager、Mindjet 。也叫思维导图或者心智图，既可以用在放射性思考的展开 过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，
下图就是一个简单的Mindjet的输出物例子。利用思维管理 软件，就能将Demo里要展示的产品主要 功能抽丝剥茧列清楚层级关系，并且安排好主次关系。
Quartz Composer，简单的说是一个强大的动画合成软件，是Apple的开发软件包中自带的软件。 Quartz Composer编辑好的内容可以输出到Interface Builder（就是现在Xcode的Storyboard）。 优势在于它生成的动态效果灵活丰富，自由度相当高（它可以自定义曲线控制运动速度与轨 迹）， 另外它虽然是编程工具，但基本不用写代码就可以实现生成动态效果与交互所需要的逻辑。
综上所述，这个办法可行却麻烦，且由于不支持各种触摸手势的互动只满足基本的页面跳转，故互 动体验和保真程度都不好。
这里推荐一个简单的软件Briefs（Mac 系统），和它的iPhone App，Briefscase。即在Mac制作 好Demo，然后用App打开这个Demo。它的好处在于首先专门为移动应用（基于iO S设备）的原型 制作 而打造，内置各种屏幕尺寸的iO S设备模型。其次，也是最重要的一点，Briefs支持触摸为主的 手势操作。它支持界面间的基本动态切换效果，这样 Demo中页面的呆板跳转就变为了iO S一直倡 导的优雅转场，更好的在空间层面上表达页面间的层级关系和视觉引导。最后，当你连上手机时， 就可以实时修改 和预览你的Demo，就像在Xcode上编程一样避免了来回的上传下载安装，没有什 么比这点更能高效地帮助你工作了。
最常使用视觉软件就是A do be家族的几兄弟了，Pho t o sho p（风格材质制作，图层样式等效果的合 成等）、Illustrator（图标等矢 量图形绘制）、InDesign（页面排版）基本能满足绝大部分的需求。 当然也有大量针对不同的视觉设计细节流程比如图标设计、字体设计、取色配色、切 图、预览、图 片格式转换等等开发的各种软件、网站和插件等工具。实际工作中需要各种软件中切换、各种流程 上的合作，又着实是另一门大学问了！
所以，完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。 工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长 的环节，可以做如下简单的分类和介绍：
思路整理 原型绘制 界面元素 互动与反馈 移动展示
其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作 需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo 的制作和展示上的 有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。