ui界面设计规范.doc

WI-PSMIS-DJ-B008
(内部保密资料)
ECE项目图形用户界面设计规范
自2012年8月日起正式生效
广州从兴电子开发有限公司

编制: 审批:


日期
修订版本
描述
作者
2012-8-1

初始版本
苏寒
目录
1 引言 4
目的 4
范围 4
参考资料 4
2 概述 4
3 原则 5
易用性 5
规范性 5
合理性 6
美观与协调性 6
独特性 7
4 设计规范 7
登录界面 7
首页 7
框架设计 7
按钮设计 8
对话框 8
一般对话框 8
有模式对话框 9
无模式对话框 9
面板设计 9
菜单设计 9
图标设计 10
滚动条 10
换肤功能 10
5 保留字 10
常用保留字 10
电力营销图形用户界面设计规范
引言
目的
统一和规范软件界面。
范围
电力营销改造。
参考资料
概述
界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。
微软公司和苹果公司是这方面的典范。
微软公司的所有产品包括Office、Windows、MSN Messenger和其所有的网站都是我们追随的对象。而且微软公司所有的文档和产品介绍也是我们模仿和学****的对象。
苹果公司更是这方面的鼻祖,它的所有产品无不表露着它在这方面是无人能及的。
我们考虑GUI设计时应该遵循基本的规则然后参考成熟的设计,并能够添加自己的独特性。
在一个时期很流行的界面风格在另外的时期可能已经落后,所以我们要有创新和超前的意识。
原则
易用性
完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
可写控件检测到非法输入后应给出说明并能自动获得焦点。
复选框和单选框按着选择几率的高底而先后排列。
复选框和选项框要有默认选项,并支持Tab选择。
选项数相同时多用选项框而不用下拉列表框。
界面空间较小时使用下拉框而不用选项框。
选项数较少时使用选项框,相反使用下拉列表框。
专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
规范性
完成相同或相近功能的菜单用横线隔开放在同一位置。
菜单前的图标能直观的代表要完成的操作。
菜单深度一般要求最多控制在三层以内。
工具栏要求可以根据用户的要求自己选择定制。
相同或相近功能的工具栏放在一起。
工具栏中的每一个按钮要有及时提示信息。
一条工具栏的长度最长不能超出屏幕宽度。
工具栏的图标能直观的代表要完成的操作。
系统常用的工具栏设置默认放置位置。
滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。
菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
合理性
重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
与正在进行的操作无关的按钮应该加以屏蔽。
对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
非法的输入或操作应有足够的提示说明。
对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
提示、警告、或错误说明应该清楚、明了、恰当。
美观与协调性
长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
按钮的大小要与界面的大小和空间要协调。
避免空旷的界面上放置很大的按钮。
放置完控件后界面不应有很大的空缺位置。
前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。