浅析移动APP原型设计的类型和制作方法

北京信息职业技术学院

原型，是交互设计师、产品设计师、产品经理沟通的最好方式。通俗来讲，就是在正式制作真实的APP产品之前，通过原型给大家一个产品的模型展示，就像设计一座建筑，不能画完草图就直接让工人开始施工，而是要先制作出等比例的精致的模型，甚至渲染上光线、绿化、人群等环境因素，能在正式盖楼前让大家非常直观地看到，这个建筑完工之后是什么样子。APP的原型也是同一个道理，制作出原型，团队成员进行讨论、测试，认为没有问题了，才会正式开始制作，避免了走弯路。

本文将会依据一款APP产品的设计流程，把原型分为四类，并且是依次递进的关系，从第一类到第四类，产品的完成度逐渐增高。

一、信息分类原型

信息分类原型也可以叫作信息架构，是一款APP最初的原型形式，信息分类即把一个构思好的APP所需功能列出来，进行分类，再把这些列出的功能做成一级一级分类的树状图，一级页面、二级页面等，所有功能按主次分为几个层级。以我们熟悉的微信为例，一级页面上有最主要的功能即微信、通讯录、发现、我，每一个再往下是二级页面，如通讯录点开后有新的朋友、群聊、标签等功能，是次要一级的功能，依次往下还会有第三层级甚至第四层级。这就是一个APP的信息架构，就是在构思好APP之后，正式制作界面原型之前，必须确定的事情，简单概括就是把我们想设计的功能都列出来，进行分类和划分层级。如果没有它，这款APP是混乱的，层级不清晰的，也就很难做出进一步的设计。信息分类原型有个很好的训练方法，就是参考一款APP，把它的信息架构列出来，加以借鉴，有助于我们对APP层级关系的理解。

二、线框设计原型

线框原型就是用线条去画界面的大致排版，甚至不需要填色，黑白即可，它不需要漂亮，只要体现出排版即可。在这一步的目标不是传达视觉效果，而是把功能、层级和部分交互表达清晰。线框原型是对一款APP产品在设计阶段的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互形式。

（一）原型的绘制形式

绘制的形式从介质上划分可分为纸质和电子。首先是纸上原型，需要特别强调的是，纸上原型不是手绘草图，两者之间不能完全画等号，手绘草图应该是我们在画原型之前的一些想法的简单勾画，或是团队头脑风暴的记录等，比较随意，更多的是记录想法，不具有展示作品的功能。而纸上原型，应该是更为正式的、明确的、可以向他人清晰展示的方案。我们绘制纸上原型常用的工具，主要是纸张、卡片，用来写和画，铅笔、尺子、水性笔、马克笔用来绘写，橡皮用来修改，文件夹或信封用来保存原型素材。这种纸上原型的优点是更自由、更个性化、不受模板束缚、节约成本。另外还有电子原型，它主要是借助电子软件完成的原型，可以是Photoshop做的视觉原型，也可以是制作交互效果的软件制作的交互原型。

（二）原型的绘制内容

我们使用以上工具，要绘制哪些内容呢？线框原型的设计绘制主要分为两部分，一是整体信息架构的表现，也就是表现产品的整体结构。在以上写到的第一类原型即信息分类原型部分已经画出了信息架构，现在要用线框原型去实现成一个一个页面，如表现出导航、菜单里有哪些内容、每个页面之间的交互关系、产品的布局排版是怎样的，等等。下面会着重说明布局排版形式这一点。

（三）原型中的页面布局形式

因为布局排版决定了每个功能模块的位置，所以这里需要详细说明的是移动设备中常见的布局形式，以提供参考，我们在设计APP的时候，可以思考一下，采用哪种布局形式更适合呢？

一是大平移式的布局，一次只显示全景图中的一部分内容，通过上下左右拖动查看，这种布局可以减少不必要的跳转，比如谷歌地图中查看地图的界面就是最典型的大平移式布局；二是宫格式布局，简单直观，符合大部分用户的使用习惯，也是主流的布局形式，常见的有六宫格、九宫格，比如美图秀秀中的界面，但是这种布局层级不能太多，否则就会给人混乱的感觉；三是侧滑式布局，可以减少跳转，延展性强，但是对于用户本身要求较高，因为它属于隐藏信息，对客户本身来讲要对APP有一定的了解和较丰富的使用经验，比如QQ中“我”这个界面就属于侧滑式；四是列表式布局，它的信息延展性比较强，但是查找信息比较麻烦，一般是结合了标签式的布局，比如淘宝网中搜索某样物品后出现的物品展示界面就是最典型的列表式布局；五是标签式布局，标签多用于底部或顶部，减少界面的跳转层级，没有太多的隐藏信息，信息量较大，比如滴滴出行是典型的底部标签布局；六是混合式布局，是比较常见的一种界面布局形式，符合用户的使用习惯和操作习惯，有宫格和标签式的混合应用，比如携程网。

以上说的是线框原型中整体结构的表现，另外，还有局部功能的交互设计，比如按钮点击的效果、页面切换等展示效果，这些如果用纸上原型绘制的话可用文字标注清楚，或者直接用原型制作软件去做。所以，综上所述，从工具的选择到界面的布局再到交互形式的设计，这就是整个线框原型阶段需要做的事，虽然是简洁的线框图，但是界面功能和交互形式的表达要条理清晰，这样整个原型草图才能让他人读懂。

三、交互设计原型

原型制作软件可以让我们通过比较简单的方式制作原型。比如Mockplus是原型制作工具中的后起之秀，学习成本较低，操作简单，功能也十分齐全，拥有丰富的组件和图标，自带流程图和脑图功能，能建立自己的组件库和自定义样式库等，它适合设计热爱者但是却无从下手的设计新手。但如果是一个乐于探索新事物并有一定设计基础的设计师，Axure可能是最适合的移动产品原型设计工具，可以被喻为图片界的PS，文字界的Word。它最大特点是专业的设计师都在用它，原型设计中复杂的交互设计是它的强项，难点是需要使用者有一点编程逻辑思维，稍加学习，就能制作出想要的任何交互演示效果。Axure作为一款成熟的交互原型设计工具，无论是它的基础功能还是团队协作功能，都是值得一试的。但是由于界面设置比较专业，对于新手来说操作起来并不是那么容易，需要花费一定的时间去熟悉它。

四、视觉设计原型

如果说线框原型属于低保真原型，那么交互原型结合视觉原型就是高保真原型了。视觉的设计，也就是通常使用Photoshop，根据前期的线框图和设计创意做出的比较完整的界面。视觉的设计包括了配色方案的确定、字体的选择、图片素材的使用、各功能控件的绘制以及APP图标的设计等，在视觉上呈现出一款APP的最终形态。

五、结语

综上所述，一款APP产品原型的设计制作，有着这如此详细的分类，每一种原型各司其职，一步步完善着产品。所以，如果说一款APP的设计大部分时间都花在原型上也不为过。按照文中所述的方法制作完成，之后还需要反复被打磨，直到团队成员都认可，并通过了可用性测试，才会正式制作和发布APP。原型的制作保障了一款APP产品的质量，并帮助设计团队少走弯路，是APP设计至关重要的一环。