欢迎来到天天文库
浏览记录
ID:39876485
大小:3.51 MB
页数:23页
时间:2019-07-13
《高保真原型制作与规范.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、原型制作与规范产品部余代军www.yudaijun.com1目录1原型的定义2原型的种类3原型的工具4高保真原型1原型的基本定义及原型的要点2常见的原型分类方法3常用的原型工具及其特点4用Visio制作高保真原型的方法2原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。1原型的定义2原型的种类3原型的工具4高保真原型3原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。1原型的定义2原型的种类3原型的工具4高保真原型451原型的定义2原型的种类3原型的工具4高保真原型保真度低保真原型高保真原型介质种类纸面原型电子原型原型的工具Axur
2、eVisioFireworks……61原型的定义2原型的种类3原型的工具4高保真原型1:纸面原型纸面原型就是指画在纸上、白板上的界面原型。便于修改和绘制,不便于保存和展示。能让所有人参与其中,创造很多附加信息和价值。通过绘制的过程,你可以更清晰的传递界面的布局和逻辑。71原型的定义2原型的种类3原型的工具4高保真原型2:低保真原型低保真原型能够准确的传达界面的布局和交互方式,但是美观、效果欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称,往往也可以作为需求设计稿输出。81原型的定义2原型的种类3原型的工具4高保真原型3:高保真原型高保真原型通常指高保真灰度线框图或产品演示Demo。界
3、面布局和交互效果与实际产品完全等效,体验上也与真实产品接近。而为了达到完整的效果,很大程度上就要求交互设计师有较好的视觉审美的能力,对界面比较敏感,有控件和组件的概念,注重界面的规范性和一致性。91原型的定义2原型的种类3原型的工具4高保真原型Axure快速上手丰富的控件丰富的脚本模式自定义控件库擅长Web界面Visio适用性广控件库强大便捷的模板套用支持绝大多数格式擅长桌面程序界面Mockflow在线软件基于web的存储适合虚拟团队丰富的控件库丰富的控件模式Fireworks、Illustrator、PS、Pencil、UIDesigner、GUIDesignStudio、WPF、Silv
4、erlight、ExpressionDesign、PrototypeComposer、LucidSpec、IriseProfessionalEdition、AdobeReader......101原型的定义2原型的种类3原型的工具4高保真原型制作步骤建立控件库建立组件库绘制流程图设计关键页设计辅助页故事版原型注释111原型的定义2原型的种类3原型的工具4高保真原型高保真原型注意事项灰度线框图:颜色会干扰视觉设计,效果会影响大家对易用性的判断。清晰地展示流程:好的操作流程是易用性的最基本标准。关键功能要有故事版:更好的、更快的理解产品。要有注释:图只能展示界面元素,图文并茂才能准确全部传达设计
5、思想。有一致性:一致性会降低用户对界面的学习和识别成本。有规范性:好的软件或者网站绝对是规范的。把看原型的人想象成对产品一无所知的人,怎么图文并茂的展示产品的逻辑和功能;怎么让她通过原型来理解这个产品,使用这个产品。121原型的定义2原型的种类3原型的工具4高保真原型STEP1:建立控件库示例控件是指界面中所有的最小元件。比如:按钮、文本框、下拉框、单选按钮、复选框、图片占位符等等。131原型的定义2原型的种类3原型的工具4高保真原型STEP2:建立组件库能够完成一个功能点,形成一种模块,能够被重复使用,从而降低开发成本,实现界面的一致性,规范性,突出界面的风格特征。Accordion(手风
6、琴)TagCloud(标签云)141原型的定义2原型的种类3原型的工具4高保真原型组件库示例示例151原型的定义2原型的种类3原型的工具4高保真原型STEP3:绘制流程图流程图表达的是一个用户用例,通常是HappyFlow流程图有一个起点和一个终点流程图中相同的元件代表相同的意思结构清晰,易于理解不要用一个流程图展示所有的流程逻辑完整,清晰每一个用户的决策都是DecisionPoint流程图的作用在于梳理流程和规范流程161原型的定义2原型的种类3原型的工具4高保真原型流程图示例示例171原型的定义2原型的种类3原型的工具4高保真原型STEP4:设计关键页面示例181原型的定义2原型的种类3
7、原型的工具4高保真原型STEP4:设计辅助页面示例191原型的定义2原型的种类3原型的工具4高保真原型STEP5:关键功能Storyboard展示1示例201原型的定义2原型的种类3原型的工具4高保真原型示例STEP5:关键功能Storyboard展示21原型的定义2原型的种类3原型的工具4高保真原型STEP6:原型注释注释的是界面元素的功能界面与人的交互方式控件的状态以及在什么情况下会出现什么状态操作的结果
此文档下载收益归作者所有