界面原型设计准则.ppt

《界面原型设计准则.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、产品管理系列之界面设计准则产品管理部2011年十月懊恼。。。。。。由于界面设计的时间往往都比较紧张，我没有足够的时间去太多考虑控件的细节问题。。。为什么每次我已经绞尽脑汁地考虑了每个控件的属性，但最后到了开发那里还是会有很多遗漏的问题呢？对于每个控件我要确定的信息都不一样，那么怎么做才能尽量多地考虑到不同控件的不同属性呢？培训内容介绍各种控件的设计方法介绍各种交互方式的设计原型设计案例分享怎样开始考虑一个界面的设计？界面设计基本准则从用户的角度出发，深入了解用户的习惯与需求保持一致性运用视觉等级降低界面和操作复杂性，引导用户操

2、作及时的提示，使用户明确目前的状态或者操作，防止用户出错允许用户犯错提供快捷菜单，支持快捷键使用用户的语言，而不是技术术语保持简洁，实用易用才是王道重视可用性测试，不断改进设计布局确定分辨率：页面长度原则上不超过3屏，宽度不超过1屏。每个标准页面为A4幅面大小，即8.5X11英寸；分辨率为800*600px，网页宽度保持在778px以内，就不会出现水平滚动条，高度则视版面和内容决定；分辨率为1024*768px，网页宽度保持在1002px以内，如果满框显示的话,高度是612-615px之间，就不会出现水平滚动条和垂直滚动条；应

3、考虑宽屏下页面显示，视觉上注意浏览器背景的处理。布局设计：布局确定：两栏、三栏菜单、导航、内容区域的摆放布局基本布局准则布局图例配色基本配色准则配色图例文字文字设计准则建议规范控件菜单树按钮文本框。。。交互响应提示鼠标操作。。。文字文字设计准则需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体。一个系统一种字体。字体的大小要与界面的大小比例协调。建议规范：中文统一采用宋体，英文采用标准Microsoft Sans Serif统一采用宋体五号（10.5磅，即10.5pt/12px）。一般字体颜色：#000000/#66

4、6666；超链接字体颜色：#0066CC，鼠标移动上去以后颜色为#CC0000。页面名称、一级导航、未读信息、表单标题和已选择的文字显示粗体。控件控件使用准则：放置完控件后界面不应有很大的空缺位置。控件风格统一，如果是使用现成的控件，则尽量使用标准控件。不要错误使用控件，例如：使用Button样式做TTable的功能，拿主菜单条显示版权信息。统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映。控件布局上，窗口不拥挤，拥挤的屏幕让人难以理解，因而难以使用。当然，也要避免太松散。整个项目，

5、采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。菜单、导航设计准则：一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。菜单深度一般要求最多控制在三层以内。对常用的菜单可以使用快捷命令方式。菜单前的图标不宜太大，与字高保持一致

6、最好。主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。主菜单数目不应太多，最好为单排布置。有明显区别，用户很容易就能看出目前所在操作。控件-树树展示的数据说明。定义树的层级。定义树的操作。初始进入该页面默认展开哪个节点？节点是否可以拖动排序？允许添加的最多节点级别？分类下是否可以添加分类？病历文件是否为叶子节点？删除某个节点后该节点下的所有子节点是否全部删除？树的层次结构如何展现？控件-按钮使用基本准则：定义按钮名称定义按钮动作按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。按钮的大小要与界面的大小和

7、空间要协调。点击后是否变灰是否有tooltipTab键的顺序与控件排列顺序一致，目前流行总体从上到下，同时行间从左到右的方式。点击后状态是否改变？点击后页面是否跳转？点击后本页面是否刷新？点击操作成功后是否对其他页面的数据产生相关的影响？控件-文本框设计准则：定义文本框名称。定义文本框数据。高度应该统一，宽度统一或根据填写内容设计。可写控件检测到非法输入后应给出说明并能自动获得焦点。对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。在输

8、入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。在读入用户所输入的信息时，根据需要选择是否去掉前后空格。有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。是否有输入长度限制？是否有水印文字提示？是否为必填项？光标离开后是否有