1.5 软件界面设计的黄金法则

软件界面是用户与软件进行交互的平台，由于它在软件中具有特殊的位置，所以软件界面的设计要遵循一定的原则。首先是简易性，简易是为了方便用户使用；其次是清楚安全，指在用户做出错误的操作时有信息介入系统的提示；最后是灵活人性化，指让用户轻松便捷地使用软件。

1.5.1 在实现功能的框下设计

虽然设计师和艺术家都离不开视觉的范畴，但是他们之间是有区别的。艺术家更注重的是自我表达，表达自己的思想、审美、态度等，艺术创作几乎没有什么约束，越自由、越独特，越能够获得成就。而设计师的工作是为了表达，设计是寻找最适合的表现形式来传达具体的信息，设计师是在一定的框架内表达。“设计就是戴着脚镣跳舞”十分生动地讲述了设计行业的特点。

对于软件界面设计，同样应该以实现功能为首要前提，找到一种最合适的表现形式去实现软件的功能和交互设计，同时兼顾它视觉上的艺术性。就是说应该在实现用户目标和愉悦体验度的框下考虑图形界面设计。当然优秀的软件界面的艺术性和格调，以及传达的品牌形象是产品综合竞争力中重要的砝码。好的视觉设计能满足用户某种程度的情感需求，目标就是设计功能和视觉都优秀的软件界面。

1.5.2 层次结构清晰

① 运用视觉属性将元素分组

在图形软件界面设计中，通常按照不同的视觉属性来区别不同的界面元素和信息。视觉属性包括形状、尺寸、颜色、明暗、方位和纹理等，下面对这些视觉属性进行详细介绍，在后面的软件界面设计中会有所帮助。

形状。

形状是人类辨识物体最基本也是最本能的方式，地球是圆的、书本是方的、石头呈奇怪的形状。如图1-10所示的软件界面元素中，按钮是方的、旋钮是圆的、滑动条和滑块是圆角形矩的。正是这些不同的形状属性区别了对应操作的逻辑和方法。

尺寸。

一个空间上的物体哪个大哪个小，人们很容易分辨出来。在一群相似的物体中，比较大的那个会更引起注意。当一个物体非常大或者非常小时，很难注意到它的其他属性，例如颜色、形状等，如图1-11所示。

颜色。

颜色绝对是视觉属性中重要的部分，颜色的不同可以快速引起人们的注意，例如，在黑色的背景下，一块柠檬黄的颜色是非常显眼的，而且颜色能传递出信息，例如红色可以传递警告、危险、促销、喜庆等不同的信息，需要在适当的时候使用它。但是有一点，由于存在一些色弱或色盲的用户人群，不能单纯依赖颜色属性来设计，需要配合明暗、形状、纹理等属性发挥综合视觉效应，如图1-12所示。

需要注意的是，对于初学者，运用颜色时要精简而理智，不要运用过多的颜色，一旦颜色过多，就难以把握重点要传递的信息。只有具备足够的经验和能力，才可以设计出类似Windows 8那样绚丽而又明晰合理的界面，如图1-13所示。

方位。

方位表示方向或方位的属性，向上、向下、向左、向右，以及前进或后退等，例如软件界面中常见的步骤条，如图1-14所示。

纹理。

纹理表现元素的质感，例如光滑还是精糙、轻薄还是厚重、凸起还是凹陷等。例如iOS的亚麻布纹理代表这是一个属性系统级的界面，而不是一个应用；而Windows里的滚动条滑块上有3道凹凸的纹理，隐喻的是现实中为了增加摩擦力而设计的可推动的滑块，如图1-15所示。

② 如何创建层次结构

了解视觉属性后，设计软件界面元素时就可以使用它们创建出层次结构。

最先被看到或被注意的元素应该采用相对较大的尺寸、高饱和度的颜色、强的明暗对比；次要的元素采用小一点的尺寸、低一点的明暗对比、较低饱和度的颜色等；不饱和颜色及中性色可以用于不重要的界面元素。这样界面的层次和结构就依照视觉的层次分清了。

如图1-16所示为天气插件UI设计，在该界面设计中最首要被关注到的是标题栏下方最具视觉冲击力的色彩和图形，按照心理学的理论，图形（包括图像和视觉图形）是最先被注意的，然后是文字、背景等。抛开图形的因素，再来分析一下这个界面的层次结构和对应的视觉属性。

首要的是位于标题栏下方当天天气的详情部分，使用与界面高对比的色彩形成较大的反差，并且尺寸也较大，同样搭配背景和图形的表现，使人们很容易就能够注意到该部分内容。

其次就是界面最下方的功能操作按钮部分，该部分虽然面积较小，并且在界面的最下方，但是其采用了与主信息区域相同的背景颜色，与界面的色彩形成较大的反差，也会被用户注意到，但因为面积关系，其重要性要次于主信息显示区域。

第三层次就是界面中的其他区域，该部分的色彩饱和度较低、明度较高，其层次结构明显弱于主信息显示区域和功能按钮区域。

③ 要点和技巧

当发现有两个不同功能的重要元素都需要被注意时，这时不要提高重要的那个元素的视觉层次，最好降低相对不重要的那一个元素的视觉层次。这样就能有继续调整的空间，可以强调更重要、更关键的元素。跟素描的道理有些相似，在暗部可以透气和虚化一些，那么明暗交界线自然会实一些、立体一些。

在软件界面设计中，同类型的元素应该具有一样的属性，用户会将一样的属性视为一组。如果所设计的元素在功能和操作上不同于这一组，就要用不同的属性来区分它。

相似的操作在位置上尽可能放在一组，这样避免鼠标或手指长距离地移动，给软件的易用性带来负担，如图1-17所示。

④ 眯眼测试

眯眼测试是绘画中测试整体效果的一种方法。当创建完层次结构以后，可以眯起眼睛模糊地看它们，这时可以看出哪些是被强调的，哪些是模糊和弱化的，以及哪些是一组的等。测试后发现与想象中的层次结构不符的，可以通过调整视觉属性来改善它。

提示

通常情况下，在软件界面设计中不会单纯地运用单个的视觉属性，而是用多个属性来调节，特别是在创建复杂的层次结构时。

1.5.3 一致性和标准化

界面的一致性既包括使用标准的控件，又指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致，如图1-18所示。

在不同分辨率下的美观程度。软件界面要有一个默认的分辨率，而在其他分辨率下也可以运行。

界面布局要一致，如所有窗口按钮的位置和对齐方式要保持一致。

界面的外观要一致，如控件的大小、颜色、背景和显示信息等属性要一致。一些需要特殊处理或有特殊要求的地方除外。

界面的配色要一致，配色的前后一致会使整个应用软件有同样的观感；反之，会让用户觉得所操作的软件杂乱无章，没有规则可言。

操作方法要一致，例如，如果双击其中的选项触发某事件，那么双击任何其他列表框中的选项都应该有同样的事件发生。

控件风格、控件功能要专一，避免错误地使用控件。

标签和信息的措词要一致，例如在提示、菜单和帮助中产生相同的术语。

标签中文字信息的对齐方式要一致，例如，如果某类描述信息的标题行设计为居中，那么其他类似的功能也应该保持一致。

快捷键在各个配置选项上的语义保持一致，如Tab键的习惯用法是阅读顺序从左到右、从上至下。

1.5.4 给予足够的视觉反馈

① 静态视觉暗示

静态视觉反馈指的是软件界面元素在静止状态下本身的视觉属性所传递的暗示，例如一个按钮，它看起来是微微凸起的，带有立体感和阴影，那么暗示的就是这个元素是一个可以被按下的按钮，如图1-19所示。

② 动态视觉暗示

因为静态的暗示需要一定大小的尺寸和像素来塑造，软件界面上不能全是这种类型的元素，否则就像上面讲到的没有层次和重点。这时可以采用动态视觉暗示。一般是指光标掠过这个元素时发生的变化，或者是执行某个操作后出现的变化。

例如，软件界面中常见的选项卡，当鼠标滑过的时候，会出现按钮的形状，暗示这是可以按下的，按下后会变成被选中的选项卡。再例如手机软件界面中常见的内容刷新方式，当下拉屏幕时，出现一个圆形的更新图标，继续往下拉它的形状会被渐渐拉长，最后弹回去消失，这个动态过程就是在告诉人们可以继续拉，到一定程度就触发了加载新内容的动作，如图1-20所示。

③ 光标暗示

光标在经过或到达某个元素时，通过改变光标本身的形状来暗示，光标暗示可以用在一些元素很小、用户不好辨识的位置。例如，在许多软件界面中光标经过软件面板的边框或者是软件界面中的分栏时，光标形状会变为水平方向的双箭头，这是暗示可以拖曳用以改变面板的大小或分栏的位置，如图1-21所示。