创建高保真的移动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、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 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、工作方法和一些概念。