原型输出规范课件.ppt

1、精选ppt1原型输出规范原型输出规范产品部产品部精选ppt2目录目录1 原型的基本定义及要点原型的基本定义及要点2 常见的原型种类常见的原型种类3 原型工具及其特点原型工具及其特点4 高保真原型设计规范高保真原型设计规范精选ppt3原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。1原型的定义原型的定义2原型的种类3原型的工具4高保真原型精选ppt41原型的定义2原型的种类原型的种类3原型的工具4高保真原型保真度保真度低低保保真真原原型型高高保保真真原原型型介质种类介质种类纸纸面面原原型型电电子子原原型型原型的工具原型的工具AxureVisioFireworks精

2、选ppt51原型的定义2原型的种类原型的种类3原型的工具4高保真原型2: 低保真原型低保真原型低保真原型能够准确的传达界面的布局和交互方式，但是美观、效果欠佳。用于快速Demo以及项目内部人员沟通使用。精选ppt61原型的定义2原型的种类原型的种类3原型的工具4高保真原型3: 高保真原型高保真原型高保真原型通常指高保真灰度线框图或产品演示Demo。界面布局和交互效果与实际产品完全等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师有较好的视觉审美的能力，对界面比较敏感，有控件和组件的概念，注重界面的规范性和一致性。精选ppt71原型的定义2原型的种类3原型的工具原型的

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.精选ppt81

4、原型的定义2原型的种类3原型的工具4高保真原型高保真原型高保真原型制作步骤高保真原型制作步骤建立控件库建立控件库建立组件库建立组件库绘制流程图绘制流程图设计关键页设计关键页设计辅助页设计辅助页故事版故事版原型注释原型注释精选ppt91原型的定义2原型的种类3原型的工具4高保真原型高保真原型高保真原型设计规范高保真原型设计规范灰度线框图：灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。清晰地展示流程：清晰地展示流程：好的操作流程是易用性的最基本标准。关键功能要有故事版：关键功能要有故事版：更好的、更快的理解产品。要有注释：要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思

5、想。有一致性：有一致性：一致性会降低用户对界面的学习和识别成本。有规范性：有规范性：好的软件或者网站绝对是规范的。把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑和功能；怎么让她通过原型来理解这个产品，使用这个产品。和功能；怎么让她通过原型来理解这个产品，使用这个产品。精选ppt101原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 1: 建立控件库建立控件库示例示例控件是指界面中所有的最小元件。比如：按钮、文本框、下拉框、单选按钮、复选框、图片占位符等等。精选ppt111原型的定义2原型的种类

6、3原型的工具4高保真原型高保真原型STEP 2: 建立组件库建立组件库能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。Accordion(手风琴)Tag Cloud(标签云)精选ppt121原型的定义2原型的种类3原型的工具4高保真原型高保真原型组件库示例组件库示例示例示例精选ppt131原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 3: 绘制流程图绘制流程图流程图表达的是一个用户用例，通常是HappyFlow流程图有一个起点和一个终点流程图中相同的元件代表相同的意思结构清晰，易于理解不要用一个流程图展示所有

7、的流程逻辑完整，清晰每一个用户的决策都是DecisionPoint流程图的作用在于梳理流程和规范流程精选ppt141原型的定义2原型的种类3原型的工具4高保真原型高保真原型流程图示例流程图示例示例示例精选ppt151原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 4: 设计关键页面设计关键页面示例示例精选ppt161原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 4: 设计辅助页面设计辅助页面示例示例精选ppt171原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 5: 关键功能关键功能Storyboard展示展示1示例示例精选ppt181原

8、型的定义2原型的种类3原型的工具4高保真原型高保真原型示例示例STEP 5: 关键功能关键功能Storyboard展示展示2精选ppt191原型的定义2原型的种类3原型的工具4高保真原型高保真原型STEP 6: 原型注释原型注释注释的是界面元素的功能界面与人的交互方式控件的状态以及在什么情况下会出现什么状态操作的结果链接的指向报错信息及其展示方式对于界面中不便于展示的元素的描述，比如页面切换方式全面、细致、清晰充分考虑交流的效率和效果精选ppt201原型的定义2原型的种类3原型的工具4高保真原型高保真原型原型注释示例原型注释示例示例示例感谢亲观看此幻灯片，此课件部分内容来源于网络，感谢亲观看此幻灯片，此课件部分内容来源于网络，如有侵权请及时联系我们删除，谢谢配合！如有侵权请及时联系我们删除，谢谢配合！