界面原型设计准则课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,产品管理系列之,界面设计准则,产品管理部,2011,年十月,产品管理系列之界面设计准则产品管理部,懊恼。,由于界面设计的时间往往都比较紧张，我没有足够的时间去太多考虑控件的细节问题。,为什么每次我已经绞尽脑汁地考虑了每个控件的属性，但最后到了开发那里还是会有很多遗漏的问题呢？,对于每个控件我要确定的信息都不一样，那么怎么做才能尽量多地考虑到不同控件的不同属性呢？,懊恼。由于界面设计的时间往往都比较紧张，我没有足够,培训内容,介绍各种控件的设计方法,介绍各种交互方式的设计,原型设计案例分享,培训内容介绍各种控件的设计方法,怎样开始考虑一个界面的设计？,怎样开始考虑一个界面的设计？,界面设计基本准则,从用户的角度出发，深入了解用户的习惯与需求,保持一致性,运用视觉等级降低界面和操作复杂性，引导用户操作,及时的提示，使用户明确目前的状态或者操作，防止用户出错,允许用户犯错,提供快捷菜单，支持快捷键,使用用户的语言，而不是技术术语,保持简洁，实用易用才是王道,重视可用性测试，不断改进设计,界面设计基本准则从用户的角度出发，深入了解用户的习惯与需求,布局,确定分辨率：,页面长度原则上不超过,3,屏，宽度不超过,1,屏。每个标准页面为,A4,幅面大小，即,8.5X11,英寸；,分辨率为,800*600px,，网页宽度保持在,778px,以内，就不会出现水平滚动条，高度则视版面和内容决定；,分辨率为,1024*768px,，网页宽度保持在,1002px,以内，如果满框显示的话,高度是,612-615px,之间，就不会出现水平滚动条和垂直滚动条；,应考虑宽屏下页面显示，视觉上注意浏览器背景的处理,。,布局设计：,布局确定：两栏、三栏,菜单、导航、内容区域的摆放,布局确定分辨率：,布局,基本布局准则,布局图例,配色,基本配色准则,配色图例,文字,文字设计准则,建议规范,控件,菜单,树,按钮,文本框,。,交互,响应,提示,鼠标操作,。,布局基本布局准则布局图例配色基本配色准则配色图例文字文字设计,文字,文字设计准则,需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体,。,一个系统一种字体。,字体的大小要与界面的大小比例协调,。,建议规范：,中文统一采用宋体，英文采用标准,MicrosoftSansSerif,统一采用宋体五号（,10.5,磅，即,10.5pt/12px,）。,一般字体颜色：,#000000/#666666,；,超链接字体颜色：,#0066CC,，鼠标移动上去以后颜色为,#CC0000,。,页面名称、一级导航、未读信息、表单标题和已选择的文字显示粗体。,文字文字设计准则,控件,控件使用准则：,放置完控件后界面不应有很大的空缺位置。,控件风格统一，如果是使用现成的控件，则尽量使用标准控件。,不要错误使用控件，例如：,使用,Button,样式做,TTable,的功能，拿主菜单条显示版权信息。,统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映,。,控件布局上，窗口不拥挤，拥挤的屏幕让人难以理解，因而难以使用。当然，也要避免太松散。,整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。,当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。,控件控件使用准则：,菜单、导航,设计准则：,一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。,如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。,菜单深度一般要求最多控制在三层以内。,对常用的菜单可以使用快捷命令方式。,菜单前的图标不宜太大，与字高保持一致最好。,主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。,主菜单数目不应太多，最好为单排布置。,有明显区别，用户很容易就能看出目前所在操作。,菜单、导航设计准则：,控件,-,树,树展示的数据说明。,定义树的层级。,定义树的操作。,初始进入该页面默认展开哪个节点？,节点是否可以拖动排序,？,允许添加的最多节点级别？,分类下是否可以添加分类？,病历文件是否为叶子节点？,删除某个节点后该节点下的所有子节点是否全部删除？,树的层次结构如何展现？,控件-树树展示的数据说明。初始进入该页面默认展开哪个节点？,控件,-,按钮,使用基本准则：,定义按钮名称,定义按钮动作,按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。,按钮的大小要与界面的大小和空间要协调。,点击后是否变灰,是否有,tooltip,Tab,键的顺序与控件排列顺序一致，目前流行总体从上到下，同时行间从左到右的方式。,点击后状态是否改变？,点击后页面是否跳转？,点击后本页面是否刷新？,点击操作成功后是否对其他页面的数据产生相关的影响？,控件-按钮使用基本准则：点击后状态是否改变？,控件,-,文本框,设计准则：,定义文本框名称。,定义文本框数据。,高度应该统一，宽度统一或根据填写内容设计。,可写控件检测到非法输入后应给出说明并能自动获得焦点。,对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。,对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。,在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。,在读入用户所输入的信息时，根据需要选择是否去掉前后空格。,有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。,是否有输入长度限制？,是否有水印文字提示？,是否为必填项？,光标离开后是否有验证？,控件-文本框设计准则：是否有输入长度限制？,控件,-,列表,使用基本准则：,定义列表的行数、列数。,定义列表每列的字段。,控件-列表使用基本准则：,控件,-,列表,排序标识,统一,链接标识,统一,字段名称字体,加粗、列宽和行宽,对齐方式、分页、标题过长时的显示方式,列表中显示的数据来源说明？,列表数据的默认排序方式？,列表字段是否需要排序？,列表中的字段是否是用户最关心的？字段的排序是不是按照重要程度排序？,列表中的数据是否发生变化？历史数据是否需要查看？,控件-列表排序标识统一列表中显示的数据来源说明？,控件,-,下拉框,使用基本准则：,定义下拉框的名称。,定义下拉框的数据源。,控件-下拉框使用基本准则：,控件,-,下拉框,设计准则：,长度自适应、选择项超过一个、按照选择频率排序。,界面空间较小时使用下拉框而不用选项框。,要有默认选项或选择提示，并支持,Tab,或翻页键,选择。,下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。,是否为必选项？,列表中的选项排列是否按重要程度排列？,选中某项数据后本页面是否刷新？是否对其他数据产生影响？,下拉框中的数据项较多时是否应该分组显示？,控件-下拉框设计准则：是否为必选项？,控件,-,单选框,使用基本准则：,定义单选框的名称。,定义单选框的数据类别。,是否有默认选项？,是否必须选择一项？,选中某项后该页面是否有数据更新？,选中后某项后对数据状态有何影响？,控件-单选框使用基本准则：是否有默认选项？,控件,-,复选框,设计准则：,定义复选框的数据名称。,定义每个选项的数据。,按选择几率的高底而先后排列。,要有默认选项，并支持,Tab,选择。,选项数较少时使用选项框，相反使用下拉列表框。,选项数相同时多用选项框而不用下拉列表框。,列表中的复选框点击整行都可选中。,默认为常用选项，并且,最,常用选项一般在前。,是否有默认选项？,是否必须选择一项？,选中某项后该页面是否有数据更新？,选中后某项后对数据状态有何影响？,控件-复选框设计准则：是否有默认选项？,页面,进入路径。,初始默认加载的数据状态。,按,enter,键默认执行按钮。,页面数据加载的前置条件。,页面进入路径。,培训内容,介绍各种控件的设计方法,介绍各种交互方式的设计,原型设计案例分享,培训内容介绍各种控件的设计方法,交互,响应,提示,弹出窗口,鼠标,操作,键盘,操作,告警,交互响应提示弹出窗口鼠标键盘告警,交互,-,响应,设计准则：,对系统不同操作的响应时间的最低标准，包括刷新（如局部刷新，列表即时刷新）,。,超过,1,秒的操作要有动画效果或等待图标分散用户注意力，超过,10,秒的操作有动态条块说明进度，超过,30,秒的操作提供“取消”操作。,操作进行中，该操作按钮为灰色不可用。,交互-响应设计准则：,交互,-,提示,提示消息：,操作,成功的提示,、一些,破坏性,操作的确认提示、,在线提示,、操作完成,进度提示,等等,。,向用户展示一般性的系统消息。,警告消息：,执行操作后所产生的影响告知。,动作执行结果的告知。,不利环境产生后的告知。,用户操作错误的提醒。,4.,动作执行确认提醒。,5.,操作成功的提醒。,交互-提示提示消息：操作成功的提示、一些破坏性 操作的确认提,交互,-,键盘操作,常用的键盘操作：,TAB,键跳转,ENTER,键提交或缺省、,C-,新增,D-,删除,常用的组合键：,面向事务的组合有：,Ctrl-D,删除；,Ctrl-F,寻找；,Ctrl H,替换；,Ctrl-I,插入；,Ctrl-N,新记录；,Ctrl-S,保存,Ctrl-O,打开。,列表：,Ctrl-R,，,Ctrl-G,定位；,Ctrl-Tab,下一分页窗口或反序浏览同一页面控件。,编辑、,Ctrl-A,全选；,Ctrl-C,拷贝；,Ctrl-V,粘贴；,Ctrl-X,剪切；,Ctrl-Z,撤消操作；,Ctrl-Y,恢复操作。,文件操作：,Ctrl-P,打印；,Ctrl-W,关闭。,系统菜单：,Alt-A,文件；,Alt-E,编辑；,Alt-T,工具；,Alt,W,窗口；,Alt,H,帮助。,MS Windows,保留键：,Ctrl-Esc,任务列表；,Ctrl-F4,关闭窗口；,Alt-F4,结束应用；,Alt-Tab,下一应用；,Enter,缺省按钮,/,确认操作；,Esc,取消按钮,/,取消操作；,Shift-F1,上下文相关帮助。,交互-键盘操作常用的键盘操作：,交互,-,鼠标操作,常用鼠标交互方式：,mouseover,文字,应有,tooltip,提示,。,点击按钮等元素时应有,颜色,变化,。,操作进行中，鼠标为忙,。,可点击处，鼠标为手型。,鼠标放在可点击的非按钮元素上时，元素应有状态变化。,交互-鼠标操作常用鼠标交互方式：,培训内容,介绍各种控件的设计方法,介绍各种交互方式的设计,原型设计案例分享,培训内容介绍各种控件的设计方法,练习,-,议题管理,省政府常务会议，召开之前由办公厅按照领导要求先准备好议题，提交给领导审批；,经相关领导审批通过、拟上会讨论的议题由专人管理；,审批不走网上流程，由系统按照标准格式生成送审表，打印后由专人一级一级报送领导；,在领导审批的过程中，只要没有被审批通过，送审表内容变化非常频繁；,练习-议题管理省政府常务会议，召开之前由办公厅按照领导要求先,总结,一起学习了：,界面设计的基本方法和各种控件的用法。,各种交互方式的应用场景和设计方法。,原型设计案例分享。,基本掌握界面设计的方法！,总结一起学习了：基本掌握界面设计的方法！,后续安排,控件包,树,列表,文本框,下拉框,。,主框架,常用布局,两栏,三栏,。,后续安排控件包树列表文本框下拉框。主框架常用布局两栏三栏,界面规范,界面规范,界面规范界面规范,后续产品管理序列培训,需求管理,需求采集,需求分析,功能设计,产品发布,产品演示,后续产品管理序列培训需求管理,结束,-,谢谢！,结束-谢谢！,