一些界面标准规范(1)

[理论] 通用界面指南

--------------------------------------------------------------------------------
http://www.host01.com/article/software/Delphi/20060917183650510.htm
□ 作者:Bruce 2003-1-7 11:00:07
一：遵循一致的准则，确立标准并遵循
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。
这样得到的好处：

 

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

 

2：降低培训、支持成本，支持人员不会行费力逐个指导。

 

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

 

做法：

 

项目组有经验人士，确立UI规范：

 

＆#183;美工提供色调配色方案，提供整体配色表

 

＆#183;界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

 

控件功能遵循行业标准，windows平台参见《Microsoft 用户体验》(MSDN中有，中文已经翻译发行，项目组必须有一本)

 

控件样式在允许的范围内可以统一修改其样式、色调

 

参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

 

根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的

 

＆#183;界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。

 

＆#183;建立合理化文档《UI标准》描述上述规范，

 

＆#183;强行界面设计者理解之，并作为开发准则，

 

＆#183;SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

 

二：(Color)颜色使用恰当，遵循对比原则：
1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

 

如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

 

2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

 

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等

 

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

 

5： 遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反 差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。 6：整个界面色彩尽量少的使用类别不同的颜色

 

itop色表

 

具体标准参考美术学统计学术标准。 色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

 

三：(Resource)资源
一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

 

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准

 

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

 

3：底图应该融于底图，使用浅色, 低对比，尽量少的使用颜色。

 

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。

 

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

 

如：《如何创建XP图标》

 

附件：Itop outlook howto.doc 描述itop项目中，outlookxp风格图标的制作方法

 

四：(Font)字体
使用统一字体，字体标准的选择依据操作系统类型决定。

 

中文采用标准字体，＆#8220;宋体＆#8221;，英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

 

字体大小根据系统标准字体来，例如 MSS字体8磅，宋体的小五号字(9磅）五号字（10.5磅)。

 

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

 

ITop采用BCB，所有控件默认使用 parent font，不允许修改，这样有利于统一调整。

 

＆#183;系统大小字体属性改变的处理。

 

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

 

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

 

这个情况下，应该做相应处理：

 

1：写程序自动调节大小，点阵值乘以一个相应比例

 

2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

 

五：(Text)文字表达
提示信息、帮助文档文字表达遵循以下准则：

 

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

 

2：断句逗号句号顿号分号的用法， 提示信息比较多的话，应该分段，

 

3：警告、信息、错误 使用对应的表示方法

 

4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

 

5: 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

 

六：(STYLE)控件风格，不要使用错误控件，控件功能要专一
有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

 

＆#183;不要错误使用控件，例如：

 

使用Button样式做TTable的功能，拿主菜单条显示版权信息，

 

＆#183;统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

 

＆#183;一个控件只做单一功能，不复用

 

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。 例如

 

改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

 

1:分组，使用双份控件.

 

2：使用TABLE页，给用户很明显的视觉变化

七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件
1：屏幕不能拥挤

 

拥挤的屏幕让人难以理解，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40％，而分组钟覆盖度不应该超过62％。

 

让人看上去，不能太拥挤，也不能太松散。

 

整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

 

2：区域排列

 

一行控件，纵向中对齐, 控件间距基本保持一致

 

行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。

 

当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

 

3：数据对齐要适当

 

说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。 纵向控件宽度尽量保持相通。并左对齐。

 

例如金额等字符穿应根据小数点对齐，或者右对齐

 

4：有效组合

 

逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想光的项目应当风格开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。

 

例如： 以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关，

 

则应该修改为： 搜索方式和入帐方式调换位置。以免用户产生误解。

 

5：窗口缩放时，控件位置、布局：

 

为了使界面不出现跑版或者难看的局面，解决方法：