Web交互界面设计与制作(微课版)
上QQ阅读APP看书,第一时间看更新

2.2 设计要素

交互界面由文字、颜色、布局等构成,界面中的任何一个要素对用户都是至关重要的。在重视设计要素特点的同时,还应该对界面整体有统一的认识。

本节要点

(1)能阐述交互界面设计要素。

(2)能运用设计要素完成交互界面艺术设计。

(3)养成关注用户体验的习惯,能塑造交互方式。

1. 字体

界面中的文字可有多种字体样式呈现。字体的设置应符合以下几点。

(1)使用统一字体,字体的选择由操作系统类型决定。

(2)中文采用标准字体宋体,英文采用标准字体Microsoft Sans Serif(MSS),不考虑特殊字体(隶书、草书等在特殊情况下可以使用图片取代),保证每个用户使用时显示都正常。

(3)字体大小根据系统标准字体来设置,例如,MSS字体8磅,宋体的小五号字(9磅)或五号字(10.5磅)。

(4)所有控件尽量使用统一的字体属性,除了特殊提示信息、加强显示等例外情况,所有控件默认使用系统字体,不允许修改,这样有利于统一调整。

(5)系统字体大小属性改变设置的处理根据用户的设置可以改变。Windows系统有个桌面设置,可以设置大字体属性,很多界面设计者常常为这个恼火。设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体时,相对不会有什么特殊问题。但是由于常常使用点阵作为窗口设计单位,改变大字体后,会出现版面混乱的问题。在这种情况下,应该作如下相应处理。

① 写程序自动调节大小,点阵值乘一个相应比例。

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

2. 文字表达

提示信息、帮助文档的文字表达遵循以下原则。

(1)口语化,客气,多用“您”“请”,不要用或者少用专业术语,杜绝错别字。

(2)注意断句,以及逗号、句号、顿号、分号的用法,若提示信息比较多,则应该分段。

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

(4)使用统一的描述语言,例如,一个具有关闭功能的按钮可以描述为退出、返回、关闭,但应该统一规定。

(5)对不同用户采用相应的词语、语气、语调,例如,专用软件中可以出现很多专业术语;对儿童用户,语气可以亲切和蔼,对老年用户则应该成熟稳重。

3. 颜色

颜色要使用恰当,应遵循以下原则。

(1)统一色调,针对软件类型以及用户工作环境选择恰当的色调。例如,安全软件根据工业标准,可以选取黄色;绿色体现环保,蓝色表现时尚,紫色表现浪漫等;浅色使人舒适,暗色做背景使人不容易视觉疲劳等。如果没有自己的系列界面,则采用标准界面,可以少考虑此方面的问题,做到与操作系统统一,读取系统标准色表即可。

(2)对于色盲、色弱用户,即使使用了特殊颜色标识重点或者特别的东西,也应该使用特殊指示符、着重号,以及图标等。

(3)颜色方案也需要测试,由于显示器、显卡的不同,每台机器的色彩表现都不一样,因此颜色方案应该经过严格测试,对不同机器进行颜色测试。

(4)遵循对比原则:在浅色背景上使用深色文字,在深色背景上使用浅色文字;蓝色文字在白色背景下容易识别,而在红色背景下则不易分辨,原因是红色和蓝色没有足够的反差,而蓝色和白色反差很大;除非特殊场合,否则杜绝使用对比强烈、让人产生憎恶感的颜色。

(5)整个界面尽量少使用类别不同的颜色。

4. 色表

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

5. 图形

一个多姿多彩的交互界面少不了精美的鼠标指针、图标,以及指示图片、底图等。

(1)遵循统一的规则,包括上述色表的建立,图标的建立步骤也应该尽可能有一定的标准,参考iTop的OutlookBar图标设计标准。

(2)有统一的图标设计风格,统一的构图布局,以及统一的色调、对比度、色阶和图片风格。

(3)图标应该融合于底图,尽量使用浅色和对比度低的颜色。

(4)图标、指示图片应该很清晰地表达意思,遵循常用标准,用户可以极其容易联想到相关物件,绝对不允许使用莫名其妙的图案。

(5)鼠标指针样式统一,尽量使用系统标准,杜绝出现重复的情况,例如,某些软件中一个手的形状就有4种不同的样式。

6. 控件风格

应设计同一风格的控件,如果没有能力设计出一套控件,则可使用标准控件,绝对不能使用杂乱无章的控件。

(1)不要错误地使用控件,例如,不能使用按钮样式做选项卡的功能样式,不能用主菜单条显示版权信息。

(2)同一类型控件的操作方式相同,例如,双击一个控件可以执行某些操作,而同一类型的控件双击却没有任何反应,这是不允许的。

(3)一个控件只用于实现单一功能,不复用。很多人为了写程序方便,喜欢让一个控件在不同情况下实现不同功能,这给用户初次使用增加了难度。

7. 布局

(1)屏幕不能拥挤。拥挤的屏幕不便于使用。Mayhew在1992年的试验结果表明屏幕总体覆盖度不应该超过40%,而分组的总覆盖度不应该超过62%。界面总体不能太拥挤,也不能太松散。整个项目采用统一的控件间距,通过调整窗体大小达到一致,在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件的行间距。

(2)区域排列。一行控件纵向居中对齐,控件间距基本保持一致,行与行的间距相同,靠窗体边框距离应大于行间距(间距加边缘留空)。当屏幕有多个编辑区域时,要以用户的视觉效果来排列这些区域。

(3)数据要适当对齐。说明文字的中文版应使用中文全角冒号。文字纵向对齐时,要沿着冒号右对齐。纵向排列的控件宽度尽量保持相同,并左对齐。例如,金额等数据应根据小数点对齐,或者右对齐。

(4)有效组合。逻辑上相关联的控件应当加以组合,以表示其关联性,而任何不相关的控件应当分隔开。在项目集合中,用间隔对其进行分组,或使用方框划分各自区域。

(5)窗口缩放时,为防止界面出现跑版,或者布局不当的情况,其解决方法如下。

① 固定窗口大小,不允许改变其尺寸。

② 可以改变尺寸的窗口,在OnSize设置时要做控件位置、大小相应改变的设置。