产品经理高保真原型制作与规范

《产品经理高保真原型制作与规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、产品部原型制作与规范杨成云1目录1原型的基本定义及原型的要点1原型的定义2常见的原型分类方法2原型的种类3原型的工具3常用的原型工具及其特点4高保真原型4用Visio制作高保真原型的方法21原型的定义2原型的种类3原型的工具4高保真原型原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。31原型的定义2原型的种类3原型的工具4高保真原型原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。41原型的定义2原型的种类3原型的工具4高保真原型保真度介质种类原型的工具低高纸电Axure保保面子V

2、isio真真原原原原型型Fireworks型型……51原型的定义2原型的种类3原型的工具4高保真原型1:纸面原型纸面原型就是指画在纸上、白板上的界面原型。便于修改和绘制，不便于保存和展示。能让所有人参与其中，创造很多附加信息和价值。通过绘制的过程，你可以更清晰的传递界面的布局和逻辑。61原型的定义2原型的种类3原型的工具4高保真原型2:低保真原型低保真原型能够准确的传达界面的布局和交互方式，但是美观、效果欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称，往往也可以作为需求设计稿输出。71原型的定义2原型的种类3原型的工具4高保真原型3

3、:高保真原型高保真原型通常指高保真灰度线框图或产品演示Demo。界面布局和交互效果与实际产品完全等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师有较好的视觉审美的能力，对界面比较敏感，有控件和组件的概念，注重界面的规范性和一致性。81原型的定义2原型的种类3原型的工具4高保真原型AxureVisioMockflow快速上手适用性广在线软件丰富的控件控件库强大基于web的存储丰富的脚本模式便捷的模板套用适合虚拟团队自定义控件库支持绝大多数格式丰富的控件库擅长Web界面擅长桌面程序界面丰富的控件模式Fireworks

4、、Illustrator、PS、Pencil、UIDesigner、GUIDesignStudio、ＷPF、Silverlight、ExpressionDesign、PrototypeComposer、LucidSpec、IriseProfessionalEdition、AdobeReader......91原型的定义2原型的种类3原型的工具4高保真原型制作步骤建立控件库建立组件库绘制流程图故事版设计辅助页设计关键页原型注释101原型的定义2原型的种类3原型的工具4高保真原型高保真原型注意事项1.灰度线框图：颜色会干扰视觉设计，效果会影响大家

5、对易用性的判断。2.清晰地展示流程：好的操作流程是易用性的最基本标准。3.关键功能要有故事版：更好的、更快的理解产品。4.要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。5.有一致性：一致性会降低用户对界面的学习和识别成本。6.有规范性：好的软件或者网站绝对是规范的。把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑和功能；怎么让她通过原型来理解这个产品，使用这个产品。111原型的定义2原型的种类3原型的工具4高保真原型STEP1:建立控件库控件是指界面中所有的示例最小元件。比如：按钮、文本框、下拉框、单选按钮

6、、复选框、图片占位符等等。121原型的定义2原型的种类3原型的工具4高保真原型STEP2:建立组件库Accordion(手风琴)TagCloud(标签云)能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。131原型的定义2原型的种类3原型的工具4高保真原型组件库示例示例141原型的定义2原型的种类3原型的工具4高保真原型STEP3:绘制流程图1.流程图表达的是一个用户用例，通常是HappyFlow2.流程图有一个起点和一个终点3.流程图中相同的元件代表相同的意思4.结构清晰，易于

7、理解5.不要用一个流程图展示所有的流程6.逻辑完整，清晰7.每一个用户的决策都是DecisionPoint8.流程图的作用在于梳理流程和规范流程151原型的定义2原型的种类3原型的工具4高保真原型流程图示例示例161原型的定义2原型的种类3原型的工具4高保真原型STEP4:设计关键页面示例171原型的定义2原型的种类3原型的工具4高保真原型STEP4:设计辅助页面示例181原型的定义2原型的种类3原型的工具4高保真原型STEP5:关键功能Storyboard展示1示例191原型的定义2原型的种类3原型的工具4高保真原型STEP5:关键功能St

8、oryboard展示2示例201原型的定义2原型的种类3原型的工具4高保真原型STEP6:原型注释1.注释的是界面元素的功能2.界面与人的交互方式3.控件的状态以及