软件界面设计思想方法

15.1什么是好的软件界面

简而言之，好的软件界面应当是易用的和美观的。易用是交互设计的主要目标，美观是视觉设计的主要目标，交互设计和视觉设计完成后，最终靠编程来实现可运行的软件界面。

15.1.1易用

易用性是指用户使用软件的容易程度。计算机软件诞生之初，主要用途是科学计算，那个时期几乎没有界面，只有计算机专业人员才能使用命令行来操作软件。之后出现了图形用户界面，例如Windows，使得普通老百姓也可以使用电脑。现在流行iPad、iPhone触摸界面，就连不识字的儿童都会使用。

软件界面越易用，整个软件系统就越容易被用户接受。反之，如果界面很难用，即使软件功能很强大，用户也可能抛弃这个软件系统。

例如，轿车自带的导航系统目前都比较难用。由于没有键盘，输入地址非常麻烦。一般靠旋扭或者触摸屏来选择 26个字母，输入较长地址可能要花费3-5分钟，拼音不好的用户常出错。与其这么费劲，还不如查地图或打电话询问更加方便。要使车载导航系统真正发挥价值，就必须提高它的易用性，否则就是个摆设。

针对这个问题，比较可行的解决方案是：（ 1）提供更加快捷的“手写输入或语音输入”；（2）智能手机与汽车互联，用汽车屏幕来展示手机导航软件（例如Google地图）。目前只有少数百万元级别的高档轿车才有这种操作界面，远未普及。

商业社会越发达，人们的生活节奏就越快，干啥事都想图方便，这是人之常情。如果软件系统功能很强，但是需要看完帮助文件才知道如何使用，而大部分用户没有耐心看完文档，就提前放弃了使用，岂非可惜。所以软件易用性越来越重要，这是商业发展的自然趋势。

15.1.2美观

除了要求软件易用之外，用户还希望软件界面美观。电影《食神》里的一段精彩对话可以帮助我们理解界面美观的重要性：

在一次香港大厨比赛中，食神周星星担任主考官。某个厨艺高超的大厨正得意地向食神展示他的招牌菜。

食神看了看大厨的脸说：“出局、出局。”

大厨十分惊诧：“你还没有看我的菜呐！”

食神说：“不用看了，因为你长得太丑了！”

大厨怒曰：“我长得丑难道也有错！”

食神说：“当然！如果顾客知道做菜的人长得那么丑，吃下的菜都会吐出来的！我看你还是不要干这一行了，出局、出局。”

美观的界面能消除用户由感觉引起的乏味、紧张和疲劳（情绪低落），可以提高用户的工作效率，从而进一步为发挥用户技能和为用户完成任务做出贡献。

人们对美的向往和追求是与生俱有的。显然没有开发人员愿意丑化自己的软件，也没有用户嗜好丑陋的界面。软件开发者要设计美，用户要享受美，所以界面的美是开发者与用户的共同需求。

当然也存在反例：并不是任何人在任何时候都喜欢美观的东西。

不少好动的儿童（男孩居多）更加喜欢丑陋的动物玩具，例如恐龙、蛇、甲虫等。儿童喜欢摔打、折腾丑陋的动物玩具（让人难以相信“性本善”的说法），所以这类玩具卖得快、坏得快、再卖也快。玩具厂商分析儿童的心理特征后，推出各色各样的丑陋动物玩具，赚了大钱。

倘若有一天，我们发现某些用户群体喜欢丑陋的软件界面，那么我们就应该设计具有市场价值的丑陋界面，而不要只专注于“美观”的界面。

15.1.3易用和美观哪个更加重要

广大用户希望使用令人愉快的界面，可以把“易用”比喻为“界面的心灵美”，把“美观”比喻为“界面的外表美”，两者都重要。

倘若开发方的精力和能力有限，难以同时实现易用和美观的界面，那么要识别优先级。一般规律如下：

（1）对于长期使用的商品而言，易用比美观更加重要。人有审美疲劳，再美的东西也禁不起长期看哪。易用的东西长期使用后会爱不释手，而不易用的东西若长期使用则会招致愤恨。

（2）对于短暂使用的商品而言，美观比易用更加重要。人们看到美观的东西，容易一见钟情，忽视其它缺点，容易冲动购买。

15.2软件界面设计的商业价值

对软件开发方而言，软件界面设计的主要商业价值体现在： （1）能显著提升软件系统的营销竞争力；（2）获得较高的投资回报。

很多用户不懂软件技术，也不关心软件技术。在没有深入使用软件系统之前，用户只能通过界面来感知软件系统的好坏。 如果软件系统A比B的界面更加易用、更加美观，在价格相似的情况下，大多数用户倾向于购买A。也许B比A的技术更加出色，但是用户不知道，可能也不在乎。所以软件界面设计能够显著提升软件系统的营销竞争力。

要开发出易用美观的软件界面并不容易，对开发方而言不仅是能力挑战，而且要付出更多的精力和成本，但是值得去做。

软件系统几乎所有的功能都是通过 “界面”来展现的，用户对软件系统的满意度与界面的易用美观程度成正比关系。假设开发方多付出10%代价改善了软件界面，每个用户对软件系统的满意度提升了10%，那么开发方付出的边际成本是10%，而边际收益则是“10%*用户总数”，用户总数越多，边际收益就越高。

可见，开发方对软件界面设计的投资，将获得很高的回报（与用户数量成正比）。

15.3软件界面设计的行业共性问题和基本对策

尽管软件企业有不少技术出色的软件工程师，但是多数工程师开发出来的软件既难用又难看。客户对软件界面很不满意，经常要修改软件界面，造成极大的生产力浪费。软件企业都希望一次性地做出让用户满意的好界面，但是不知道怎么做。

软件界面设计一直是中国软件行业的弱项，存在两方面行业共性问题：首先是缺乏系统性的软件界面设计方法和配套教育；这也导致第二个问题“缺乏好的界面设计师和娴熟的界面程序员”。

15.3.1缺乏系统性的软件界面设计方法和配套教育

有一位外国军人到德国军校访问交流，他惊奇地发现，在军校里居然出现了音乐、美术这类艺术课程。他觉得很奇怪。

德国军官自豪地说：对于德国军人而言，每一场战斗，每一次战役，都是艺术，因此要接受艺术教育。

美国西点军校为世人所知，是因为培养了很多著名将领。然而人们却不知道，西点军校更是培养 商界领袖的摇篮。从二战以来，该校为美国商界造就了1000多名董事长、5000多名高级管理者，西点军校堪称美国最优秀的“商学院。”

这种环境熏陶出来的人，他们带的队伍，他们做的东西，都是世界一流的。这就是系统性教育产生的价值。

不要认为软件开发就是编程，仅仅懂编程的人，绝对做不出优秀的软件系统。要想成为优秀的软件人才，仅仅学会编程语言是远远不够的。

国内理工科大学的计算机和软件专业，侧重于系统性的科学技术教育。基础课程有数学、物理、电路等，专业课程有操作系统、编译原理、编程语言、数据结构与算法、数据库等等。每门课程都有很好的教材（甚至有世界名著），而且有很好的老师。所以国内理工科大学能够培养出大量技术功底扎实的软硬件研发人才。

相比之下，软件界面设计领域的教育就差远了。既缺乏好的教材，又缺乏好的教师。

在 20世纪90年代初，浙江大学计算机系就有了工业设计专业，如今计算机系升级为计算机学院，工业设计专业升级为工业设计系。在计算机科学技术与人文艺术相结合方面，浙江大学计算机学院无疑处在国内前列地位。工业设计系在工业和民用硬件产品设计方面有很强的师资力量，并逐步开拓了数字媒体专业。但是在软件界面设计的教学方面仍然遇到棘手问题：计算机专家不熟悉工业设计，而工业设计专家又不熟悉软件开发，既无合适的教材也难找合适的教师。

迄今为止，我还没有见到哪个大学计算机学院或软件学院把“人机工程学、美学、心理学、界面设计”等课程很好地整合起来，提供界面设计领域的系统性教育。如果有的话，我要带大批人员去这个学校进修，大家着急啊。

由于计算机和软件专业学生们接受的教育几乎全是科学技术，他们不知道怎样才能设计出易用、美观的用户界面，很多人甚至不知道还有界面设计这回事。当他们毕业后真正参与软件系统开发时，只好凭着个人的经验与感觉来设计软件界面，这样产生的界面往往得不到广大用户的认可。

上述教育缺陷绝非短期内能够解决得了，我写这个问题不是发发牢骚，而是提醒软件企业关注这个问题：中国现阶段软件界面设计的人才数量和行业水平远远落后于技术开发，企业要抓住一切机会弥补这个缺陷，否则做不出优秀的软件系统。

15.3.2缺乏软件界面设计和实现人才

    中国最近几次参加奥运会，金牌和奖牌总数位列前三，名声显赫。但是中国仍然不是体育强国，只是奖牌大国而已，因为获奖选手都是万里挑一选拔出来的，不能代表广大人民群众的体育素质。

但是在乒乓球运动这个领域，中国绝对是体育强国，强大到了独孤求败的地步。我每次看乒乓球比赛，总是希望中国队不要包揽全部金牌，留一点给别国（否则别人绝望后就不和你玩了），但是很遗憾别国没有机会。为什么我们那么强？那是因为中国乒乓球运动太普及了，随便哪个县的乒乓球选手都是国际一流水平，真是人才济济，生生不息啊。反之，如跨栏运动，全国就盯着刘翔一个人，那就太脆弱了。

         在中国的大学教育里，软件技术教育最为普及，学员最多，和乒乓球运动有点相似。国内前一百名大学（姑且称为名牌大学）都能提供很扎实的计算机科学技术教育。此外还有无数的大专院校设立了软件学院，每年软件专业毕业生多到泛滥成灾的地步。

         但由于软件界面设计教育的缺陷，以及界面设计本身的复杂性，中国浩浩荡荡的软件开发大军中，擅长做软件界面的人才非常少，我估计连1%都不到。

         我们把软件界面开发分为三个环节：交互设计、视觉设计和程序实现。企业希望界面设计师负责“交互设计和视觉设计”，由娴熟的程序员实现这个界面，这个要求似乎并不高，但现实情况很糟糕。

不少软件企业既有程序员又有美工人员，但遗憾的是这两类人的工作配合不太理想。

企业领导和程序员们大多认为界面设计是美工人员的事情，否则公司招聘美工人员干什么用？所以程序员会等着美工人员完成界面设计后，再编程实现，至于界面设计好不好就不管了。

美工人员大多是美术相关专业毕业，他们的优点是擅长于视觉设计，缺点是：（ 1）不熟悉待开发软件系统的业务逻辑，不了解用户的特征，难以开展交互设计；（2）不懂软件技术，他们不知道自己构思出来的界面在技术实现方面的难易程度。

千万不要低估界面实现的难度，不要以为界面想得出就做得出。有些 Web软件界面控件，要同时兼顾功能、性能和易用性，技术难度相当高，不是普通程序员做得好的（往往顾此失彼）。感兴趣的读者请试用集成化研发管理平台MainSoft，创建一个项目导入数千条任务，体验一下Web任务树形表和Gantt图的功能，想想什么水平的程序员花多少时间才能够做得出这样复杂的界面控件。

当不懂技术的美工人员和只懂技术的程序员产生分歧时，他们很难协商出更好的方案来。

         可见美工人员并不是人们期望的软件界面设计师（常被人误解为软件界面设计师）。不是我泼冷水，既能做好交互设计又能做好视觉设计的界面设计师是比较少见的（吹牛皮的除外），能够同时做好交互设计、视觉设计、程序实现的人更加罕见，估计比熊猫还少。

我们必须承认，在现阶段，中国绝大多数软件企业都没有优秀的界面设计师。那只能用“三个臭皮匠、顶得诸葛亮”的替代方案，如果几个人分工合作能把界面做好的话，我们就不必一直叹惜没有优秀的界面设计师了。我的建议是：

         （1）由“软件产品经理或项目需求分析师”兼任交互设计师，负责交互设计。软件产品经理或项目需求分析师是最熟悉软件业务逻辑的人，他们了解用户特征，知道什么样的交互方式适合于目标用户群体。另外，他们大多是搞技术出身的，能够判断出交互方式在技术实现上的难易程度。他们既能和美工沟通，也能和程序员沟通。交互设计既属于需求工程范围，也属于软件设计范围，是交集。我倾向于在需求分析阶段开始交互设计，尽量前移。

         （2）交互设计师向美工人员解释目标用户群体的特征，由美工人员负责视觉设计。有些软件企业没有大量的视觉设计工作，出于成本考虑，不必招聘全职的美工人员，可以聘请兼职的美工人员。倘若实在请不到美工人员，你还可以把视觉设计外包出去，只要你能够描述清楚需求。

         （3）交互设计师和程序员沟通界面实现方面的问题，既要满足用户需求，又不能使程序实现的代价太高。请技术水平高的程序员开发界面控件，努力做成标准件，构造界面库，还要有人负责维护界面库（不能随意改动界面控件）。其他普通程序员只要调用界面控件，专心去实现软件业务逻辑即可。这样使整个团队的软件界面开发效率和质量都很高。

15.4以用户为中心、以效益为目标的软件界面开发理念

15.4.1界面设计以用户为中心

软件系统是给用户使用的，而不是给自己使用的。所以界面设计要“围绕用户需求和用户使用习惯”开展，即“以用户为中心”。目的是让用户用得满意，而不是让开发者自己用得满意。

这个道理非常浅显，似乎无需解释，但现实情况是人们经常颠倒着干。虽然软件公司宣扬“以用户为中心”，但是大部分开发人员埋头干活，闭门造车，早忘记了用户。他们自己觉得界面挺易用、挺漂亮，那么用户也会满意。

例如，当开发方向用户演示软件时，常会得意地讲：这个软件非常好用，我演示给你看，……是很好用吧！蛮漂亮的吧！

这是典型的“王婆卖瓜，自卖自夸”。

用户出于礼貌不断地点头，但点头并不表示赞同。用户不好意思说他没有看明白怎么回事，总不能在别人面前显得自己很笨吧！所以用户一边点头，一边心里嘀咕“这是什么玩意儿”。

若干年前，我公司在开发 MainSoft时，其中权限管理功能相当复杂，我让一名技术高手负责开发。两周后这位高手兴冲冲地告诉我，他已经完美地实现了权限管理功能。

他演示给我看的时候，一边飞快地敲键盘、点击鼠标，一边自言自语地解释：这样很方便，那样很方便， ……，大约一分钟就演示完了，然后充满期望地问我怎么样。

在这一分钟之内，我完全没有看清楚权限管理功能是怎么使用的。但是我又不能打击他的积极性，只好说：不错不错，让我自己体验一下吧。

这位高手自信地说：你好好体验吧，把改进建议写下来，我估计再花几个小时调整细节，这个功能就完美了。

作为第一次使用的用户，谁能够像开发者本人用得那么熟练啊。他只花一分钟就演示结束了，可是我完全不知从何下手，足足摸索了半个小时才学会使用这个功能，哪个用户受得了这种界面啊。

结果该功能经过了多次修改， 3个月之后才变得实用，显然不止再花几个小时调整细节那么简单。这位高手没有在预定时间内一次性地完成该功能，进度大大地延误，让公司付出了额外的代价。

软件是否易用、是否美观要让用户来评价。如果用户对界面很不满意，开发方不要有逆反情绪：从哪里找来的笨蛋！

其实不是用户笨，是自己开发的软件太笨了。当用户真的感到软件很好用时，一股温暖的感觉油然而生，于是就用“界面友好”来表扬这个软件。软件行业很少发生那么感动人的场景：用户热切地握着开发人员的手，连声称赞“你们开发的软件真是好用啊”。我们看到的大多是相反的场景：用户满腹牢骚，开发人员垂头丧气。

很多开发人员不能够一次性地完成某些开发任务，主要原因不是技术水平低下，而是他们没有真正理解用户的需求，也没有站在用户角度看待界面。如果用户不满意软件的功能和界面，那么开发方将被迫重新开发，产生额外的成本。所以企业要经常宣传“界面设计以用户为中心”的理念，让这个理念印到开发人员的脑海里，成为一种本能。

15.4.2界面实现以效益为目标

用户和开发方都要承担界面成本，双方都要效益。用户买了觉得值，开发方卖了要有利润。所以真正实现界面的时候，不见得完全按照设计要求来实现界面。界面做到什么程度，要以效益为目标。

微软公司的 Vista 比起 Windows XP 而言 ，功能更加强大，界面更加华丽。微软公司曾经轰轰烈烈地宣传 Vista 多么好，是个革命性的产品。但是市场证明 Vista 是个华丽而不实用、商业失败的窗口系统，差点革了自己的命。主要原因：

（ 1 ） Vista 拥有酷炫的界面，对硬件要求很高，原先的 Windows XP 用户要多花钱升级硬件或者更换硬件才能使用 Vista ，这导致很多用户不愿意升级到 Vista 。

（ 2 ）由于 Vista 和 Windows XP 有很大的差异，导致原先大量的 Windows 应用软件无法在 Vista 下正常运行，这个问题比硬件升级产生额外成本更加严重。我本人就把默认安装 Vista 的笔记本电脑，倒退回到 Windows XP ，否则无法正常办公。

        界面实现要以效益为目标，宣传这个理念是为了“避免过度设计而损害用户或开发方的效益”。

15.5 软件界面开发三步曲

为了做出易用美观的软件界面，我们把软件界面开发分为三个环节，如图15-x所示：（1）交互设计的主要目标是设计出易用的界面；（2）视觉设计的主要目标是设计出美观的界面；（3）交互设计方案和视觉设计方案确定后，最终靠编程来实现可以运行的软件界面。

图 15-1  软件界面开发三步曲：交互设计、视觉设计和程序实现

15.5.1交互设计

一、界面需求征询

界面需求征询的目的是把握“界面设计的方向和程度”，分两个层面：首先是当前需求，搞清楚当前界面要解决什么问题，达到什么程度；其次是未来的需求，把软件界面划分若干版本，考虑每个版本要做什么，达到什么程度。

对于自主研发的软件产品而言，开发方自己可以决定界面需求。参与界面需求征询会议的主要人员有： 交互设计师（可让软件产品经理兼任），营销人员，技术负责人，潜在用户代表，可能还要老板（开发方领导）参与。

对于软件合同项目而言，需要开发方和客户方双方共同商议界面需求。 开发方主要人员有：交互设计师（可让需求分析员兼任），技术负责人，商务代表。客户方主要人员有：各类用户代表（真正的使用者），商务代表。可能双方领导也要参与。

界面需求征询做的越全面越好，把当前、未来可能要做的事情一并考虑进来，交互设计师要记录所有关注点，进行汇总分析。

二、用户特征调研

对于企业级应用软件，提取软件系统的所有角色，访谈每种角色对应的典型用户，记录他们的使用习惯。

对于面向个人的软件，例如 QQ 、微博等，用户十分广泛，不像企业软件有比较严格的角色职责定义。需要对用户进行多角度地分类调研，例如按年龄、性别、文化程度、职业划分多个类别。

三、提出多套交互设计方案

交互设计师在界面需求征询和用户特征调研的基础上，提出多套交互设计方案，便于后续讨论和选择。交互设计方案主要是草图加文字说明，能够表达清楚设计意图即可。

四、头脑风暴会议

对于自主研发的软件产品而言，由交互设计师在本公司召开头脑风暴会议，主要参加人员和职责如下：

（1）交互设计师逐一介绍每个设计方案，解答别人的疑问。

（2）营销代表，将平时收集来的用户抱怨和建议整理成文档，看看在交互设计方案中是否已经得到了解决。

（3）技术代表，负责分析每种交互设计方案的技术可行性和实现代价。

（4）潜在用户代表，把自己作为真实的使用者，谈谈自己对每种交互方案的感受。

对于软件合同项目而言，需要双方人员共同召开头脑风暴会议，主要参加人员和职责如下：

（1）开发方交互设计师逐一介绍每个设计方案，解答别人的疑问。

（2）开发方技术代表，负责分析每种交互设计方案的技术可行性和实现代价。

（3）客户方用户代表，把自己作为真实的使用者，谈谈自己对每种交互方案的感受。

（4）双方商务代表，主要分析是否存在商务风险。

与会者各抒己见，畅所欲言，会议结束时要达成共识，最终选择一种、或者重新组合出一种相对满意的交互设计方案。

五、制作并体验“可运行的软件界面原型”

头脑风暴会议结束时选定的交互设计方案仅是个纸面方案，尚不能体验，是人们根据自己的经验和感觉定下来的，存在比较大的风险。

就如中国的期房市场，房子没有造好之前就可以销售（这是极不合理的制度），每个房产商制作的效果图和模型都非常精美，老百姓抱着美好的期望买了房子，等到房子造好后进去一看，心都凉了，但是钱已经付了，损失惨重。

对于金额比较大的软件系统，为了降低风险，不宜把纸面交互设计方案直接交给开发团队去实现，最好先制作“可运行的软件界面原型”，让相关人员去体验这个原型，才知道好不好，发现问题可以尽早改正，避免或减少后续的损失。

为了对界面原型有一个比较客观、全面的评价，财力雄厚的企业可以使用眼动仪。眼动议可以记录眼球在屏幕上停留和滑动的轨迹，用于分析用户是怎样使用软件界面的。体验人员（潜在用户）带上眼动仪，根据预先设计好的测试用例一项一项地执行。除了眼动仪之外，电脑上安装有屏幕录像软件，实验室也有高清摄像头，对用户的操作行为进行全程记录。所有的测试用例执行完毕后，交互设计师可以对记录结果进行分析，发现问题及时改正。

六、交互设计方案定稿

人们体验了可运行的软件界面原型，并做了相应的改进，在此基础上形成了最终的交互设计方案。之后就不能随意做大的修改了，视觉设计师和程序员将根据这个交互设计方案开展各自的工作。

15.5.2视觉设计

通常由美工人员担任视觉设计师，在既定的交互设计方案基础之上，努力使界面变得更加美观，让用户看了舒服（至少不讨厌）。

视觉设计的主要内容有：界面布局，色彩搭配，图标设计，字体设计，界面元素的背景图案设计等。交付的成果通常是效果图，例如设计一种按钮，要制作“正常、加亮、按下、禁用、焦点”五种状态的效果图。

为了提高视觉设计的效率，企业需要维护一套界面素材库，保存常用界面元素的各种效果图。在制作应用软件的界面时，首先从素材库中挑选合适的界面元素，如果没有合适的，再制作新的，不断地丰富素材库。

15.5.3界面实现

程序员负责界面实现：在交互设计方案和视觉设计方案基础之上，通过编程来实现可以运行的软件界面。

界面实现的常见弊病是：程序员为了图编程方便，把界面代码和业务逻辑混杂在一起，导致团队协作和后续维护都很麻烦。只要界面或业务逻辑一改动，就要改动很多地方，经常出错。

开发团队要努力使“界面和业务逻辑”分离，使两者的相互干扰变得最小，模型见图 15-2 ：

（ 1 ）业务逻辑形成编程接口；

（ 2 ）界面元素的交互操作也形成编程接口；

（ 3 ）程序员调用上述两类编程接口以及界面资源文件（如文字、图片等），实现特定功能的界面。

图 15-2  界面和业务逻辑分离模型

15.5.4软件界面开发示例

某杀毒软件公司是国内老牌的供应商，从 2000 年到 2005 年，其用户占有率遥遥领先于其他同类产品。但是随着 360 杀毒、金山杀毒新一代产品的出现，国内杀毒软件市场重新洗牌。为了适应新的市场需求，大力改进用户体验，该公司决定对杀毒软件界面彻底重新开发，借助 UIPower 集成化界面开发工具（见附录 C 介绍），在较短的时间内完成了任务。其界面开发过程如下：

第一步：交互设计。 交互设计团队利用 UIPower 工具（见附录 C 介绍）设计了可运行的软件界面原型，图 15-3-1 是杀毒软件主界面原型，图 15-3-2 是功能模块的界面原型。该原型通过测试、评审之后定稿，进入视觉设计环节。

 

 

图 15-3-1  杀毒软件的主界面原型

图 15-3-2  杀毒软件各功能模块的界面原型

第二步：视觉设计。 美工人员结合“交互设计方案、公司品牌特征”开展视觉设计，制作多套效果图，加入到可运行的软件界面原型上。相关评审人员直接试用高度逼真的界面原型，提出改进建议，形成最终的视觉设计方案，进入程序实现环节。图 15-3-3 是杀毒软件主界面的视觉设计，图 15-3-4 是各功能模块界面的视觉设计。

图 15-3-3  杀毒软件主界面的视觉设计

图 15-3-4  杀毒软件各功能模块界面的视觉设计

第三步：程序实现。 项目开发团队采用增量开发模式，项目负责人制定任务进度计划，分配任务给相关程序员。期间程序员、交互设计师、美工人员、测试人员分工合作，一边开发，一边改进界面细节，最终在预计时间内完成了界面开发任务。

15.6 软件界面设计应遵循的原则

本文总结了软件界面设计应遵循的原则：界面适合于目标用户群体，容易理解，及时反馈操作过程和结果，防错处理，最少操作步骤（最高操作效率），合理的布局，合理的色彩搭配，界面元素标准化。读者（开发者）理解这些设计原则的含义之后，要结合待开发软件的特征，进一步演绎和细化，从而确定待开发软件的界面设计原则，并让开发团队全员遵循这些设计原则。

15.6.1界面适合于目标用户群体

界面适合于目标用户群体，这是第一重要的界面设计要素，事关产品的生死存亡。不适合于目标用户群体的界面，用户不会购买，或者买了也不用，即使界面很美观也无济于事。

有些通用的软件系统如操作系统、字处理软件、浏览器等，面向的用户十分广泛。由于用户群体之间存在年龄、性别、语言、教育程度的差异，导致使用习惯也有很大差异。在设计软件界面时应当尽可能多地了解各种用户群体的使用习惯，努力使用户在操作软件界面的时候感觉不到麻烦，一般需要提供多种操作途径以适应各种类型的用户。

例如 Windows系统的文件管理器，对于一个初学者来说，他愿意使用鼠标和菜单一步一步地操作；而对于行家而言，他也许更愿意使用热键来获取更高的效率。

全世界的软件用户中可能有成千上万的人患有色盲或色弱，当他们面对花花绿绿的软件时会一片茫然。因此通用软件的界面还要经过色盲色弱人群的测试。界面设计者越为用户着想（即以人为本），用户就越喜欢这样的软件。

要做出一款让全世界人民都满意的软件系统是非常困难的，考虑因素太多了，会导致系统非常复杂、不好用而且质量不可靠。即使软件业巨头微软公司的拳头产品，也会遭遇失败，例如Vista视窗系统。

iPhone引领了智能手机的设计潮流，但是iPhone并不适合于全人类，尤其不适合于老年人和儿童。

60岁以上老年人也需要好的手机：他们的听力不太好，说话不清晰，对手机的通话质量要求比较高；他们想念后代，经常看照片，拍照片，看视频，录视频……。貌似iPhone具备了所有功能，可是老年人的手指灵敏度远不及年轻人，很难用触摸方式输入文字，iPhone这类手机对老年人而言不具有实用性。我曾经给一位长辈换了4个手机，都没有满意的，只好将就着使用老式的2G手机。由于市面上没有针对老年人特征而用心设计的手机，你即使有钱孝敬长辈都买不到满意的手机，真让人丧气。

出于安全考虑，家长也希望儿童（4-10岁）有合适的手机：既不能影响上学，又能够及时了解儿童的状况。iPhone太贵了，丢失不起；它太精致脆弱了，禁不起摔；它的娱乐功能太多了，影响孩子上学……。

国内智能手机厂家都尾随苹果和三星，抄它们的功能和界面，同质化竞争非常激烈，利润低微甚至赔本赚吆喝。何苦要这么做啊，你若用心去设计适合老年人和儿童的手机，这个细分市场也是很好的。

我对研发企业的建议： 不要企图让一款产品适用于差异很大的用户群体，要把广泛的用户划分成为若干目标用户群体，根据本企业的实力，选择一个或若干细分市场来开发产品。一款产品最好只面向一个目标用户群体，这样容易设计而且质量可靠，能够打造出精品。多个产品之间可以共享技术，但是不要把不同类型的操作界面全揉在一起。

我公司的软件产品集成化研发管理平台 MainSoft适合于管理企业的研发项目，为了拓展市场，我曾经尝试用MainSoft去管理大学的科研项目。我给大学老师们讲解MainSoft的功能，他们听后觉得这个软件功能太强大了，用于管理大学的科研项目和毕业设计项目应该绰绰有余。可是他们试用了几周后就纷纷放弃，主要原因不是软件功能不够用，而是功能太多太复杂了，学生们不知如何下手；每个功能的流程和逻辑很严格，不适合于本科生和研究生的科研环境。学生们没有组织结构、岗位职责、流程制度这类概念，当然就难以使用企业级软件来管理他们的项目。

经过数次试验之后，我发现 MainSoft无法很好地兼容“企业用户”和“高校用户”。与其把MainSoft改造成为两类用户都能够用，但是哪个都用不好的平庸产品，还不如彻底分拆。于是我们单独开发了适合于高校用户群体的云计算项目管理平台MansuoCloud。这两个产品的市场定位和操作界面差异很大，但是后台技术高度相似，复用率很高。实践证明我们这个决策和设计是正确的。

15.6.2容易理解

如果用户很难理解界面的意图，那么他使用起来肯定很费劲。所以“容易理解”是“容易使用”的前提条件。以下措施可以提高用户界面的可理解性：

（1）界面上的所有元素都不能出现错误文字，字段名称必须“正确、准确”，没有二义性，上下文不矛盾。这本是最起码要求，但是并非人人都做得到。软件人员的文字功底普遍较差，经常写出令人费解的字段。我曾看到某些软件界面同时出现“交易种类、交易类型”、“开户行名称、银行别称”、“项目种类、项目类型”、“发票代码、发票编号”这样的相似输入框，用户怎么区分得清楚啊。

（2）图标力求直观明了，要让用户看到这个图标就知道什么含义。若图标比较抽像，则应给图标加文字说明，防止用户误解。切忌为了使界面好看而硬生生地加上漂亮的图标，就如商场和饭店厕所门口各种奇思妙想的图标，看起来很有品味，却让人提心吊胆不敢进门。

（3）所有的界面元素应当提供充分而必要的提示。若界面空间有限而无法写全文字时，则使用Tooltip，当鼠标移动到某个界面元素上时，用一个小窗口来显示完整的提示。提示文字一定要通顺，不要像马路左转车道大字写着“左弯待转区”，念起来多么别扭啊，能不能改为“左转待行区”通顺一点的文字啊。

（4）界面上的功能菜单（或按钮）布局和操作步骤应当匹配于正常的工作流程，先后顺序合乎逻辑，以便用户按部就班地操作。不要把五脏六腑全部堆砌在界面上，所有功能都在上面了，你自己用吧，用户不知道从哪里下手啊。

（ 5）没有先后逻辑关系的选择项，如姓名、标题等，可以按照字母排序，便于用户选择。但是不要把功能菜单、有严格逻辑关系的状态集按照字母顺序排列。

（6）对于复杂的用户界面，最好提供界面“向导”，让用户知道自己在界面结构中所处的位置。例如多级页面的网站，应该在界面上显示现在是什么页面，上一级是什么，否则用户很容易在众多的页面中迷失方向。

15.6.3及时反馈操作过程和结果

当用户进行某项操作后，过了一会儿软件界面一点反应都没有，如果时间超过了用户的心理预期，将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件系统错了。

十年前，银行刚推行自动取款机的时候，系统性能比较低，取款操作等待时间比较长，只听到机器不停地发出滚动声音，就是不吐钱。把很多人急得团团转，有些人把眼睛趴在槽口想看看里面发生了什么事情。

所以及时反馈操作过程和结果对用户而言很重要，得让用户知道操作进行得怎么样了，有什么样的结果。

一、时间比较长的过程，应当显示进展情况。

例如下载一个大文件，或进行一项复杂的运算，界面上应当用文字或图形来显示进度，如图15-4-1所示，否则人们不知道要等待多少时间。若过程时间很长，那么用户就可以去做其它事情，避免浪费时间。

图 15-4-1  操作过程的进度提示

如果某些操作过程无法提供进度数据，那么至少要提示“正在处理，请等待…”，让用户明白系统还在正常处理，没有出错。

二、正确结果的提示

某些操作会产生显然的、正确的结果，若用户一目了然，则无需额外提示。例如使用文件管理器复制文件、或进行排序，用户马上就能看到文件列表更新后的结果。这种操作结果就无需额外提示，多此一举的提示会让用户烦死的。

某些重要的操作结果，例如银行汇款，即使结果显然是正确的，也要把正确的结果汇总起来反馈给用户。这个提示不是多此一举，一是让用户放心，二是让用户保存这个重要的操作结果以备未来之需。

有些操作结果是正确的，但是后面还有重要的事情要做，则不仅要反馈正确结果，同时还要提示下一步要做什么。例如网站上的用户注册功能，不仅要告诉用户注册成功了，还要提醒用户收邮件，使用邮件里面的链接来激活账户。

三、错误结果的提示

正确的结果不必全部反馈给用户，但是错误的结果一定要及时反馈给用户：

（1）不仅要让用户知道当前操作发生了错误，而且要让用户知道错在哪里、怎么错的，有助于用户纠正错误并且积累经验，避免下次犯相同的错误。不能没头没脑地弹出一个告警对话框“错误！”，如图15-4-2。

（2）提示语句应当采用被动语态，不要出现诸如“你不能、你不该”这样的语句，避免指责用户，如图15-4-3。

 

图 15-4-2   没头没脑的错误结果提示                  图 15-4-3   指责用户的错误结果提示

（3）如果有处理错误的措施，也要写在错误提示信息中，协助用户处理错误，但是不要把姓名、电话号码写在上面。

某程序员开发公安信息管理系统，错误提示对话框是这样的：错误！请联系某某某，电话号码 xxxxxxxx。

结果他家每天都接到派出所打来的电话，父母吓得不轻，以为儿子闯了大祸，导致警察天天找他。

四、没有达到预期结果的提示

例如在搜索引擎中输入关键字“交胡设计”，查询结果为零，即没有达到预期结果，系统提示“您要找的是不是交互设计”，提醒用户检查输入是否有误，如图 15-4-4所示。

图 15-4-4  提醒用户检查输入是否有误

15.6.4防错处理

用户在使用软件的过程中，不可避免地会出现一些错误的操作。倘若用户不小心输入了错误的数据、或者错误地删除了有用的数据，而软件傻乎乎地、将错就错地执行了，那么用户肯定很恼火，以后就不敢使用软件了，严重的话会引发供需双方纠纷（如索赔等）。

软件界面必须考虑防错处理，使用户不必为避免犯错误而提心吊胆、小心翼翼地操作，而是放心大胆、轻松愉快地使用。

常见的防错处理措施有：

一、对输入数据进行正确性检查。用户输入数据后点击提交按钮，在真正执行后续功能之前，要对用户输入的数据进行正确性检查：

（1）如果用户忘记了输入必填项（通常加红色*标记），软件应当提醒用户哪个必填项忘记了。如果数据类型错误或数据越界，软件应当识别错误并且提示用户改正数据。如图15-5-1所示。

图 15-5-1  必填项和数据类型错误提醒

（2）检查上下文语义的防错提醒：例如人们发邮件的时候经常忘记发附件，但是正文里面出现了“附件”两字，软件提醒用户“您可能要发送附件，但是还没有加上附件”，如图15-5-2所示。

图 15-5-2  检查上下文语义的防错提醒

二、如果数据有特定的格式，则须提示用户按照正确的格式输入。最好提供合适的默认值，减少出错的概率，如图15-5-3所示。

例如，全世界没有统一的日期格式。中国常用的日期格式是“年 /月/日”（2013/1/15）、“年-月-日”（2013-1-15）、“年月日”（20130115）。而美国的日期格式是“mm/dd/yyyy”（01/15/2013）、“mm/dd/yy”（01/15/13）。有些欧洲国家则用“dd/mm/yyyy”（15/01/2013）。如果没有格式提示和默认值的话，用户无疑会经常输错日期。

图 15-5-3  日期格式和默认值

三、某些情况下不应该出现的菜单项和命令按钮，应当将其“隐藏”（而不是失效）。例如：不同的用户有不同的操作权限，低权限用户登录到系统，那些仅供高权限用户使用的功能应当被隐藏。例如银行系统的普通用户登录后，不应该看到给系统管理员使用的菜单，否则会误导、引诱用户想入非非、干点不该干的事情。

四、在某些情况下，用户可以看到、但是不能操作的菜单项和命令按钮，应当将其“失效”（变成灰色），避免误操作，如图15-5-4所示。例如某个业务有N个操作步骤，当前步骤没有完成则不能使用下一步的按钮（将其失效而不是隐藏），让用户看到后续的按钮，他就知道后面还有哪些事情要做，但是不会发生误操作。

图 15-5-4  失效的菜单（灰色）

          五、执行删除操作或交易操作之前，应当获得用户的确认。例如用户删除一个文件、汇出一笔钱时，应当弹出对话框询问用户是否真的要这么做，用户确认之后才可以执行。

         这个确认规则不仅软件开发方要遵守，而且用户也要知晓，在紧要关头不要忘记了“确认”。

    有个王牌期货交易员得到公司嘉奖，到加勒比海度假，刚住到海滨酒店就接到老板电话：今天大豆会暴跌，你赶紧上网抛售。

    交易员上网把他的所有大豆都抛了，关了电脑关了手机去海滨享受去了。等他回来打开手机，看到老板打来无数个未接电话。他想这回又发财了，于是打电话给老板：嗨，头儿，这次赚了多少钱？

    老板怒曰：我叫你抛，你为什么不抛？

    交易员回答：我接到你的通知，马上就抛了！

    老板大怒：你这个蠢货，你忘记了按“确认按钮”了！把公司害惨了。

确认提示的书写很重要（可惜很多程序员乱写一气），规则如下：

（1）只能用一般疑问句，不能用复杂的、让人迷惑的句式，例如反问句。

（2）让用户知道他将干什么，以及有什么后果（例如不可撤销）。

（3）提示语句应当和命令按钮在语义上保持一致，不能询问是否去医院，而按钮却写着去吃饭。

良好的确认提示如图15-6-1所示，差的确认提示如图15-6-2所示。

 

图 15-6-1  良好的确认提示

 

 

图 15-6-2  差的确认提示

注意：不要混淆“结果反馈”和“确认提示”，前者是无需“确定”或“取消”的。如果用对话框来反馈操作结果，那么对话框的按钮只有一个“关闭”（即关闭对话框），而不是“确定”和“取消”。如图15-6-3所示，用对话框告知用户“您成功地上传了文件 a.doc”、“您成功地汇款100万元”，用户会对“确定”、“取消”按钮迷惑不解—— 难道还需要确认才能操作成功？难道按下“取消”会撤消刚才的操作？

图 15-6-3  令人困惑的确定和取消

六、尽量提供Undo功能，给用户反悔的机会，让用户可以撤销刚才的操作。通常编辑软件都具有Undo功能，例如Word、PhotoShop等。但遗憾的是，由于技术原因，基于数据库或互联网的软件很难实现Undo功能。例如你发邮件给某些人，发完之后才发现发错了，但是你无法取消已经发出的邮件。你通过网上银行汇款给某人，汇出之后才发现金额或收款人写错了，你也无法取消这笔汇款。对于无法Undo的功能，“确认”尤为重要。

15.6.5最少操作步骤（最高操作效率）

设法让用户用最少的操作步骤来完成任务，获得最高的操作效率。

例如字处理软件，“新建”、“打开”或“保存”文件是最常用的功能。如果使用菜单方式操作，先点击主菜单“文件（F）”、然后点击子菜单执行“新建”、“打开”或“保存”，这样需要2个操作步骤，如图15-7-1所示。为了提高操作效率，应当把最常用的功能用图标按钮的形式摆放在工具条（toolbar）上，这样用户直接点击图标按钮就可以执“新建”、“打开”或“保存”，只需要一个操作步骤，如图15-7-2所示。

 

图 15-7-1  使用菜单的方式（ 2 个操作步骤）         图 15-7-2  使用图标按钮的方式（ 1 个操作步骤）

再如，对于输入数据的页面，尽可能使用“选择数据”取代“手工输入数据”，不仅提高了输入效率，还能减少出错的概率。更进一步，提供模糊匹配输入框，只要输入少量字母或文字，就能自动列出匹配的数据，用户可以迅速选中他想要的数据，如图15-7-3所示，输入“北京”，自动列出所有北京客户。

 

图 15-7-3  模糊匹配输入框

尽管减少一个操作步骤而完成任务所节约的时间微乎其微（可能只有几秒钟），倘若用户频繁地使用，那么用户对少一个步骤和多一个步骤的感觉反差是很强烈的，好感或怨恨都会积少成多。尤其是互联网和智能手机领域，业界流传“多 1个操作步骤，流失10%用户”的经验教训。

界面设计师要深入分析软件系统的业务流程和用户使用习惯，才能设计出最少的操作步骤。若在既有流程和技术条件下，已经把操作步骤减少到了最少，但用起来还是不方便的话，那么就要靠技术革新。例如手机看照片功能，老式手机只能用上下箭头键一个一个地翻滚照片，而新一代采用触摸技术的手机，用手指滑动屏幕来操作照片。两者的效率和感受简直天差地别、不可比拟。

15.6.6合理的布局

界面布局会影响易用性和美观性。实现“合理的布局”相比“合理的色彩搭配”要容易一些，因为绝大多数的界面元素的形状已经标准化，而且界面元素的组合方式也有约定俗成的规矩可循。

以下是软件界面布局的一些建议：

（1）界面的总体布局应当有一定的逻辑性，尽可能与工作流程吻合。

（2）窗体（或页面）上的界面元素的布局应当整齐清爽。界面元素应当在水平或者垂直方向对齐，行、列的间距保持一致，避免参差不齐的视觉效果。

（3）窗体（或页面）的尺寸要合适，界面元素不应放得太满，边界处需要留有一定的空间，也不可过于宽松，显得零乱。

（4）要善于利用窗体和界面元素的空白，以及分割用的线条。

（5）逻辑相关的元素要就近放置，便于用户关联操作。

传统Windows客户端软件的界面布局模式非常成熟，如图15-8所示，一般有5个区域：主菜单区；工具条区；功能树；内容展示及操作区；状态信息区。这种模式已经被广大用户接纳，典型客户端软件如Word、Outlook、Foxmail、编程工具VC++、Eclipse等，界面示例见图15-8。

1. 主菜单区
2. 工具条区
3. 功能树	4. 内容展示及操作区
5. 状态信息区

图 15-8 -1 传统 Windows 客户端软件的界面布局模式

 

图 15-8-2 Word 的界面布局                        图 15-8-3 Outlook 的界面布局

 

图 15-8-4 Foxmail 的界面布局                        图 15-8-5  编程工具 Eclipse 的界面布局

随着互联网的发展和普及，越来越多的应用软件采用B/S架构。目前国内大多数软件公司都在开发Web应用软件，其中管理信息系统居多（例如电子政务软件、办公软件等）。Web应用软件界面不像Windows客户端软件界面那样高度相似，有利有弊：好的一面是给设计师们留有开阔的设计空间，可以设计出令人耳目一新、乃至惊艳的界面；坏的一面是 Web界面五花八门，易用性和质量堪忧。

据我观察，国内Web软件界面设计倾向于模仿网站的界面，偏重于视觉效果设计，而轻视交互设计。

我对从事复杂Web应用软件开发的企业（或个人）的建议： 不要把网站的界面套用到Web应用软件上，而应当多借鉴Windows客户端软件界面。

Web软件和网站的运行环境与技术几乎完全相同，但是两者的使用特征很不相同。网站面向大众用户，主要目的是吸引用户前来浏览，重要的具有吸引力的内容，而不是界面多么易用。 Web软件的本质是软件，只不过它在Web环境下运行、以页面的方式展示内容而已。软件用于处理有流程（逻辑）的业务，而不是仅仅让人们浏览信息。网站并不关心业务流程，几乎没有防错处理，倘若Web软件也没有业务流程、没有防错处理的话，试问谁会用这样的Web软件？

Windows客户端软件界面虽然乏味，但是久经考验，有丰富的设计内涵，可以开发出极其复杂的应用软件。而网站界面看起来很华丽，但不足以支撑复杂应用软件。

我心目中“复杂系统”的“好界面”应该是这样的：视觉效果不必惊艳，用户不必一见钟情，但是经久耐用，天天相处都不厌烦。就如德国大众的汽车高尔夫，貌不惊人，却越用越喜欢，为全球数千万用户带来了便利。

我就是用这种思路来设计“集成化研发管理平台MainSoft”的Web软件界面。MainSoft有十个子系统，数万个页面，算得上是一个复杂的管理软件。其界面设计要满足如下苛刻的商业需求：Web交互方式要适应研发企业不同岗位用户的使用习惯 ;几乎每周都在增加新的功能，能够支撑未来近十万个页面的交互需求；至少要满足5年内客户们的无缝升级需求；软件界面十年内不落伍不做大改动（避免频繁发生高风险的设计大改动）。面对上述需求，如果没有合理的界面布局，没有高度规范化的界面元素，没有严密的逻辑设计，随着功能不断增加，软件产品界面必将乱得一塌糊涂。

我看了无数网站，都没有找到适合于MainSoft的Web界面，于是我借鉴Windows应用软件的界面风格，自行设计软件界面，界面布局模式如图15-9所示。MainSoft软件界面的视觉效果，说得好听一点是朴实无华，说得不好听一点是平淡土气，而其内在的交互设计则几乎没有破绽，保证了实用性。

各子系统菜单树

内容展示及详细操作

选择子系统以及全局按钮

 

图 15-9 MainSoft 的界面布局模式

界面设计追求是无止境的，但是企业的能力和精力是有限的。我并不非常在乎界面是否很漂亮、很吸引人，我更关注的是界面设计是否满足商业需求，是否实现了应有的商业价值。MainSoft界面设计的主要商业价值是：在公司创业初期，在我们有限的能力范围内，我们用心设计了界面。在它诞生之后六年多时间，几乎没有大的改动，也没有发生质量事故，程序员们可以快速复用界面成果，专注于功能开发而不必花费大量精力去调试界面，对软件开发的效率和质量有极大的好处。这个设计思路，值得软件业界同行们借鉴。

15.6.7合理的色彩

世上没有丑陋的颜色、只有丑陋的色彩搭配。在软件界面上实现合理的色彩难度比较高，因为色彩组合千变万化，并且各个用户对颜色的喜好也极不相同。

软件界面设计人员需要了解人类对颜色的共性感知，避免软件界面出现 “红配绿俗得哭”、“黄配紫丑得死”的色彩搭配。

一、色彩的冷暖感

　　不同的色彩会产生不同的温度感。红、橙、黄色常常使人联想到东方的太阳和燃烧的火焰，因此有温暖的感觉，称为暖色系；蓝、青、蓝田、到大海、晴空、阴影，因此有寒冷的感觉，称为冷色系。凡是带红、黄、橙的色调称为暖色调，凡是带青、蓝、蓝紫的色调称为冷色调。绿与紫是不暖不冷的中性色。五彩色系的白是冷色，黑色则是暖色，灰色是中性色。

　　色的冷暖是比较而言的，由于不同色彩的对比，明度纯度不同，物体的表面机理原因其冷暖性质可能发生变化。　

二、色彩的轻重感

　　色彩的轻重感与知觉度有关，凡纯度高的暖色具有重感，纯度低的冷色具有轻感。色彩的轻重感的基本规律为：

　　（重）黑＞低明度＞中明度＞高明度＞白（轻）

　　（重）高纯度＞中纯度＞低纯度（轻）

　　明度低的深色系具有稳重感，而明度高的浅色系具有轻快感。

三、色彩的软硬感

　　色彩的软硬感主要取决于明度和纯度，高明度的含灰色具有软感，低明度的纯色具有硬感。色彩的软硬感与色彩的轻重、强弱感觉有关，轻色软，重色硬；弱色软，强色硬；白色软，黑色硬。

四、色彩的明快与忧郁感

　　色彩的明快与忧郁感主要与明度与纯度有关，明度较高的鲜艳之色具有明快感，灰暗浑浊之色具有忧郁感。高明度基调的配色容易取得明快感，低明度基调的配色容易产生忧郁感。在无彩色系列中，黑与深灰容易使人产生忧郁感，白与浅灰容易使人产生明快感，中明度的灰为中性色。色彩对比度的强弱也影响色彩的明快忧郁感，对比强者趋向明快，弱者趋向忧郁。纯色与白组合易明快，浊色与黑组合易忧郁。

五、色彩的兴奋与沉静感

　　色彩的兴奋与沉静感取决于刺激视觉的强弱。在色相方面，红、橙、黄色具有兴奋感，青、蓝、蓝紫色具有沉静感，绿与紫为中性。偏暖的色系容易使人兴奋，即所谓 “热闹”；偏冷的色系容易使人沉静，即所谓“冷静”。在明度方面，高明度之色具有兴奋感，低明度之色具有沉静感。在纯度方面，高纯度之色具有兴奋感，低纯度之色具有沉静感。色彩组合的对比强弱程度直接影响兴奋与沉静感，强者容易使人兴奋，弱者容易使人沉静。

六、色彩的华丽与朴素感

　　色彩的华丽与朴素感以色相关系为最大，其次是纯度与明度。红、黄等暖色和鲜艳而明亮的色彩具有华丽感，青、蓝等冷色和浑浊而灰暗的色彩具有朴素感。有彩色系具有华丽感，五彩色系具有朴素感。

　　色彩的华丽与朴素感也与色彩组合有关，运用色相对比的配色具有华丽感，其中以补色组合为最华丽。为了增加色彩的华丽感，金、银色的运用最为常见，所谓金碧辉煌、富丽堂皇的宫殿色彩，昂贵的金、银装饰是必不可少的。

七、色彩的舒适与疲劳感

　　色彩的舒适与疲劳感实际上是色彩刺激视觉生理和心理的综合反应。红色刺激性最大，容易使人产生兴奋，也容易使人产生疲劳。凡是视觉刺激强烈的色或色组都容易使人疲劳，反之则容易使人舒适。绿色是视觉中最为舒适的色，因为它能吸收对眼睛刺激性强的紫外线，当人们用眼过度产生疲劳时，多看看绿色植物或到室外树林、草地中散散步，可以帮助消除疲劳。一般讲，纯度过强，色相过多，明度反差过大的对比色组容易使人疲劳。但是过分暧昧的配色，由于难以分辨，视觉困难，也容易使人产生疲劳。

八、色彩的积极与消极感

色彩的积极与消极感与色彩的兴奋与沉静感相似。歌德认为一切色彩都位于黄色与蓝色之间，他把黄、橙、红色划为积极主动的色彩，把青、蓝、蓝紫色划为消极被动的色彩，绿与紫色划为中性色彩。积极主动的色彩具有生命力和进取性，消极被动的色彩是表现平安、温柔、向往的色彩。体育教练为了充分发挥运动员的体力潜能，曾尝试将运动员的休息室、更衣室刷成蓝色，以便创造一种放松的气氛；当运动员进入比赛场地时，要求先进人红色的房间，以便创造一种强烈的紧张气氛，鼓动士气，使运动员提前进入最佳的竞技状态。

九、常见颜色的心理感受

（1）红色是强有力的色彩，是热烈、冲动的色彩。在深红的底子上，红色平静下来，热度在熄灭着；在蓝绿色底子上，红色就像炽烈燃烧的火焰；在黄绿色底子上，红色变成一种冒失的、莽撞的闯入者，激烈而又寻常；在橙色的底子上，红色似乎被郁积着，暗淡而无生命，好像焦干了似的。 
　　（ 2）橙色的波长仅次于红色，因此它也具有长波长导致的特征：使脉搏加速，并有温度升高的感受。橙色是十分活泼的光辉色彩，是暖色系中最温暖的色彩，它使我们联想到金色的秋天，丰硕的果实，因此是一种富足的、快乐而幸福的色彩。橙色稍稍混入黑色或白色，会成为一种稳重、含蓄有明快的暖色，但混入较多的黑色后，就成为一种烧焦的色，橙色中加入较多的白色会带有一种甜腻的味道。橙色与蓝色的搭配，构成了最响亮、最欢快的色彩。

（ 3）黄色是亮度最高的色，在高明度下能够保持很强的纯度。黄色的灿烂、辉煌，有着太阳般的光辉，因此象征着照亮黑暗的智慧之光；黄色有着金色的光芒，因此又象征着财富和权利，它是骄傲的色彩。黑色或紫色的衬托可以使黄色达到力量无限扩大的强度。白色是吞没黄色的色彩。

（ 4）鲜艳的绿色非常美丽，优雅，特别是用现代化学技术技术创造的最纯的绿色，是很漂亮的颜色。绿色很宽容、大度，无论蓝色还是黄色的渗入，仍旧十分美丽。黄绿色单纯、年青；蓝绿色清秀、豁达。含灰的绿色，也是一种宁静、平和的色彩，就像暮色中的森林或晨雾中的田野那样。 

（ 5）蓝色是博大的色彩，天空和大海着最辽阔的景色都呈蔚蓝色，无论深蓝色还是淡蓝色，都会使我们联想到无垠的宇宙或流动的大气，因此，蓝色也是永恒的象征。蓝色是最冷的色，使人们联想到冰川上的蓝色投影。蓝色在纯净的情况下并不代表感情上的冷漠，它只不过代表一种平静、理智与纯净而已。真正令人的情感缩到冷酷悲哀的色，是那些被弄混浊的蓝色。

（ 6）波长最短的可见光是紫色波。通常我们会觉得有很多紫色，因为红色加少许蓝色或蓝色加少许红色都会明显地呈紫味。所以很难确定标准的紫色。紫色是非知觉的色，神秘，给人印象深刻，有时给人以压迫感，并且因对比的不同，时而富有威胁性，时而又富有鼓舞性。它处于冷暖之间游离不定的状态，加上它的低明度的性质，也许就构成了这一色彩在心理上引起的消极感。与黄色不同，紫色可以容纳许多淡化的层次，一个暗的纯紫色只要加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的不断加入，也就不断的产生出许多层次的淡紫色，而每一层次的淡紫色，都显得很柔美、动人。 

（ 6）黑色与白色是对色彩的最后抽象，代表色彩世界的阴极和阳极。太极图案就是黑白两色的循环形式来表现宇宙永恒的运动的。黑白所具有的抽象表现力以及神秘感，似乎能超越任何色彩的深度。黑色意味着空无，像太阳的毁灭，像永恒的沉默，没有未来，失去希望。而白色的沉默不是死亡，而是有无尽的可能性。黑白两色是极端对立的色，然而有时候又令我们感到它们之间有着令人难以言状的共性。白色与黑色都可以表达对死亡的恐惧和悲哀，都具有不可超越的虚幻和无限的精神，黑白又总是以对方的存在显示自身的力量。它们似乎是整个色彩世界的主宰。 
　　（7）在色彩世界中，灰色恐怕是最被动的色彩了，它是彻底的中性色，依靠邻近的色彩获得生命，灰色一旦靠近鲜艳的暖色，就会显出冷静的品格；若靠近冷色，则变为温和的暖灰色。与其用“休止符”这样的字眼来称呼黑色，不如把它用在灰色上，因为无论黑白的混合、不色的混合、全色的混合，最终都导致中性灰色。灰色意味着一切色彩对比的消失，是视觉上最安稳的休息点。然而，人眼是不能长久地、无线扩大地注视着灰色的，因为无休止的休息意味着死亡。

软件界面设计师要凭借自己的感觉、经验以及想象力，用心设计界面色彩，使广大用户看到界面时感到舒服，而不是浑身鸡皮疙瘩。以下是软件界面色彩设计的一些建议：

（1）如果不是为了显示真实感的图形和图像，那么应当限制一帧屏幕的色彩数目，因为人们在观察屏幕的时候很难同时记住多种色彩。

（2）应当根据对象的重要性来选择颜色，重要的对象应当用醒目的色彩表示。

（3）使用颜色的时候应当保持一定的规律，例如错误提示信息，不要一会儿用醒目的红色、一会儿用其它颜色。

（4）表达重要信息时，不要过分依赖颜色，因为有些用户可能色盲或色弱。

15.6.8界面元素标准化

在一个软件系统内，同类的界面元素应当有相同的视感和相同的操作方式。例如命令按钮是最常见的界面元素，所有命令按钮的形状、色彩以及对鼠标的响应方式都是一致的。

界面元素标准化的最大好处就是能够减少用户的记忆量、减少出错几率，并且迅速积累操作经验。例如微软Office家族软件的界面元素高度一致，所以熟悉Word软件的用户基本上不用翻阅手册就能使用Office家族的其它软件。

设计者必须密切注意在相同领域中最广泛的软件界面操作方式。例如DOS和Windows下的软件习惯于设置F1键为帮助热键，如果某个设计者别出心裁地让F1键成为软件终止的热键，那么在用户渴望得到帮助而伸手击F1键的一刹那，他的工作就此完蛋。相信这个用户会被这另类的F1气疯。

软件界面元素“标准化”与 “个性化”之间存在微妙的矛盾关系。

对于一些非常注重安全性的软件系统（如金融软件、军用软件）而言，界面元素的“标准化”要比“个性化”重要得多，因为标准化的界面可以减少用户出错几率，避免损失。

例如，国内所有银行取款机的软件界面操作方式都是非常相似的，谁也不会用奇特的方式来取钱、转账和存钱。用户插入银行卡（机器把银行卡吞进去了），输入密码验证通过后，再进行各项交易操作，最后一步是退出系统并取卡。

美国取款机的操作方式不同于中国：用户插入银行卡后，机器并不把卡吞进去，而是提醒用户马上拿走银行卡，然后输入密码，验证通过后再进行各项操作，最后一步是退出。我第一次使用的时候很吃惊，怎么还没有交易就要我取卡，我本能地认为是银行卡坏了或者是取款机坏了，于是就到另一个银行取款机试验，试了好几次，才发现是操作方式不同。后面排队的美国人肯定觉得前面那个人很奇怪。

这就是操作方式不同（不标准）给用户造成的麻烦。我当时的确有些紧张，在国外取不出钱那麻烦大了。事后想想美国取款机的操作方式更加合理：避免输错密码被吞卡，避免忘记取卡，否则才是真正的麻烦。

对于娱乐性质的软件而言，用户更加喜欢有个性的甚至是颠覆传统的界面，如图15-10所示，个性化界面比平淡乏味的标准化界面更具有吸引力。娱乐软件界面风格不适合于严肃软件系统，反之亦然。

界面设计师应当根据软件用途和广大用户的喜好，在“标准化”和“个性化”两者之间取得均衡。不仅让用户使用起来方便，而且对软件某些个性化元素留下比较深刻的印象。

图 15-10  娱乐软件的个性化界面

15.7常见界面元素的设计和应用规则

本文总结了常见界面元素的设计和应用规则：字体，菜单，命令按钮，工具条和图标按钮，鼠标提示信息（Tooltip），RadioButton和Checkbox，输入框，标签页，Web表格控件，Web树形表控件。

15.7.1字体的规则

文字是用户界面中最基本的元素，是表现界面意图的最主要方式。要使用常见的规范字体，不要选择罕见的字体。英文推荐使用Ms Sans Serif、Arial、Tahoma字体，中文界面的文字一般选用宋体小五。使用粗体来表示标题或引起重视，使用斜体表示强调或提示，但不宜多用。软件界面不宜混和过多的字体，同类用途的字体应当一致，颜色不宜过多。

15.7.2菜单的规则

（1）菜单项的数目一般应当小于15，菜单层次少于三层（否则很难找到菜单）。

（2）对于功能相关的菜单项，应当使用分割线分组显示。

（3）菜单图标一般在菜单项左边，如果工具栏有相同功能的图标按钮，那么对应菜单也要有图标。

（4）菜单文字的末尾加“…”表示执行该菜单将弹出对话框。

（5）菜单右侧加右箭头   ，表示还有下一级菜单。

（6）对于某一时刻不可访问的菜单，应当使其处于禁用状态（灰色），避免出现错误的操作。

（7）Web软件一般很少使用Windows风格的多级下拉菜单，通常使用一级菜单（如右键弹出菜单），或用图标按钮取代菜单。菜单的示例见图15-11。

  

            图 15-11-1  多级下拉菜单的示例                15-11-2  右键弹出菜单的示例

15.7.3命令按钮的规则

（1）按钮上的文字是必需的，文字应当选用动词并且位于按钮中间。

（2）窗口一般有的默认按钮，用于执行常用的操作，而非破坏性的操作。

（3）同一个界面的命令按钮的高度和宽度应当一致，对鼠标的响应方式（如点击、移走）也一致。

（4）如果执行命令按钮将弹出对话框，那么在按钮文字后添加“…”。

（5）在有多页选项板的对话框中，如果按钮对所有页面有效，则放在选项板之外；如果只对某一页面有效，则放在选项板该页内。命令按钮的示例见图15-x。

图 15-12  命令按钮的示例

15.7.4工具条和图标按钮的规则

界面元素中，图标是表现力很强的一种。某些情况下，设计合理的图标可以代替冗长的说明，并且可以精简和美化用户界面，对用户产生一种亲和力。工具条和图标按钮的示例见图15-13。

（1）在制作图标时，要尽量使图标和具体操作含义相吻合，避免用户误解图标的含义

（2）工具条集中了最常用的图标按钮，用纵向分割线对图标按钮进行分组。

（3）如果图标的含义很直观，可以不加文字；反之，最好给图标加文字。

（4）工具条的每一个图标按钮都应当有鼠标提示信息（tooltip）。

（5）对于某一时刻不可操作的图标按钮，应当处于灰色禁用状态（disable）。

图 15-13  工具条和图标按钮的示例

15.7.5鼠标提示信息Tooltip的规则

有些界面控件的含义比较丰富，但不能用比较长的文字来描述，则使用Tooltip。当鼠标停留在该界面控件（如图标按钮、菜单）上时，出现一个小窗口来显示提示信息，用户移走鼠标则提示信息消失。Tooltip的示例见图15-14。

图 15-14 Tooltip 的示例

15.7.6 RadioButton和Checkbox的规则

RadioButton的选项标记是圆形按钮，选项之间是互斥的，只能选中一个，而且必须有一个缺省选中。

Checkbox的选项标记是可以打勾的方框，选项之间没有互斥关系，可以选择一个或者多个。

RadioButton和Checkbox的示例见图15-15。

     

图 15-15 RadioButton 和 Checkbox 的示例

15.7.7 输入框的规则

（1）文字左对齐，数字右对齐。

（2）可编辑状态和不可编辑状态外表（主要是颜色）应当不同。对于不可编辑的文字区域，用户可以选择和拷贝文字。对于可编辑的文字区域，用户可以修改、剪切、拷贝、粘贴文字。

（3）用于输入密码时，应使用*号作为掩码，此时文字不可以被剪切或拷贝。

（4）用于输入限长字符串时，如果用户的输入超过限制长度，应当使用声音提示，而不应当继续显示超出的部分。尽量检测用户输入中的错误，以声音提示而不要显示错误的字符。输入框的示例见图15-16。

图 15-16  输入框的示例

15.7.8  标签页 的规则

标签页 （Tabbed Pane）主要用于显示相关性较强的多页信息：

（1）尽量使用单行标签页，避免出现多行的标签页，否则标签页被选中时，标签位置将出现大的跳动，用户不适应。

（2）页标签的标题上最好有数字提示，若数字为零，表示没有信息，用户就不必点击查看该页面。标签页的示例见图15-17。

图 15-17  标签页的示例

15.7.9 Web表格控件的规则

Web表格控件用于显示行、列数据，它是Web软件最常用的界面控件。Web表格和Windows表格相比，有优点也有缺点。

Web表格控件的主要优点是：风格多样，视觉效果要比灰土色的Windows表格漂亮得多，设计者用HTML+CSS可以把Web表格做成任何样式。

Web表格控件的主要缺点是：HTML本身只能绘制静态的表格，几乎没有任何交互。而Windows表格控件可以随意改变宽度和高度，可以在任意单元格中编辑数据等，这对于Web表格而言是极难实现的。程序员要用HTML + JavaScript编写程序，实现必要的交互功能，才能使Web表格控件具有实用性。

Web表格控件的规则如下：

（1）单元格应当尽量完整显示数据，如果内容太多而无法完全显示，则应当加省略号…，让用户知道还有更多信息未显示。表格的高度发生变化时，应显示完整的行，不应出现数据被遮挡的现象。改变某一列的宽度时，不要影响其他列的宽度。

（2）如果表格的列很多，可以让用户自己设置哪些列显示或隐藏（字段设置）。

（3）允许用户使用鼠标直接选中一列，选中后加亮该列，以示区别。如果需要选中多列，通常在表格左侧加checkbox 。

（4）可以用鼠标左右拖动列的分割线，调整列的宽度。

（5）如果对一行数据的操作功能很少，例如只有修改和删除操作，那么直接在表格中显示操作按钮即可。如果操作功能很多，则使用右键弹出菜单。

（6）用鼠标点击表格任意列的“标题”，应当可以排序（升序或者降序）。经过排序后的表格，阅读起来很方便。

（7）当数据有很多行时，表格能够自动分页，例如每页显示20行，避免页面显示和刷新很慢，导致用户失去耐心。

（8）对某些列可以设置“过滤条件”。很多时候，人们仅仅关心符合一定条件的数据，并不想看到全部的数据。

具有复杂交互功能的Web表格控件示例见图15-18。

字段设置

分页功能

过滤功能

排序功能

右键菜单

 

图 15-18  具有复杂交互功能的 Web 表格控件示例

15.7.10 Web树形表控件的规则

Web树形表控件是在Web表格控件基础上扩展而成的，用于显示和处理具有树形结构的数据，例如菜单树，任务树等。

Web树形表控件的规则如下：

（1）具备Web表格控件的基本常用功能，如鼠标选中行，改变列的宽度，右键菜单，字段的显示或隐藏，数据过滤等。

（2）与Web表格控件的主要差异是，数据不可重新排序和分页，因为树形结构已经固定了数据顺序关系。

（3）每个树节点都可以收缩（-）和打开（+），便于查看。

（4）可以按照一定的规则移动数据（如上移、下移、移动到其它节点），移动之后，树形结构要做相应的改变。

具有复杂交互功能的Web树形表控件示例见图15-19。

移动数据

右键菜单

过滤功能

收缩、展开

 

图 15-19  具有复杂交互功能的 Web 树形表控件示例