做原型须明白的事项

通过原型产品流程，检验对产品理解后的设计逻辑是否合理，展示整个产品的蓝图

🔖 对产品需求分析的复盘

需求方（沟通需求的工具（PS：原型存在的根本意义））

UI（高保真效果图）

技术开发（搭建框架、设计数据库）

测试（测试人员可对原型进行模拟测试，及时反映出真实产品可能存在的问题和隐患）

🧑‍🚒 使用对象

什么是原型？

功能框架划分明确、合理

功能流程清晰、结构完整

低保真原型

高保证原型

合理的色彩运用和交互设计

功能说明，例如：变更日记的形式

范围值

极限值

状态

提示信息

交互说明

简单、规范和统一的文字说明

检验是否符合需求业务流程

展示页面流程

如何做一个好的原型

了解谁是受众

确定适合受众的媒介和原型保真度

1️⃣ 了解受众和意图

30%规划+70%画草图

2️⃣ 稍加规划再作原型

引导激发受众对原型有合适的关注点，避免对不合适的东西东西纠结

3️⃣ 设定期望

根据现场需求确定画低/高保真程度的草图

4️⃣ 画草图

花最少的时间和精力向受众传达想法

5️⃣ 原型不需要模糊美

6️⃣ 针对复杂及高交互业务，如果不容易做出原型，可使用模拟数据及类似静态界面截图表示

减少工作量

7️⃣ 只对需要的东西做原型

采取增量、迭代的进化方法，不断的改进和完善产品原型，减少投入，降低风险

8️⃣ 减少风险，尽早并经常做原型

原型设计的八大原则

明确用户与场景、任务

梳理业务流程

梳理页面信息结构，确定页面框架

绘制原型，确定交互细节，串联

讨论优化、细节修正、完成原型设计

原型设计流程

原型设计处于工作流中的位置

原型设计的工作流程

手绘草图

需付费

墨刀

Mockplus摹客

UI设计功能较弱

Pixso

蓝湖旗下产品（罗永浩代言）

MasterGo

即时原型/即时设计（可在线创建PRD文档）

外框

可多人线上协作的原型工具

Sketch

Adobe XD

可在线可本地，用来完成用户界面设计、原型设计和交互设计

Figma

应用灵活

可拓展性强

拥有超级强大的交互制作能力

编辑能力强大

优点

规范性较差

管理不便

软件难度稍大，入门较慢

仅可在线浏览，不能在线编辑，制作原型需下载安装软件

预览需要一定版本的浏览器或安装浏览器插件

缺点

Axure

原型设计的工具使用分析

入门快，产效高，但断网无法使用

高保真图绘制工具，交互动效类型有限，常用于视觉设计师高保真效果图绘制

产品架构图

产品流程图

多终端中低保真原型

网页

产品需求文档

产出物

工具栏（ 执行常用操作）

页面

大纲

站点地图（页面导航面板）

公共（基础）元件库

创建元件库

创建可分类的元件库

添加图像文件夹

获取外部元件库：阿里蚂蚁金服AntDesign（web端、移动端、数据图表等分类）、饿了么ElementUI元件库、有赞、京东等

删除元件库

元件（部件）库

减少重复工作，统一修改，降低由于重复修改导致错误率，提高效率。

创建母版

母版的使用

母版

控件模块（元件库）

包括：包含基本公共元件、表单窗体、菜单和表格及标记元件

设置元件、母版和原型的样式属性

样式

制作原型的交互动作、交互方式

交互

对原型进行注释说明

注释

控件交互面板（定义控件的动态交互）

工作区

操作面板（工作区）

功能界面介绍

元件库的创建和使用

母版的创建及使用

作用

用法

动态面板

案例讲解

中继器

案例演示

介绍

手绘优先！软件随后

低保真原型用真实比例和文案，真实模拟更容易发现极端情况

低保真原型给到交互设计师和视觉设计师即可

原型服务于需求主题，不要节外生枝（需要考虑后端数据来源）

页面流程要清晰

做原型的注意事项

原型模式开发

1️⃣ 三者皆为产设研在线协同的生产流程方式，能使跨部门协作更简单、高效地聚合在一起 2️⃣ 自带颜色选集、自动布局、组件库、插件以及案例等资源3️⃣ 沟通和交流的信息通过评论、圈话等功能整合在一起，信息留痕，同步更新4️⃣ 但因为是线上协同，会存在一定的信息安全因素

做原型须明白的事项