我和LabVIEW——一个NI工程师十年的编46用户界面设计 3 - 界面元素的关联.doc

用户界面设计 3 - 界面元素的关联 图1：两个菜单 上图左边是 LabVIEW 中的一个菜单。右边那个是我自己对它的“改进”。大家觉得那个好一些？ 显然用户更喜欢组织清晰合理的那个菜单。当一个界面上的元素比较多，找到自己想要的信息就要花上一小点时间。用户常常是一眼就看到了一个与自己想要的信息有一点关联的某个元素，他这时候会期望这个元素就有一定的提示信息，帮他加速找到自己想要的东西。因此，我们要在界面上，告诉用户哪些元素是相关的，或不相关的。 有很多手段可以把界面的元素之间的关联显示给用户，比如通过元素的排布、边框、空白、颜色、字体等等方式。 我们总是在相关内容的附近去找想要的信息，所以逻辑上相关的控件或项目，应当在屏幕空间上相对临近。比如刚刚看到的菜单，Save, Save As, Save All，等等与保存相关的条目应当排在一块。 仅仅把相关内用摆在一起还不够，看看下面这个图片。 图2：小朋友的名字 这是我在网上看到的一个经典笑话：老师发作业本的时候，念小朋友们写在本子上的名字：“黄肚皮”，“鱼是虫”。但是没人答应，最后有两个小朋友没拿到本子，他们的名字分别是“黄月坡”和“鲁蛋”。小朋友们虽然把界面元素按照顺序排列了，但却没有合理的组合它们。 我们上面看到的菜单，有二十多个条目，单纯的把他们排在一起还是不利于用户查看。可以把它们按功能分成几个不同的区域，比如保存文件与Project的操作在功能上相对独立一些，就可以用分隔线，帮它们的项目划分开。对于面板上的控件，功能相关的几个控件可以通过被边框围住、使用分割线、采用不同的间隙等等方法，让用户直观的感觉到他们在功能上的紧密关联。 还有一种表示控件间关联性的方法值得多叙述几句，就是利用不同的颜色。球场上的两组队员，开始分列于球场两端，很容易区分他们是哪一伙的。而一旦比赛开始，这种空间上的提示就不存在了，这时大家主要靠队员衣服的颜色来区分它们属于哪支队伍。在界面设计上当然也可以使用这种方式，为不同功能的控件设置不同的颜色。 需要注意的是，颜色只能作为辅助方式，前几种方法不适用的时候，才需要用颜色来表示关联。颜色与前面提到的几种方式不同：大多数人喜欢排列整齐，布局合理的界面，但喜欢界面颜色丰富的人就不那么多了。相反，颜色艳丽、对比度高的界面会使人视觉疲劳，让人觉得反感。图3：LabVIEW 颜色配置 LabVIEW 配置颜色的面板上分了几类不同的颜色区域。设计系统风格的时候，需要使用系统颜色。其他情况下，尽量使用柔和颜色，避免使用靓丽鲜艳的颜色。还要考虑到色盲、色弱的发病率也是蛮高的，界面设计时要照顾到这些用户。 所以，界面内容不多时，就尽量不要使用颜色了。只有当界面上信息量特别大的时候，颜色才会派上用场。需要使用图片的情况就不用说了，除此之外信息量较大的情况是有大量文字的时候。需要把不同的文字区分开来的时候，比如标注所有拼写错误的单词等等，就可以利用颜色来区分。当然，这时候也可以利用字体，字号等的不同来达到同样的目的。 界面设计中的很多原则