跳到主要内容

用户界面设计

· 阅读需 26 分钟

新版本请查看: https://lv.qizhen.xyz

    有些软件,一打开来就让人眼前一亮,可能是它的界面设计的非常新颖、华丽。但漂亮视觉感只能是作为锦上添花,评判一个界面好坏的最基本指标首先还是要看这个界面是否完成了它的交互功能-用户可以通过界面为程序提供必要的信息;用户可以通过界面接受到需要的信息。其次的指标是通过这个界面用户是否可以简单直观的输入或获取信息。最后才是界面的美观程度。
    从这个角度说,一个好的界面,通常是不会引起用户注意的界面。多数时候,引起用户对界面的注意是因为他觉得别扭:找不到所需的信息,或输入信息的地方了。

    使用LabVIEW 开发一个项目,或编写一个软件,比较理想情况下是按照下面五个步骤顺序进行:收集需求、设计、编码、测试、发布及维护。细分设计阶段,一个项目所需的设计可能有用户界面设计,程序结构设计,接口设计,模块设计等等。对于编写 LabVIEW 程序,通常首先做用户界面设计。
    先做界面设计可以使界面不受程序实现的影响。若先设计程序结构,再设计界面,难免会朝着最可能简化编码工作方向去做。但是这样的界面往往不是最方便用户使用的界面。
    使用比较老的文本语言编程,设计用户界面时通常现在草稿纸上画出原型。LabVIEW 在这方面有独特的优势,它的可视化编程做的非常方便。有大量现成的控件,控件属性更改非常方便。因此,用户可以以拖拽的方式,直接用 LabVIEW 来设计界面原型。
    对于界面好坏的评判,每个人都会有不同的观点。仁者见仁,智者见智。但是,好的用户界面都有一些共同的特点:一致性、使用恰当的数据类型和控件类型、控件的分类排布合理、简洁。我们在设计自己的程序界面时也要考虑到这些因素。
《我和 LabVIEW》

一致性

    让用户迅速接受并且方便的操作一个程序界面,最关键的一点就是让这个界面保持高度的一致性。这里说的一致性包涵一下多个方面的一致:

一、程序内部的一致性

    由于应用领域、面向的客户群体的不同,不同的软件可以有自己独特的风格。比如,为儿童设计的软件(例如使用乐高游戏版的LabVIEW)几面可以加一些卡通图片,走可爱路线;为青年群体设计的软件,可以采用大量鲜艳颜色,显得活泼;LabVIEW 程序更多的时候是应用于工业领域,面向专业技术人员,这样的程序界面风格应当柔和、朴素。
    不论一个程序采用了哪种风格,它内部不同界面(比如不同的对话框),同一面板上的不同控件等,它们的风格应当保持一直。一个软件采用统一的风格,才会让用户有一种“和谐”的感觉。
    打开 LabVIEW 的控件选板,会发现有三种不同风格的控件:经典风格、现代风格、系统风格,如图1所示:


图1:三种不同风格的控件

    经典风格的控件看上去比较土气,是 LabVIEW 6 之前的版本所使用的控件。一般不要用这种风格的控件了,有两种情况除外:
    第一是维护老程序的时候,老程序可能还是用的这种控件,为了界面风格统一,又不想花时间改造原来的程序,那就继续用经典风格的控件。
    第二是需要造一个透明控件的时候。这是一个小技巧,比如你希望有一段提示文字出现在界面上,需要使用字符串控件,但是你有希望文字直接出现在面板上,用户看不到包裹它的控件。这时候,就可以使用一个经典风格的字符串控件,然后用画笔把它的边框和背景都画为透明色即可。

    LabVIEW 6 使用了一些重新设计的非常美观的立体效果控件,这就是现代风格的控件。编写测试领域的软件,可以首先考虑使用这类控件。

    系统风格的控件外观与操作系统保持一致。我们编写的一般软件,希望用户比较易于接受时就可以使用这类控件。使用这类控件编写的界面,与系统自带的程序看上去风格非常一致。系统风格的控件会随着系统的不同,和系统设置的不同而随之调整。比如,把你的程序拷贝到 MacOS 的机器上,文本框会自然变成 MacOS 上圆弧角的风格。把系统颜色设为高亮反转显示,文本框也会变为黑底白字。
    但是,LabVIEW 特有的控件,比如波形显示控件等,是没有系统风格的。如果你的程序整体式系统风格的,在使用这类控件时,要注意调整一下控件的颜色,使他们与其它控件的颜色保持一致。

二、与约定俗成的习惯保持一致

    有很多设计或操作方法,已经被大家广为接受了。他们也许不见得美观或优化,但是一旦习惯养成了,就很难被改变了。据说我们现在使用的键盘,是当年为了延缓打字速度而精心设计出来的打字最慢的键盘排布方式。但现在大家都用习惯了,没人会为了打字快一些而换用其它按键排布方式。
    与软件相关的比如,Ctrl+C 表示拷贝;Ctrl+V 表示粘贴。你如果用这两个键去干你认为更适合的工作,肯定会被用户骂死。在 LabWindows/CVI 中,查找的快捷键居然不是 Ctrl+F,搞得我只好不用它的快捷键。

    对于应用程序界面,大家最习惯的就是 Windows 默认的界面风格了。简单来说,这样的界面就是:使用窗口,窗口最上方是标题栏,下面是菜单,再下面是工具条,再下面是主体内容,窗口最下方是状态栏,右面是滚动条。
    如果你非要标新立异,把标题栏和滚动条的位置互换一下,那你的程序一定被用户骂死。不过,实力强大的公司也许会可以逐渐改变人们的习惯。微软今年推出的 Office 07 比以往的界面风格有了重大改变,也许是为了配合 Windows Vista。新的界面漂亮的不少,但它还是遭到了很多用户的抵制,就是因为在使用功能区(ribbon)替代了原来的菜单和工具栏之后,用户再也不能从熟悉的地方找到他们所需的操作了。
    LabVIEW 默认的颜色配置和控件风格,与系统的风格也是有区别的。所以为了照顾新用户,不妨在程序里尽量使用系统风格的控件和颜色配置。

三、与真实事物保持一致

    有很多程序是对现实世界的模拟或模仿,这样的程序若希望便于用户接受,最好是尽量与现实世界保持一致。比如电脑游戏,规则一定要与现实世界接近,若完全采用不同的规则,比如越练功人品越差、被人看几刀魅力值会增加等等,玩起来一定特别别扭。
    LabVIEW 编写的程序大多与测量、控制等有关,在这些领域,原本也存在着一些相关的仪器或设备。因此软件的界面可以借鉴这些仪器的外观。比如需要实现的程序要完成一 个类似示波器的功能,那么界面最好设计的和传统的示波器一样:一边是现实波形的控件,周围有调节垂直、水平方向范围的按钮等。这样,用户只要曾经用过示波 器,不需要再学习任何知识,直接就可以使用你的软件了。
    NI 公司开发的 Soft Front Panel 产品可以看作是与真实事物保持一致的一个很好范例。

四、建立并遵循界面规范

    使界面保持一致性的最好办法就是在设计开发时遵循一定的规范。这个规范可以由公司内部定义,也可以遵循现有的行业规范。对于开发 Windows 系统风格的程序,可以遵循微软定义的界面规范。对于一般的 LabVIEW 程序,可以遵循 LabVIEW 程序开发规范。

界面元素的关联

    
图1:两个菜单

    上图左边是 LabVIEW 中的一个菜单。右边那个是我自己对它的“改进”。大家觉得那个好一些?
    显然用户更喜欢组织清晰合理的那个菜单。当一个界面上的元素比较多,找到自己想要的信息就要花上一小点时间。用户常常是一眼就看到了一个与自己想要的信息有一点关联的某个元素,他这时候会期望这个元素就有一定的提示信息,帮他加速找到自己想要的东西。因此,我们要在界面上,告诉用户哪些元素是相关的,或不相关的。
    有很多手段可以把界面的元素之间的关联显示给用户,比如通过元素的排布、边框、空白、颜色、字体等等方式。

    我们总是在相关内容的附近去找想要的信息,所以逻辑上相关的控件或项目,应当在屏幕空间上相对临近。比如刚刚看到的菜单,Save, Save As, Save All,等等与保存相关的条目应当排在一块。
    仅仅把相关内用摆在一起还不够,看看下面这个图片。

  
图2:小朋友的名字

    这是我在网上看到的一个经典笑话:老师发作业本的时候,念小朋友们写在本子上的名字:“黄肚皮”,“鱼是虫”。但是没人答应,最后有两个小朋友没拿到本子,他们的名字分别是“黄月坡”和“鲁蛋”。小朋友们虽然把界面元素按照顺序排列了,但却没有合理的组合它们。
    我们上面看到的菜单,有二十多个条目,单纯的把他们排在一起还是不利于用户查看。可以把它们按功能分成几个不同的区域,比如保存文件与Project的操作在功能上相对独立一些,就可以用分隔线,帮它们的项目划分开。对于面板上的控件,功能相关的几个控件可以通过被边框围住、使用分割线、采用不同的间隙等等方法,让用户直观的感觉到他们在功能上的紧密关联。

    还有一种表示控件间关联性的方法值得多叙述几句,就是利用不同的颜色。球场上的两组队员,开始分列于球场两端,很容易区分他们是哪一伙的。而一旦比赛开始,这种空间上的提示就不存在了,这时大家主要靠队员衣服的颜色来区分它们属于哪支队伍。在界面设计上当然也可以使用这种方式,为不同功能的控件设置不同的颜色。
    需要注意的是,颜色只能作为辅助方式,前几种方法不适用的时候,才需要用颜色来表示关联。颜色与前面提到的几种方式不同:大多数人喜欢排列整齐,布局合理的界面,但喜欢界面颜色丰富的人就不那么多了。相反,颜色艳丽、对比度高的界面会使人视觉疲劳,让人觉得反感。


图3:LabVIEW 颜色配置

    LabVIEW 配置颜色的面板上分了几类不同的颜色区域。设计系统风格的时候,需要使用系统颜色。其他情况下,尽量使用柔和颜色,避免使用靓丽鲜艳的颜色。还要考虑到色盲、色弱的发病率也是蛮高的,界面设计时要照顾到这些用户。
    所以,界面内容不多时,就尽量不要使用颜色了。只有当界面上信息量特别大的时候,颜色才会派上用场。需要使用图片的情况就不用说了,除此之外信息量较大的情况是有大量文字的时候。需要把不同的文字区分开来的时候,比如标注所有拼写错误的单词等等,就可以利用颜色来区分。当然,这时候也可以利用字体,字号等的不同来达到同样的目的。

    界面设计中的很多原则,与艺术创作的原则一样,是以心理学中对人脑视觉认知的研究为理论依据的。心理学中与界面元素关联相关了一些理论可以参考《形状知觉中的分组》

帮助和反馈信息

    用户界面要照顾到那些不熟悉它的用户。为了方便用户了解界面的使用方法,需要给用户提供足够的帮助信息。对于 LabVIEW,给用户提供提示主要通过以下几个手段:用户手册、在线帮助窗口、提示条、利用控件的标题、选项文字、直接把帮助文字写在界面上。

    不论何时,都应该尽量使用有意义的控件名称。比如某一控件用来表示使用触发信号的上跳沿还是下跳沿作为触发条件。假若偷懒,不给这个控件起名,或者起个很简略的名称如“方式”,用户在看到这个控件时还是无法得知其确切用途。不如将名称写的详细一些,如图1所示的“边沿触发方式”,会更便于用户理解。
    单有控件标题还不够完善。因为这个控件的输入值只有两种,可以使用布尔数值类型来表示。但是用户并不清楚“真”值在这里表示的是上跳沿还是下跳沿。因此,还应该把表示当前状态的布尔文本也显示出来。这样用户就可以行处的知道当前是什么方式。


图1:一个布尔型控件

     提示条在一般程序中使用的非常广泛,把鼠标移到工具条的按钮上,就会出现一个黄色的小条提示这个按钮的用途。但是,由于 LabVIEW 有一个 Context Help 窗口,使用 LabVIEW编写的程序大多数是把帮助信息写在这个在线帮助窗口里,就不需要再为界面添加提示条了。与提示条相比,在线帮助窗口面积比较大,可以写入更详细的信息,但是有时候可能影响整个界面的美观。

    在线帮助窗口可以容纳的信息也还是有限的,对于十分难以掌握的界面,就只能把信息写到用户手册中去了。如果用户手册有相关内容一定要在界面上醒目的提示用户可以查看用户手册。在 LabVIEW 程序中,一般是把相关的链接写在在线帮助窗口中。

    对于那些不经常被访问到的界面,比如用户可能一两年才使用某一配置界面一次,是不能指望用户记住界面上每个条目的意义的,而且这样的界面也不必做的太简洁。因此可以把帮助信息直接就写在界面上。

    以 Import Shared Library 工具为例,下图是它的一页界面。在这个界面上其实用户真正需要选择的就只是“Error Handling Mode”这一项。界面下方的文字,是针对不同的错误处理模式的解释说明。用户选择不同的模式,给出的帮助文字也会相应调整。由于这个错误处理模式仅用文字描述还不够直观,因此界面中部还给出了图片作为帮助信息。
    按 Ctrl+H 键,就会看到在线帮助窗口,里面有对每个界面元素的解释。如果觉得这还不够详细,可以点击界面右下方的 Help 按钮打开用户手册,阅读更为细致的解释。


图2:Import Shared Library 的界面

限制

    保障软件的可靠性是软件开发者的责任。如果用户误操作,或者提供了错误的数据给程序,稳定的程序可以组织程序继续运行并报告错误。但这毕竟是亡羊补牢的做法,更完美的解决方案应倒是从根源上就杜绝误操作和错误的输入数据。
    所以,在做界面设计时,还应考虑如何限制用户的输入数据和操作。禁止误操作出现,把输入数据都限制在合理的范围内。

一、限制输入数据

    LabVIEW 的某些控件本身就带有对输入数据进行限制的功能。比如数值型控件,在它的属性对话框中的 Data Entry 页,可以设置这个控件接受的数据的范围。我有一个控件用来表示选取某个通道,可供使用的合法数据为通道0至通道3,我们就可以在这一页把控件的最大最小值分别设为3和0。如下图:

 
图1:数据范围限制

    这样设置后,用户也许还会输入一个不合理的数值,比如99,但LabVIEW 会立即忽略这个不合理数值。
    有时,还有更好的限制方法:让用户根本没办法选择不合理的数据。比如本例,我们在设计时,可以考虑使用 Enum 或 Ring 型控件来表示通道号,这样用户只能在正确的值中选择一个。如下图:


图2:枚举型数据

    除了 Enum 或 Ring 型控件,单选按钮也可以起到同样的效果。单选按钮可以直接就在界面上显示出所有可供选择的值,并且可以附带对每个选项的详细解释。不经常被用到的对话框可以采用这种控件。比如下图,是VI属性中设置密码的页面。

 
图3:使用选择按钮的界面

二、防止误操作

    一个简单的规则:让所有但是不应被改动的控件都失效。大家看图3中的修改密码按钮是灰色的。因为这是用户选择的是无密码,所以当时不应出现修改密码的操作出现。与其让用户判断是否可以按这个按钮,不如直接禁止它的使用,以防用户错误的按下它发生不可预期的错误。当用户有密码设置后,再允许这个按键被使用。