12.原型
1.1. 概念
原型，又叫DEMO，将想法或解决方案图纸化具有示范及演示功能的可视化模型。强大的沟通工具。
如何让不同的人对与需求，有一个统一的认识
1.2. 理念
注意关注设计背后的价值，而非视觉效果。
要想制作对用户有影响力、有价值的产品，原型设计和用户测试是最佳方式。
因此，在设计的背景下，如果没有统一的产品创建方法，职责的过度分散通常会导致概念化产品质量低下。 通过在单独的真空环境中创建交互，界面，体验和视觉设计，可能会破坏产品。
1.3. 作用
- 小成本的解决方案；
- 为利益相关者、同事、客户提供设计方向，得到用户反馈有价值的信息，改进设计方案；
- 团队成员都能更好的理解需求，为开发人员、工程师或制造商提供最终的设计细节，（还有市场、运营等）。
- 帮助设计师确定设计元素、组件。
- 测试用户需求。
- 增加用户的主人翁情感，页面原型设计的交流，能与用户共享产品的设计进度，拉近产品与用户的距离。
- 不仅依赖假设和潜在偏见，进行定义，有了定义，团队就可以针对具体的定义来探讨方案。可以让大家在短时间内聚焦。在某些方向和关键点上，你需要说服利益相关者这是基于用户探索的正确决策。
1.4. 绘制原则
1、使用灰模原型
不要在原型上使用色彩，不要抢Ul的饭碗,大部分情况下，没人家专业还费时间。
2、注意对齐、重复、亲密性、对比
注意这几个方面，原型的效果就不会太差。
3、收集、整理自己的组件库，复用已有样式
产品由页面、组件、按钮组成，万变不离其宗，所有的产品，不外乎都是由这几个元素再按照某种结构和流程组建而成，多分析产品，就会发现背后的模型，形成模型，就可以复用，形成自己的经验和资产
1.5. 原型分级
原型要包括内容组织、交互组织、视觉组织，原型的保真程度是用内容完整性、交互完整性、视觉完整性决定的。
我们需要根据使用场景的不同、使用人群的不同，甚至是项目的不同阶段，我们需要产出设计不同保真度的产品原型。
原型设计要在快和准之间找好平衡。
你应该选择在用户测试中最适合呈现给用户的保真度级别，以便用户可以提供有针对性的反馈。不同保真度之间的差异：
用敏捷的观点，产品开发是持续设计的过程，最重要的是积极拥抱变化。如果把每个阶段性成果都当成是原型，那么即使产品上线了，也只不过是下一个版本的原型。
低保真基本就是线框图，以描述清楚准确的页面逻辑和场景为主；高保真的原型图才是接近于最终产品的产物；但最终产品的实现，一定是以交互设计稿为准的；
1.6. 草图
草图通常用于产品早期的概念阶段。项目立项的早期阶段，大家对于产品的功能及业务场景上都处于一个规划阶段，没有明确成熟的产品方案。
这个阶段的原型大部分都是手绘稿，大家在一边讨论产品功能，一边直接绘制产品原型。这个阶段的原型大部分都是在白板或者在白纸上手绘完成，在讨论的过程中发现问题，及时修改。如果涉及的界面较多，当然也可以利用原型设计工具如Axure进行设计。草图原型能够表达出基本的界面功能及内容布局即可，利用基本的几何图形如方框、圆和一些线段表达产品雏形，只需要参与讨论会议的人员明白大概意图即可。
场景：
- 团队成员之间的头脑风暴,这个时候我们需要一个能够快速呈现产品雏形的原型，且便于及时修改。
- 个人在收集及整理需求时诞生的思想；
作用：
主要用于梳理及向项目负责人证实产品需求是否确实存在。
手绘草图，不仅可以避免对产品需求的片面理解，在一定程度也可以提高产品经理本人的思维拓展能力。
优点：
设计成本低，能够随时进行修改，在项目早期有很多不确定因素的前提下，尽量使用草图进行讨论评审。
使用人群：
项目发起人、项目立项成员。
1.7. 低保真
概念
低保真（lo-fi）原型也叫线框图，是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的作用是 - 检查和测试产品功能，而不是产品的视觉外观。不要考虑界面元素的配色以及各功能的交互跳转及动画效果。界面的配色是专业的UI设计师的工作，丰富的交互动作也不宜在这个阶段去详细分析。
绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。
你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。
作用
低保真原型帮助我们准确拆分页面、以及每个页面的功能模块及展示信息【信息结构】，确定每个页面元素的界面布局，确定用户的交互行为描述（怎么操作）。一般情况下我们可以使用Axure、摹客RP等软件来绘制线框图，利用所提供的组件资源或模板例子可以快速完成线框图的绘制。
适合阶段
明确了产品的业务需求及使用场景以后。
使用人群
需求提出人、UI设计师、开发公工程师和测试工程师。
应用场景
头脑风暴：适合快速的头脑风暴，向客户、开发和项目参与者演示设计想法。
早期测试：作为产品样本对接业务部门，可以把握关键的功能，更好地定义流程、信息架构以及UI布局，通过沟通确保产品满足需求。
开发确认：向前端、后台攻城狮解说功能实现以及交互效果，前期确定技术层面是否能够实现功能体验，避免后期无法开发。
设计沟通：包括向UI解说布局排版字体图标。
原型到低保真，基本可以作为展示产品经理的能力的参考之一。
特征
- 视觉：仅呈现产品的一部分视觉属性。
- 内容：仅呈现产品内容的关键元素。
- 交互：仅呈现产品中重要功能所涉及的页面关系。
优点
- 成本较低：拥有较低的制作成本，可在短期内快速完成设计。
- 易于复用：便于设计团队复用原型组件，有利于避免繁琐的返工。
- 快速且便宜；
- 易于进行更改和测试新的产品模型；
- 允许快速查看产品的整体视图；
缺点：
- 缺乏真实感，因此用户可能很难给出反馈；
- 可能过于基础，无法反映成品的用户体验；
- 可能会过度简化复杂的问题；
- 缺乏交互性，剥夺了用户的直接控制权；
- 用户必须想象他们将如何使用该产品。
1.8. 中保真
产品功能和方向进一步明确后，可以画中保真的原型，中保真原型的一个典型特征是，会展示产品的信息结构。
具有基本交互或光滑的线框图；
梳理出产品(功能)结构和信息结构后，在开始动手画中保真原型。产品结构的对象是具有一定逻辑的功能块,信息结构的对象是具体的信息/数据。
例如注册是一个功能，这个功能对应的信息有界面可见的手机号、密码、验证码，有界面不可见的注册时间、手机型号、系统版本等。
主要表达产品结构、体现产品功能和信息结构。
1.9. 高保真
概念
高保真 (Hi-fi) 原型又可以称为产品的Demo，是尽可能接近最终产品的样式。它能够更加详细地展现产品的功能及业务需求，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能。
高保真原型需要在低保真的基础上进行配色，插入真实的图片及icon图标。充分利用Axure或摹客RP中每一类组件的样式及专有的交互属性为原型增加保真度；
高保真原型是产品经理、交互设计师、UI设计师共同合作的结果，合作得当，短时间也可以创作精美的高保真原型。
作用
低保真原型帮助我们准确拆分页面、以及每个页面的功能模块及展示信息，确定每个页面元素的界面布局。一般情况下我们可以使用Axure、摹客RP等软件来绘制线框图，利用所提供的组件资源或模板例子可以快速完成线框图的绘制。
适合阶段
高保真原型常用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资。
或者邀请真实（潜在）用户来测试，在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。
使用人群
高层领导、老板、投资人以及其他的重要决策人。
应用场景
功能实现：确保核心功能需求方面满足了用户的基本目标。
交互设计：确保大多数交互动效都是直观且具有趣味性的。
测试开发：可以节省开发写代码的时间，有效减少了错误和返工。
特征
- 视觉：需展示逼真细致的设计，接近最终产品的样式。
- 内容：需展示的大部分或全部内容。
- 交互：需展示更多的细节和页面关系。
优点
- 可用性高：高保真原型通常看起来像真正的产品，可以清楚地了解产品主要功能。
- 易于研发：借助高保真交互性，可以测试特定交互，比如动画过渡和微交互。
- 数字化原型的用户测试将更准确、更恰当，有助于更强大的用户体验研究
- 高保真原型能提升部门之间更有效的沟通
- 高保真原型可以增加销售潜力，从而直接影响公司的利润。
缺点：
- 创建高保真原型花费时间成本更高；
- 用户查看高保真原型时，可能会关注产品的细节，而忽略产品的功能；
- 在创建高保真原型的过程中，设计师可能会中途改变想法，导致设计周期的延长；
- 用户可能会将高保真原型误认为产品的最终形态，产生刻板印象；
高保真原型可以确保从产品经理到UX设计师，每个人都能把握产品的方向。能够更加详细地展现产品的功能及业务需求，可以测试非常具体的交互细节。
浙公网安备 33010602011771号