UI界面设计综合规范.doc

WI-PSMIS-DJ-B008 02.01.000

（内部保密资料）

ECE项目图形用户界面设计规范

自8月 日起正式生效

广州从兴电子开发

编制： 审批：

日 期
修订版本
描 述
作 者
-8-1
01.00.000
初始版本
苏寒

目录
1 引言 4
1.1 目标 4
1.2 范围 4
1.3 参考资料 4
2 概述 4
3 标准 5
3.1 易用性 5
3.2 规范性 5
3.3 合理性 6
3.4 美观和协调性 6
3.5 独特征 7
4 设计规范 7
4.1 登录界面 7
4.2 首页 7
4.3 框架设计 7
4.4 按钮设计 8
4.5 对话框 8
4.5.1 通常对话框 8
4.5.2 有模式对话框 9
4.5.3 无模式对话框 9
4.6 面板设计 9
4.7 菜单设计 9
4.8 图标设计 10
4.9 滚动条 10
4.10 换肤功效 10
5 保留字 10
5.1 常见保留字 10

电力营销图形用户界面设计规范
1 引言
1.1 目标
统一和规范软件界面。
1.2 范围
电力营销改造。
1.3 参考资料

2 概述
界面是软件和用户交互最直接层，界面好坏决定用户对软件第一印象。而且设计良好界面能够引导用户自己完成对应操作，起到向导作用。同时界面如同人面孔，含有吸引用户直接优势。设计合理界面能给用户带来轻松愉悦感受和成功感觉，相反因为界面设计失败，让用户有挫败感，再实用强大功效全部可能在用户畏惧和放弃中付诸东流。现在界面设计引发软件设计人员重视程度还远远不够，直到最近网页制作兴起，才受到教授青睐。而且设计良好界面因为需要含有艺术美天赋而遭拒绝。
微软企业和苹果企业是这方面典范。
微软企业全部产品包含Office、Windows、MSN Messenger和其全部网站全部是我们追随对象。而且微软企业全部文档和产品介绍也是我们模拟和学习对象。
苹果企业更是这方面鼻祖，它全部产品无不表露着它在这方面是无人能及。
我们考虑GUI设计时应该遵照基础规则然后参考成熟设计，并能够添加自己独特征。
在一个时期很流行界面风格在另外时期可能已经落后，所以我们要有创新和超前意识。
3 标准
3.1 易用性
1. 完成同一功效或任务元素放在集中位置，降低鼠标移动距离。
2. 可写控件检测到非法输入后应给出说明并能自动取得焦点。
3. 复选框和单选框按着选择几率高底而前后排列。
4. 复选框和选项框要有默认选项，并支持Tab选择。
5. 选项数相同时多用选项框而不用下拉列表框。
6. 界面空间较小时使用下拉框而不用选项框。
7. 选项数较少时使用选项框，相反使用下拉列表框。
8. 专业性强软件要使用相关专业术语，通用性界面则提倡使用通用性词眼。

3.2 规范性
1. 完成相同或相近功效菜单用横线隔开放在同一位置。
2. 菜单前图标能直观代表要完成操作。
3. 菜单深度通常要求最多控制在三层以内。
4. 工具栏要求能够依据用户要求自己选择定制。
5. 相同或相近功效工具栏放在一起。
6. 工具栏中每一个按钮要有立即提醒信息。
7. 一条工具栏长度最长不能超出屏幕宽度。
8. 工具栏图标能直观代表要完成操作。
9. 系统常见工具栏设置默认放置位置。
10. 滚动条长度要依据显示信息长度或宽度能立即变换，以利于用户了解显示信息位置和百分比。
11. 状态条高度以放置五好字为宜，滚动条宽度比状态条略窄。
12. 菜单和工具条要有清楚界限;菜单要求凸出显示，这么在移走工具条时仍有立体感。
3.3 合理性
1. 关键命令按钮和使用较频繁按钮要放在界面上注目标位置。
2. 错误使用轻易引发界面退出或关闭按钮不应该放在易点位置。横排开头或最终和竖排最终为易点位置。
3. 和正在进行操作无关按钮应该加以屏蔽。
4. 对可能造成数据无法恢复操作必需提供确定信息,给用户放弃选择机会。
5. 非法输入或操作应有足够提醒说明。
6. 对运行过程中出现问题而引发错误地方要有提醒，让用户明白错误出处，避免形成无限期等候。
7. 提醒、警告、或错误说明应该清楚、明了、合适。
3.4 美观和协调性
1. 长宽靠近黄金点百分比，切忌长宽百分比失调、或宽度超出长度。
2. 布局要合理,不宜过于密集，也不能过于空旷，合理利用空间。
3. 按钮大小基础相近，忌用太长名称，省得占用过多界面位置。
4. 按钮大小要和界面大小和空间要协调。
5. 避免空旷界面上放置很大按钮。
6. 放置完控件后界面不应有很大空缺位置。
7. 前景和背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常见色考虑假如使用其它颜色，主色要柔和，含有亲和力和磁力，果断杜绝刺目标颜色。
8. 大型系统常见主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
9. 界面风格要保持一致，字大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求地方。
10. 通常父窗体支持缩放时，子窗体没有必需缩放。
3.5 独特征
4 设计规范
4.1 登录界面
应使软件开启封面最终为高清楚度图像，如软件开启封面需在不一样平台、操作系统上使用将考虑转换不一样格式，而且对选择色彩不宜超出256色，最好为216色安全色。软件开启封面大小多为主流显示器分辨率1/6大。假如是系列软件将考虑整体设计统一和延续性。在上面应该醒目标标注制作或支持企业标志、产品商标，软件名称，版本号，网址，版权申明，序列号等信息，以树立软件形象，方便使用者或购置者在软件开启时候得到提醒。插图宜使用含有独立版权，象征性强，识别性高，视觉传达效果好图形，若使用摄影也应该进行数位处理，以形成该软件个性化特征
4.2 首页
首页是用户成功登录后首先看到页面，应该能够显示全部和用户目前工作相关信息。这个页面应该是全部包含用户工作一个缩影或集成。
这个页面最能够表现用户操作方便性和系统易操作性。

4.3 框架设计
软件框架设计就复杂得多，因为包含软件使用功效，应该对该软件产品程序和使用比较了解，这就需要设计师有一定软件跟进经验，能够快速学习软件产品，而且在和软件产品程序开发员及程序使用对象进行共同沟通，以设计出友好，独特，符合程序开发标准软件框架。软件框架设计应该简练明快，尽可能少用无谓装饰，应该考虑节省屏幕空间，多种分辨率大小，缩放时状态和标准，而且为未来设计按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉步骤和用户使用心理
4.4 按钮设计
软件按钮设计应该含有交互性，即应该有多种状态效果：点击时状态；鼠标放在上面但未点击状态；点击前鼠标未放在上面时状态；点击后鼠标未放在上面时状态；不能点击时状态；独立自动改变状态。按钮应含有简练图示效果，应能够让使用者产生功效关联反应，群组内按钮应该风格统一，功效差异大按钮应该有所区分。
按钮名称必需是保留字中定义词语。
4.5 对话框
4.5.1 通常对话框
4.5.1.1 提醒
如用户完成一项任务，提醒操作成功。通常在返回页面中提醒此信息。
4.5.1.2 警告
如用户输入了非法内容，提醒用户重新输入。以提醒语气，如：用户编号格式错误，请重新输入。

4.5.1.3 确定
在用户实施一个不可恢复动作时要让用户确定。以提问语气让用户确定操作，如：

4.5.1.4 错误
系统操作错误和程序运行错误。通常在目前页面中提醒此信息。
4.5.2 有模式对话框
给出一个确定任务。或是用户需要一段时间等候。如：计算电费和月初始化。此页面全部需要有一个“关闭”按钮。
4.5.3 无模式对话框
给出一个持久任务。用户在此界面需要深入操作或操作完成后要返回此页面。此页面全部需要有一个“关闭”按钮。
提议尽可能不要使用此种对话框，因为这种对话框父窗口不好控制。

4.6 面板设计
面板是指编辑界面。
面板应该对功效区间划分清楚，应该和对话框，弹出框等风格匹配，尽可能节省空间，切换方便。
4.7 菜单设计
每个菜单全部应该是一个单独按钮、图片、组合。一个菜单项显示、控制不依于其它菜单。
菜单项不应该超出10个，菜单组要能够表现功效相同性和逻辑关系。
每个菜单项名称要言简意赅，而且要专业。要有一定状态改变，如鼠标放上和离开。假如有必需要有一定提醒。
鼠标形状最好能够变成hand形状。

4.8 图标设计
图标设计色彩不宜超出64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小范围表现出软件内涵，所以很多图标设计师在设计图标时使用简单颜色，利用眼睛对色彩和网点空间混合效果，做出了很多出色图标。
4.9 滚动条

4.10 换肤功效
全部风格统一用CSS控制，严禁单独使用style。
5 保留字
这里讲保留字是用户界面上看到信息。保留字使用避免用户对操作产生二义性。能规范用户操作和统一设计风格。所以我们有必需约定用户界面词汇使用。
5.1 常见保留字
#
名称
说明
1.
确定
用于用户确定。
2.
取消
用于用户不确定。
3.
关闭
关闭窗口，通常见于弹出窗口。
4.
返回
返回列表页面。
5.
保留
保留数据，停留在目前窗口
6.
保留并返回

7.
退出
退出系统返回到登录页面。
8.
删除

9.
新建

10.
全选
在列表框中
11.
反选

12.
查询
“搜索”
13.