高效原型设计助你更好展示创意

 

无法明确表达自己的设计想法？怎么开发都实现不了设计师的想法？想法太空泛没有原型支撑？……原型设计工具帮你解决设计中的难点，开发沟通无障碍，在设计阶段就能收集用户反馈，设计师自身也能在设计领域探索更多。

原型设计是什么？

原型设计是产品或者创意的最初模型，可以让用户提前体验产品、交流设计构想、展示复杂交互的方式。也是设计师与PD、PM、开发工程师沟通的最好工具。

为什么要原型设计？

当下设计流程中的难点，从设计师的角度出发，31%的问题来自于不能在真实的设备上测试自己的设计，28%的问题是开发者开发出来的交互效果与设计不符导致返工，21%则是设计师很难阐述自己的设计想法。原型设计可以有效解决这些问题。

1.识别问题：原型设计可以在设计初期就能快速识别问题，避免设计时对细节的考虑不周、没法在真实情况下测试、自己也不知道实际出来的设计效果怎么样的问题；

2.减少风险：提前预知风险，减少产品上线后出现的问题；

3.节约成本：节省不停返工修改造成的多余开发成本；

4.高效设计：减少开发过程中设计方案发生变动而导致的开发者加班、或者推到下一个版本（最终可能忘记这回事）等问题；

5.设计创意实施：“不是想不到而是做不到”很多时候设计师有了好的创意，但苦于没有开发人力技术支持，导致“胎死腹中”。原型设计可以在不用开发代码的情况下，设计师也能自己将创意实施。

 

原型设计原则：Goldilocks quality

“金发姑娘原则”源自童话《金发姑娘和三只熊》的故事。金发姑娘发现了三只熊的房子，每只熊都有自己喜欢的食物和床。在挨个尝试过三只熊的食物和床后，金发姑娘发现要么太大/太热，要么太小/太凉，只有一个是“刚刚好”。

我们需要的就是“刚刚好”的设计，“刚刚好”的工具，没有一个设计是让所有人都觉得完美的，没有一个设计工具能包含所有功能，就像Flinto擅长页面动画切换、PS擅长图像处理、Sketch擅长多页面设计……选择适合的设计工具，还原90%的真实性，就能事半功倍，快速高效的表现设计点。 

 

然后，为大家推荐几款原型设计工具

简单易学快速上手的原型设计工具，没有优劣之分，只有合适与否，可以根据情况选择所需。

 

Protopie

第一款，设计师的原型设计工具——ProtoPie（http://www.protopie.cn/）

【特点】：独有重力感应、陀螺仪、声控等传感器交互；多点触摸手势；蒙版；时间线和多场景等功能。

【适用】：设计师自己琢磨一些设计效果，需要传感器实现的创意原型，全景、声控等创意类APP设计展示，适合突出特殊功能点、设计点。

【学习难度】4颗星

【缺点】：需要细分设计资源，分图层摆放，多页面切换较麻烦，设置参数较多

【案例实践】：来做一个语音控制图形变化的交互

基本操作方式：选择图层——添加操作动作——选择反应动作

1. 在PS／sketch中设计好的界面，分图层导入Protopie；

2.按图层顺序摆放，上面会遮住下面的图像，拆分元素，思考交互逻辑，例如：点击录音按钮，音波产生缩放效果，限制音波在语音提示框中显示；

3.新建蒙版，将音波放在语音提示框中显示；

4.添加触发按钮和声音传感器，在声音下面增加“大小／Scale”反应效果，属性中选择反应对象“音波”；

5.调整分贝对应的缩放尺寸，人一般识别的分贝是0～130dB，但0分贝是3米外一只蚊子的声音，超过70分贝就是噪音了，结合产品使用场景，还原用户真实情况则是40～60dB（正常谈话的声音、看视频的声音）。完成之后，可以连接手机预览效果。

【案例展示】

更多案例详见：http://www.protopie.cn/demo/index.html

 

 

 

Marvel

第二款，在线原型设计工具——Marvel（https://marvelapp.com/）

【特点】：兼容sketch文件，有设计稿或者交互线框稿就可以直接在线制作原型。无需下载app，在线创作交互流程，二维码分享，预览无需安装另外的app。

【适用】：多页面之间的交互，跳转、翻转等，交互流程展示，快速输出APP雏形。

【学习难度】2颗星

【缺点】：只能按照设计流程走，设计流程外不能操作，无法细化展示效果（按钮状态变化等），没有传感器交互

【案例实践】：来做一个触发表单，填写的过程

基本操作方式：框定一个响应区域——选择切换效果——跳转到反应页面

1.     新建项目，选择展示平台（网页、TV、iPhone、iPad或Apple Watch）

2.     添加设计稿或原型图

3.编辑界面交互效果，随意框选当前页面的响应区域，再勾选到跳转页面，即可完成点击当前页面某处，跳转到另一个界面的流程。优点：无需分图层另作按钮。

4.选择页面切换效果，自带多种切换方式的平滑动效，无需设置参数。

5.选择操作方式，单击、双击、滑动、双指捏放等手势操控。

6. 快速预览，分享简单、无需安装其他应用。

案例展示：

（微信、QQ扫码会有界面下移的情况，建议下载Marvel app可完整全屏展示）

 

 

总结

Protopie是为设计师而做的，Marvel则更通用，产品、策划都能用，还有很多原型设计工具，例如Flinto、Principle、Prott等。之后会不定期更新补充，有兴趣的小伙伴也可以一起研究，欢迎交流心得。如果这些原型工具都无法“填补”你突破天际的脑洞，你需要在创意中加入视频元素，不防用AE制作一些模拟交互的“真实”效果。

     总之，选择合适的原型工具能使设计事半功倍，让开发更具象，让展示更绚丽，让创意更有说服力，向老板汇报的时候，也能更生动、更身临其境的阐述创意点。