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

时间 2019-11-17

标签 app 项目实战之路原型繁體版

原文原文链接

原创文章，转载请注明：转载自Keegan小钢前端

并标明原文连接：http://keeganlee.me/post/practice/20160814数据库

微信订阅号：keeganlee_me后端

写于2016-08-14微信

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

原型设计工具

作原型设计，首先，固然是要讲讲工具。作原型设计的工具备不少，功能最强大的应该就属 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设计时才须要考虑的。最后，我设计的首页以下图：

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

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

下图就是个人登陆页面以及旁边的批注：

写在最后

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

扫描如下二维码便可关注订阅号。