界面设计规范.doc

界面设计的规范目的 32 界面布局 登录页面 主界面 左侧菜单 表单 当前位置 列表 弹出窗口 可视化控件 133 常见问题规范 144 尺寸规范 155 导航规范 156 链接规范 157 字体规范 168 终端开发图片格式规范 169 用户体验设计规范 1610 在用户体验设计时需要注意以下几点 17界面设计的规范目的界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作,起到向导作用。界面设计主要是为了达到以下目的:1、以用户为中心:设计由用户控制的界面,而不是界面控制用户。2、清楚一致的设计:所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解和使用。3、拥有良好的直觉特征:以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。4、较快的响应速度。5、简洁、美观。界面布局登录页面登录界面上要有系统的和系统名称版权等信息。登录界面最好有用户名和ID的记忆,焦点直接定位到密码输入框。如果用户输入用户名或密码错误时,要出现错误提示,提示用户具体是哪项填写错误。登录页面要突出操作区域,避免用户眼球左右晃动,操作区保持在任何分辨率下保持居中(如图1)。如图15、登录页面提示信息应该放置在发生错误区域附近,输入框高度24px,,鼠标经过输入框要有明显的触碰效果。(如图2)如图2主界面1、界面上都有标志和系统名称(如果系统名过长可以用简称),要有用户名、当前的日期和相关的快捷命令按钮。如图32、下拉菜单要根据菜单选项的含义进行分组,并应该按重要程序先后次序排列,重要的放在开头,次要的放在后边;没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置。(如图4)如图43、不同内容之间距离保持一致,这样让界面看起来更清晰。(如图5)图54、分辨率适应页面布局,以保证在分辨率1024*768下的正确显示为前提,适应高分辨率情况使用表格宽度或层的宽度等参数使用百分比方式自动适应。5、现在浏览器有很多版本,页面设计和CSS编写要兼容现在主流的几个浏览器(IE6——IE10/FIREFOX)。左侧菜单1、主菜单的宽度要接近,树型菜单深度最好控制在三层以内,字数控制在6个字以内,每个菜单的字数能相同最好;主菜单数目不应太多,最好为单排布置。菜单结构要清晰明了,子菜单对比上级菜单要缩进2个字符。(如图6红色区域)图6表单1、显示内容结构要清晰行间距与列宽要均匀,表单字数不一样靠左对齐,输入框左对齐,一行两列,输入框标题要明显区别于输入框本身,输入框宽度尽量保持一致。(如图7)图72、常用的表单应该同时支持键盘操作和鼠标操作。复选框和选项框最好有默认选项,并支持Tab选择,Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。3、表单内在特定的字段域附近给出必填信息提示,并用“*”标注。4、按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置;按钮的大小要与界面的大小和空间要协调;避免空旷的界面上放置很大的按钮;Enter缺省按钮/确认操作输入设计。(如图8所示)如图8与正在进行的操作无关的按钮应该加以屏蔽或灰色显示。(如图9所示)如图9高效率的输入方式,特定的字段内容的输入方式选用使用效率最高,不容易发生错误的方式。如录入日期使用户点选弹出的日历控件,并无须干预的自动返回正确的格式。(如图10所示)如图107、表单格式尽量保持业务原始票据的格式或字段排列顺序,方便用户的集中录入过程。表单字段左对齐。(如图11所示)如图118、输入框的宽度基本符合数据库能够容纳的宽度,暗示系统能够接受的字符容量。(如图12所示)如图12当前位置1、要能准确显示当前内容的位置,字与“>>”之间要有最少一个空格的间隙。(如图13)图13列表每页所显示的条数及列数,以保持当前正好一屏显示无需滚动为标准。(如图14所示)