高保真原型制作与规范.ppsVIP

原型制作与规范 产品部 余代军 1 目录 1原型的定义 2原型的种类 3原型的工具 4高保真原型 1 原型的基本定义及原型的要点 2 常见的原型分类方法 3 常用的原型工具及其特点 4 用Visio制作高保真原型的方法 2 原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。 1原型的定义 2原型的种类 3原型的工具 4高保真原型 3 原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。 1原型的定义 2原型的种类 3原型的工具 4高保真原型 4 5 1原型的定义 2原型的种类 3原型的工具 4高保真原型 保真度 低 保 真 原 型 高 保 真 原 型 介质种类 纸 面 原 型 电 子 原 型 原型的工具 Axure Visio Fireworks 6 1原型的定义 2原型的种类 3原型的工具 4高保真原型 1: 纸面原型 纸面原型就是指画在纸 上、白板上的界面原型 。便于修改和绘制，不 便于保存和展示。能让 所有人参与其中，创造 很多附加信息和价值。 通过绘制的过程，你可 以更清晰的传递界面的 布局和逻辑。 7 1原型的定义 2原型的种类 3原型的工具 4高保真原型 2: 低保真原型 低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。 8 1原型的定义 2原型的种类 3原型的工具 4高保真原型 3: 高保真原型 高保真原型通常指高保真灰度线 框图或产品演示Demo。界面布 局和交互效果与实际产品完全等 效，体验上也与真实产品接近。 而为了达到完整的效果，很大程 度上就要求交互设计师有较好的 视觉审美的能力，对界面比较敏 感，有控件和组件的概念，注重 界面的规范性和一致性。 9 1原型的定义 2原型的种类 3原型的工具 4高保真原型 Axure 快速上手 丰富的控件 丰富的脚本模式 自定义控件库 擅长Web界面 Visio 适用性广 控件库强大 便捷的模板套用 支持绝大多数格式 擅长桌面程序界面 Mockflow 在线软件 基于web的存储 适合虚拟团队 丰富的控件库 丰富的控件模式 Fireworks、Illustrator、PS、Pencil、UIDesigner、GUI Design Studio 、PF、Silverlight、Expression Design、Prototype Composer、Lucid Spec、Irise Professional Edition、AdobeReader 10 1原型的定义 2原型的种类 3原型的工具 4高保真原型 制作步骤 建立控件库建立组件库绘制流程图 设计关键页设计辅助页故事版 原型注释 11 1原型的定义 2原型的种类 3原型的工具 4高保真原型 高保真原型注意事项 1.灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2.清晰地展示流程：好的操作流程是易用性的最基本标准。 3.关键功能要有故事版：更好的、更快的理解产品。 4.要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想 。 5.有一致性：一致性会降低用户对界面的学习和识别成本。 6.有规范性：好的软件或者网站绝对是规范的。 把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。 12 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 1: 建立控件库 示例 控件是指界面中所有的 最小元件。比如：按钮 、文本框、下拉框、单 选按钮、复选框、图片 占位符等等。 13 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 2: 建立组件库 能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本 ，实现界面的一致性，规范性，突出界面的风格特征。 Accordion(手风琴 ) Tag Cloud(标签云 ) 14 1原型的定义 2原型的种类 3原型的工具 4高保真原型 组件库示例 示例 15 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 3: 绘制流程图 1.流程图表达的是一个用户用例，通常是HappyFlow 2.流程图有一个起点和一个终点 3.流程图中相同的元件代表相同的意思 4.结构清晰，易于理解 5.不要用一个流程图展示所有的流程 6.逻辑完整，清晰 7.每一个用户的决策都是DecisionPoint 8.流程图的作用在于梳理流程和规范流程 16 1原型的定义 2原型的种类 3原型的工具 4高保真原型 流程图示例 示例 17 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 4: 设计关键页面 示例 18 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 4: 设计辅助页面 示例 19 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 5: 关键功能Storyboard展示1 示例 20 1原型的定义 2原型的种类 3原型的工具 4高保真原型 示例 STEP 5: 关键功能Storyboard展示2 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 6: 原型注释 1.注释的是界面元素的功能 2.界面与人的交互方式 3.控件的状态以及在什么情况下会出现什么状态 4.操作的结果 5.链接的指向 6.报错信息及其展示方式 7.对于界面中不