快速导出APP产品原型的3个步骤和移动原型设计流程

下面这篇是转载淘宝UED部门的分享文章。25学堂将与大家来学习如何快速导出高品质的移动APP产品设计原型。

总体的来说，只需要3步即可简单完成。看完之后，你也应该可以熟悉整个移动APP产品原型的设计流程。也可以从中如何去布置和安排团队每个成员的分工和协作。

有利于提高我们的工作效率。25学堂转载该篇博文的目的在此。希望大家可以认真阅读。

第一步：输出以UI界面为单位的产品流程图

快速而高效输出，首先要保证产品的整体思路要正确，这点可以从产品流程图中体现出来。

移动APP产品需要做到聚焦，因为手机界面的大小，用户的碎片化使用等等，所以一个界面上必然不可能出现太多的内容和行动点，这就保证了我们可以用最简洁的方式来画流程。

以界面为单位，定义 “界面标题”和“主要内容”，如下图所示：

如何利用起这样的界面单位来画流程，如下图：

绝对是干货！

UX设计模板|适合iOS上的APP UI线框图模板下载

这样的一个产品流程图，可以快速了解产品有多少界面，检验用户路径是否太长，形式简单，也方便讨论修改。

第二步、学会使用可修改的基础原型控件来快速设计产品原型

如何快速导出高保真原型图？引用一套备用的基础原型组控件必不可少。

当然，也有大部分设计师一般使用axure来完成产品原型，或者是其他的移动原型工具。

所以从协同合作的角度，本文专门在axure里制作了整套最常用的移动产品组控件。设计师只要改文字，改颜色，摆位置就可以完成简单的高保真原型。

点击即可下载高保真的UI基础组控件

下图为APP设计组建控件UI。

以此控件为基础，在之前提到的app登录注册例子，快速组件高保真原型，如下图:

当然，这里我们只是引用了一个注册的案例来讲解。我们25学堂也希望各位可以借鉴这个案例来举一反三。如果有不明白的地方可以在网站底部加入我们的群。详细来咨询。

如果你还想要多了解移动APP设计上有很多细节，大家可以参看移动端UI设计必看的三本APP设计书籍，里面涉及到很多最基本的移动设计知识。

第三步、快速制作可点击的移动APP动态原型

完成高保真原型，根据流程图，可以很方便制作出在手机上可体验的动态效果，让产品人员或则用户真实感受app实际的效果。

这里推荐一个特别简单的方法，登录www.flinto.com，完成注册，将高保真原型以图片的方式倒入，通过链接和转场方式选择，就可以很方便在手机上查看。网站提供了比较具体的指导，大家可以直接查看。

或者大家也可以采用其他你比较熟悉的移动原型工具来完成可点击的动态原型。

SKYUI设计技巧-关于Win8的“动态磁贴（Live Tiles)和“载入界面”(Splash Page)

最后，25学堂再啰嗦一下，大家务必要学会利用各个移动平台现有的移动UI组件来设计我们的APP。这样可以保证每个APP快速高效的开发。同时给用户带来熟悉的操作体验。

比你自己去创新想一个表现方式来的巧些。

原文地址：http://ued.taobao.org/blog/2014/05/%E9%AB%98%E6%95%88%E8%BE%93%E5%87%BA%E7%A7%BB%E5%8A%A8app%E4%BA%A7%E5%93%81%E5%8E%9F%E5%9E%8B/