1. 好的原型图符合业务发展

首先一个高阶产品经理，一定是心里有一张产品的蓝图，这张蓝图是跟公司当前的业务和未来的发展方向息息相关的。没有蓝图的产品经理，只是一个画图的工具~只有你充分了解了产品现状和未来后，你才能迭代的画出不同阶段产品应该有的样子。才能弄清楚，每个阶段应该新增或优化每个每个功能点，也才能做到画图时心中有物、言之有物。

不符合运营需求和业务发展的产品设计都是耍流氓~

2. 原型图应符合实际应用场景

每个软件产品都有自己的定位，一个产品经理如果搞不清楚产品的应用场景、核心功能以及背后的业务逻辑，是不可能设计出理想的原型。

了解应用场景一个重要的好处，就是弄清楚你的用户在哪里，你的软件产品是To B还是To C的应用。比如To B的应用更重要的业务流程，一些酷炫的兴奋型功能会被排在很低的优先级。但在To C的应用里面，却可能成为你和竞争对手的差异点，需要排在很高的优先级。总之，To B和To C的应用的产品设计重点是完全不一样的~比如具体可以简单看下：http://www.woshipm.com/pmd/1017674.html?from=timeline&isappinstalled=0

了解应用场景，你才知道用户为什么会用你的产品。比如一个K歌软件，最核心的是K歌，所以K歌的入口一定放在最显眼的位置。当然用户人群不仅会进行K歌，还希望得到别人认可。这个认可一方面是熟人圈的认可，所以各种平台的分享功能是一定要有的。另一方面是获得陌生人的认可，所以应用内的赞赏、变现功能也不能没有。

了解应用场景还有一个好处，你搞清楚了你的应用主要是用在PC和APP端，这直接决定了你的原型图画法，PC端和APP端的产品设计布局、交互方式甚至是风格样式都会存在不一样。举个例子，曾经带过一个产品经理，设计一个PC端Web网站，所有的布局都带有强烈的移动端风格，只利用了屏幕的很少部分的版面，一方面显得很空，另一方面没有充分体现PC的大屏优势，不符合主流的Web网站系统使用习惯。

3. 操作流程清晰明了

我们构建一个应用，用户上手的成本越低越利于初期推广。所以我们在产品设计上要尽量降低用户的学习成本，使得操作流程清晰明了。就像户型设计一样，你都需要考虑居住者的动线，软件产品的设计也需要有清楚明了的动线。这里有几个简单的原则可以参考：

· 操作逻辑应符合主流应用设计

现在电脑和手机端的各类应用的用户使用习惯，已经相对固化。一个应用创新一种特殊的交互方式，最大可能的反馈可能是被用户认为很难用而卸载，而不是觉得好酷好炫。在To B的应用里，符合用户使用习惯的重要性就更不用说了。常年使用Windows没有用过mac系统的用户，第一次多半是不知道苹果电脑浏览器该如何打开的。用惯了CAD的建筑师，要切换到其它设计工具，也需要克服很多的阻力，付出不少的学习成本。

当然我们并不是不要创新，而是作为产品经理，你需要明白创新的代价是什么，为什么要创新？当然对于创新，我们也可以通过灰度升级来检验用户的反馈效果。

· 页面功能简单明了

一个界面尽量只做一件事情，不要把若干不相干功能堆砌在一起，尤其是移动端应用

该页面该做什么事情，有明确的提示。新增的功能，第一次进入的时候，可以适当加入引导

用户做错了，要教会用户如何改错~做对了，指导用户下一步干啥~如果存在多步，是否让用户感知当前处于第几步~

如果想要让用户更好的同你的产品进行互动：

让用户有所期待，这样能让用户更舒服

给予明确的指示，让用户更快推进到下一步

·简化操作路径

一个好的应用需要简化不必要的步骤或操作干扰，功能并不是越复杂越好，而是清晰明了。其中一个很明显的案例就是注册。用户注册是一个极其重要的流程，尤其是对于To C的应用，如果注册的用户体验做得不好，会直接导致准用户放弃注册。所以你可以观察各家应用，都不断在探索简快捷的用户注册信息，包括第三方应用登录存在的意义之一也是简化注册流程、减少注册时间。

4. 交互逻辑无缺失

原型图的主要阅读者是运营和研发。所以一个好的原型图，要把该阐述的逻辑都阐述清楚，让运营人员可以快速判断当前设计是否符合运营需要，让研发人员可以了解功能逻辑。举两个不好的栗子。

案例一：

a) 下图中的时间是什么时间，并未明确。是加入购物车的时间，还是组件开发的时间，还是组件审核上架的时间？

b）时间按照什么排序，并未体现出来

案例二

如果下图是一个交付的原型图，那他存在以下问题需要说明方可。

a) 唱过的人是用万展示，如果推荐的歌曲只有5个人唱过那么是用“0.0005万人唱过”，还是就是“5人唱过”？

b)推荐歌曲和排行榜单的二级导航，是否固定悬浮？是否可以左右滑动切换二级导航？如何可以左右滑动，一直朝一个方向滑动，导航是否可以循环切换？

c）推荐歌曲出现的逻辑是什么样，如何分页，每页加载多少条数据，最多出现多少列？

d)  是否支持下拉刷新，左右切换时自否自动刷新？

5. 页面元素合理布局

基本元素

好的原型设计界面元素和控件的文字、位置、布局、分组、大小、颜色、形状等应该合理、容易识别，避免字体过大，过小等基本问题。

页面的所有语言交流对象应是你的对象，所以语言是否简洁、易懂、礼貌、不容易产生疑惑

1）文字

字体统一，一般不要用几种字体，就选常用字体就行，1~2种足够；字体建议使用系统字体。使用特殊字体还需要考虑字体版权问题；

字号不要乱，一级标题、二级标题、正文、简介描述等等字号大小都尽可能的统一；

颜色规范，标题、正文、描述等等颜色事先统一并做出相应的区分。

2）间距

间距设定主要一大问题就是统一，千万不要随缘对齐，规规矩矩的按统一的大小排列整齐。各同类间距做到一致，规规矩矩的对齐。

3）图标

目前各icon网站提供的素材都不错，可以经常在各个UI设计的网站上看看，但在设计时尽量使用成套的icon，做到风格一致，建议直接使用素材库。

基本设计素养

1） 熟悉视觉流和用户高点击区域

视觉流是指视觉焦点形成的轨迹，由于眼球生理结构限制，人眼在某时刻只能产生一个焦点。人的这一视觉特性使得人的视线运动通常表现为点到点的跳跃式扫描（saccade），而不是平滑移动。人在阅读时，一行通常包含4～7个跳动――定位（jump-fixation）的动作，注视持续时间为200～600ms。 因此用户在对界面持续关注后会留下一系列的视觉焦点，这些视觉焦点的轨迹称为视觉流（visual line）。

平稳的视觉流结构能帮助用户快速理解逻辑路径，减少用户的认知成本。平稳的视觉流有两个原则：

a) 视觉焦点不宜过多；

b）视觉焦点的路径逻辑尽量简单。

如下图，同为软件教程详情页，左侧的视觉焦点过多，视觉流向路径复杂，而右侧的视觉流向路径简单，容易理解。

高阶一点的产品经理，应该明白移动端和PC端用户最容易操作和注视的区域位置在哪里。将重要的内容放置于显著位置，剔除干扰视线和注意力的元素。将用户最常使用的功能交互，放在用户最容易交互的位置上，提升用户体验。尤其是现在手机越来越大，而人类的手还没那么快进化，所以存在点击盲区。此外，可以自己在产品中埋点，了解自有产品的点击热图。

2）清晰的视觉层次 突出重要元素，弱化次要元素

页面是由元素组成的，这些元素包括线、颜色、按钮等，要做到层次清晰，就要把重要的元素进行强化，次要的元素进行弱化，比如可以通过颜色的饱和度来突出重要元素，通过面积突出重要元素等，引导用户聚集视觉焦点到重要的元素上。如下图，通过对比颜色和区域面积的大小，来突出重要元素。

3）格式塔原理

将相关的元素组织在一起，让用户知道这些元素在任务、数据和工具上是相关的，通常用位置表示。相关的元素位置上相近，不相关元素用空间隔开。如下图，第一个图为反面例子，信息距离上下一致，用户无法区分中间的信息是属于上方还是下方。第二张图是airbnb的截图，红色线框部分明显与下方隔开一定距离，在视觉上体现为跟上方相关。

4）注意留白

针对移动端的产品设计要特别注意留白，考虑拇指的舒适的点击区域，好比iPhone系统的输入框，如果框右边有发送按钮的话，我们可以发现右侧是有个明显的留白的，由于中英文字体差异，中文的留白略大于英文。这个留白，一方面是为了规避跟发送按钮焦点太近的误操作问题，一方面是为了给滚动条留足够的空间

用户食指紧贴按钮时，能看到按钮的边缘。这为他们提供了清晰的交互反馈，帮助用户判断击中目标的准确性，也提升用户击中目标的效率。

一个成人大拇指平均宽度为1英寸（2.5厘米），折算下来是72像素。

用户点击拇指大小的按钮时，是非常的轻松准确的，能带来良好的愉悦体验。

行走状态下，单手拇指操作触击正确率均值达到95%的最小尺寸。

设计界面时，参考控件所在位置的触击尺寸要求，避免因尺寸小带来误操作，影响操作效率。

6. 关注用户体验友好性

· 是否页面上所有操作都必须由用户完成？

· 有没有设置默认项？

· 是否允许必要的撤销操作？

· 是否已将操作步骤、点击次数减至最少？

· 是否有自动保存用户输入的数据或者进度？

· 是否选择了正确的表单形式？比如下拉列表替代输入框、比如特定的日期时间输入控件？

· 是否能快速找出错误的地方，并提供更正的提示

· 有没有使用智能键盘，比如最基本的输入密码时应自动弹出数字键盘？

· 必要的数据是否只需要输入一次？（比如同时输入身份证号码和出生日期，那么只要身份证号码即可）

· 有没有提供其他可行的方案？（买不到火车票时提示去购买汽车票）

· 是否可以轻松获得正确的点击响应？

还有很多类似的考虑，需要自己不断积累和完善~

7. 合理的文字说明

合理的文字说明，是一份专业的原型图的必备组成部分，可以帮助原型图的阅读者理解设计理念和完成相关功能。

8. 异常场景不遗漏

经过上述步骤，我们可以完成一个正常业务流程的原型图。但作为一名细心的产品人员，我们还要考虑各种意外情况。在用户的体验中，友好的异常情况处理能够给用户留下更美好的体验。所以你的脑中必须构建一个基本的意外情况框架，帮助我们在细化原型设计的时候补足这些意外情况。

1） 空数据

初始状态的定义：初始化状态，没有任何内容，需要用户进行某种操作才能产生内容的界面或者基于用户推荐或者引导用户去看推荐

清空状态的定义：通过删除或其他用户操作，清空当前的页面内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。

出错状态的定义：由于网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。

2） 网络异常

无缓存的网络异常：通常的处理方法有 a) 点击重新加载   b) 提供前往网络设置入口。

有缓存的网络异常：网络异常：提示网络异常，显示缓存数据，比如微信

网络切换时：比如WiFi断链时，页面如何加载，全屏加载？分步加载？暂停播放？暂停下载？

3）各种权限开启异常

尤其是对于移动端应用，需要用户在手机给应用分配多种权限。权限分配在应用安装后第一次点击会给予提示，如果用户关闭这些权限，应在后续的使用过程中当涉及到该权限时给予提示。作为产品人员，你需要了解安卓和iOS权限设置略有不同，目前的权限主要包括：存储、相册、摄像头、通讯录、日常、网络、传感器、话筒、日程等。

当然作为一名产品，墙裂推荐每年都要看苹果和Google的开发者大会，了解最新的技术信息和新增的功能，达到对系统最新特性的利用，指导产品设计

4）考虑边界条件

常见的是字段的长度定义，例如如果用户名，标题，文本内容超长的情况，打点表示还是折行显示，需要考虑清楚。

边界条件的考虑建议看看软件测试黑盒测试的等价类方法和边界值方法，基本可以帮助你找到所有边界条件。

9. 搞清楚原型图给谁看？

原型图本身也是一个作品，我们要明确原型图是画给谁看的，通常是以下几类人：开发、部门领导、UI设计师和测试，一个完善的产品流程离不开着几个角色。

开发通常最关心的是有多少功能，功能的复杂度怎么样，边界条件是什么，异常情况怎么处理等。设计师通常关心元素之间的关系，排版和布局。而跟主管汇报，由于主管的事情是很多的，他们通常最关心功能整体的流程、原型的易读性，以及价值体现。而测试则关心产品需求用户（后面会详细介绍），辅助他们写测试用例，以及是否穷尽考虑到各个场景。

搞清楚他们的需求，也能够帮助我们更好的画出原型图，甚至是讲出我们的设计理念。因为你只有对不同的人讲出不同的重点，才能直达他们的心灵，方便后续的工作。

举个栗子

10. 产品经理也需要超强的逻辑性

常常看到一些产品经理，跟技术交流起来很费劲，主要是对产品的讲述逻辑性太差。比如一个订单会有很多状态，但是却无法向技术人员阐述清楚所有状态的逻辑关系。举个栗子，某产品经理说他的订单状态包括，未付款、已付款、待收货、已退款、未退款、已收货、已退货。但却说不清楚为啥设置这些状态，说不清楚已付款和待收货的区别。

如果是特别是复杂的功能，尽量在一个页面上显示出所有的交互状态，避免在看原型图时遗漏。有时候测试验收阶段的很多坑，各种状态一楼，其实是由于前期没有做好标注引起的。

下面以微信消息列表页为例（梳理思路用脑图是一个好习惯），先用脑图画出所有的状态，补齐所有交互状态，后面再画的时候效率会高很多。

如下图，为微信消息列表页所有交互状态的列表呈现：

产品的基本素质还有很多，除了原型图，我一直推荐产品人员了解软件测试的相关方法，这样可以有力的帮助我们缜密产品设计细节。包括流程图的构建，也有非常多学问可以考究。以后慢慢更新~

P.S. 部分资料是来自大神的博客或文章，非个人原创，在此向大神致敬。