高保真原型制作与规范浅析.ppt

原型制作与规范 产品部 李孟强 * 目录 1原型的定义 2原型的种类 3原型的工具 4高保真原型 1 原型的基本定义及原型的要点 2 常见的原型分类方法 3 常用的原型工具及其特点 4 用Visio制作高保真原型的方法 * 原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。 1原型的定义 2原型的种类 3原型的工具 4高保真原型 * 原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。 1原型的定义 2原型的种类 3原型的工具 4高保真原型 * * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 保真度 低 保 真 原 型 高 保 真 原 型 介质种类 纸面原型 电子原型 原型的工具 Axure Visio Fireworks …… * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 1: 纸面原型 纸面原型就是指画在纸上、白板上的界面原型。便于修改和绘制，不便于保存和展示。能让所有人参与其中，创造很多附加信息和价值。通过绘制的过程，你可以更清晰的传递界面的布局和逻辑。 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 2: 低保真原型 低保真原型能够准确的传达界面的布局和交互方式，但是美观、效果欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称，往往也可以作为需求设计稿输出。 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 3: 高保真原型 高保真原型通常指高保真灰度线框图或产品演示Demo。界面布局和交互效果与实际产品完全等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师有较好的视觉审美的能力，对界面比较敏感，有控件和组件的概念，注重界面的规范性和一致性。 * 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...... * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 制作步骤 建立控件库 建立组件库 绘制流程图 设计关键页 设计辅助页 故事版 原型注释 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 高保真原型注意事项 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 清晰地展示流程：好的操作流程是易用性的最基本标准。 关键功能要有故事版：更好的、更快的理解产品。 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。 有一致性：一致性会降低用户对界面的学习和识别成本。 有规范性：好的软件或者网站绝对是规范的。 把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑和功能；怎么让她通过原型来理解这个产品，使用这个产品。 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 1: 建立控件库 示例 控件是指界面中所有的最小元件。比如：按钮、文本框、下拉框、单选按钮、复选框、图片占位符等等。 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 2: 建立组件库 能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。 Accordion(手风琴) Tag Cloud(标签云) * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 组件库示例 示例 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 3: 绘制流程图 流程图表达的是一个用户用例，通常是HappyFlow 流程图有一个起点和一个终点 流程图中相同的元件代表相同的意思 结构清晰，易于理解 不要用一个流程图展示所有的流程 逻辑完整，清晰 每一个用户的决策都是DecisionPoint 流程图的作用在于梳理流程和规范流程 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 流程图示例 示例 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 4: 设计关键页面 示例 * 1原型的定义 2原型的种类 3原型的工具 4高保真原型 STEP 4: 设计辅助页面 示例