UI界面设计规范

1、WI-PSMIS-DJ-B008 02.01.000内部保密资料ECE 工程图形用户界面设计标准工程图形用户界面设计标准自 2021 年 8 月 日起正式生效广州从兴电子开发 审批： OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 2 页 共 11 页日日 期期修订版本修订版本描描 述述作作 者者2021-8-101.00.000初始版本苏寒 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 3 页 共 11 页目录目录1引言引言.41.1目的.41.2范围.41.3参考资料.42概述概述.43原那么原那么.53.1易用性.53.2标准性.53.3合理

2、性.63.4美观与协调性.63.5独特性.74设计标准设计标准.74.1登录界面.74.2首页.74.3框架设计.74.4按钮设计.84.5对话框.84.5.1一般对话框.84.5.2有模式对话框.94.5.3无模式对话框.94.6面板设计.94.7菜单设计.94.8图标设计.104.9滚动条.104.10换肤功能.105保存字保存字.105.1常用保存字.10 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 4 页 共 11 页电力营销图形用户界面设计标准电力营销图形用户界面设计标准1 引言引言1.1 目的目的统一和标准软件界面。1.2 范围范围电力营销改造。1.3 参

3、考资料参考资料2 概述概述界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。微软公司和苹果公司是这方面的典范。微软公司的所有产品包括 Office、Windows、MSN M

4、essenger 和其所有的网站都是我们追随的对象。而且微软公司所有的文档和产品介绍也是我们模仿和学习的对象。苹果公司更是这方面的鼻祖，它的所有产品无不表露着它在这方面是无人能及的。我们考虑 GUI 设计时应该遵循根本的规那么然后参考成熟的设计，并能够添加自己的独特性。在一个时期很流行的界面风格在另外的时期可能已经落后，所以我们要有创新和超前的意识。 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 5 页 共 11 页3 原那么原那么3.1 易用性易用性1.完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 2.可写控件检测到非法输入后应给出说明并能自动获得焦点。

5、 3.复选框和单项选择框按着选择几率的高底而先后排列。 4.复选框和选项框要有默认选项，并支持 Tab 选择。 5.选项数相同时多用选项框而不用下拉列表框。 6.界面空间较小时使用下拉框而不用选项框。 7.选项数较少时使用选项框，相反使用下拉列表框。 8.专业性强的软件要使用相关的专业术语，通用性界面那么提倡使用通用性词眼。3.2 标准性标准性1.完成相同或相近功能的菜单用横线隔开放在同一位置。 2.菜单前的图标能直观的代表要完成的操作。 3.菜单深度一般要求最多控制在三层以内。 4.工具栏要求可以根据用户的要求自己选择定制。 5.相同或相近功能的工具栏放在一起。 6.工具栏中的每一个按钮要有

6、及时提示信息。 7.一条工具栏的长度最长不能超出屏幕宽度。 8.工具栏的图标能直观的代表要完成的操作。 9.系统常用的工具栏设置默认放置位置。 10. 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。 11. 状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。 12. 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 6 页 共 11 页3.3 合理性合理性1.重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。 2.错误使用容易引起界面退出或关

7、闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。 3.与正在进行的操作无关的按钮应该加以屏蔽。 4.对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的时机。 5.非法的输入或操作应有足够的提示说明。 6.对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，防止形成无限期的等待。 7.提示、警告、或错误说明应该清楚、明了、恰当。3.4 美观与协调性美观与协调性1.长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。 2.布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。 3.按钮大小根本相近，忌用太长的名称，免得占用过多的界面位置。 4.按钮的

8、大小要与界面的大小和空间要协调。 5.防止空旷的界面上放置很大的按钮。 6.放置完控件后界面不应有很大的空缺位置。 7.前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。 8.大型系统常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等。 9.界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 10. 通常父窗体支持缩放时，子窗体没有必要缩放。 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 7 页 共 11 页3.5 独特性独特性

9、4 设计标准设计标准4.1 登录界面登录界面应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过 256 色，最好为 216 色平安色。软件启动封面大小多为主流显示器分辨率的 1/6 大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购置者在软件启动的时候得到提示。插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，假设使用摄影也应该进行数位处理，以形成该软件的个性化特征4.

10、2 首页首页首页是用户成功登录后的首先看到的页面，应该能够显示所有和用户当前工作相关的信息。这个页面应该是所有涉及用户工作的一个缩影或者集成。这个页面最能够表达用户操作的方便性和系统的易操作性。4.3 框架设计框架设计软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比拟了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原那么的软件框架。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原那么，并且为将来设计的

11、按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 8 页 共 11 页4.4 按钮设计按钮设计软件按钮设计应该具有交互性，即应该有各种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时状态；独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反响，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。按

12、钮的名称必须是保存字中定义的词语。4.5 对话框对话框4.5.1一般对话框一般对话框4.5.1.1提示提示如用户完成一项任务，提示操作成功。一般在返回页面中提示此信息。4.5.1.2警告警告如用户输入了非法的内容，提示用户重新输入。以提示的语气，如：用户编号格式错误，请重新输入。4.5.1.3确认确认在用户执行一个不可恢复的动作时要让用户确认。以提问的语气让用户确认操作，如： OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 9 页 共 11 页4.5.1.4错误错误系统操作错误和程序运行错误。一般在当前页面中提示此信息。4.5.2有模式对话框有模式对话框给出一个确定的任务

13、。或者是用户需要一段时间的等待。如：计算电费和月初始化。此页面都需要有一个“关闭的按钮。4.5.3无模式对话框无模式对话框给出一个持久的任务。用户在此界面需要进一步的操作或者操作完成后要返回此页面。此页面都需要有一个“关闭的按钮。建议尽量不要使用此种对话框，因为这种对话框父窗口不好控制。4.6 面板设计面板设计面板是指编辑界面。面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。4.7 菜单设计菜单设计每个菜单都应该是一个单独的按钮、图片、组合。一个菜单项的显示、控制不依于其他菜单。菜单项不应该超过 10 个，菜单组要能够表达功能的相似性和逻辑关系。每个菜单项的

14、名称要言简意赅，并且要专业。要有一定的状态变化，如鼠标放上和离 OP-D-A01 A电力营销图形用户界面设计标准广州从兴电子开发 第 10 页 共 11 页开。如果有必要要有一定的提示。鼠标的形状最好能够变成 hand 形状。4.8 图标设计图标设计图标设计色彩不宜超过 64 色，大小为 16x16、32x32 两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。4.9 滚动条滚动条4.10换肤功能换肤功能所有的风格统一用 CSS 控制，禁止单独使用 style。5 保存字保存字这里讲的保存字是用户界面上看到信息。保存字的使用防止用户对操作产生二义性。能标准用户的操