App项目实战之路(三):原型篇

转载自Keegan小钢
原文链接：http://keeganlee.me/post/practice/20160816

App项目实战之路(一):概述篇
App项目实战之路(二):API篇
App项目实战之路(三):原型篇
App项目实战之路(四):UI篇
App项目实战之路(五):服务端篇
App项目实战之路(六):数据库篇

本来，我是没打算写原型篇的，但考虑到关注我的人中也有部分产品狗，更重要的是，我一直认为，不懂产品设计的程序猿不是优秀的产品经理。而且，应该也有不少程序猿想往产品经理的方向发展的。所以，最后决定献丑了。

原型设计工具

做原型设计，首先，当然是要讲讲工具。做原型设计的工具有很多，功能最强大的应该就属 Axure PR 了，不过上手不容易啊。对于想快速开发一个原型但又没那么多时间去学习设计工具的我来说，只能说，Axure不适合我。好在，上手容易的设计工具还是有的。

POP - Prototyping on Paper

POP 是一款App，操作非常简单，先用手机拍下草图原型，然后开始编辑原型里的哪个区域(比如按钮)链接到哪个页面，添加跳转链接，之后就变成可演示的交互原型了。

POP 并不提供设计原型的任何UI组件，只提供了能在图片上设置任意点击区域并添加链接到其他页面(其实就是另一张图片)。对于从草图开始设计原型的人来说，这款App真是再适合不过了。

当然，局限性也很明显。首先，原型图只能通过其他方式完成。其次，交互非常有限，只能实现页面间的跳转，其他交互比如同一页面内的交互就别想了。最后，它只适用于App原型。

墨刀

墨刀是一款在线的原型设计工具，上手也很简单，网站也提供了新手教程。墨刀的功能比 POP 就强大多了，除了支持手机App原型设计，也支持平板和网页。本项目的原型就是用墨刀设计的。

墨刀吸引我的第一个优点就是提供了很多方便的组件库。有一些单独的组件如文字、按钮、图片、图标、输入框、单选框、多选框、开关、标题栏、搜索栏、标签等等，一拖即用，很方便。尤其是图标，墨刀提供了很多常用的图标，非常方便。除了单独的组件，墨刀还提供了母版和组合。默认母版有轮播图和下拉菜单，默认组合有弹出框、列表项、Action Sheet、日历等，都是一拖即用的。不够用的话还可以自定义新的母版和组合。

墨刀吸引我的第二个优点就是对组件的属性设置也比较全。就拿按钮来说吧，可以设置背景色、前景色、边框、阴影、透明度、位置、宽高、旋转角度、圆角半径、圆形或正方形，还可以设置按钮的文字属性，包括文字的背景色、文本颜色、字体大小、字体样式、阴影、对齐方式，最后，也可以设置按钮的图标，不过图标只能保持在文字左边，无法调整位置。有了这些属性，就可以很方便地将组件设计为自己满意的样子了，组件也可以做得差不多接近最终的UI了，即是说可以做到高保真原型。

不过，这里要提一下，我并不建议产品经理们做原型时做到高保真。除了个别情况，比如需要给高层管理或客户演示用的原型；又或者是创业团队里缺乏有经验的UI设计师，甚至还没有UI设计师；又或者是像我一样的个人开发者，什么都要自己来的。一般情况下，只要完成低保真或中保真原型即可。

墨刀吸引我的第三个优点就是对交互的支持非常好。墨刀除了支持页面间的交互，还支持页面内的交互。而且，页面内的交互不是通过复制页面来实现，而是通过为同个页面添加多个不同状态，实现状态的切换。例如，点击主页右下角的加号按钮，会在加号按钮上方滑动出两个子按钮，并且加号按钮自己会旋转变成关闭的叉号；再点击，两个子按钮会滑动收回下方，叉号再旋转变回加号。

不过，墨刀的免费版不支持导出和多人协作，图片储存不能超过100M。不过好在支持分享。其他人根据分享的二维码或分享链接就可以查看到可运行的原型了。

Mockplus

Mockplus 也是一款不错的快速原型设计工具，和墨刀一样，也提供了很多组件库和图标库，甚至比墨刀还多。上手也同样简单，也是一拖即用。

不过，Mockplus 对于一些常用的组件的封装程度却不如墨刀，例如标题栏不能直接设置标题、标签栏不能直接设置图片、也找不到设置圆形图片的方法、文字按钮也不能支持添加图标等。

Mockplus 在交互方面也是不足，页面内的交互设计只能复制页面，没墨刀方便。其实，Mockplus 也有状态的概念，不过不是页面状态，而是组件状态，但目前我只在按钮组件有看到状态的设置属性，可以设置正常、选中、焦点三种状态。

其他工具

除了 Axure PR 和上面介绍的三款，还有很多其他的设计工具，比如 Balsamiq Mockups，以前的同事用过，我很喜欢它的手绘风格。不过，Mockups就不是免费的了，但可以试用。当然，网上也有破解版。

也有人提出使用 Sketch 做原型设计。无可否认，Sketch 也是可以设计原型的，PS、AI 等工具也同样可以。至于交互，用标注的方式就好了。但这些工具，确切地说，更适合用来做 UI 设计，而不是原型设计。做原型设计，要求的就是能够快速看到效果，不只是界面效果，还有交互效果。用UI设计工具来做，一是很难达到快速的要求，二是交互效果等于没有。

设计原型之前

在开始设计原型之前，我还有一些话需要唠叨一下。

首先，要确定好原型的受众，是给UI设计师看的，还是给开发人员看的，抑或是给老板或客户看的。不同受众决定了原型设计需要做到什么程度。一般来说，如果受众是UI设计师或开发人员，那最多只要中保真原型即可；如果受众是老板或客户，那可能就需要提供更多视觉细节的高保真原型了。

其次，要梳理好功能需求。梳理功能需求时，要以核心功能为主，尽量做减法，而不是做加法。

就举我的项目的栗子，我的App中有一个需要给程序猿设置技术标签的需求。现在看看加法怎么做。首先，技术标签可以分为三大类：移动端、前端、后端。接着，移动端的技术标签有Android、iOS、Windows、React Native，Android根据语言还可以再分出Java和Kotlin，iOS则可以再分出Objective-C和Swift。前端标签可以有HTML、CSS、JavaScript、React、AngularJS、Vue等等。后端标签则可以添加更多了，数据库方面的MySQL、MongoDB、Redis等，语言方面的Java、PHP、Golang、Python、Node.js等，其他的像Nginx、Docker、Spark、Spring等等。如果要把所有技术标签都包含进来，真的太多太多了。那么，再看看减法怎么做。标签只要三个就够了：移动端、前端、后端。为什么呢？因为初期用户量不会很多，产生的内容也不会太多，没必要分那么细那么多标签，三大类标签就已经足够满足需求。

再举多一个栗子，我们公司目前正准备做一款新的金融产品，时间比较紧，核心功能只有一个，那就是要能实现交易。产品经理给我们演示原型时，包含了一些核心功能之外的辅助性功能，比如资讯、统计用户看涨看跌的概率、风险提醒、修改用户头像昵称等，结果所有这些不影响直接交易的功能全部砍掉了。另外，有一些界面流程也进行了简化。

对需求做减法，就是要思考如何简单快速地满足目标。将核心需求看做一条链子，那么，要判断某个功能点是不是必需的，只要思考下如果把这个功能点去掉，链子会不会断就知道了。

设计原型

设计原型时需要谨记一点：我是在设计原型，不是设计UI。设计原型的过程，也是一个梳理产品思路的过程，也是一个迭代的过程，从整体到局部逐渐细化的过程。整体上主要就是产品的信息架构，如功能结构、导航结构，局部上主要就是页面布局和交互，如内容编排、页面切换、按钮点击等。

我设计原型时，和设计原型之前的需求分析一样，也喜欢做减法。尽量减少页面层级、页面数量、页面交互，尽量使得信息扁平化。例如，用户登录和注册，我在一个页面搞定。

直接以本人的项目为例，简单讲讲我是怎么进行原型设计的。

首先，对功能需求进行分类。根据我前一篇文章确定的功能需求，我整理出了以下的信息结构：

登录注册

手机号注册
手机号登录
Github登录
发布内容

发布问题
发布分享
展示内容

关注之猿的内容
同栈之猿的内容
移动端
前端
后端
用户中心

个人信息
我发布的内容
我关注的内容
我关注的人
关注我的人
我的消息
接着，确定有哪些页面。登录注册需要为一页，首页以展示内容为主，同时需要添加发布内容和用户中心的两个入口。关注之猿和几个同栈之猿，可以设为几个Tab。用户中心的每一个子项都可以各成一页。发布问题和发布分享也可以各为一页。

然后，将内容进行布局排版。排版时，也不需要想太多，只要把同一层级的内容用最简单的方式放一起就好了。记住，不要去想怎样布局才好看，那是UI设计时才需要考虑的。最后，我设计的首页如下图：

最后，就是对各个子页面的设计了，也使用和首页相同的设计流程。页面太多，就不再贴出来了。

在整个原型设计的过程中，还需要不断对一些细节进行调整和补充。如果你的原型设计完之后需要整理成需求文档提交给开发人员看的，那么，设计页面时，建议同时也可以思考下一些数据边界和交互细节的问题，并批注在页面旁边，这样，后续整理需求文档时就会方便很多。可能有些人习惯在整理需求文档时才来思考这些问题，但这样的话很容易有遗漏，甚至可能根本不记得这个事。所以，设计时先思考，后面整理文档时再检查有没有遗漏，这样，设计出来的产品就会严谨很多。

下图就是我的登录页面以及旁边的批注：

写在最后

最快的原型设计工具其实还是纸和笔，没有之一。而设计原型其实也没什么特别的技巧，关键是要懂得用户体验，以用户为中心去开展设计工作。推荐每个人都要看看《用户体验要素》这本书。