界面设计规范1.doc

文档编码保密级别编写人员董永华文档版本1.0.全亚通信产品部界面设计规范北京全亚通信技术有限公司2012年12月05日目录1界面设计的规范目的32界面布局32.1登录页面32.2主界面42.3左侧菜单62.4表单72.5当前位置92.6列表92.7弹出窗口112.8可视化控件133常见问题规范144尺寸规范155导航规范156链接规范157字体规范168终端开发图片格式规范169用户体验设计规范1610在用户体验设计时需要注意以下几点171 界面设计的规范目的界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。界面设计主要是为了达到以下目的：1、以用户为中心:设计由用户控制的界面，而不是界面控制用户。2、清楚一致的设计:所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。 3、拥有良好的直觉特征:以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。 4、较快的响应速度。 5、简洁、美观。2 界面布局2.1 登录页面1、 登录界面上要有系统的和系统名称版权等信息。2、 登录界面最好有用户名和ID的记忆，焦点直接定位到密码输入框。3、 如果用户输入用户名或密码错误时，要出现错误提示，提示用户具体是哪项填写错误。4、 登录页面要突出操作区域，避免用户眼球左右晃动，操作区保持在任何分辨率下保持居中（如图1）。如图15、登录页面提示信息应该放置在发生错误区域附近，输入框高度24px，输入框与输入框上下间距保持1.2倍，鼠标经过输入框要有明显的触碰效果。（如图2）如图22.2 主界面1、界面上都有标志和系统名称（如果系统名过长可以用简称）,要有用户名、当前的日期和相关的快捷命令按钮。 如图32、下拉菜单要根据菜单选项的含义进行分组，并应该按重要程序先后次序排列，重要的放在开头，次要的放在后边；没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置。（如图4）如图4 3、不同内容之间距离保持一致，这样让界面看起来更清晰。（如图5） 图54、分辨率适应页面布局，以保证在分辨率1024*768下的正确显示为前提，适应高分辨率情况使用表格宽度或层的宽度等参数使用百分比方式自动适应。5、现在浏览器有很多版本，页面设计和CSS编写要兼容现在主流的几个浏览器（IE6IE10/FIREFOX）。2.3 左侧菜单1、主菜单的宽度要接近，树型菜单深度最好控制在三层以内,字数控制在6个字以内，每个菜单的字数能相同最好；主菜单数目不应太多，最好为单排布置。菜单结构要清晰明了，子菜单对比上级菜单要缩进2个字符。（如图6红色区域） 图62.4 表单1、显示内容结构要清晰行间距与列宽要均匀，表单字数不一样靠左对齐，输入框左对齐，一行两列，输入框标题要明显区别于输入框本身，输入框宽度尽量保持一致。（如图7）图72、常用的表单应该同时支持键盘操作和鼠标操作。复选框和选项框最好有默认选项，并支持Tab选择，Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。3、表单内在特定的字段域附近给出必填信息提示，并用“*”标注。4、按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置；按钮的大小要与界面的大小和空间要协调；避免空旷的界面上放置很大的按钮；Enter 缺省按钮/确认操作输入设计。（如图8所示）如图85、 与正在进行的操作无关的按钮应该加以屏蔽或灰色显示。（如图9所示）如图96、 高效率的输入方式，特定的字段内容的输入方式选用使用效率最高，不容易发生错误的方式。如录入日期使用户点选弹出的日历控件，并无须干预的自动返回正确的格式。（如图10所示）如图107、表单格式尽量保持业务原始票据的格式或字段排列顺序，方便用户的集中录入过程。表单字段左对齐。（如图11所示）如图118、输入框的宽度基本符合数据库能够容纳的宽度，暗示系统能够接受的字符容量。（如图12所示）如图122.5 当前位置1、要能准确显示当前内容的位置，字与“”之间要有最少一个空格的间隙。（如图13）图132.6 列表1、 每页所显示的条数及列数，以保持当前正好一屏显示无需滚动为标准。（如图14所示）如图142、 列表记录之间要有不同的底色相间隔；如果没有底色间隔，当鼠标经过某条记录时此记录底色要有所变化与其它记录有所区别，当选中某条记录时，此记录的底色也要有变化，以便用户查看编辑。（如图15所示）图153、 表格中字体使用统一的字体和字号（通常都用宋体和12号字）；表头字体加粗，内容字体不加粗，带小数点的数字没有特殊要求的情况下保留到小数点后面两位。（如图16所示）如图164、 列表带竖线的情况下，表头标题居中对齐，内容字符宽度一直的情况下固定列宽，居中对齐，字符宽度不一致的情况下居左对齐，数值居右对齐。列表不带竖线的情况下，表头及内容全部左对齐，列表内数据要与边缘有5px间距。（如图17所示）如图175、 单元格中的内容，最少离表格线5个像素的距离。（如图18所示）如图186、 列表中尽量支持排序功能。（如图19所示）排序功能图192.7 弹出窗口1、屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置，窗体的中心位置应该在对角线焦点附近。（如图20所示）图203、要显示窗口主题，窗口主题显示标志用户当前所在模块或子系统名称，子任务窗体主题使用“名词+动词”的语法结构指明用户当前的任务。（如图21所示）图214、必填项要用红色星号标注。5、内容对齐方式要一致，采用左对齐。6、弹出窗体的页面主题、栏目标题等资料与关联的父窗体保持上下文一致，方便用户理解并做出处理策略。2.8 可视化控件1、页面上计量单位必须跟在输入框后，计量单位与输入框间保留一个空格，如遇必输项需显示计量单位的，计量单位在“*”号之前显示。（如图22所示）图22 2、表单中提示信息可以放在表单最上面，逐条提示，提示出错地方要明确标示出来。（如图23所示）图232、页面元素与元素之间间距要绝对相等。（如图24所示）图243 常见问题规范1、页面中同样的区域同样的位置字体大小保持一致2、页面中常用字体颜色属性保持一致（如红色：#FF0000, 蓝色：#004888，黑色：# 333333，白色：#000000，灰色#666666）3、页面块与块之间上下间距保持一致，左右间距也要保持一致4、页面中模块内上下左右间距保持一致5、页面中各组件形式保持统一6、表单中文字左对齐数值右对齐，标题居中对齐，不要让单列表单显得空旷（序号、电话号码属于文字类型，金额、数量属于数值类型）7、 页面内出现小写金额时，数字前统一加货币符号“”， 正确规范的表达方式（如：200.00），不在使用200元或200.0等形式表达8、页面内所有文字数据与项目主题不相关的不要出现（如：万庄化肥项目所以的文字信息应该与栏目呼应）9、短日期显示格式必须为YYYY-MM-DD，长日期显示格式必须为YYYY-MM-DD hh:mm，时间采用24小时制。示例：1972年10月01日显示为：1972-10-011972年10月01日上午8点05分显示为：1972-10-01 08:051972年10月01日下午4点05分显示为：1972-10-01 16:054 尺寸规范1、页面标准按1024*768尺寸制作，推荐尺寸带滚动条的为1002*610px，不带滚动条的为1024*610px2、页面长度原则上不超过3屏，宽度不超过1屏 3、banner高度不要超过150px4、每个非首页静态页面含图片字节不超过300K，全尺寸banner第一个场景控制在200k以内 二个场景在300K，三个场景在400K以此类推。5 导航规范1、导航要简单、清晰，建议不超过3层的链接2、用于导航的文字要简明扼要3、首页，各栏目一级页面之间互链，各栏目一级和本栏目二级页面之间互链4、连续性页面应加入上一页，下一页按钮6 链接规范1、特殊栏目和功能可新开窗口。2、链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。3、链接的颜色可配合主题颜色风格改变，通常为蓝色（#004888），但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。7 字体规范1、为了保证不同浏览器上字号保持一致，字号建议用像素px来定义，字体建议采用“宋体”、“黑体”、“微软雅黑”，没有特殊情况不在使用其它特殊字体。2、网页正文文字一般不小于14px，行距不小于24px。4、文字颜色与页面配色协调，不使用与背景色相近的颜色。 6、页面文本不使用下划线方式，也尽量少采用粗体显示。8 终端开发图片格式规范 1、尽量少使用大图片，图形大于100K时，必须采用缩略图，用点击放大方式制作。 2、为减少图形文件大小，图形颜色丰富（128色）时使用JPG格式(JPG压缩比为6)，颜色单调（128色）时使用GIF或者PNG格式。9 用户体验设计规范1注意屏幕元素布局平衡，功能区域划分合理。避免控件与数据的过分集中而导致的视觉疲劳和判断错误。2功能明确，安排合理，让用户通过最少的判断和最少的操作达到目的。3保持界面的一致性。一致性既包括使用统一的界面元素、标准的控件,也包括使用相同的信息表现方法；如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。4窗体大小与长宽比例合理，空间充分利用，避免过大的灰色空白区域，也不要过于局促。5主要功能和点击频率高的按钮应排放在醒目的位置。6界面关闭或退出按钮应排放在不易点击的位置，避免因错误点击而引起的退出7屏蔽与当前操作无关的按钮。8按钮文字简洁明了，尽量控制在4字以内。9、人们习惯于从左到右，从上到下进行阅读，因此，应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。10、用户界面控件分成组，以体现它们之间的关系。同时，还要显示相关信息。将控件放在它所作用的对象旁。使用空格、分组框、线条和标签，或者其它分隔符对用户界面控件进行分组。11、使用强调使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等，来将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方式指明用户接下来应该进行的操作。12、使用可视的提示尽量使用近似的大小和间距来指出用户界面控件是相似的，而使用不同的大小和间距来指出用户界面控件视是不同的。13、使用空格使用空格来创建一个透气室，以使窗口布局更易于理解，并且查看起来更舒服。空格的多少要适当，不要显得太分散。但是，要避免过多地使用空格。如果可能，尽量使窗口小一些。10 在用户体验设计时需要注意以下几点1、要针对目标用户进行设计2、视觉上别让用户看得费劲3、要减少交互4、减少用户操作、减少选择和思考5、主动提供帮助，以用户为中心6、把复杂性留给自己，把简单留给用户7、用户不用的功能，就不该在页面存在8、视觉设计,不是美化,是导向用户看内容的.9、不要触犯主流(非主流是在玩个性)10、让用户知道他在哪11、那个常点的按钮一直在那12、告诉用户下一步会怎样13、一定不要浪费用户的时间14、一定要明白你的产品面对的是什么样的用户群 15、一定要去尝试接触你的这些用户，了解他们的特征和行为习惯 16、一定不要我觉得，不要打扰和强迫用户，不要为1%的需求骚扰99%的用户 17、一定不要提出这些用户怎么会这样？的怀疑，一定不要高估用户的智商 18、一定不要以为给用户提供越多的东西就越好，相反，重点多了就等于没有重点，有时候需要做减法第18页 共18页