第03期：好的原型设计应该注意什么
1 什么是好的原型设计
1.1 分类
（1）第一种：动态跳转型
通过事件（如点击、滑动等）实现各个元素和页面之间来回跳转。所有交互说明都写在了界面元素的注释说明中（蓝色icon），如想查看说明，需点击后才能看到。这类跳转型原型，需配套的需求文档来描述各个元素的状态、前置条件、操作说明等。这种原型图，想必很多刚刚入门的产品经理/交互设计师都尝试过。当然我也不例外，刚开始工作时，觉得用axure实现各种动效是件很好玩很酷的事情，同时也认为这种动态跳转可以帮助开发人员更好的理解页面关系。但是却忽略了很重要的一点，开发不知道我们产品之前的思考逻辑，所以拿到原型时，根本不知道界面上哪些信息是可点击的，也不知道点击后会发生什么进入哪个界面。优势拥有交互动效，可完整体验到页面之间的跳转流程。劣势这类原型，劣势超多。
- 浏览原型的人需要逐一点击，才知道这个页面有哪些功能，这样很可能导致功能的遗漏。（当年也确实出现过这个问题，虽然有配套的需求文档，但是大家都懂的，需求文档可能只有产品人员自己看。这样一来，无形之中增加了沟通成本）；
- 做原型时，各种动效比较浪费时间。需要各种事件、动态面板配合来实现，一定程度上降低了工作效率。
因为这类原型图的用户体验实在是不好，便决定把所有页面平铺展示，把交互说明环绕周围，如下…
（2）第二种：信息平铺环绕型（五彩版）
首先，感谢开发哥哥们当年的不杀之恩。现在回过头看之前的原型图，简直不忍直视。这样花里胡哨的原型图，虽然很详细的写了各种说明，但是给谁看，估计都没有耐心看完吧。所有的交互说明信息都环绕在线框图周围，并使用了各种图标颜色。不同图标及颜色代表不同含义，如图中粉色箭头代表有点击事件，绿色箭头代表说明文字，点击事件均采用橙色文字。优势
- 交互说明平铺展示，有效避免了功能遗漏；
- 各类信息使用不同颜色区分，清晰直观的区分不同类信息。 劣势
- 交互说明使用颜色过多，一眼看过去，给人感觉很杂乱；
- 线框图中使用颜色过多，分不清界面信息优先级。
这类原型图，解决了第一种遗漏功能的问题，也得到了开发人员的一致好评，说这种原型图清晰直观的把所有功能点都描述的很清晰。就这样持续迭代了好几个版本。后来。有一次在一个功能复杂的界面周围写了密密麻麻的注释（如上图），在实际开发过程中，就发现很多开发来问的问题，明明在原型图上都有写。可是他们为什么忽略了这些需求呢？我就跑去和他们沟通，得到的反馈是：哦，没看到，没注意这块内容。记得那时候还是挺气愤的，自己辛辛苦苦写的需求，开发根本不认真看。后来换位思考想了想，这些枯燥的文档，再加上五颜六色的文字，给谁谁都不愿意看吧。
为了解决交互说明杂乱无章的问题，决定尝试把所有说明统一放到线框图下方，逐一元素说明，如下…
（3）第三种：信息平铺上下型
把所有交互说明写在线框图下方，线框图上连接关联界面。优势界面看起来清爽了很多，所有交互说明集中，有效避免了功能遗漏和界面杂乱的问题；劣势不直观。界面元素和交互说明分离，影响查找效率。
出了一个版本这样的原型图，就立马收到开发哥哥们的反馈，说这样的交互说明太不直观了，每次都要看一眼图，然后再去下面找到对应的说明，很麻烦，而且还容易出现对应错的情况。就这样，放弃了这种类型的原型图。
那么有没有一种既清晰直观又可以有助于开发阅读查找的原型图呢？
于是，综合了之前各类原型的优势，得出如下版本…
（4）第四种：信息平铺环绕型（边框版）
为所有界面加上了手机外边框；线框图颜色尽量使用深浅不同的灰色；交互说明颜色少一些，使用灰色深浅及文字大小区分优先级；使用统一的标注icon；制定了交互标注说明。各类交互说明规范优势
- 整体感觉干净清爽，各类信息错落有致；
- 为所有界面加上了手机外边框后，有效避免了线框图与交互说明混淆不清。且可清晰的看出在手机上展示效果，标记第一屏信息；
- 交互说明统一规范，避免了交互说明的喧宾夺主；
- 线框图颜色尽量少，使用不同程度的灰色来呈现，信息优先级突出；
- 使用交互说明序号。使用序号标识出当前页面有哪些注意点，有效避免遗漏。 劣势有时会出现线框图和交互说明对应不上的情况，开发找不到交互说明上写的【xxx】按钮到底是哪个icon，点击【xx】热区，这个热区的范围包括哪些。
整体来讲，这种类型的原型图，已经得到开发人员的认可，也是个人认为比较优的方案。正因为原型图也算是自己的产品，所以也需要不断的打磨，于是最近又对其进行了优化，如下…
（5）第五种：信息平铺环绕型（各个元素逐一标识）
在界面上，使用箭头逐一标识每个元素或每个模块的交互说明。交互说明中各类信息分类显示。优势
- 快速定位某个元素的交互说明；
- 为交互说明分类（如信息项、操作、状态、排序等），有效防止遗漏需求，也有助于开发查看需求。 劣势如界面上需要标注的信息很多，可能会造成页面看起来有些混乱。
1.1.1 总结
每一种原型图样式都有其优劣势，在实际工作中，最重要的不是如何呈现你的原型图，而是要和设计师以及开发达成共识，怎样的原型更有助于他们理解需求。对于刚入职场的新人小白，提醒大家切记不要过度沉迷于页面动效，而忘记原型图的本质目的（清晰明了的说明界面功能逻辑）。如上，述说了一下我自己的原型图演变史。原型图是我们工作中输出的重要文档之一，所以更需要我们不断的去打磨它，在提高自己工作效率的同时更好的帮助开发人员理解需求。
1.2 标准
（1）原型的第一性原理
原型的撰写是产品经理的基本功，人人都是产品经理平台上已经有很多优秀的文章教我们怎么样画出专业的原型图，例如：要有修改记录、总览、全局规范和说明、核心业务的流程图、清晰的层次、必要的标注、同一个页面的所有状态等。典型的目录结构如下所示：从产品经理的角度，在动手进行原型制作之前，还有一个很重要的事情要先梳理清楚，我们可以称之为原型的第一性原理，也是原型的核心要点：讲清楚目标。
- 什么是原型的目标
如同一个产品需要有一个核心定位，我们的原型也首先要说清楚这个定位所转化过来的目标，这是第一层次，我称为产品目标。但仅有产品目标还不够，原型的受众是交互设计师、UI设计师、开发人员和运营人员等，他们在阅读原型时，除了需要明确了解产品定位和目标之外，到具体的模块上，还需要了解每个模块的核心目标。同样的道理，在具体到某一个页面的设计、开发时，也需要围绕页面的核心目标进行。因此，原型的目标有三个层次：
- 产品目标；
- 模块目标；
- 页面目标。
三个层次的目标有主次关系，其中模块的目标依赖于产品目标，页面的目标同时依赖于产品目标和模块目标：比如：一个知识社区类的产品，核心目标就是“最大化提高随意浏览的潜在用户转化成注册用户以及付费用户的转化率”，这是产品的目标。而具体到类似“随便看看”这个模块的目标上，就应该是依赖于产品目标，定义为“精选内容提高用户注册按钮点击率”。而到了注册页面，应该是依赖于前两个目标，定义为“降低注册门槛，提高注册率”。
- 目标清晰明确的好处
实际工作中，经常容易出现不同的人对原型有不同的理解，因此才需要有规范的原型、必要的标注和完整的交互状态等要求。但如果目标理解不一致，那导致的是更根本的问题：大家的着眼点和发力方向不一样。例如：针对某个提醒，到底是用模态的还是用Toast，不同的人可能有不同理解和结论，而实际上如果依据模块或页面目标来进行评估，那这种不一致就会大量减少。哪种方式对达成核心目标有利，就应该用哪一种。因此，梳理清楚以上三个层次的目标，大家再对照原型进行工作时就可以达到以下效果：
- 目标一致，每个人的力量都用在同一个方向上，形成最大合力；
- 有效减少沟通成本，避免来回反复修改。
- 如何围绕目标产出原型
- 目标说明
在每一个模块或页面上，需要明确说明白该模块或页面的目标。目标的描述最好是可量化的，例如某种点击率、转化率等。下面举一个简单的目标描述的例子：
- 依据目标进行内容展示
内容布局主要依赖于页面的目标，需要重点展示和目标相关的内容、收纳和弱化和目标无关的内容。我们举蛋壳公寓和Airbnb为例：蛋壳公寓详情页的目标是在通过价格和各种优惠活动来吸引用户，而Airbnb做为共享空间的产品，在这个页面上价格并不是第一吸引用户的，环境和需要互动的房东才是。这样，两个页面由于目标不同，围绕组织内容的布局就大大不同了。
- 依据目标布局操作
页面上的操作，同样强依赖于产品、模块和页面目标。我们举网易新闻详情页和今日头条新闻详情页，就可以看出来差别。由于网易新闻评论区非常著名，代表了网易新闻的调性，因此我们可以定义网易新闻的详情页面目标是“增加评论和互动的平均数”；而今日头条主推自媒体关注，因此详情页面的目标可以反推为“增加订阅的转化率”，我们看看如下图片，在目标引导操作的布局设计上就非常清楚了。从这两个例子可以明显看出：只要我们明确了页面的目标，那么在实际设计时，就不用再为“页面上拉后顶栏到底保留评论还是关注/订阅”的问题反复讨论和修改了，标准很简单：符合页面目标的操作就是最重要的、最优先的。
- 引导和反馈
页面的引导和反馈是必不可少的部分，尤其是异常出错和触发边界值时。为了缓解用户的焦虑、引导和帮助用户解决问题，需要有设计良好的、覆盖全面的引导和反馈。在引导和反馈的设计中，也需要引入对三个目标的审视。例如：非核心目标的操作失败，可以考虑引导到核心目标的操作上，也即是诸如此类的引导和提示。不过这一类的设计不可太过生硬，要让用户感觉到自然而不突兀，需要在实际场景中仔细斟酌。
- 总结 原型文档的第一性原理：各级目标清晰明确。目标贯穿在原型的各个层级中，包括产品目标、模块目标和页面目标。在规范化我们的原型文档的同时，也要时刻用目标为我们指引方向，确保跑在正确的道路上，也确保项目的相关人员对于各个层级的目标有一致的理解，形成合力。
2 如何完成好的原型设计
2.1 方法
（1）原型设计的道、术、器
原型设计是互联网PM的核心能力，其提升必然伴随着对器的精通，术的掌握，道的理解。很多PM的原型设计能力还停留在器的层面，简历中号称精通Axure和墨刀等各种原型软件。其实只是刚刚入门罢了。希望这篇文章能够让大家领悟一些原型设计的方法和思想，从而知道自己的原型该如何设计会更好。
- 器-原型软件
原型设计的软件就是所谓的器。
- 常见的器
Axure、墨刀、mockplus，纸笔。
- 器的选择
建议从适合当下工作和适应你的成长2方面来综合选择。推荐Axure或墨刀，前者功能全面强大，后者专注于快速创建APP原型。
- 器的学习
古语有云：工欲善其事，必先利其器。建议采用“看视频入门+看文章精通”的学习方式。比如Axure的学习，可以看小楼一夜听风雨的视频教程，尹广磊的论坛帖子。
- 器的精髓
正确了解每个功能的适用场景，以及具体用法。深刻理解动态面板，中继器，内联框架等高级功能的设计理念，并善用之。清楚知道什么时候该用什么元件来画原型，最简洁最贴近产品。
- 术-原型画法
画原型的方法就是所谓的术。
- 常见的术
App原型以375×667分辨率设计最适合。善用元件库，可以快速画出线框图。善用动态面板，可以绘制常用交互效果。善用母版，可以减轻不同页面的重复工作量。善用页面快照，同一线框图无需拷贝和重复修改。
- 术的学习
古语有云：器欲尽其能，必先得其法。这里的法就是术。说下我的土方法：多实践，多踩坑，多总结。另外起点学院的部分线下授课挺有价值，可以尝试。腾讯课堂也有原型设计视频教程，也很不错。
- 术高于器
术是可以脱离器的。换了器，术依然有效。比如从Axure换成墨刀，你画原型最佳的尺寸还是375×667。懂得了母版的用法，换个原型软件照样可以快速产出原型。
- 道-产品框架的搭建
原型设计的思想就是所谓的道。
- 常见的道
设计原型最适合应该采用逻辑分辨率，而不是物理分辨率。如果原型要兼容所有主流手机屏幕，请选择最中间的逻辑分辨率。同一功能需要出现在多个页面，应该采用公共组件的思想来设计。
- 道的学习
多总结自己的原型设计经历，可以提炼出道。看别人的原型尤其是rp文件，可以模仿对方的道。反思原型软件的功能为什么这样设计，可以悟出对方的道。
- 道高于术
术是方法，道是理论。术是具象的操作，通过方法可以快速产出原型。道是抽象的思想，通过理论可以落地得到方法。
- 器不是道
很多PM自以为学会Axure的酷炫交互，就可以做好原型设计。同样的，会用Axure画高保真原型，也不代表你的原型设计能力很强。
- 道术器的关系
道指导着术，术落地成器。拿上面的例子继续说：因为：同一功能需要出现在多个页面，应该采用公共组件的思想来设计。所以：我们应该去使用母版来设计同一功能。最后：在母版中画出这一功能，然后引用到多个页面。总结如果能够理解本文的大部分内容，相信你的原型设计能力已经入门。如果运用过其中的方法或者总结过相似的理论，那么你的原型设计能力肯定很精通。
2.2 原型三要素
原型是产品设计阶段最终的交付物，产品经理设计完成的原型要交付给研发团队、UI团队、UED团队进行产品研发阶段的相关工作。所以原型的目的就是让接手下一个阶段工作的小伙伴可以清晰了解产品经理的产品设计思想，可以按照产品经理规划的愿景设计产品，避免打造出一款与最初设想截然相反的产出物。在一般产品流程中，原型都是与PRD文档一起作为产出物出现的，不过PRD文档不是本文的讨论重点，本文的重点在于如何画出一个简洁、清晰易懂的原型。本文将一份简洁易懂的原型分为了三个部分：原型元素、元素注释、功能埋点。这三部分适用于大部分的产品原型组成要素，当然还会有本文没有涵盖的内容，可以根据具体产品具体场景个性化”增删改查”。
（1）第一要素：原型元素
原型元素为原型当中组成的最基本元素，如原型当中的文字、按钮、图片等等。这其中依据元素是否会改变、是否可操作又细分成了三类。
- 展现元素
展现元素为原型当中最基本的元素，文字、图片等不会发生改变的元素。如原型中的标题、展示图片等等。
- 可操作元素
可操作元素指用户在使用产品过程中，可以与用户之间发生交互效果的元素。1）按钮按钮是原型中比较常出现的元素，如表单的提交按钮，内容点赞按钮等等。2）跳转链接跳转链接指通过点击会跳转到相应页面的元素，跳转链接可以是文字、图片，也可以是产品导航类链接，如APP当中的Tab标签、功能跳转以及返回、分享功能链接等等。3）多媒体元素多媒体元素指产品原型当中需要对用户展现的音频、视频以及动态图片等多媒体内容所使用的组件。
- 输入元素
输入元素为用户在使用产品时提供数据输入功能的元素，最常见的有用户注册时需要填写的表单数据，或者是用户回复、评论内容的输入框。
（2）第二要素：元素注释
单纯的元素罗列在原型是无法满足产品研发团队的需求，根据元素类型的不同和可能产生的不同状态，需要对相应的元素加以注释，尽可能穷举元素的所有可能出现的状态和问题。
- 元素规范
元素规范主要指元素在原型中的展现形式，如大小、位置、排版以及是否自适应屏幕等。另外针对于输入元素，要明确输入内容的规则，对输入内容的验证以及提示等。
- 状态转换
状态转换针对于可操作元素而言，用户对元素进行操作后，元素会出现几种状态。如用户点击点赞按钮后，点赞数自动加一，点赞按钮变成已赞，当再次点击点赞按钮时，点赞数自动减一，点赞按钮回复初始状态。在描述元素状态转换时，一定要尽可能将所有可能出现的状态穷举罗列，并辅助说明状态转换的逻辑以及可能出现的问题。这样做的目的在于让研发团队尽可能明确业务底层逻辑，减少bug出现的几率。
- 页面跳转
页面跳转指用户点击相应跳转链接后会跳转到指定页面，这类注释主要针对跳转链接类元素，在注释时注明要跳转到的页面。关于页面跳转设计，可以在产品流程设计中的页面流程设计进行详细规划。
- 交互说明
交互说明指用户的某些行为是否会对产品产生影响，如资讯类产品在阅读内容详情是，在当前页面从右向左滑动就会自动阅读下一篇文章。类似这类的交互动作，如单击、双击、屏幕滑动等，如果你的产品对于这些交互有不同的表现，也要在原型中进行相应的注释。
（3）第三要素：功能埋点
在产品上线后对产品功能、流程进行数据分析时，如果需要从产品自身数据库中提取数据，就需要在产品设计阶段对功能进行埋点。如对于电商原型页面的功能埋点，在用户点击加入购物车、点击结算等相关动作元素上进行埋点，利于后期对电商业务漏斗模型的数据分析统计提供数据支持。对于功能的埋点一定要在定义数据关键指标时有所明确，这样在画原型时，可以对每一个页面需要埋点的功能进行突出注释。
- 实战案例-BPApp
本案例中的原型选自之前产品经理知识体系系列文章中的案例：BestProduct，下面仅选取了几个页面进行说明上面提到的画原型技巧。
2.3 流程
那如何从哪些方面系统地去画原型？在实践与学习之中，我个人总结为3个步骤。下面贴出我的思维导图：
（1）需求
首先，需求，即什么人在什么场景下为了什么目的使用什么功能。这里要注意要综合用户和我们的需求，并将其融入到产品设计中。比如用户喜欢在新年期间听取吉祥话，求到幸运签；而我们希望透过这个活动促进用户分享，进而提升品牌曝光率。所以落实在产品设计中便是流程的趣味性及分享机制的设计。
（2）入口
其次，入口，即用户从哪些地方获知我们的活动，或者说用户从哪些地方进入活动页面。这里要注意收集及穷尽入口，设计时不要有遗漏，让技术能够完整开发，测试人员能完整测试，保证活动的传播效果。在自己实践中，因为在入口处只粗糙交代了几个，导致在项目后期开发及测试对入口存在不该有的疑惑点。
（3）设计
最后，设计。清楚知道需求与入口，但还是不太知道怎么下手原型，其实出在几个问题上：不知道流程怎么画。不知道页面怎么设计。不知道控件怎么设计。不知道用户体验方面怎么设计。我用一句话介绍我的设计思路：从步骤到页面，从元素到控件，进行后续设计。
- 从步骤到页面
描绘业务流程及用户操作流程→ 将流程转化为页面。首先，怎么去描绘流程？我将其分成两点：1）业务流程首先，我们需清楚线下场景，明确其中有哪些人物参与哪些任务。然后回归线上，利用系统替换其中的角色。比如，线下用户求签的场景中，人物包括用户及解签人，任务包括摇签，出签及解签。系统可以替代解签人的角色及其任务。2）操作流程
先明晰用户操作的主流程，然后再去穷尽分支流程。不要过早地陷入分支细节中，而忽视了主流程的清晰性及简洁性，深深打击用户体验。然后，怎么将流程转化为页面呢？将流程命名为页面。比如进入活动首页—填写信息—获取结果可依次命名为落地页-编辑页及结果页。明确页面目的。好比结果页要引导用户分享。
- 从元素到控件
填充元素 → 转化控件 → 页面流转
- 填充元素：围绕任务设计元素辅助用户完成任务。比如：编辑页的任务是填写信息。所以应具备可填写信息的元素；为了让用户简单顺利完成任务，还需加引导元素。转
- 转化控件：将元素转化为一个个控件比如点击按钮，文本框等。比如根据“填写信息”设计文本框；根据“引导元素“设计动画等。
- 页面流转：通过控件描绘页面跳转的关系，将各页面通过连接线连接起来。好比点击编辑页的确认按钮，用户进入结果页。
- 进行后续设计
包括视觉逻辑以及功能预见性。这里就简单提一下：
- 视觉逻辑：通过上述设计步骤后，页面就是一堆元素累积的大杂烩。所以需要有清晰的视觉层次以及良好的视觉流结构。
- 清晰的视觉层次：通过组织让用户意识到元素间的相关性，通过突出元素将用户引导到重要的元素。良好的视觉流结构：视觉焦点的设置不宜过多，导致用户视觉不断跳跃。
- 功能预见性：要让用户看到就知道如何操作。
原型设计后，到撰写PRD，下一节将向大家谈谈PRD的撰写写法，稍后期待~
2.4 操作技巧
根据我对原型软件的了解，总结出七种武器可以达到这样的效果。Axure&墨刀&Mockplus都有这几个功能。下文以Axure来演示讲解。尽量从功能的设计初衷和使用场景来给大家讲方法论，不会涉及到功能的具体操作。这样对功能的理解会深入透彻，而不会浮于表面。
（1）母版
当你需要在多个页面重复画出相同元件的时候，请使用母版。具体场景有：①画APP原型的时候，每个页面的框架是不变的，可抽离出来作为母版。②APP原型的下导航是固定的，显示在不同的导航页面中。可抽离出来作为母版。可参见文章《原型设计：APP下导航如何通过Axure画出来》
（2）中继器
当你需要画多个同样组件的时候，请使用中继器。具体场景有：①比如APP原型中经常有消息列表&卡片列表&文章列表，他们就可以使用中继器简化步骤。②比如APP的下导航按钮是相似的，可使用中继器快速画出。
（3）格式刷
当你需要给多个元件设置同一种样式的时候，请使用格式刷。具体场景有：①比如APP原型的下导航一般有4-5个按钮，设置了一个按钮样式之后请用格式刷去把样式复制给其他按钮。而不是傻乎乎的一个个去设置样式。②比如Tab分段控件也是应该用格式刷来批量改样式，比如淘宝App的我的订单页面顶部的“全部-待付款-待发货-待收货-待评价”。
（4）元件库
当你需要快速画出线框图时候，请使用元件库。具体场景有：①比如你需要画电商APP原型，社交APP原型这些常见的产品，那么网上肯定有很多元件库提供下载。然后你用它们就可以快速完成一个APP。②比如你可以把你常用的图标、元件、组件，哪怕是页面，创建成一个元件库。然后方便自己运用到后续的项目中。（5）页面快照当你需要引用某个页面的内容去表述的时候，请使用页面快照。具体场景有：①比如PM完成此次版本原型，需要一次性将所有页面平铺起来，供视觉设计师了解需要做哪些页面和具体内容。②比如需要画一个已有页面的内容，不用再话一次而是使用页面快照。（6）自适应视图当你需要同时为多个平台画原型的时候，请使用自适应视图。具体场景有：①比如你们的产品需要满足Web和App环境使用，那么没必要设计两份原型。而是基于其中一个平台的原型，使用自定义视图之后去修改兼顾另一个平台的原型。可参见文章《PM如何使用Axure制作电脑手机通用的Boss简历》。②比如老板希望你的原型可以在不同的屏幕上面预览并展示给甲方爸爸看，那么最简单的办法就是自适应视图来快速完成。（7）导入他人原型源文件当你需要直接使用他人原型内容的时候，请使用导入RP文件。具体场景有：①比如你来到一个新团队，一般需要把前任的原型拿过来在此基础上修改并画出新功能新模块，这样可以快速体现自己的新人价值。②比如你从网上找到一些和你项目相似度很高的项目原型，那么直接把它们的rp源文件导入到自己的rp中是最快的学习方法。
2.5 注意事项
很难想象，如果没有原型设计，如今的数字产品设计流程会变成什么样。原型的存在，让产品团队在制作和开发过程中更加直观，就像那句话说的：展示，而非表述。现如今，许多产品团队借助原型来测试想法，甚至销售产品。不过，原型设计本身并非是万无一失的，设计师依然会面临许多陷阱，并且拖累整个产品的进程。今天的文章，总结了6个常见的原型设计的陷阱。
（1）目标不明确的原型设计
我们先设计出来，然后弄明白如何使用它。
在这种说法的指引下，设计和开发团队需要花费大量的时间来处理那些没有任何价值的事务，在没有特定目标的情况下制作原型，会浪费大量的时间。每个原型的设计目标应该是非常明确的，原因应该是清晰的。这个目标可以是源自于一个特定的想法，或者某种假设，产品团队在这个方向的指引之下，利用系统化的知识来构建符合目标的原型。在创建原型之前，设计师应该问自己一个问题，「通过创建这个原型我们要试图解决什么问题？」如果能够找到一个明确的答案，那么这个原型是清晰且具有凝聚力的，有助于减少潜在的开销。
（2）对第一个想法精雕细琢
产品团队常常在拥有第一个想法的时候，就想坚持住，将它打磨成为最终的解决方案。随后，团队花费大量的时间来出揣摩尝试，调整细节，制作原型，甚至直接开始设计视觉稿。结果，花费无数小时创建和打磨的原型，在可用性测试早期，就呈现出不理想的状况，接下来，设计师和团队会意识到最初的想法其实不够好。经验丰富的团队知道，想要探索和测试一系列的想法是必不可少的，只有完全想清楚产品，才开始设计原型。
（3）爱上你的原型
原型的设计者常常会对于自己的设计有大量的投入。这种投入是会造成一种「投资偏见」——你在某个事情上花费的时间越多，它对你来说就越有价值。值得注意的是，它对于你的价值会越来越高，但是对于别人而言并非如此。而原型设计同样如此，当设计师对于自己的原型过度沉迷的时候，产品可能就会暴露在危险之下了：你会很容易忽略它们存在的缺点，即使这些缺陷很明显，设计师也会忽略团队成员和其他人的反馈。不要拿原型当传家宝。在打磨原型上花费太多宝贵的时间和精力，会剥夺设计师对于反馈应有的注意力和敏锐度。让你的原型在细节和复杂度上保持在一个合理的度上。
原型并不是艺术品，它应该是帮你找到答案的工具。
如果你倾向于采用尽可能完善的设计，那么请采用最小可行原型——添加足够的细节，但是尽可能确保可行。将原型视作为一次性的工具。每个原型都有特定的用途，一旦达到目标，就尽可能用更好的东西替换它。
（4）忽略草图的重要性
「当我们拥有强大的原型工具的时候，为什么还要使用纸和笔呢？」设计师跳过手绘阶段，并且直接使用计算机来绘制数字原型的时候，他们相信数字化的设计是可以节省时间的。但是实际上，手绘的草图能够帮助设计更快地起步。当你下次不知道如何解决问题的时候，可以试着从笔和纸开始绘制草图。只需要开始绘制草图，勾勒出所能想到的变化，然后把它们贴在墙上，并且和你的团队一起从技术和业务的角度上讨论可行性。
（5）为原型选择错误的保真度
保真度是描述细节程度的一种度量，我们常说的线框图细节简略，是低保真的，而视觉稿则常常会用到丰富的细节刻画，它是高保真的。原型的呈现形态是非常多样的，可以是低保真的也可以是高保真的。制作一个高保真的原型是非常诱人的，但是一定要抵制住这样的诱惑。值得注意的是，原型的保真度应该和你想法的保真度相匹配。这意味着，设计师应该根据他们的设计过程所处的阶段来选择保真度。当设计师违反这一规则的时候，往往会带来糟糕的结果。比如过高的保真度会让处于早期阶段的设计师陷入「投资偏见」。当团队设计产品尚且处于初期的时候，尽量采用低保真的策略来进行绘制，比如使用草图。△ 低保真的草图原型当你想要与真实的用户一起测试你的想法的时候，尽量使用保真度更高的设计，比如数字化的可交互的原型。使用高保真的原型来进行可用性测试，能够产生更真实、具体的反馈。高保真的原型展示给利益相关者来看也非常有用，他们会更好地判断产品的功能和内容。△ 在 Adobe XD 中创建高保真的原型因此，考虑最终的目标和你所拥有的时间，来确保原型的最佳保真度，尽早与期望达成一致。结语原型设计在每个产品设计项目当中都是至关重要的，正确地设计原型，才能尽早地构建真实的产品。One more thing关于原型设计，乔布斯在1992年 MIT 的演讲上说到的一个事情非常有意思。彼时，他还未回归苹果，而是在制造名为 NeXT 的高端电脑，并且对于面向对象编程有着极高的热忱。
我们已经有2年时间没有构建任何工程上的原型了。这意味着，从产品开始设计的第一天，工程师和整个制造业就已经参与进来了。很多时候，在构造原型的时候，生产工具和技术根本是无法与之匹配的，而当你在原型设计的时候所积累的东西，在投产的时候就得完全抛弃，然后重新开始。因为我们始终紧密地和技术结合起来做，因此我们不会抛弃任何东西，并且不浪费时间，这也是我所见过的设计、工程和制造团队之间，最健康的关系之一。
现如今，身为设计师的我们在使用 Photoshop、InVision 等工具制造原型的时候，实际上开发可能是与之脱节的。产品团队中，设计和开发之间的矛盾，从来没有仅此减少过。而「全栈设计师」这一概念的提出，又何尝没有来自这种矛盾的压力呢？诸如 Sketch 和 Figma 这样的新工具在做原型设计的时候，已经或多或少地开始在设计和开发之间找到协同的点，试图在设计验证和技术验证之间，找到结合的办法。更好的原型设计，更合理的技术和设计的结合点，这也许是我们未来的探索方向吧。
3 举例一、我临摹了7款产品的原型，总结出这些原型图经验
3.1 主题
通过为期一周的原型图绘制练习，深刻理解原型图设计的核心，为自己产品道路未来发展打好坚实基础。在6天中临摹了7款成熟产品（包含36氪、网易云音乐、微博、腾讯视频、In、支付宝、美拍），共18个页面。
3.2 收获
（1）心态的打造
产品经理工作最容易被人忽视的误区之一：敷衍、无所谓的心态画原型图。在设计原型图时就必须以严谨、认真的心态去面对。很多初级产品经理或者从事多年产品的人都忽视了原型图设计这个最基础也最重要的能力，产品经理本来输出内容就不多，多数情况都是原型图和需求文档。在“人人都是产品经理”这个大旗下，绘制原型是一个多么简单又基础的工作，只要会使用axure工具就可以画原型了（连程序猿都可以办到）。但原型图和需求文档是产品经理最基本的输出，因为基本、简单，却又包含了最深刻的原理在里面—-设计的过程和想法的表达。在我练习原型图一周后深刻认识到原型图的重要性，并总结了以下心得：
- 借鉴成熟产品时学会思考别人产品的设计原理，不要仅是简单的抄袭和模仿，却不知为何这样设计；这样做有两个问题：其一是我们没去分析别人为什么这么做，在不同场景下设计方式不一定适合所有情况，也许在你的产品里就不适用，反而起到反效果；再者是只会简单的模仿，其实你就永远比别的产品慢一步，并且你会渐渐丧失作为一个产品人最核心的能力—-深入思考。
- 面对同类产品的不同设计方案时，学会对比分析，从布局方式、视角顺序、参数选择等去综合思考；
- 忌讳浮躁、不认真、不思考、机械抄袭的设计方案；
- 在以上3点的前提下可以建立如下好处：在开发介入前即可进行“不存在的产品迭代”，而非等到产品开发上线后再去思考如何迭代；靠原型图进行推演模拟用户使用场景和用户感受。
- 如果没有正确的去面对原型图设计，必然导致设计的原型都是粗糙和敷衍的，是无法做到“不存在的产品迭代”这个核心理念的。
（2）文章详情页设计分析
在临摹资讯产品的资讯详情页时，就遇到了最典型的同类产品在资讯详情页的不同设计理念，对比今日头条和36氪两种设计方案之后，才发现原型设计的真正伟大之处是一种妙不可言的感悟和体会，只有在用心去透彻分析和理解设计的原理才会发现一切核心都在细节微妙处。产品经理常常喜欢把用户体验挂在嘴边，而真正的体验则都是从细节做起，我们都学会了去说的更好而不知道如何做好，体验到底该怎么做？可以细化到一句文案的顺序变化、词语的调整，都会导致用户对产品体验发生质的转变，产品设计就是把细节打造完美，而打造细节就在于不停的去通过不同设计方案的对比、分析、思考得出最优设计方案，也即一个打磨产品原型的过程。我们以资讯详情页在设计菜单栏和标题时的四种方案来做分析讲解；四种方案分别如下：
- 深色标题栏+标题居中
- 深色标题栏+标题左对齐
- 透明标题栏+标题居中
- 透明标题栏+标题左对齐
首先看无标题栏设计（透明标题栏）这种方式，它在产品设计中是不常见的，一般产品做法都会把顶部标题栏用深色做突出，为的是让用户视角更好的注意到标题栏去操作一些重要功能。而透明标题栏的设计好处在于通过借助颜色的使用（颜色跟内容底层一致），让用户感觉不到标题栏的存在，可以在产品整体视角空间上显得更加“宽广”一点，而标题栏的存在会压缩人们的视角空间，将应用面积变小了（举个栗子：网易云音乐把皮肤换成白色）。而在资讯详情页中，“透明标题栏”的设计方式所传达的视角效果就完全不一样了，因为透明标题栏的设计在这里会让人觉得文章标题并不在“顶部”，而是在“顶部偏下”的位置，因为“上面是空的”，并且因为“上面是空的”给了一种内容的视角延长，在标题“暗示”上就显得弱化了（举个栗子：36氪）。反例就是今日头条，通过“深色标题栏”的设计就会让人认为文章标题已经在“顶部”。在上图中我们可发现，36氪和今日头条的标题设计方案也有细微差别。36氪的标题是居中设计，这样的设计原理是因为不规则形状所产生的割裂感能把标题和正文内容非常明显的进行区分，而今日头条的标题左对齐设计方式则无法达到不规则性质所产生的视角效果。从这里我们可以发现，没有一种设计方案是绝对正确或适应所有产品应用场景的，通过在不同产品同样的“透明标题栏”设计，所产生的效果是不一样的。
（3）同类产品的不同布局
在很多时候我们也很容易忽视这样一个事实：即同行业、相同目标用户的同类产品，也需要考虑其产品的不同点导致最终产品的不同设计方案和最终展现形态。不同点主要会在这几个方面：产品核心价值观不同、产品定位不同、产品核心功能不同、应用场景不同。继续来举个栗子：同是音乐类产品的网易云音乐和QQ音乐，我们仔细观察也会发现很有意思的地方。云音乐跟QQ音乐最大的区别在于核心功能上，云音乐核心功能是推荐，QQ音乐是搜索。由于产品价值观和核心功能的不同，造就了他们在设计方案上的天差地别。云音乐的搜索功能是在操作最不方便且处于视角盲区的右上角，但即使如此也不影响云音乐整体的产品架构，因为云音乐核心功能在推荐，而不需要通过频繁的使用搜索功能才能找到自己喜欢的音乐。而QQ音乐则把搜索功能以搜索框的形式放在了顶部菜单栏的中间，从视角上更突出该功能的重要性。
（4）产品颜色
在大量成熟的产品中，我们也可发现一些关于颜色的使用规律，虽然产品色彩搭配是由UI来负责，但最终产品整体呈现效果还是需要我们产品经理来审核把关。在色彩的选择上最忌讳把设计图要求做的各种好看和酷炫，其实设计师和普通人一样，都有自己的审美观，一味追求漂亮和酷炫，而忽视特定的用户、特定的场景、特定的需求，这样的设计图方案是无法为用户创造任何价值的。通过观察和临摹多个成熟产品发现好的产品一定是非常突出和容易识别产品主色调的，在色彩上同样讲究简约原则。一般情况产品不会超过3种色彩搭配，颜色过于复杂，会加强人们对于信息的辨识难度，造成不必要的信息干扰。
（5）如何分析一款产品
市面上成熟的产品可以给予我们参考和借鉴的意义，给予我们自己设计产品做出方案上的引导，但是如何去分析一款产品并结合到自己的产品上则成了关键。我总结了这几个绘制原型图的核心维度：页面布局、核心功能位置、视角顺序及视角落脚点、参数的选择及位置（参数选择围绕需求、核心功能、产品动机来决定）、元素间层次关系。元素关系可以通过颜色、大小和形状的不同来进行区分，具体在原型设计中可以通过间隔线区分、系统底层留白、不同颜色板块区分等方法来打造清晰的元素间层次关系，让相关联的元素排列在一起，使得产品的整体层次感更加有条理。
（6）原型绘制的小细节
原型设计初始阶段不建议使用最深的颜色来表达，给颜色降一维，让真正需要使用深色去突出某功能时留出一定空间。
（7）临摹作品展示
资讯详情页4种方案对比透明标题栏+标题居中，透明标题栏+标题左对齐深色标题栏+标题居中，深色标题栏+标题左对齐
3.3 过程感悟
（1）为什么要画原型图
- 绘制的过程=设计的过程；绘制的结果=想法的表达；
- 注重设计时的思考过程，如何更好表达对产品的理念和想法，而不是机械抄袭；
- 认识不同设计方案的原理、作用和使用场景，通过多种设计方案对比和分析，扩展自己原型设计的素材，应对将来设计产品时有灵活方案的选择；
- 进一步熟练掌握参数选择、页面布局、功能位置、视角顺序、元素关系等核心技能；
- 从原型设计中可初步简单体会产品的取舍之道；
（2）怎么画原型图
- 认知模型：根据产品核心功能和功能结构，思考页面整体布局，功能的摆放位置，如何突出核心功能，如何建立视觉顺序，如何建立元素层次关系，如何选择重要参数；
- 绘制原则：先动手，再思考；
- 采用素材：基本素材（线、框、字）；
- 隐藏素材（距离、颜色、大小、图案、透明度、位置）；
- 绘制过程：原型整体框架搭建（系统底层→顶部操作层→内容底层→元素层）；
- 页面设计流程是由布局→参数→元素关系（思考逻辑是正向流程，分析验证则是反过来，如果元素关系不满足就修改参数，参数不满足就修改布局）；
- 原型图的核心：设计的过程和想法的表达、参数的选择、视角顺序。
3.4 文末
任何一个越基础的技能越核心，因为越基础越具有通用性，所有高阶技能都是由基础技能演变升级而来，而很多让人心血膨胀的高段位技能因为太专业反而不具有通用性，只能解决某个固定的问题。打好坚实基础是我们身为产品经理必修之路，为未来的成长建立正确的认知，切勿因为浮躁、看不起的自傲心态而走向认知上的弯路。
4 举例二、使用Axure设计中，大型的后台系统原型总结
在产品原型设计中，经常会涉及到后台系统原型的设计，如何设计出更规范标准的后台系统原型，是很多产品同行们都会遇到的一个问题。本人结合自己实际的多个后台系统项目经历以及使用Axure的经验技巧，从方便维护和便于复用等角度出发，总结出了这篇关于后台系统原型设计的分享内容，希望能帮助到一些有需要的朋友们。
4.1 确定框架结构和布局方案
在正式开始设计一套后台系统原型之前，我们需要先确定它的框架结构。我们都知道产品的框架结构相当于它骨架，对于原型设计来说是同样的原理，当框架确定之后再填充完善里面的功能模块就会轻松很多了。后台系统的结构其实一般都比较固定，主要以下三个部分组成：
- 导航区域（Logo、导航菜单）；
- 功能区域（账户信息、系统消息、退出登录）；
- 内容区域（数据列表、录入表单）。
一般为了方便操作和在多个模块中快速切换，后台系统的导航区域和功能区域都是固定在页面的顶部或左侧的，主要的刷新区域只有内容区域。所以我的做法是将三个部分放在一个框架页面内，将内容区域使用内联页面进行链接，使用导航菜单实现内容页面的切换。这样的处理有几方面的好处：
- 方便对内容页面进行修改和维护，不需要在每个内容页面中管理导航区域和功能区域；
- 可以结合函数实现自适应的浏览效果（第二部分会详细说明）；
- 原型设计完成之后导出的文件会更轻量，加载起来会更快。
前面介绍到了后台系统的框架都比较固定，所以它的布局相对于前台产品来说其实更简单清晰，目前主流的一般都是上下结构或左右结构两种。这两种结构一般能承载大部分中大型后台系统的设计需求，在实际的项目中可以根据需要选择对应的框架。以下是我使用Axure设计的一套后台系统模板，分别使用了两种布局方式（只是框架页不同，内容页面是同一套），其中的内容区域都使用了内联框架，点击演示地址可以进行体验。
（1）左右结构框架
点击查看演示图中的1为导航区域、2为功能区域、3为内容区域，使用内联框架链接。
（2）上下结构框架
点击查看演示图中的1为一级导航区域、2为功能区域、3为二三级导航区域、4为内容区域，使用内联框架链接。
4.2 在Axure中进行结构框架的搭建
如果我们已经选择了一套框架和布局方案，第二步就可以在Axure中建立框架页开始结构的搭建了。以上下结构的框架为例，在搭建框架时需要先新建一个顶部的动态面板（包含一级导航区域和功能区域）、一个左侧的动态面板（包含二三级导航区域）、一个内联框架。图中的1为顶部动态面板、2为左侧动态面板、3为内容页面内联框架界面中各部分元素的尺寸值分别是：顶部动态面板宽1366px，高50px、左侧动态面板宽200px、高800px，内联框架宽1166px、高800px。这套尺寸值并没有严格的标准，在实际设计时可以根据需要进行调整，但是内联框架的宽度的不能小于内容页面的尺寸，否则在演示时内联框架会出现横向的滚动条。除此之外，还需要进行下列设置。在框架页面的样式中设置页面排列方式为居左对齐。在左侧动态面板属性中设置“自动显示垂直滚动条”。在内容框架属性中“选择目标框架”，框架目标为加载时的默认显示页面。同时设置框架滚动条为“自动显示或隐藏”，将“隐藏边框”选框勾选。
4.3 使用函数实现框架自适应效果
在完成框架结构的搭建并填充好菜单等基础元素之后，如果我们需要实现演示时框架像真实的后台系统环境一样在浏览器中的自适应效果该如何处理呢？这时我们需要用到动态面板的特性以及Axure的函数。首先是顶部动态面板的处理，一般顶部区域都会有一个背景色，在动态面板的样式中设置背景色就可以了。设置完背景色之后需要再在动态面板的属性中勾选“100%宽度”，这样在预览时就可以看到顶部区域的背景在浏览器实现了100%的填充效果。实现框架自适应效果的关键是函数的运用，它的原理是运用页面窗口尺寸改变时获取浏览器窗口的高度和宽度，通过获取到的高度和宽度值改变左侧区域和内容框架的尺寸，实现在浏览器中的自适应效果。具体设置方法如下：
- 在页面属性中设置窗口尺寸改变时事件；
- 设置左侧菜单(左侧动态面板)高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么左侧菜单的高度是800px-50px=750px；
- 设置内容框架(内联框架)的高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么内联框架的高度是800px-50px=750px；
- 设置内容框架(内联框架)的宽度为：[[Window.width-200]]，200为左侧菜单的宽度。例如浏览器宽度为1366px，那么内联框架的宽度是1366px-200px=1166px。
在页面属性中设置窗口尺寸改变时事件，利用函数实现自适应效果以上就是通过动态面板和函数的设置实现的框架自适应效果的方法。其中有些细节可能需要大家在设计时进行一些摸索，不过如果你通过个方法搭建好了一个自适应的框架效果，是可以快速复用到其它类似的项目原型中的。
4.4 使用动态面板和函数快速设置多层级菜单
一般在后台系统中都会有多层级菜单，以上下结构的框架为例，顶部动态面板区域中的菜单为一级菜单，左侧动态面板为一级菜单对应的二级菜单。这个时候需要用到动态面板，实现点击一级菜单时，二级菜单进行状态切换的效果。一般的做法是在一级菜单中对应的元件上添加点击事件，设置二级菜单的动态面板为指定的状态。当有多个菜单的时候，单独去设置每个一级菜单的点击切换状态是很麻烦的，而通过函数则不需要对每个菜单进行单独设置。具体设置方法如下：
- 将二级菜单动态面板中对应的状态名称跟一级菜单的对应的元件文本内容修改为一致；
- 在一级菜单中对应的元件上添加点击事件设置二级菜单动态面板状态，选择状态为Value，设置状态名称或序号为：[[This.text]]；
- 这个设置的方法是能过[[This.text]]函数获取当前元件的文本，然后设置目标动态面板状态为当前文本对象。
只需要这两步就搞定了多层级菜单的快速设置，这个方法是动态面板结合函数的一个小的运用，大家只需要灵活运用可以用来处理很多类型的交互效果，相信会大大提升你的效率。这篇分享主要介绍了关于后台系统框架的搭建，有兴趣的朋友可以参考一下其中的方法和技巧。为了便于大家能对一些知识点进行消化和理解，决定将这个分享分为上下两篇发出来。在下篇中我将介绍关于后台系统原型设计的一些规范和细节处理技巧，同时还会提供一个框架模板的源文件供大家进行参考，请有需要的朋友关注。Axure函数对于首次使用的朋友来说能会稍感复杂，不过只要理解了它的设置原理也是能快速掌握的。如果能掌握一些基础函数的使用方法，是可以运用到很多原型相关的细节处理中的。本分享中只是涉及到了一部分基础函数的使用，如果需要了解函数的更多使用方法可以访问以下链接。AxureRP 8函数及运算符说明文档：http://www.axureux.com/home/functions.html
4.5 关于框架自适应的补充
在上篇分享中介绍了使用函数获取浏览器窗口的宽高值，然后赋值给相关的界面元素以实现框架的自适应效果。其中有一部分设置我在源文件中实现了但是没有展开进行说明，有些观察比较细致的朋友发现了并提出了相关的疑问，所以争对这部分再详细说明一下。在页面属性的“窗口尺寸改变时”的事件中，大家可以看到两个条件用例。1是设置当窗口的宽度大于1366时，2是设置当窗口的宽度小于1366时，这两个条件用例中所设置的相关元素的宽度是不一样的。截图标注1，当窗口的宽度大于1366时：
- 设置左侧菜单(左侧动态面板)高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么左侧菜单的高度是800px-50px=750px；
- 设置内容框架(内联框架)的高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么内联框架的高度是800px-50px=750px；
- 设置内容框架(内联框架)的宽度为：[[Window.width-200]]，200为左侧菜单的宽度。例如浏览器宽度为1366px，那么内联框架的宽度是1366px-200px=1166px。 截图标注2，当窗口的宽度小于1366时：
- 设置左侧菜单(左侧动态面板)高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么左侧菜单的高度是800px-50px=750px；
- 设置内容框架(内联框架)的高度为：[[Window.height-50]]，50为顶部菜单的高度。例如浏览器窗口高度为800px，那么内联框架的高度是800px-50px=750px；
对比一下会发现，当窗口的宽度小于1366px时未设置内容框架的宽度，这样设置的主要目的是为了不让内联框架出现横向滚动条。如果在将低于1366px的屏幕分辨率上演示时，会出现内容页面的宽度超出获取到的内联框架宽度的情况，这时在框架页中的内联框架就会显示出横向滚动条。通过这个设置可以保证内联框架始终不会出现横向滚条，只会出现页面的横向条滚动条。当然，如果你不需要在低于1366px的屏幕分辨率进行演示，就可以不需要进行这样的设置。截图标注3，设置功能区域的绝对位置。这个设置的作用是获取浏览器窗口的宽度，减去功能区域动态面板的宽度，使功能区域的动态面板始终保持定位在最界面的右侧区域。
4.6 梳理功能分类和建立站点地图
在开始进行相关功能页面设计之前，我们需要先对后台功能进行总体的梳理和分类，这个工作我一般会借助脑图工具来进行。后台系统功能主要是对前端业务进行管理，所以梳理过程中必须重点关注前端的业务逻辑，这是体现产品人员对需求或业务理解程度的一个重要方面。科学合理的功能分类能使得开发人员快速的理解需求，同时也直接会影响到系统上线后的用户使用体验。(顺便吐槽一句，可能很多公司的后台系统没有用户体验一说。)功能梳理需要遵循从粗到细的过程，首先整理出一级大类的功能结构，再基于大类思考它需要哪些子功能，以及子功能中关联的各项参数设置。以一个电商平台后台系统举例，它的一级大类基本包含了：订单管理、商品管理、会员管理、库存管理、内容管理、运营管理、财务管理、统计查询、系统设置等，其中订单管理的子功能一般由订单的查询和订单相关属性设置组成。在这个思考整理的过程中，我们可以将功能分类用脑图列出来。在功能分类时尽量把相关联的子功能或模块放在同一个大类中，同时需要注意分类的层级深度不宜过深。分类的层级深度关联到导航菜单的设计，一般来说层级控制在二三级以内最好，最好不要超过四级。如果功能分类已经基本整理完成之后，接下来就可以使用Axure的页面管理功能来建立站点地图了。一般来说在开发一个中大型的系统项目时，基本都有多个迭代的过程，并非是一次完成设计和开发。站点地图能让我们大致评估整个系统设计的工作量，同时可以根据优先级来安排相关的迭代工作。这个工作方法同样适用于其它中大型产品的原型设计工作流程。
4.7 关于功能内容页面的设计
在开始内容页面的设计之前，我们首先需要定义页面的设计尺寸标准。如果以1366px的窗口宽度为例，我们已经在框架页面中设置了一个宽度为200px的左侧菜单，那么演示时内联框架的宽度是1366px-200px=1166px，根据这个宽度我们将内容页面的设计尺寸宽度设为1100px较为合适。如果你的屏幕分辨率较高，内容页面的设计宽度可以稍微设置大一点，但最好不要超过1300px。定义页面的设计尺寸需要用到参考线，可以通过从标尺区域向内容区域拖动新建纵向或横向的参考线，选中对应的参考线右击可以将它锁它或进行更多的设置。下面的截图中是我使用参考线的效果，两边分别保留了20px的留白区域。需要强调的是，内容页面中的内容区域是没有办法实现自适应宽度的，我们需要在页面的属性中将排列方式设置为居中排列。当在较高的屏幕分辨率中进行演示时，内容页面中的内容区域会居中显示，页面两边会有留白的效果。在内容页面的顶部会有当前页面的标题显示，通过[[PageName]]函数可以自动获取到当前页面的标题，不需要单独设置每个内容页面的标题。设置方法是在标题元件中设置载入时事件，设置载入时设置当前元件的文本为[[PageName]]。以上几点就是关于功能内容页面的一些基本设置，我们可以设置按照上述设置创建一个页面模板。后台系统的页面类型一般主要是两类：一类是数据查询类，主要由筛选区域、数据列表组成；一类是参数设置类，主要由表单字段、数据录入组成。我们可以基于这两类页面类型创建模板，然后通过复制的方式进行复用，这样可以大大提升设计效率。数据查询类界面参数设置类界面
4.8 关于统计图表的设计
统计图表是后台系统中比较常见的一种展示形式，由于Axure中没有提供图表相关的元件，所以用它来制作图表是一件令人头疼的事情。为了解决这个的问题，我们可以借助图表工具生成对应的图表效果，然后将它生成图片复制到原型中。我推荐使用百度的图表工具Echarts，它是一套开源的数据可视化工具，提供了各类丰富的图表类型，包括常用的饼图、柱状图、雷达图等。Echarts图表工具实例地址http://echarts.baidu.com/examples.htmlEcharts提供的实例支持在线编辑和保存图片，可以根据需要编辑对应的实例然后将图片保存下来，基本可以满足原型设计中常用的图表类型的需要。后续我会整理一套常用的图表类型的Axure元件库与大家分享，有兴趣的朋友可以关注一下。
4.9 使用母版管理常用元素
了解Axure基本功能的朋友应该都知道母版功能，它可以用来管理一些比较通用的界面元素，可以快速拖动到不同的界面中并支持统一修改，善用母版功能让你的设计效率提升不少。下面的截图就是我在设计后台系统中所建立的母版，其中包含了通用的顶部或底部元素、常用的分页插件和编辑器、常用的按纽元素等。母版的创建有两种方式，第一种是在编辑界面中选中对应的元素右击选择“转换为母版”，第二种是在母版管理面板中点击右上角第一个“添加母版”按纽进行创建。建议在创建的时候对母版进行命名，如果母版过多的话可以创建文件夹进行管理。
4.10 使用中继器管理列表元素
Axure里的中继器元件是用于实现动态数据的效果的，但是利于它的特征可以用来方便的管理列表元素。如果我们需要一个多行的数据列表，通常的做法是先创建好一行的元素，然后进行复制排列。如果这个数据列表有20行，我们就需要复制19行然后排列对齐，这个操作是一个很耗时而且麻烦的过程，对于有对齐强迫症的朋友来说更是恶梦。但是通过使用中继器，我们只需要创建好一行的元素，然后将它复制到中继器中，再在中断器中批量增加19行，这样的一个多行的数据排列就创建好了。中继器的创建方法很简单，从软件的元件面板中拖动到编辑界面中即可。新创建的中继器默认有3行，你可以删除掉里面的元素，然后在里面编辑自己所需要的元素即可。选中中继器元件时在右侧的属性中，我们可以通过中断器的行管理上方的图标快速的新增和删除行数。在中继器的样式管理中，我们还可以对它的样式、间距、布局方式进行设置。例如，你可以控制每行或每列显示的数量，通过这些设置可以用它来创建类型更丰富的列表方式。使用中继器生成的列表效果
4.11 整理常用的交互元素及组件
后台系统中常用的交互元素一般有菜单、图标、按纽、表单等，根据后台业务功能的需要也会用到各种定制化的选择及筛选组件。通常我会在原型中创建相关的模板页面将交互元素及组件进行分类整理。这样的做法出于以下的考虑：
- 第一，可以在设计过程中快速的复用相关的元素，在设计的时候可能需要用到某个元素时，不用再去以前做过的页面中查找；
- 第二，可以将系统中统一通用的交互效果梳理出来，提供参考示例。例如，数据提交的反馈提示、数据加载反馈等交互效果；
- 第三，通过不断的优化改造自己常用的元件类型，建立一套个人的Axure元件库，方便在以后其它类似的项目中使用；
以上是整理的后台系统中常用的交互元件及组件的部分截图，提供给大家进行参考。另外，分享给大家一套我整理的WEB元件库，其中很多组件同样适用于后台系统的原型设计。AxureUX交互原型Web元件库精简版：http://www.axureux.com/home/librariesweblite.html
4.12 图标的使用技巧和推荐
原型设计中需要用到图标的可以通过很多方式获取到，例如有各类海量的图标库搜索网站、免费的图标素材下载，还有其它同行整理好的图标元件库，大家在百度中搜索一下都能找到相关的资源。我个人最常用的是阿里巴巴的团队推出的图标分享平台iconfont，推荐它的原因有两个，首先它的图标数量非常全面，目前收录的图标数量在160万枚以上，只需要通过搜索功能就能快速检索到自己需要的图标。其次，这个平台里面的图标自定义颜色，提供SVG\PNG等多种格式的下载。SVG是一种矢量的图标格式，你可以将下载到的SVG图标直接拖入到Axure的编辑界面中，支持随意缩放而且不会失真。在Axure 8.0的3312的以上版本中，新加入了可以将SVG图标转换为形状的实用功能，只需要选中对应的SVG图标右击“转换SVG图片为形状”即可。SVG图标转换为形状后，除了支持随意缩放之外，还可以根据需要修改颜色和外观。如果你还没有使用过这个功能建议赶紧尝试一下，当然你的Axure版本首先需要升级到8.0.0.3312以上。本人推荐的另一种是FontAwesome字体图标方案，它的原理是使用字体方式实现的图标效果，在Axure中可以通过字体的特性对FontAwesome图标进行更改，包括：大小、颜色、阴影或者其它字体支持的效果。这种字体图标可以运用到很多常用的场景里，例如，用它来实现按纽的交互样式设置，用来取代默认的单选、复选、开关图标。当你在表格或列表中使用到字体图标时，可以非常的方便的像文本一样进行编辑和修改。下面的表格中所到的图片、开关、编辑等图标都是使用了FontAwesome字体图标。FontAwesome字体图标方案使用说明：http://www.axureux.com/home/fontawesome.html
4.13 不要纠结于细节的交互效果；
在进行后台系统原型设计时，不要将时间花费在细节的交互效果的实现上，例如：数据提交时成功和错误反馈、执行相关操作的确认提示、数据处理时的加载效果、下拉菜单的交互效果等等。有些追求高保真效果的同学会过度关注这些细节，会耗费很多时间在这些细节效果处理上，这样不仅会影响到输出效率而且意义不大。对于这类统一通用的交互效果，建议可以用一个专门的页面将它们梳理出来，然后再在相关页面中关联的元件中进行备注说明。到此为止，关于使用Axure设计后台系统原型的总结分享基本就结束了，如果对分享中的内容有疑问或者有什么建议可以反馈给我。这个分享中还有一些可以继续深入的细节或存在遗漏之处，以后将以其它的方式与大家继续进行分享。最后，提供一套我制作后的后台系统框架源文件给大家，希望能给大家带来一些参考和帮助。后台管理系统框架原型模板下载：https://pan.baidu.com/s/1dFbAm5r
5 举例三、后台原型五大要点
对于很多初次设计后台的产品经理而言，原型是个很大的问题，因为平时接触的少，竞品又难以获取，连个抄的地方都没有，所以即使胸中需求千千万，也不知道怎么表现。在此，笔者针对后台设计经验不太丰富的同学，总结了后台原型设计五大要点，与大家分享。原型是表现产品经理想法的重要工具，当我们调研清楚需求和流程后，需要原型帮助我们整理思路，用具象化的方式与需求提出方、开发人员、测试人员沟通。无论公司是否有专业的交互设计师，对于产品经理而言，这都是一项必备的基本功。但是，它只是一个表现手段，无论你是用Axure还是墨刀，甚至手绘，通过原型整理你的思路，然后表达清楚才是重点，切莫本末倒置，把时间精力过多的花在所谓的高保真和花里胡哨的动效上，最后需求评审的时候一顿乱秀猛如虎，一看逻辑二百五。产品经理更重要的是：思考清楚每个需求的用户、场景及其合理性；反复核对流程是否有问题；每个字段的来源及用途是否清晰；细节是否完善。
5.1 页面常见布局
后台相比于前端，更侧重功能与逻辑，在页面布局上，都大同小异，整体来讲，分为logo、顶部导航、个人中心、侧面导航、内容区五个部分。
（1）logo
放置企业logo，可以作为回到首页的快速入口。如果我们设计的是一个To B的SaaS产品，为了满足付费企业的个性化需求，这里需要灵活配置，以放置客户的企业logo；
（2）顶部导航和侧面导航：
顶部导航与侧面导航可共存也可独立。当产品层级大于等于三级时，可采用顶部导航+侧面导航，顶部导航做一二级，侧面导航做三级及以上；但当产品层级超过三级时，说明产品复杂度很高，对用户会造成很大的学习和记忆负担，需要简化并重新设计产品层级；当产品层级仅为一两级时，即可使用单独使用顶部导航或侧面导航。需要注意的是，两种导航共存时，我们一般把顶部导航作为更高级别，当单独使用一种导航时，我们又更多的使用侧面导航，这主要是因为人的阅读习惯和更好的拓展性。
（3）个人中心：
相较于前端产品，后台产品的个人中心要简单很多，主要用于账号退出和切换，在个人中心入口旁边，可以作为很多全局性功能的入口，如：搜索、消息中心等。
（4）内容区
正文内容区域，是我们信息展示和操作的主要区域。
5.2 首页设计
在后台产品中，首页是一个非常重要的功能，但在很多产品中又容易把它忽略，尤其是内部使用的后台，可能根本不会做这个功能，但实际上，一个好的首页，能极大的提升产品的使用体验和工作效率。将首页上的功能以面向用户为维度划分，可以分为面向全部用户的功能和面向单个用户的功能。
（1）面向全部用户功能
面向全部用户的功能在原型上主要体现为数据监控、资讯信息、其他功能入口三种。
- 数据监控：
在首页上，根据产品性质不同，需要显示整体、关键性数据及相关走势。例如：统计产品总用户数、总销售额、日活、月活、转化率以及对应数据的同比、环比等。目的是让产品所有相关人对产品现状及发展情况有一个直观的认识。
- 资讯信息：
这个功能在SaaS产品中使用较多，会把当下与产品相关的资讯、动态等信息以文章链接的形式推送显示出来。对于公司内部使用后台，一般不会做这个功能，但当有全局消息通知的需求时，可采用顶部跑马灯的形式告知。
- 其他功能入口：
这个功能的设计有两种应用场景：一是应用于一个大系统包含多个小系统时。在系列的第二篇文章中，笔者介绍过当一个系统过大时，需要采用领域设计的方式将一个大型系统分拆为多个小系统，当分拆的小系统功能也很多时，可以独立成一个新的子产品，然后在这个大的系统的首页给一个功能入口，这样新的产品就可以采用新的交互和UI，而无需与父产品保持完全统一；另外一种应用场景是我们的产品需要包含已有的某个系统同时不对包含系统做改动时。例如我们要做一个新的电商管理后台，而前面因为业务优先级已经开发了一套商品库存管理系统，暂时又不想对这套系统进行改动，这个时候就可以在新的电商管理后台的首页加一个商品库存管理系统的入口，既方便操作，也体现了两个产品的包含关系；
（2）面向单个用户功能
主要包括该用户的待办事项、流程进度等。
- 待办事项：
将用户在系统中所需处理的事项快速展现出来，能极大的提高工作效率。事项列表增加排序、分组、筛选这些附加功能，能帮助用户更方便的找到自己想要的；对于一些可快速操作的事项，如审批等，可以直接在列表中加上操作按钮，就不用再次点击到对应模块去操作了。
- 流程进度：
在首页展现的流程进度主要是这个用户发起的流程，其他关联性不那么强的流程则放在其他模块
5.3 列表及表单页设计
（1）列表页设计
列表页是后台最为常见的页面形式之一，用于分条展现同类数据。它包括表格列表、卡片列表两种。
- 表格列表：
表格列表其实是一个后台页面上的Excel表格，除简单的罗列一些字段外，可以做一些更为丰富的排序、横向进度条拖动、隐藏等功能，以应对表格数据过多的情况。操作方面，不同的功能需要进行单个操作或批量操作，例如存在批量删除列表中数据情况，需要在表格数据前加上复选框和全选按钮。
- 卡片列表：
卡片列表主要应用于列表字段少、字段内容固定、视觉样式要求高的场景，例如教育产品中的课程列表。卡片列表最大的优势在于利用图片或短视频让页面美观丰富，不至于像其他后台页面，但这也导致这种形式拓展性不强、维护成本高，所以一定要根据使用场景而定。
（2）表单页设计
表单页是后台产品的另一种常用页面，多用于新增、编辑功能。常用表单主要是基础表单和分步表单。
5.4 可视化设计
可视化设计的重要性已经不必强调了，千言万语不如一张图有效，尤其在后台产品中，各种数据统计、报表、行为路径等，都需要借助可视化设计将他们直观、漂亮的展示出来。在可视化设计中，主要可分成数据可视化、关系可视化、时间空间可视化三种类型。
（1）数据可视化
在数据可视化设计中，数据本身不重要，重要的是采用哪种方式更为合理，所以当我们需要将数据用可视化的方式展现时，需要先搞清楚有哪些图表，每种图表的作用，然后用这些图去体现数据。常用图形包括：条形（柱状）图、饼图、折线图、散点图、热力图、雷达图、旭日图等，在这里推荐百度的EChart：http://www.echartsjs.com/index.html，所有你想到想不到的图都可以找到。
（2）关系可视化
关系可视化体现了不同角色间错综复杂、难以语言描述的关系。常见于各种架构设计、产品结构设计中。
（3）时间空间可视化
- 时间可视化：
时间的可视化在上面“工作台的设计”中已经提到了，是以时间轴的形式，将各个关键时间点的相关事项展现出来，用来体现各事项发生的先后顺序及相对计划时间的进度情况。空间可视化：空间可视化应该是我们日常生活中接触最多的一种可视化设计，例如各种地图、地铁线路图等。
5.5 帮助中心
帮助中心是很多产品经理容易忽视但其实非常重要的一个模块。大部分的后台、To B产品由于业务和逻辑的复杂性，不可能做得像前端产品那样易用，同时又没有统一的交互规范，用户使用类似产品不多，导致产品推出后需要花大量的时间、人力做培训、讲解，即使给出了相应的文档，也会由于各种原因没有保存或忽略。所以后台产品需要一个更加优质的帮助中心来帮助他人，帮助自己。
- 页面布局上大多是左侧目录，右侧为对应的正文说明；
- 帮助文档不应仅从功能上介绍产品，由于后台产品需求、场景与角色关联性大，所以还需要增加按不同角色介绍产品的使用；
- 正文除了图文形式，如果是对外的系统产品，还应补充视频形式，结合语音进行讲解，才能更清晰的将产品介绍给客户
参考文献：
- 什么样的原型更受开发欢迎 ？https://www.woshipm.com/rp/838335.html
- 原型的第一性原理https://www.woshipm.com/rp/1352527.html
- 产品原型三要素https://www.woshipm.com/rp/789544.html
- 原型设计的道、术、器https://www.woshipm.com/rp/757246.html
- 原型设计五大要点https://www.woshipm.com/pd/1547652.html
- 原型设计｜从三个方面，系统地画原型https://www.woshipm.com/rp/954361.html
- 快速缩减原型设计重复工作量的七种武器https://www.woshipm.com/rp/896870.html
- 如何更好更快地完成设计之快速原型？https://www.woshipm.com/rp/930224.html
- 总结了6个常见的原型设计的陷阱https://www.woshipm.com/rp/1083797.html
- 我临摹了7款产品的原型，总结出这些原型图经验https://www.woshipm.com/rp/790041.html
- 使用Axure设计中，大型的后台系统原型总结（下篇）https://www.woshipm.com/rp/795853.html、
- 使用Axure设计中，大型的后台系统原型总结（上篇）https://www.woshipm.com/rp/777500.html