豪杰V8(sp1)的界面设计考察

豪杰V8(sp1)的界面设计考察- -

作者：雷立辉(goooder.blogchina.com)

声明：本文章中讨论的软件是随机选取而没有考察所有同类产品，所以请各位不要讨论为什么是这个软件而非那个软件。而且，由于文章中某些截图画面的确无法避免对原来软件名称及软件公司的显示，而且这组文章仅为研究和学习之用，所以为了描述方便我也就直接引用原软件名称了。本文章绝对没有对软件生产者和软件作品有攻击之意。如果评述有什么不当之处，也请各位读者和软件生产者批评和海涵。

1 引子

去年的有一天，我尝试着使用了一下豪杰V8，当时我正关注别人如何设计界面，所以我就从界面设计考察了一下这个软件。我当时写下了我的所想，今天又发现了这篇没有发表的文章，就放到了我的blog中，希望豪杰公司不要在意我太挑剔故意找茬儿。本人绝对没有攻击豪杰之意，只是讨论界面如何设计的问题。

和建筑设计类似，由于界面设计只存在理论、原则和指导原则，但没有严格的标准。所以，以下内容所提及的解决方案极有可能不是最优的甚至可能具有更好的可替代方案。而且，本人也是初学者，就这些问题和大家讨论讨论吧。

2 安装程序设计指导原则

对于比较复杂的必须使用安装程序来预先设置运行环境的程序来说，安装程序界面的友好性至关重要。因为它是用户使用此软件的必经通道，程序的初始表现决定着用户是否对此软件会产生信任和使用的信心。下面就是我综合各种参考资料所总结出的若干指导原则，与大家分享：

¨ 尽量少的步骤，尽量简单的过程。
不要让用户点击太多的按钮，做过多的选择。可以将安装程序分为两个过程让用户做出选择：一种是典型安装，另一种是自定义安装。典型安装提供了一个简明扼要的安装步骤，从而避免让那些初级用户被那些纷繁的选择吓倒。而对于那些高级用户，则提供自定义安装逐步引导他们完成必要的设定。典型安装要简单再简单，需要用户选择时也要尽量提供缺省选项。

¨ 尽量避免重启系统。
重启系统有可能会打断用户当前的工作从而造成用户的不便。重启系统的必要性在于安装程序更新了系统组件，但这种改动显然有可能会影响系统的稳定性。所以，不到万不得已的情况下，不要修改系统组件。

¨ 安装过程中要有安装进度提示，必要时提供上下文帮助。
安装进度条及提示可以减缓用户等待的焦虑感。同时，在安装过程中可以将软件的（新）特性使用列表的方式逐步显示，起到一个预热的作用，加速用户熟悉软件的程度。同时，避免弹出不必要的信息对话框打断安装过程。

¨ 不要在开始菜单中添加诸如"技术支持"，"在线帮助"等菜单项。
这来源于《Windows用户体验》。理由是"技术支持"，"在线帮助"等都可以在程序里面访问到。把它们加到菜单里面只能造成用户选择应用程序菜单项困难。

¨ 安装程序结束之后，确保用户在5分钟之内可以使用主程序。
请务必记住用户在安装之后马上就会使用该软件。

¨ 提供相应卸载程序。
只能安装而没有提供相应卸载程序的方式是对用户自由的限制，是不友好和不负责的软件。

¨ 使用优秀的安装包制作工具减轻开发压力。
或许这是一种"软件复用"的行为吧！除非必要，否则采用一套优秀的安装包制作工具会省事省力的!

3 豪杰超级解霸 V8（SP1）安装程序点评

可以说，豪杰软件是伴我一起成长的软件，特别是其之媒体播放软件豪杰解霸，闻名遐迩。记得当时大学宿舍和舍友一起合置的计算机之后，格式化硬盘，等Windows 98装完之后，就是安装这个软件了（暂且不表安装一些其它的流行游戏了）。其优点是读盘能力强，那种伤痕累累的光盘，它吭巴吭巴的，最多出几个马赛克，就跳至精彩画面了......

一个特别的机缘让我重新尝试安装此软件，使用此软件。以前我只是一个普通的用户，懵懵懂懂，只要装完就使用了。而现在我就变成了一个挑剔的用户，想使劲挑出它的缺陷。下面就是一些我对豪杰超级解霸V8的一些考察，该软件从其官方网站下载得到：

3.1 初级用户可能不明白的名词术语

启动安装程序，首先让我注意到的是安装程序的背景画面的提示，这些提示向用户介绍了软件的新特性（这一点非常的好），如下图（图表 1）所示：

图表 1 安装程序背景截图（部分）

3.1.1 所用原则：

缩略语使用原则：Ehrenreich和Porcu(1982)提出了使用缩略语的一些指导原则，其中有一条："除非有十分严重的问题，否则不应当让计算机在生成的消息里使用缩略语让用户阅读"。

专业术语隐藏原则：《Windows用户体验》一书指出，尽量避免使用用户不懂或者不太清楚的行业术语。如果出现，请提供上下文解释。

3.1.2 具体分析：

使用上面的原则，发现主要问题如下：

1． 因为是中文环境，DC，DV这些缩略语应该用"数码相机"，"数码摄像机"替换。

2． 这一串"RM\AVI..."缩略语加专业术语，对于那些非计算机媒体专业用户来说，实在有点太难了。

3． 从内容上看是一问一答，但实际采用项目列表方式，让人困惑。

3.2 问题二：功能复杂，内容繁陈的安装选项用户定制对话框：

看样子豪杰超级解霸设计者将减少程序安装步骤的原则（见本文安装程序设计指导原则1）用过头了。他们将用户设定的很多选项压缩到一个界面里，没想到却有点儿弄巧成拙了。

3.2.1 几条提高界面简单性的指导原则

¨ 提高界面简单性方法之一：不要显示过量的信息。通过递近的信息显示方法（progressive disclosure）来降低界面的复杂度。递近的的显示方法就是仔细的组织信息从而让它只在需要它出现的时候它才出现。通过无用消息隐藏，使得用户减少了信息的处理量。

¨ 提高界面简单性方法之二：设置智能和有效的缺省参数。通过这种方法来降低系统配置难度从而减少特别是初级用户使用软件的难度。同样的，提供为熟练用户或高级用户进行个性化配置的接口命令。

¨ 提高界面简单性方法之三：着力于解决方案而非特性。避免添加那些用户不想使用或者使用频率很低的特性。

¨ 提高界面简单性方法之四：提供有效的信息提示和友好的名称。这包括不使用用户不理解的术语，对复杂选项即时给予解释，提供在线帮助等等。

¨ 提高界面简单性方法之五：保持一致性。相似性质的操作有相似的操作方法和界面。

3.2.2 具体分析：

下面是安装程序进行到第二步（图表 2）时的画面，我就对这个对话框的复杂功能产生了兴趣：

图表 2 安装程序的第二个画面（点击大型模式后的界面显示）

1． 模式选择缺乏文字定义，但在后面却有"安装模式"出现。给用户造成混乱。其实我认为将"安装模式选择"，"安装模式说明"及"信息"作为第二个画面，其它内容（安装组件选择）做成第三个画面。这样内容就很有层次感，也没有太多的视觉压力了。

2． 在"大型模式"选择时，"资源管理器MPG/VOB格式快捷播放"没有被选中。这说明测试人员或功能定义人员有失误。

3． 这个对话框中，说明信息的地方有三处：安装模式说明、段内容说明、信息。特别是第三个提示的概念是如此之宽泛，其实改个名字叫"版本及文件大小信息"都会好看的多。而且，请注意第三项信息还不是完全显示。这种显而易见的错误容易让用户产生软件做的比较粗糙的印象。

4． 这个对话框完成了三个任务：安装模式选择，安装组件选择，以及很奇怪的安装完毕后自动退出选项。我不仅要问，安装程序安装完毕后不退出它还要做啥？

5． 有5个按钮。其中"全部选中"按钮功能控制范围不清楚。我不知道它究竟会选择那些，会不会将"安装完毕后自动退出"也会选择。简单的解决这个问题的方法是进一步明确按钮标题，比如说按钮标题改为"选中全部组件"就会好很多。

6． 两个公司的提示信息。其实有上面那个大红条就足够了。下面的那个红色安装图标还会动画，真是喧宾夺主。

3.3 问题三：自作主张的路径选择方案，健忘的程序

如果你经常上网，你应该会碰到那种可恶的网页脚本，要不提示你装个什么"实名"的，要不强迫你将其网站加入收藏，甚至有的更是自作主张，直接给你装上再说。这种强迫用户安装的行为无异于软件的"强奸"计算机的行为，先造成既定事实，看你愿意不愿意？

我在这个安装程序里就碰到了这种情况。

3.3.1 所用原则：

Windows有它自己的设计初衷和设计原则，这种原则的一致性有利于用户的操作和使用。这也是交互设计中的一项重要原则。作为一个Windows的标准程序，它应该尽量符合Windows界面的规范。可以说，集成于MSDN中的电子书《The Windows User Experience》应该就是Windows界面的指导原则。下面就是摘录于其中的一点关于部分Windows目录的设计初衷：

My Documents（我的文档）

用来存放用户自己创建的文档和数据。

My Documents\My Pictures

用来存放用户创建的图片文件，包括从扫描仪扫描和数码相机上下载的文件。

Program Files\安装程序名

存放应用程序的只读文件和例程。

Program Files\Common Files\公司名称\

存放可被其它程序使用的组件或服务。

Documents and Settings\ 用户名\Application Data\程序名\

存放那些与用户个性化设置相关与应用程序相关的文件或目录。

Documents and Settings\ 用户名\Local Settings\

存放那些与用户个性化设置相关的公用文件或目录。

Documents and Settings\ All Users\Application Data\程序名\

存放那些与所有用户个性化设置相关与应用程序相关的文件或目录。

遵从操作系统界面指导原则，99％没有错。

3.3.2 具体分析：

图表 3 程序的缺省安装目录不在"Program Files"下面。

上图（图表 3）大致问题如下：

1． 缺省路径是不在%system%/Program files/下面，而是建立在C盘根目录。不符合Windows应用程序所遵循文件系统使用指导原则。

2． 健忘的程序：点击画面上的"浏览"按钮打开路径选择对话框（此图未出现），然后选择路径到"d:/program files/"，按确定之后关闭路径选择对话框。然后用户通过手工追加输入"heroV8"，此时目的地目录变成了"d:/program files/ heroV8"。这时，点击对话框"后退"按钮返回上一个对话框（即图表 2），然后又点击这个对话框（图表 2）"下一步"按钮，回到图表 3，这时，你就会发现程序没有完全记住路径，上面的目的地路径只是"d:/program files/"了（只要是手工输入的路径就都不能记忆，而比如像InstallShield之类的工具产生的安装程序就不会这样）。

3． 创建无用文件夹。点击下一步，等安装结束结束之后。虽然我将程序安装到目录"d:/program files/ heroV8"下了，但安装程序在C盘创建的目录"C:/herosoft/heroV8"并没有删除。

3.4问题四：卸载功能不完善

卸载程序是安装程序的一部分，这是自从Windows诞生之后便出现的一种概念。豪杰超级解霸提供了卸载程序功能。不过当测试使用之后卸载之后，没想到它就给了我一个小小的颜色，让我觉得卸载这个程序是个错误！

卸载程序有一个文件关联不能完全恢复的问题。在安装最后，有一个向导程序指示用户建立各种关联，选择所有（见图表 4）。点击确定。发现所有格式视频文件已经建立关联，图标均换成豪杰解霸图标。卸载之后，尽管图标关联仍然是豪杰解霸图标，但系统重启之后一切正常（没问题）。但是令我吃惊的是，尽管可以mp3文件（用Media Player播放）图标依然是Media Player图标，但关联已经失效！

图表 4 文件关联向导画面。注意那个没必要的阴魂缠身的"信息"和"安装完毕后自动退出"

4豪杰超级解霸V8(SP1)使用速写

4.1 图标的使用

在一个图形界面环境中，图标是文档、目录等信息的载体而且用户主要通过图标来对这些对象进行操作。请记住：对于大多数用户来说，图标并不是在文件系统中某个位置存放的文件的一个指针――用户认为图标本身即是文件。图标分为应用程序图标，文档图标，工具条图标和硬件图标等等。

4.1.1 图标使用原则

¨ 原则之一：合理的比喻模型(metaphor)
图标的出现是图形用户界面的一大发明。用户通过这个小小的图片来操作他要操纵的一个对象。当然，建立一个计算机中的对象（或命令）与图标相对应的比喻模型，是非常不容易的。设计图标元素时要基于真实世界里的物体，不要使图标完全与真实物体无关。当然，如果太真实了也会造成麻烦。应该采用真实世界里简便的使用方法而抛弃那些难用的东西。比如说，没有必要像真正的橡皮擦那样痛苦而缓慢的在文本编辑工具中"擦"去文本。相似的，也没有必要像倒垃圾桶那样来清空MaC或Windows里面的垃圾箱。

¨ 原则之二：图标的基础是形状，这是首当其冲的特征。
而颜色及图案的差异则是紧随其后的。不同的形状会加速用户选择速度，提高用户的辨识能力。

图表 5 MAC OS X中的Finder工具条图标（部分），来源于Apple Human Interface Guidelines。

图表 6 Microsoft Windows的通用工具条图标，来源于MSDN Library。

¨ 原则之三：优雅的减少细节
每一个图形界面操作系统的图标都要求同一图标提供不同大小（如48 × 48, 32 × 32, 24 × 24和16 × 16）及不同色彩深度（color depth）（如24位真彩加8位Alpha通道，8位彩色外加1位透明度等等）的图标图案。每个图标文件里面除了128x128资源之外还隐藏有一些其它尺寸的图标资源。通过这种方式，系统使用最接近目标尺寸大小的图标来缩放至目标大小，从而解决在不同尺寸或显示设备上尽可能保持显示优美。所以，图标设计者要为同一图案设计不同参数的图标。

图表 7. 图标细节逐渐消失

¨ 原则之四：与操作系统图标风格相吻合
这可以参考不同操作系统的界面设计指导手册。

4.1.2 具体问题分析

然而，超级解霸软件的菜单上的一些图标的使用值得一说。音频解霸界面菜单上一些图标定义和界面其它部分冲突，造成图标的含义有问题。如果你考察过Windows Media Player菜单，你就会发现它的很多菜单命令根本就没有图标，从而就不会产生图标含义不明的问题。很多情况下解决问题的办法就是不让这个问题出现。

图表 8 豪杰音频解霸主界面

上图（图表 8）主要问题如下：

1． 工具条图标对比度不佳，色调单一，图标含义模糊，感觉不美观。几乎违反了图标使用的每一条原则。

2． 图标混用。这显然是软件质量控制不严造成的结果。豪杰超级解霸的前跳按钮图标（图表 8）和下图（图表 9）不一致，前跳按钮的图标变成了菜单中的"选择结束点"命令的图标。

图表 9 豪杰音频解霸控制菜单（感觉程序的开发者将图标的对应关系搞错了）

4.2 自定义控件的使用

在程序开发的过程中，有时我们可能为了某种需要而创建一些自定义的控件。但是，我们必须小心的使用自定义控件。特别的，使用自定义控件要遵从以下的规则：

4.2.1 自定义控件使用原则

¨ 原则一：不要改变系统标准UI控件行为。
如果你使用的是系统标准控件比如像按钮，菜单或者别的，请不要改变诸如外观，相应特性等行为。因为如果你改变了这些标准控件的行为，则会对不熟悉这种控件的用户造成疑惑及操作困难，同时违反了UI中的一致性原则。

¨ 原则二：小心的创建自定义控件。
如果需要新的行为，则创建新的控件。但你在创建之前必须明白你可能会碰到很多麻烦。你的控件不能与其他系统控件相混淆；你的控件必须为系统UI组件管理器提供相应的调用接口（比如说必须适应系统字体，配色方案的变化）；你的控件必须是容易操纵的，适应于各种不同运行环境的。

然而，我发现这个版本的自定义控件就违反了上面的原则。

4.2.2 具体问题分析：

显而易见，豪杰超级解霸使用了自定义的菜单。设计者为了让菜单的颜色和软件的皮肤相适应，并且加上了左边的软件名称竖条。但问题也随之而来，如下图（图表 10）所示：

图表 10 豪杰音频解霸的菜单

该界面（图表 10）问题在于：

1． 菜单高亮时对比度不佳。它忽略了某些设备的显示特性限制（比如说某些颜色不正的显示器）条件，也忽略了某些特殊用户的视力限制。比如说如果碰到老花眼，这个软件就有缺陷。

2． 菜单的行为和windows的不一致。Windows标准程序都是如果打开某一菜单之后，如果光标移动到其它子菜单项，其它菜单自动展开。而音频解霸程序则需要再次点击才能展开菜单。另外，打开这个菜单之后，用户很难知道这个菜单属于哪个主菜单项。还有，Windows菜单的规则是如果此命令会弹出对话框时，后面的描述会加"..."，而音频解霸则不是。

图表 11 Windows菜单的规则是如果此命令会弹出对话框时，后面的描述会加"..."，请注意标准菜单也是非常容易知道展开菜单是属于那一个主菜单项的。

4.3 按钮的使用

对于按钮的使用，有很多指导原则。在《Windows用户体验》、《苹果人机界面指导手册》及文章《用户界面软件》中都有详细的指导。所以请大家参考阅读。

我仅在这里指出该软件的一个对话框中按钮的错误，希望大家吸取教训。

图表 12 豪杰超级解霸V8（SP1）中的均衡调节对话框对话框

该界面（图表 12）主要错误如下：

1． 均衡调节对话框的缺省按钮应该是"关闭"，而非"复位"。以免用户做出的历史选择被用户误复位。当然，也可以在"复位"选择之后弹出一个对话框确认。

2． 按钮分布也很混乱。这几个按钮按其作用属于同一类，所以应该放在一起。

5 结语

上面便是我对豪杰超级解霸V8（SP1）的一些界面问题的点评。作为一个现在还深处一线的开发者来说，软件出现这样的问题是很正常的。而且我这样的点评的也只是指出白璧之上的一个微瑕而已。我所提供的原则也只是综合很多指导手册上的条目而已。所以请各位看客看了这篇文章之后也不要对豪杰超级解霸产生负面印象。我认为，一个程序的一生就是这个程序在不停的修改bug的一生，如果它那一天寿终正寝，那它就是bug太多，病入膏肓，无可救药或是落后于时代了。

图表 13 在检查文章的时候，我发现豪杰公司官方网站豪杰超级解霸V8已有更新了。上图就是豪杰超级解霸V8(SP2)中的豪杰音频解霸主程序界面，比SP1版本进步了许多。祝愿豪杰公司更加成功！

别忘了，在用户眼里，界面就是软件。良好的界面就是你那深邃的思想的外在表现，就是程序的个性表现，就是程序竞争力的表现。J

参考资料

苹果软件设计指导手册（Apple Software Design Guidelines）, http://developer.apple.com/documentation/MacOSX/Conceptual/AppleSWDesign/index.html

苹果人机界面指导手册（Apple Human Infterface Guidelines）, http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html

Microsoft用户体验（Microsoft Windows User Experience），

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/anch_uidesigndev.asp

用户界面设计－有效的人机交互策略（第三版），Ben Shneiderman著，张国印等译。电子工业出版社。

交互设计－超越人机交互，Jennifer Preece等著，刘晓晖等译。电子工业出版社。

用户界面软件，Jens Coldewey 著，Tom.X译《非程序员》第17期