深度剖析原型设计：认知、设计和规范最佳实践！-技术圈

点击 ↑ 关注公众号，开启我们的故事！

“ 打造有影响力，有价值的作品，坚持长文和系统化深度剖析基础理论和实践方法，你用1年将获得别人10年的知识沉淀，欢迎关注！”

产品原型设计是大部分产品经理日常工作中的高频事项，原型设计的好不好是团队内部扯皮的高发地区，甚至直接影响到产品上线效果。

很多的产品在画原型时，是凭借自己的感觉去画，或者套用行业模板，有时直接抄竞品的样式。而并没有真正理解原型的本质，对于原型的作用、设计规范、设计流程和思路都是一知半解，甚至毫无概念。

不了解原型，短期内对自身没有影响，倘若想往高阶产品发展或期望有一个更好的职业发展生涯将会产生大大的不利。

我们在原型设计时，很多产品人多少都会有以下的现象：

不梳理信息，直接画原型：拿到需求分析完，直接就画原型，没有搞清楚画原型的目的，以及用户对原型的信息诉求；
为了画原型而画原型：原型设计事无巨细，而忽略用户真正的关注点；
原型设计不规范：没有统一规范，造成沟通和认知困难。

面对这些情况，如何高效的制定原型设计，达到原型设计的目的？本文在信息架构梳理完毕后，开始着手产品原型设计，从产品原型认知、产品原型设计和常用原型设计规范几个方面阐述了面对不同情况如何有效的采用原型类型进行原型设计，占领用户心智模式。

—

产品原型认知

1、什么是原型

什么是原型？百度百科定义为原来的类型或模型，特指文学艺术作品中塑造人物形象所依据的现实生活中的人。按照这个定义，任何能够将想法从脑海中表示出来并让其他人看见的东西都可以是原型。

对于数字化软件产品，原型是指的软件产品上线之前所依据的样图；对于建筑物，原型是建筑的设计图稿；对于新房，原型是新房的户型平面图。

每个人对原型的定义可能会不同。开发人员可能认为原型必须以代码形式生成，设计师可能认为原型是Axure设计的可交互的模型，客户可能认为原型是一个简单的DEMO演示。

不管争议如何，原型是解决方案的简单实验模型，用于快速、廉价的测试或验证概念，可以让想法与用户进行互动，不管用户是否喜欢原型，我们都可以从中获得反馈，并为用户设计一个更好的方案。

作为一种低成本验证产品可行性及产品体验的途径，从基础的草图到线框图再到可交互的高保真原型，每个环节我们都在对原型进行持续测试和验证，直到我们认为已规避大部分问题，才正式启动产品的研发和上线。

没有什么是完全完成的，即使发布的版本用户感到满意，用户依然会提出反馈，而我们必须在未来的版本中进行调整。新的一轮原型测试和验证也就开始了，这对产品本身大有裨益。

2、为什么需要原型

原型的用途和作用很多，在产品的规划和设计中，应该尽早的制作原型，通过原型不断的测试和验证想法。主要的原因包括明确问题和方案、高效沟通、验证和改进。

明确问题和方案：基于正确的用户问题确定解决方案；
高效沟通：为相关干系人确定设计方向和明确产品设计细节；
验证和改进：不同阶段多次验证假设并改进方案。

（1）明确问题和方案

原型设计可以帮助我们明确现有问题，发现其他隐含问题，找出更多解决问题的方法。

在设计的早期阶段，用探索性的研究和原型设计去发现问题很有帮助，问题发现的越晚，付出的代价越高；
在设计的后期阶段，帮你掌握整个业务流程以及每个节点所要做的设计，明确用户界面，包括交互元素和内容

（2）高效沟通

原型可以帮助你在团队内部、客户以及利益相关者之间展示你的想法，它能够将你的想法转化为物理或数字的媒介，并将模糊的，概括的的想法转化为具体的对象。

没有原型，其他人就会用他们自己的心智模型来可视化你的想法，这样大家的期望和想法就很难达成一致。原型能过让大家在短时间内保持聚焦，把注意力集中在实质性的沟通上，提高沟通效率。

原型能够在会议和方案演示中更好的突出你的想法，这样你对自己的想法会更有信心，它也是你前期为之投入的思考和努力。

（3）验证和改进

一开始不确定你的想法是否值得花时间制作原型和验证，但是，可以凭直觉制定原型，不断的进行验证和改进。

在早期阶段，需要了解和测试用户心智模型，了解他们思考和感知世界的方式；如果设计的产品过于复杂，则需要频繁的验证和改进。

我们可以为每个想法或假设做一个原型，但假设和想法是基于可用的，有价值的策略。原型的验证有助于设计更好的产品，通过原型与用户互动，洞察他们的实际需要，而团队也能从用户的反馈中获益。

3、原型类型

基于原型想要达到的目的，选择合适的原型类型。原型类型一般按保真度分为低保真原型、中保真原型和高保真原型。保真度意味着原型的外观和行为与最终产品相似程度。

原型的制作通常是从低保真开始，并逐渐提高到高保真的水平，直到大部分假设都经过验证和修正。

（1）低保真原型

低保真原型呈现的是初步的概念和想法，可以使用不同的媒介，拥有不同尺寸的原型界面。这种原型是最简单和便宜的，更换成本最低。它可以包括草图、纸质原型、线框图等。

①草图

草图是最初的想法或假设，基于业务流程的梳理，结合信息架构，将核心的用户操作界面绘制出来，可以是白板草图，纸质草图等。通过绘制大量不同的版本来考虑解决界面交互的不同方法。如下图：

②线框图

信息架构和草图可以快速演变成线框图。线框图是静态的页面布局，让我们思考如何在屏幕上放置不同元素，更好的将信息架构可视化。低保真的线框图没有视觉设计，交互方面有也只是简单的跳转事件，大多数都使用灰色色阶和占位符来指示内容，如下图：

（2）中保真原型

中保真原型在某些方面看起来像最终产品，它在成本和价值之间取得平衡，将视觉、交互和展示媒介结合在一起。包括，可点击的原型、编码原型等

用户基于中保真原型能够完成一个任务的闭环，也就是通过与原型界面的交互完成工作任务。

①可点击的原型

一般使用原型设计软件（比如Axure，墨刀）构建页面，并给每个页面增加交互式元素，做到页面之间可进行交互。如下图：

②编码原型

会编码的产品，可以选在浏览器中创建中保真原型。这要求产品懂得HTML，CSS等技术，可以简单的构建中保真原型，这种原型展示出的效果，就跟真实的界面很逼真。有兴趣的同学，后文我会分享HTML，JS,CSS相关技术知识。

（3）高保真原型

高保真原型经过视觉设计，这些原型具有真实界面的高度一致，数据的高度仿真，交互和动画也具备，用户能够与之进行交互。虽然看起来像真的一样，但它仍然是一个原型。如下图：

不同保真度原型付出的成本和带来的效果是不一样的，如何评估原型的保真度？

根据《原型设计：打造成功产品的实用方法及实践》一书中，将保真度的评估划分为五个维度，包括视觉细化、功能广度、功能深度、交互性和数据模型。

视觉细化：指在界面中视觉像素级别设计的投入；
功能广度：指原型中涵盖了多少大的功能点；
功能深度：表明原型各个功能的详细程度如何；
交互性：表示应用程序或产品的交互部分如何显示给用户；
数据模型：包含用户在界面中交互的内容以及产品前端和后端使用的数据；

如何选择原型保真度类型？

如果原型保真度过高，用户就会以为设计已经完成，过分关注细节，而忽略整体方案；如果原型保真度太低，用户可能会迷失方向，不理解原型的目的是什么。

我们需根据目标和产品所处的阶段来选择适当的保真度原型，在制作原型所花费的时间和验证原型带来价值之间取得平衡。下表是不同保真度原型的适宜范围、场景以及优劣势：

—

产品原型设计

1、原型设计流程

不同的用户，不同的目的选择的原型保真度和制作原型流程也会不同，下图是原型制作流程：

明确原型目的：原型的目的是确定方向，找到方案，还是验证问题？
了解用户或听众：绘制的原型面向用户和团队内部沟通对象是谁？
选择原型类型：采用低保真、中保真，还是高保真原型？
制作原型：采用什么工具、软件或者直接编码制作产品原型？
呈现/验证：原型的展示和交付，验证原型的目的
反馈和改进：根据用户或听众反馈，持续的优化和改进原型

（1）明确原型的目的

原型设计之前，先明确这次原型设计的目的是什么。是为了明确产品方向？探索解决方案？还是验证问题或假设？

明确产品方向：不知道如何下手设计产品，这个时候，可以采用MVP最小可用原型的方法，用最小的工作量制作一个简易原型，模拟用户实际业务操作流程，让原型代替流程中每个环节的操作界面，最后将原型交付用户进行测试验证是否用户所需的。

探索解决方案：主要是找到问题和探索如何解决问题。针对问题，可以发散多个解决方案，将类似的方案进行分类组合，对方案的优劣势和价值进行评估和排序，制作简易的原型，最后找出最佳的解决方案。

验证问题：主要是优化产品或修复问题。找到需优化的问题，选择原型保真度，构建原型和测试原型。

（2）了解用户或听众

基于原型不同的目的，我们需要选择不用用户沟通群体是谁，沟通目标是什么。获得利益相关者认可？向客户推销产品？获得设计师交互和视觉反馈？还是跟研发确认设计效果？

不同对象，背景不同，了解他们对产品的熟悉程度，向用户或受众演示原型，让他们知道你的目标是什么，并记录演示过程中的反馈。

（3）选择原型类型

基于原型不同的目的、受众和产品所处的阶段，我们需要选择不用保真度的原型进行展示和沟通。

（4）制作原型

基于前期的信息架构和草图，制定低保真、中保真或高保真的原型界面，其界面内容取决于信息架构规划和设计。信息架构详情可参考：《如何“以用户为中心”设计信息架构：认知，分析，设计三步走！》。不同类型的原型常用的制作工具，包括不限于以下：

草图：白板、纸张
线框图：Axure、慕客、墨刀、EXCEL、编码实现等

原型展示的信息无非就是信息导航、信息分类、信息搜索、信息布局和常用的增删改查（CRUD）等。具体到原型界面设计包括不限于以下内容：

①首页

包括一级导航，二级导航，搜索、内容区和操作区等,如下图：

②列表页

具体单据列表页面设计，包括列表查询条件、列表操作、列表表格数据、数据排序、数据翻页、数据字段等。

数据操作包括新增、修改、删除、导入、导出和打印等。每项操作会涉及到具体的原型界面（见表单详情页）、业务逻辑、交互逻辑、数据校验和权限控制等。详情描述可参考《怎样写好B端产品需求文档！》。

导入和导出数据一般在列表页通过设定导入和导出模板方式完成数据导入和导出。这里要注意导入的时候，会有对数据进行规则和业务逻辑校验。

③表单详情页

表单详情页多用于展示具体的内容信息，涉及到页面信息布局、页面操作等信息。新增、修改、查询页一般都会设计为同一页面，通过不同单据状态和权限控制页面的编辑和查询。如下图：

表单新增时，需考虑以下不限于：

界面展示可以更简单，字段可以更少吗？
用户靠自己能顺利完成单据填写？
怎样才能让用户填写更少信息？
是否可避免大量机械化信息录入？
用户怎么尽量少犯错？
如何帮助用户提高录入效率和准确性？

表单查询时，需考虑以下不限于：

哪些角色会查询该单据？
什么场景下使用单据？
他们主要完成哪些任务？
他们关心哪些信息，使用哪些功能？

单据的新增、编辑和查询状态，用户关心的问题和需要完成任务都不相同。新增时，多数要准确，快速录入信息；编辑时，要对有权限改动的数据改动；查询时，不同角色，不同权限和不同场景下用户关心的信息和处理的任务不同。

④帮助信息

产品的帮助信息包括提示，模态弹框，操作指引和帮助中心等。

提示：主要是提示用户当前操作的信息提示，一般带有说明文字的“气泡”，包括保存，修改成功，提示语，警告等信息；

模态弹框：用于阻断用户主流程，经过用户确认后，再返回主流程或直接退出主流程。包括确认弹框等信息

操作指引：在特定场景下，系统对用户接下来的操作进行的指引。常见的有新手引导、新上线功能引导等。如下图，新手引导：

帮助中心：一般会包括用户手册、视频教程、常见问题和问题反馈路径等相关内容，帮助用户在遇到问题时，能够查阅相关手册自行解决。

原型设计的内容远不止上面列举的类型，这里旨在帮助大家有一个全面的认识，原型设计是一项必备的技能，根据业务场景设计的内容也会不同，具体设计技能，可参考相关原型设计书籍或视频学习。

（4）呈现和验证原型

将原型呈现给团队、利益相关人以及用户，采用不同工具进行测试和验证。我们可以两人一组，在测试中，不要过多的引导用户，观看用户的使用路径，当用户偏离路径太远时，也不要过快纠正他们，你可以从中获得用户的预期。

一般情况，选择3-6人左右进行验证，倘若人数不够，也可以再多选择几个用户进行验证。验证后，汇总所有的验证资料，分析和总结所有用户共性的问题和用户关注点。

（5）反馈和改进原型

针对原型验证的问题，如何解决验证出现的问题？这里需针对这些问题进行新的一轮讨论和方案制定，重复前面的原型制定和验证过程，保证设计的原型是用户所需要。

原型的验证是重复的周期，直到没有发现新的大问题，各方都满意了，就可以停止新一轮验证，进行研发和发布。当然，发布后，我们又会接收其他的反馈和需求，新一轮的原型制作和验证又开始了。

2、原型设计误区

原型设计是一项标准化的流程，实际工作中背景不同，情况不同，往往并没有引起足够的重视，甚至存在不同的看法。

不需要信息架构，直接画原型：这种没有前期的信息组织和分类的过程，往往画出的原型不是用户最想要的，需要经过多轮的修改和调整；
过分追求完美的原型：不注重产品阶段，不关注受众，花大力气将原型的细节都描绘的十分清楚，这种情况一旦没有抓住用户需求，就是牵一发而动全身的调整，耗时耗力；
画原型浪费时间：我们讲提高工作效率，不是把原型省了，没了原型，每个人的都会脑补一张图，你的图和他的图未必就一致，最后的结果又得回来进行调整；
原型随便画一画就行，不需要按规范来：有些小伙伴，不讲究原型规范性，画出的原型丑陋不堪，虽然在一定程度上是不会影响工作。但作为产品的你，交付这样的原型给团队，你还有审美么？可见你的工作习惯就不好，培养良好的工作习惯，是成功的保障。

—

原型设计规范

原型设计在满足产品需求转化为产品功能的过程中，需要遵循一定的设计规范，尽量保持原型图的美观整洁。良好的原型设计规范能够体现产品人自身的审美观，也能促进团队之间和谐沟通。

限于篇幅，本文不作深度规范说明，仅简要阐述原型设计中的规范要求，详细的设计规范，可参考：设计师网址导航：https://hao.uisdc.com/。

里面有大量的设计要求和规范。

1、设计目标和使用用户

原型作为团队沟通工具，所涉及的用户包括：利益相关者、产品、研发、测试、UI等角色。

基于原型使用用户，明确原型设计规范的目标是保持原型风格统一，提高原型输出效率，促使团队高效沟通，减少产品返工率。

2、设计原则

每一个优秀的设计中都应用了一些设计原则，《写给大家看的设计书》中将设计原则划分为对比、重复、对齐和亲密性四大原则。

对比：基本思想是要避免页面上的元素太过相似。如果元素（字体、颜色、大小，线宽，形状，空间等）不相同，那么就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素。
重复：设计中视觉要素要在整个产品中重复出现。可以重复颜色，形状，空间，线宽，字体，大小和图片。这样可以增加条理性和统一性。
对齐：任何东西都不能在页面上随意安放，每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰，精巧而且清爽的外观；
亲密性：彼此相关的项应当靠近，归组在一起。如果多项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，提供清晰的结构。