至此，我们完成了app的宏观定位、系统架构、产品结构图以及最为重要的2大流程图（业务、页面流程图）。接下来本文将围绕页面的原型设计、交互设计展开。

在xxxx目前我们手头上已经绘制了「职得App」所有业务流程图，还有一张页面流程地图。可以说在心里基本知道产品的功能，以及每个页面的功能元素，接下来就是参与需求评审的原型稿和交付给技术同学的设计稿了。

强烈建议先看前面的文章再往下看～否则可能看不懂。

二、原型vs交互vs视觉

很多人对原型稿、交互稿、视觉稿定义不清楚。

无论是大公司还是从0设计App，由业务流程图还不能直接交付给程序员开发，还需要做出原型需求稿、交互UE稿、UI稿。而三者正好对应是黄金圈法则：Why-How-What。

• 原型需求稿：页面有什么功能（why）
• 交互UE稿：功能如何被用户使用（how）
• 视觉UI稿：功能长什么样子（what）

理想情况，在大公司里分别由3个人负责，或UED部门负责交互和视觉。但很多中小公司里产品经理同时身兼交互设计师的身份，更有甚者兼任视觉设计师。作为从0设计App的唯一负责人，我当然是同时身兼原型和交互哈！

另外，原型有人还会分为线框图、低保真和高保真原型，我用下厘清一下。其实名称不重要，重要的是不同公司分工不同，按照实际情况应对就好了。

本文着重就原型和交互展开。关于视觉UI设计，下一篇文章来讲。

三、原型稿

关于原型，有些产品经理坚持「逼真」、「动态」，尤其是一些乙方公司，如软件外包公司。我可以很明确的说，即使你花时间把Axure练得很熟，把原型做得很逼真，在甲方公司里都是性价比极低的做法。

3.1 What：原型稿是什么？

在实际工作中，直接看原型稿的3大使用场景：

1. 描述需求：产品经理通过对需求挖掘，然后解决用户的需求，原型作为辅助工具形象地描绘出来，以便其他人可直观理解、快速达成共识，解决用户的需求；
2. 设计协作：需要在进入UI设计阶段之前将原型稿确认，不能让UI通过你的口述来天马行空设计；
3. 客户展示：对于外包服务型乙方公司，在听了甲方的需求后，一般会直接设计动态、可交互的原型，目的是更好地解释给甲方听，也是为了更快交付签合同。

一般来说，我们都是甲方公司的产品经理，只用考虑前2点。

你所做的原型，其实更多就是讲清楚，页面有什么功能，如何解决需求。前面做了这么多调研，绘制了流程图，其实都是在解决用户的需求，通过功能/服务来解决需求，因此在原型环节也是如此，讲清楚大概怎么解决需求即可。

如上图，如果公司有交互设计师，最终做成这个样子就可以了。已经能够说清楚功能是解决什么需求，剩下的细节交给UE和UI设计就好了。

3.2 How：怎么做线框稿？

问：用什么工具做原型？

答：其实Axure、Sketch、磨刀、甚至PPT都能做原型，我推荐Axure。

问：Axure要系统学吗？

答：我反正没学过，至今95%的工作里只用到方框、文本框、按钮、占位符、直线这么几种够了。

做出上面途中那样子的线框稿，基本上已经可以在甲方公司应用了。产品经理不是来画图的，否则和设计师有什么差别？设计师确实要系统学一下Sketch或Axure。

在各大厂中用过很多方法，用来用去，让我写经验，我还是推荐闵伟老师（携程高级PM）的4步方法，比较简单易用：

1. 绘制业务流程图和页面流程图；
2. 添加页面基本元素；
3. 添加功能，满足业务流程和页面跳转；
4. 添加判断，满足流转。

同样地，回到我们「职得App」中来。

和上次一样，挑出职得App的一个业务流程做范例——学员看视频流程。

第一，绘制业务流程图和页面流程图，这在之前的xxxxx文章中我们已经操作过了。

第二，添加元素。

根据上图，可以看到这个流程涉是「2.职圈-我的职圈tab」——>「2.3职圈-职点课程」——>「2.3.1视频播放」这3个页面。同时，这3个页面每个页面里的核心元素也能看到。现在将这些功能元素转化为页面上的信息即可。

比如：我的职圈卡片（包括图片、题目、简介等）、职圈的介绍（包括圈主姓名、简介、头像、背景图等）、课程章节分层（章节名、课程名、分级操作等）、视频播放器、作业展示区等。

第三，添加功能和跳转。

添加连线，点击哪里进行页面的跳转。

比如：点击卡片会跳转到下个页面，点击具体课程章节会跳转到下个页面，但是点击圈主头像并不会进行跳转。

第四，添加业务判断。

在业务流程图里提及了，看课程视频前会进行两次判定，完成作业和是否付费即菱形控件。因此，在功能上可以对已经完成作业的课程勾选icon标记，对未付费课程进行加锁icon提示。

最终我们就会得到如下的原型图（草稿线框图）：

同理，我们根据业务流程图和页面流程图，可以将每个页面的原型全部绘制出来。如下图，大概会得到非常多的原型图：

看到这里，我想你一定会有很多问好。工作量是否太大了。没错，很多产品新人每天被原型图所折磨，还要改来改去，特别麻烦。

因此我这里想特别强调，对于线框图来说：

• 先画流程图，敲定后再画原型；
• 在动Axure之前，建议手绘！
• 不要上色，不要写太多注释。

好吧，我觉得你可能听不进去，吃两次教训就知道了，我也是这样过来的。

四、交互稿

鉴于是独立负责「职得App」，因此最终目的是拿出交互稿。然后交付由UI设计师进行设计，所以我还自己独立作为不专业的交互设计师进行UE交互设计。

就个人从业经验而言，互联网UE交互设计：基于人类心理和用户需求的人机交互设计，而交互设计原则或者说心理学知识多如牛毛，需要针对不同场景、不同用户、不同功能目标来敲定。

关于交互，这里推荐《设计心理学》套装，唐纳德·A·诺曼，豆瓣8.6分。同时再推荐一个系列文章：交互设计师应具备的技能树（9）| 设计流程的三个阶段；交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法。

简而言之，根据用户心理，设计出更舒服的功能使用方式。

关于方法，作为产品人我不专业，直接引用起点学院特训营主讲人黄向阳（前网易资深交互专家）的4个关键点：

1. 初始状态：如新手引导、禁用情况、动画提示、视觉引导等；
2. 中间流程：如动画效果、操作手势、交互流程、帮助提示、过渡流程等；
3. 结果状态：如点击效果、结果提示、二次确认等；
4. 异常情况：如错误操作提示、可交互边界、异常情况发生等。

继续拿上文提到的线框图举例子，根据对原型高进行交互设计。

针对页面上所有可以交互的点，按照功能的实际情况来判定要交代清楚哪些事情给开发同学看。具体的交互应当比我图中展示的更为详细，这里只是取其示意，且并不一定是最好的交互方式。

简而言之，根据用户心理，设计出更舒服的功能使用方式。并且在交互稿中事无巨细、没有遗漏地写出来。毕竟是写给技术开发同学的，对于他们来说，只有是非0和1，没有0.5这种模糊的东西。

同样地，交互稿的工作量也是巨大的。这里我就不一一贴图了，关注公众号领取。

五、总结

OK，至此，作为产品经理的我们基本已经大功告成。接下来将交互稿交付给UI设计师，最后制作PRD给技术开发同学就可以了！所以，下一篇内容：从0设计App（7）：视觉设计。

由于我也不懂视觉设计，因此请来了阿里巴巴认证设计师来讲（有设计需求可找——>站酷&微博：杨锦Vincent），先剧透张图：

参考学习内容：

1. http://www.woshipm.com/pd/1031272.html
2. http://www.woshipm.com/ucd/897458.html
3. 起点学院特训营课程-主讲人黄向阳

相关阅读

从0设计App（1）：市场分析-知识短视频行业（上）

从0设计App（1）：市场分析-职场技能教育市场（下）

从0设计App（2）：竞品分析-吃透3款产品看职场在线学习平台

从0设计App（3）：如何用问卷看透人心 (上)

从0设计App（3）：用户访谈造就产品灵魂（下）

从0设计App（4）：用4步管理一切需求，做到心中有数

从0设计App（5）：2个维度构建产品之“道”（上）

从0设计App（5）：如何搭建系统架构和产品结构（中）

从0设计App（5）：2套方法绘制业务、页面流程图（下）

作者：朱鲁斌，公众号：字字朱心。每周深度思考一个问题，不稳定的世界里找到一份笃定。

本文由@朱鲁斌  原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash， 基于CC0协议。