触摸屏界面设计原则

触摸屏界面通用设计原则研究

姓名：刘思文申请学位级别：硕士专业：设计艺术学指导教师：陈贤浩

20090115

触摸屏界面通用设计原则研究

摘要

本论文通过对于用户界面设计的认识和触摸屏界面的了解，其中包括自身使

用体会、他人的评价和感想、设计人员的资源共享等，发现了在触摸屏界面设计上存在的问题，深感触摸屏界面可用性的重要性以及在设计中人力物力投资的重复性，从而得出了为触摸屏界面提供一套通用的设计原则的必要性。

文章开篇第一章首先说明了一下研究背景、目的、意义及方法。

接着在第二章介绍了触摸屏和界面设计的基本概念，包括触摸屏的起源、发

展、技术、使用范围以及有关界面设计的方方面面。

然后在第三章列出并参照一些有关界面设计的理论原则、可用性的基本理念、

人因工程学和用户研究方法等。

在第四章里，通过各种设计案例的比较和分析以及对已有理论原则的推导，

同时又受到用户界面管理程序的启示，设想了一套触摸屏界面通用设计原则，使之能最大限度的适用于各种不同的触摸屏界面设计之中。

在第五章中，通过“纺织车间通风系统触摸屏设计”这个相关项目的设计操

作来对以上构想进行论证。设计论证过程包括对此设计项目建立研究模型、需求调研和可用性设计指标设定等，然后把经分析得出的关于此项目的可用性设计指标和之前提出的触摸屏界面通用设计原则构想进行对比，查看出入点，随后做出原型设计并提交用户做可用性评估，然后发现问题进行适当的补充改进设计，再次提交测评……通过这个循环的设计过程之后，证明了之前所提出的触摸屏界面通用设计原则构想基本上是准确的、合理的，并且对此原则进行适当的补充完善使之成为一种科学的原则。

最后第六章中，把之前论证的研究结论具体化简明化的罗列出来并且再提出

对未来研究的展望。

关键词： 触摸屏，界面设计，通用原则，可用性

On the Principles of General User Interface Design in Touch Screen

ABSTRACT

Through the understand of User Interface Design and touch screen, the essay found the problem of User Interface Design in touch screen and then felt deeply the importance of the usability of user interface in touch screen and the repetitive investment in design. Thereby the essay found it is very essential to offer a series of principles of general user interface design in touch screen.

In the first chapter, the essay introduced the research background、objective、significance and method.

In the second chapter, the essay introduced the basic concepts of touch screen and user interface design including the beginning of touch screen、it’s development process、the technology of touch screen、usable range of touch screen and the notion of user interface design on all sides.

In the third chapter, the eassy listed and referred to some theories of the user interface design、usability、Human Factors Engineering as well as the user research method and so on.

In the fourth chapter, though analysing different kinds of design cases and being enlightened by some theories already in existence. The essay assumed a series of principles of general user interface design in touch screen in order to make it fit for different kinds of touch screen interface design.

In the fifth chapter, the essay demonstrated the hypothesis above by designing the project of “The touch screen of ventilation system in factory workshop”. The process of demonstration including building the research model、requirement investigation、setting the usability index and so on. Then compared the design indexes of this project which came from the analysis above with the Hypothesis—principles of general user interface design in touch screen. Look over the difference between them. Next, worked out the prototype design and gave it to the user to do the usability testing. Though the usability testing, we can find out the drawback in the previous design and improve it. Then, gave it to the user to do the usability testing once again. After doing this circular design process, the essay confirmed the hypothesis—principles of general user interface design in touch screen is correct and proper basically and also supplemented the hypothesis to make it become a perfect and scientific principles.

In the sixth chapter, according to the research and analysis result, the essay embodied and abridged the research conclusion as well as listed it. At last, the essay gave the aspects need to improve in the research and draw the future research direction.

KEY WORDS: Touch Screen, User Interface Design, General Principles, Usability

上海交通大学 学位论文原创性声明

本人郑重声明：所呈交的学位论文，是本人在导师的指导下，进行研究工作所取得的成果。除文中已经注明引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。

学位论文作者签名：

日期： 年 月 日

上海交通大学 学位论文版权使用授权书

本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权上海交通大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

本学位论文属于

保密□，在___年解密后适用本授权书。 不保密□。

（请在以上方框内打“√”）

学位论文作者签名： 指导教师签名：

日期： 年 月 日 日期： 年 月 日

触摸屏界面通用设计原则研究

第一章：绪 论

第1节：研究背景

1．1：课题来源

在硕士研究生阶段，我的研究方向是“平面设计与策划”。平面设计的概念是

十分广泛的，海报、杂志、书籍封面、包装、用户界面等都属于平面设计范畴。由于专业使然，平时对于各种平面类的设计多有留意与研究。作为设计界新兴起的一个领域——用户界面设计，当然是难逃设计人员的观察。其实，用户界面设计充斥着我们生活的方方面面，网页、手机、银行自动取款机等都是通过界面而使用户得以操作的。由于平时在生活中接触自动售票机、银行自动取款机等触摸屏的机会比较频繁，作为一个设计研究人员，于是乎就很敏感的对于此类触摸屏的界面设计发生兴趣，自己身边更是发生过在地铁站被人询问如何通过自动售票机买票的事情。之后，在各种期刊杂志，网上论坛上以及周围同行身上，又观察到不少用户界面尤其是触摸屏界面设计的过程和案例，深感触摸屏界面可用性的重要性以及在设计中人力物力投资的重复性，于是通过不断的思索、实验、各种设计案例的比较和分析以及已有原则的推导，设想了一套触摸屏界面通用设计原则，使之能最大限度的适用于各种不同的触摸屏界面设计中。并且由于前一个阶段在霍尼韦尔（中国）有限公司技术研发部实习，参与了“纺织车间通风系统触摸屏设计”，我负责触摸屏界面设计一块。正好可以将该项目的整个设计过程用来论证我之前的触摸屏界面通用设计原则，以此来检验此通用设计原则的准确性和实用性。

1．2：用户界面设计的发展

经历了18世纪60年代的工业，当机械大工业发展起来的时候，如何使

人能够有效操纵和控制产品或机械的问题导致了人因工程学。20世纪70年代后，科技的发展使社会进入了信息化时代，于是简单的体力劳动转向了复杂的脑力劳动，人们面对更多的不是机械类的直接物理性操作而是电子类产品，计算机、移动电话、导航仪等等，哪怕是工厂的大型生产车间，有时都少不了电子计算机的控制以此来减轻人们的体力劳动。在这样的转变下，和人们直接发生关系的媒介就是设备的显示屏，正是通过显示屏，人们才能与机器设备进行交流互动，完成操作。而在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。界面是屏幕产品的重要组成部分，用户界面设计（User Interface Design）随之而产生，可以说这是一个新诞生的领域。

用户界面设计已经历了两个界限分明的时代，第一代是以文本为基础的交互,

如字符、命令等，难用且不灵活，典型代表就是计算机的MS-DOS磁盘操作系统（图001）。第二代则是更直观的图形操作界面，它引出更自然的视觉通信交互，典型代表就是计算机的视窗（Windows）操作系统（图002）。

1

图001. MS-DOS磁盘操作系统

图002. Windows操作系统

在计算机诞生的早期，用户操作计算机是基于1981年问世的MS-DOS磁盘

操作系统， DOS作为一个字符型的操作系统，一般的操作都是通过命令来完成。由于DOS系统需要有一定专业知识的人或者是经过一定培训的人员才能操作，所以它的致命缺点就是不能使得计算机得以普及。

之后，美国的微软（Microsoft）公司从1983年底开始研制视窗（Windows）

操作系统，最初的研制目标是在MS-DOS的基础上提供一个多任务的图形用户界面 。第一个版本的Windows 1.0于1985年问世，它是一个具有图形用户界面的系统软件。之后，不断的推出了比之前更加功能强大、操作灵活的图形操作系统，依次

2

如：Windows 95、Windows 98、Windows 2000和目前至少在中国使用最广的Windows XP。视窗（Windows）操作系统出来之前，电脑上看到的只是枯燥的字幕数字(DOS)，微软（Microsoft）公司开发的视窗（Windows）操作系统，使我们对电脑的应用更直接，更亲密，更易用。可以说，是由于图形用户界面的产生使计算机的使用得以正真意义上普及。

当然，用户界面设计不仅仅只是计算机操作系统如此狭义的一个概念。比如，

随着互联网时代到来而产生的网页的界面，各种游戏和软件的界面，移动电话的操作界面以及触摸屏界面等，都是属于用户界面设计的范畴。

用户界面是人与机器之间交流、沟通的层面。用户界面设计发展至今，从刚

开始的单纯考虑设备的控制和运作逐渐转变为同时对人的情感需求进行考虑，到目前已经形成了一种“以人为中心”的设计理念，即使产品达到简单使用和愉悦使用的设计目的。所以说，用户界面设计不单纯是平面设计，它还是一门牵涉到用户行为学、认知心理学、色彩心理学、人因工程学、社会学、语言学等一系列交叉学科的综合性学科。

用户界面设计经历了上面两代的摸索和发展，下一代则趋向于交互多媒体集成方法，就是人机交互需要大量使用语言和高级图形，也可使用其它交互媒体，如人的动作、手势和三维图像等。

第2节：研究目的、意义及方法

2．1：研究目的

用户界面设计的总体设计思想是“人性化”三个字。人性化的界面能反映用

户的真实需求，按用户的期望去做出了相应的反应。使用户感受到对系统的可控性，体验到了满足感。然而，由于用户界面本身包括很多类型，比如手机界面，网页界面，触摸屏界面等，所以说单纯的“人性化”三个字的设计理念显得太泛泛而谈了。虽然目前在设计界有一些关于界面可用性设计的原则与标准，但是还不足以满足各种不同类型的人机界面设计，因为各种类型人机界面的操作方法、使用环境和界面本身的结构等都是区别很大的。

触摸屏界面是用户界面的一个分支，有一般用户界面的共性也有它自己的特性。这次论文基本上是，结合之前已有的关于界面设计的原则、心理学理论以及人因工程学实验等，然后再针对触摸屏界面这个领域的特殊性，进行推导，整合构想出一套关于触摸屏界面的通用设计原则。而一套理论或原则的最终目的是要具有广泛的适用性，就像心理学家马斯洛提出的关于人的“需求层次理论”，放之四海而皆准。所以此次论文的目的即是，把之前构想的通用设计原则通过之后的“纺织车间通风系统触摸屏设计”这个具体设计项目论证后，来证明此通用设计原则的基本正确性并再给予适当的补充，使之具有普遍的通用性。运用此通用设计原则，在其他不同的触摸屏界面设计中无须做过多的重复性前期调研和修改即可应用，从而避免了在触摸屏界面设计中无谓的时间、人力和物力的重复投资。

2．2：研究意义

第一：用户第一次的使用感受对一个设计的评价很重要，一个良好的用户界

3

面设计，能让用户使用起来更加方便，体验到了满足感，使用户从中获得乐趣，减少由于界面操作问题而造成用户的咨询与投诉，减轻客户服务的压力，同时可以提高工作和生产效率，并且一个优秀的界面设计还能提升产品的竞争力。

第二：触摸屏的使用，可以有效的节约成本，比如抽象的按扭出现在了屏幕 上，而无须再另开模子制造一套物理按扭，不但给制造商节约了成本，也符合节约型社会的倡导和可持续发展之路。如此这般，触摸屏的普及势在必得,对它的研究也刻不容缓。

第三：由于目前触摸屏的使用正在不断扩大、种类也趋于繁多，按此趋势，对于不同的触摸屏种类进行分类设计是不可避免，然而设计应是主动寻找规律而非被动进行。触摸屏的普及和种类的多样化是发展趋势，但是万变不离其中，无论何种功能的触摸屏，它们之间的共性多于异性，把握其共性，找出一些有规律且适用性广的针对触摸屏界面的通用设计原则，在以后的相关设计中能够借鉴和运用，可以少走很多弯路。

2．3：研究方法

目前科学界所公认的研究方法，总体上就是先发现问题，然后通过思考提出假设，再通过实验或挖掘化石、文物等加以论证。如果实验或挖掘获得了预期的结果，那么，假说便得到了强有力的事实依据，并可能成为一种理论、原则或定论。作为一篇科学的、严肃的论文，其整体研究过程势必要符合以上的科学方法。 此次课题是触摸屏界面的通用设计原则研究，大体上分为三步；

第一步在课题的开始阶段，先是对触摸屏有个基本的了解接着发现问题的存

在，即是触摸屏界面设计中存在的问题。

第二步就是运用一些理论原则，包括平面设计原理、界面设计基本原则、认

知心理学、色彩心理学、人因工程学，再结合一些用户界面设计案例和用户评价，参照可用性测试指标，通过分析总结之后提出“触摸屏界面通用设计原则”的构想，其实得出“触摸屏界面通用设计原则”此构想概念和内容是非常关键的一步，因为这不但要有一些强有力的理论基础、可靠的设计案例和细致的用户调研，像直觉、洞察力这一类因素同样起到关键作用。是否能够凭借直觉进行跳跃性思维对设计师而言至关重要。因为虽然设身处地为用户着想是优秀的交互设计人员必备的，但你不可能永远看清问题全局，接触每一个用户，对项目了然于胸。你不得不猜测与假设——这时你需要直觉。在整部科学史中充满了这样的例子。有不少科学家仅仅根据一些不充分的数据和很少一点实验结果（有时甚至一点实验结果也没有），便突然灵机一动，得出了有用的、合乎事实的假设，再回头通过实验或考古挖掘来求证。例如，凯库勒就是在邮车上打瞌睡的时候，突然领悟到“苯”的化学结构的；格拉泽由于无聊地凝视着一杯啤酒，才得到了气泡室的想法；最出名的莫过于苹果掉在了牛顿的头上，促使他去进行万有引力的研究。然而这是不是说，一切都是凭好运气得来的，根本不需要动脑筋去思考呢？不，绝对不是的。这样的“好运气”只有那些具有最好领悟力的人才会碰上，换句话说，有些人之所以会碰上这样的“好运气”，只是因为他们具有十分敏锐的直觉，而这种敏锐的直觉则是依靠他们丰富的经验、深刻的理解力和平时爱动脑筋换来的。

第三步是通过“纺织车间通风系统触摸屏设计”这个相关项目的操作来进行

论证，设计论证的过程当然还包括各种调查方法和可用性测评法。经过论证之后，证

4

明了之前所提出的触摸屏界面通用设计原则构想是准确、合理的，并且再对此原则进 行适当的补充完善，使之羽翼丰满，成为一种科学的原则。

5

第二章：触摸屏及界面设计基本概念

第1节：触摸屏基本概念

1．1：触摸屏发展状况

如果说鼠标的发明，把电脑操作带入了一个新的时代，那么触摸屏的出现，则使图形化的人机交互界面变得更为直观易用。1971年，美国人SamHurst发明了世界上第一个触摸传感器（图003）。虽然这个仪器和我们今天看到的触摸屏并不一样，却被视为触摸屏技术研发的开端。

图003 图004

SamHurst生产的最早一批触摸屏产品 触摸屏之父SamHurst（左）在展示其新产品

当年，SamHurst（图004）在肯尼迪大学当教师，因为每天要处理大量的图形数据，于是就开始琢磨怎样用最简单的方法搞定这些图形数据以此来提高工作效率。他把自己的三间地下室改造成了车间，一间用来加工材料，一间制造电子元件，一间用来装配这些零件，并最终制造出了最早的触摸屏。这种最早的触摸屏被命名为“AccuTouch”，由于是手工组装，一天只能生产几台设备。1973年，这项技术被美国《工业研究》杂志评选为当年100项最重要的新技术产品之一。不久， SamHurst成立了自己的公司，并和西门子公司合作，不断完善这项技术。这个时期的触摸屏技术主要被美方采用，直到1982年，SamHurst的公司在美国一次科技展会上展出了33台安装了触摸屏的电视机，平民百姓才第一次亲手“摸”到神奇的触摸屏。 从此，触摸屏技术开始广泛应用于公共服务领域和个人娱乐设备。利用这种技术使用者只要用手指轻轻地碰触计算机显示屏上的图符或文字就能实现对主机操作，这样摆脱了键盘和鼠标操作，它极大的简化了计算机的使用，使人机交互更为直截了当，即使是对计算机一无所知的人，也照样能够信手拈来。

1991年，触摸屏正式进入中国。1996年中国自主研发的触摸自助一体机投

6

入生产。目前触摸屏已经侵吞了不少的键盘市场份额。工业市场调研公司Venture Development统计报告显示，2006年触摸屏市场份额在2005年53.8%的基础上增长2.5%，键盘市场则下降3.6%至26.2%。仅对移动电话市场而言，全球调研和咨询公司Strategy Analytics就认为，到2012年将有40%的移动电话会采用某种形式的触觉感应技术，而目前只有3%。包括苹果iPhone在内的许多最新手机产品都使用了代替键盘的大触摸屏。

触摸屏作为一种最新的电脑输入设备，它是目前最简单、方便、自然的一种

人机交互方式。它赋予了多媒体以崭新的面貌，是极富吸引力的全新多媒体交互设 备。

1． 2：触摸屏技术以及使用范围

触摸屏发展至今一共有五种独特的已经商业化的触摸屏技术，即电阻式触摸屏、投射式电容触摸屏、表面声波、红外、矢量压力传感触摸屏。其中矢量压力传感触摸屏已经退出历史舞台，红外技术触摸屏价格低廉，但其外框易碎，容易产生光干扰，表面声波触摸屏解虽然清晰抗暴，适于各种场合，缺憾是屏幕表面的水滴、尘土会使触摸屏变的迟钝，甚至不工作。所以这两种技术也正慢慢退出历史舞台。下面介绍其中另两种触摸屏技术，一种是目前使用最为普遍的‘电阻式触摸屏技术’，另一种是具有发展潜力的‘投射式电容触摸屏技术’。

“电阻式触摸屏”是市场中用得最普遍的触摸屏技术。摩托罗拉A6188或者

是后来的多普达PPC手机都是采用的一种叫做“电阻式触摸屏”的技术。这种屏幕由两层涂有透明导电物质的玻璃和塑料构成，这是一种多层的复合薄膜，它以一层玻璃或硬塑料平板作为基层，表面涂有一层透明氧化金属（透明的导电电阻）导电层，上面再盖有一层外表面硬化处理、光滑防擦的塑料层、它的内表面也涂有一层涂层、在他们之间有许多细小的（小于1/1000英寸）的透明隔离点把两层导电层隔开绝缘。在用户手指触摸屏幕时，会将两层内的导电层贴合使得当前位置的电压产生变化，进而获得触摸点的位置。虽然它不是非常耐久，而且透明性较差，但电阻式触摸屏价格较低，而且对于手指及输入笔触摸的响应性较好，使其成为最近几年出货量最大的触摸屏技术。不过电阻式触摸屏共同的缺点是因为复合薄膜的外层采用塑胶材料,不知道的人太用力或使用锐器触摸可能划伤整个触摸屏而导致报废。

“投射式电容触摸屏”也就是iPhone等较新较高端的触摸屏手机所采用的技

术。电容式触控屏利用人体的电流感应进行工作。电容式触控屏是一块四层复合玻璃屏，玻璃屏的内表面和夹层各涂有一层ITO（镀膜导电玻璃），最外层是一薄层矽土玻璃保护层, ITO涂层作为工作面, 四个角上引出四个电极，内层ITO为屏蔽层以保证良好的工作环境。当手指触摸在金属层上时，由于人体电场、用户和触摸屏表面形成以一个耦合电容，对于高频电流来说，电容是直接导体，于是手指从接触点吸走一个很小的电流。这个电流分别从触控屏四角上的电极中流出，并且流经这四个电极的电流与手指到四角的距离成正比，控制器通过对这四个电流比例的精确计算，得出触摸点的位置信息。所以说电容式触控屏轻轻一摸就可以被系统识别到，而我们常见的电阻式触摸屏则需要“压”下去才能够被系统感知。

iPhone手机引起轰动的一个重要原因，就在于苹果公司率先将“多点触摸”

应用到了手机上。以往的手机触摸屏多采用电阻式，一次只能感知一个位置的触摸。而电容式触摸屏搭配专用软件，可以同时处理多根手指的触摸指令。于是iPhone手

7

机的最亮点就是用两根手指在屏幕上“捏”一下，就能调整窗口和图片的大小，就像你真的把它“捏扁”了一样。这一切效果的实现，就是建立在电容式触摸屏的技术之上。在苹果公司iPhone的刺激下，投射式电容触摸屏的销售强劲增长。与用得比较普遍的电阻式技术相比，投射式电容触摸屏的优点在于灵敏度更高并且投射式电容触摸屏技术更加耐久而且透明性更好。越来越多的触摸屏制造商正在开发和商业化此类触摸屏，包括Synaptics和3M。据悉，微软日前发布的概念计算机Milan也应用了此项技术。令人高兴的是，投射式电容触摸屏与电阻式触摸屏模块之间的价格差距正在缩小。

触摸屏从诞生之初先是用于军事领域，而后逐步走向民用。从发达国家触摸

屏的普及历程来看，触摸屏在各种应用领域已经不再是可有可无的东西，而是必不可少的设备。它极大的简化了计算机的使用，并且坚固耐用、反应速度快、节省空间和制作成本。现如今，触摸屏的应用范围非常广阔，主要包括：信息站、导航系统、业务查询机、银行自动取款机（ATM）、自动售票机等公共服务项目，移动电话、掌上仪器、工业控制、电子游戏、点歌点菜等等。将来，触摸屏还要走入家庭。

第2节：界面及触摸屏界面设计介绍

2．1：界面

界面又称接口。《现代汉语词典》给的定义是“物体与物体间的接触面”，

词义较广。

机器设备屏幕显示界面通常又称用户界面（User Interface,简写UI、或人机界面 Human-Computer Interface,简写HCI），以下皆称用户界面。用户界面是人与机器进行交互的操作方式，即用户与机器互相传递信息的媒介，其中包括信息的输入和输出。不论何种形式的用户界面，总少不了两个基本任务：把信息从机器传送到用户以及把信息从用户传送到机器。

常规思维模式下，人们一般会认为用户界面似乎就是指计算机或与计算机设备相关的各种领域，但情况并非如此，其实人们的日常工作以及生活中天天要借助用户界面来获取以及发送信息，比如我们日常使用的手机就存在着用户界面，正是通过手机界面，我们才能自如的使用。此外，地铁的自动售票机，银行的自动取款机等等，都是用户界面大量出现的地方。可以说，凡参与人机信息交流的领域都存在着某种形式的用户界面。从直观上理解用户界面就是：呈现在用户面前，显示器屏幕上的一系列图形状态、文字、窗口、对话框以及消息框等内容。

2. 2：界面设计

由于界面是人与机器之间传递和交换信息的媒介，所以对于界面设计人员来

说，一个必须接受和牢记的基本现实就是：用户界面是面向用户的。有调查研究显示，当一个人第一次做一件事就获得比较令人快乐的结果，以后他会把这种快感长期保持在心理，并自动增强继续完成这件事的欲望。而对于要通过屏幕显示和操作的设备来说，界面设计的优秀与否直接影响到用户的使用心得，界面设计在这其中充当了举足轻重的作用。所以说，拥有优秀界面的产品，无论其机器设备的可用性操作还是对于其产品的市场竞争力都是大有益处的。

8

用户需要的界面是能满足其需求，并且易于使用的。用户界面是当最终用户

使用系统时所接触到的全部内容，无论从物理、感知、还是从概念特征上来讲都是这样。由此可见，界面设计是一个复杂的有不同学科参与的系统工程，平面设计学、用户行为学、认知心理学、色彩心理学、人因工程学、社会学、语言学等在此都扮演着重要的角色。

2. 3: 图形用户界面设计

User Interface，简写GUI)是指采用图形方式显示的 图形用户界面 (Graphical

机器设备操作环境用户接口。准确来说，图形用户界面就是屏幕产品的视觉体验和互动操作部分。比如，与早期计算机使用的命令行界面相比，图形用户界面对于用户来说更为简便易用。它为用户提供了最简单的方式去真实地形象化的看每一件东西。 自从1980年Three Rivers公司推出Perq图形工作站开始，在微软（Microsoft） 公司，苹果公司等研究推动下，图形用户界面设计走上了一条飞跃发展之路，当然 最初图形用户界面设计大展拳脚的舞台是计算机的操作系统，而后逐步走向网页和 其他人机界面。

从宏观上看，图形用户界面被定义为一种采用了4 种基本组件（视窗、图标、

菜单和鼠标指针）的人机交互形式。图形用户界面有时称为WIMP界面（即Window[视 窗]、Icon[图标]、Menu[菜单]、Pointing Device[指点设备]的缩写。）图形用户界面 的基本特性中，固有的重要特性是直观操作、提供鼠标或指针支持、图形和应用软 件功能和区域。

视窗：视窗是显示设备中的一个区域（图005），用于观看并与对象、对象相关信息以及应用与对象的动作进行交互。视窗有标题栏、有移动和改变大小的操作、菜单和提供对象信息的区域。一般说来，视窗是矩形的。

图005. 图形用户界面中的视窗式样

图标：图标是通过图形化方式来表示对象。与图标相关的典型特性包括：用于表示 一个对象的图形标志、一个标题名字和直观操作。采用非正式图标的图形化用户界

9

面中，有很多图形化符号。用于表示动作（如最小化）的图形标志，可能会最终被 用户当作图标；但在开发图形用户界面和标准的人员看来，它们是图形按钮。图标

化设计的另一个重要好处就是，跨越了人们的语言障碍，无需文字说明，凭简单明了的图形标志，就能传达出信息。

菜单：菜单用于显示一组选项，供用户选择（图006、007）。一般情况下，基于图

形用户界面的菜单选项是供用户选择的、用于对对象执行动作的命令。所有用户命令集合都包含在菜单中。一般说来，菜单通过窗口来显示。

图006. 菜单图形式样 图007. 菜单图形式样

指针：图形系统一般都有通过鼠标或轨迹来实现的指点设备。与指点设备相关的是 屏幕上的某个位置，用户可以在那里通过指点设备进行输入。指针是一个图形，用 以对指点设备输入到系统的位置进行可视化描述。图形用户界面的指针包括系统箭 头、十字型交叉图形和文本 I 型标示。指针在很多地方都与显示设备上描述接收键

盘输入位置的文本输入光标相似。

关于图形用户界面，最重要的特性或许是直观操作，它允许用户通过指针的 使用与对象交互。无数的事实证明，基于图形用户界面的应用软件所提供的可用性 高于非图形用户界面的应用软件。图形用户界面最适合初学者。

目前，图形用户界面所延伸的领域已经越来越宽广。手机界面、触摸屏界面 等，都涉及到图形用户界面。在新的领域里，图形用户界面的组成会产生一点变化，

至少在手机界面和触摸屏界面里，指点设备这个概念将发生巨大的变化。这部分内容会在下面的章节中详细论述。

2． 4：触摸屏界面设计现状

正如前文叙述的，由于触摸屏是一个诞生才不过三十多年的新产物，所以对于依附与此产品的触摸屏界面设计而言，则更是处在一个摸索发展阶段。任何一个领域的发展都不是闭门造车式的进行，而是通过与相关行业，种类接触，借鉴之后才逐步形成一套比较完善的自我理论。触摸屏界面设计也逃脱不了这个规律。

目前的触摸屏界面设计，一般情况下大多是分两步走，首先是根据实际设计

项目进行一些相关的前期调研，然后再借鉴和遵守已经形成的并被广泛采用的界面设计原则（这些界面设计原则适用的范围十分广泛，可以说从网页界面到手机界面无一不包）进行相关设计。

根据2008年6月28日的上海晚间新闻报道“本市将专门组织65岁以上老人，

10

分批进行银行自动取款机（ATM）的操作使用练习……”以及本人在地铁站里多次被行人（50岁上下）问及如何操作自动售票机的经历中可以分析出，目前市场上的触摸屏界面设计之可用性是离预期效果还是有些差距的。

第3节：触摸屏界面和一般界面的异同点

3． 1：触摸屏界面和一般界面的相同之处

除了触摸屏界面外，其它的用户界面包括网页界面、软件界面，游戏界面和手机界面等。

触摸屏界面和它们有很多相似之处的：最基本一点，他们都是交互式系统，

都属于软件设计范畴而不是物理设计范畴。其次，无论是触摸屏界面还是网页界面等，它们都是属于图形用户界面设计，也就是说，它们都有图形用户界面所共有的属性，比如视窗、图标、菜单、指点设备。只是在某些特殊的情况下，以上这些组成元素会发生相应的改变。再次，触摸屏界面和其它界面设计在色彩心理学和平面设计学这两方面所涉及的知识内容几乎是相同的。

最后一点，触摸屏界面和其它界面的设计理念是一致的，就是“以人为本”，

让用户在首次接触了这个界面后就觉得一目了然，不需要多少培训就可以方便地上手使用，从而使用户第一次操作就获得快乐感受。

3．2： 触摸屏界面和一般界面的不同之处

上文已经讲过，除了触摸屏界面外，其它的用户界面包括网页界面、软件界面，游戏界面和手机界面等好多种。其中网页界面和手机界面可以说是两个典型的代表。要叙述触摸屏界面和其它用户界面之间的不同点，就要分别和两个典型的界面代表比较，然后得出结论。

网页界面和触摸屏界面：首先体现在用户导航方面。在网页上，用户从根本上控制了他自己使用网页的行为。用户可以抄小路而不受设计人员的任何影响：比如，用户可以从搜索引擎直接进入网站内部，而不必经过首页，用户在不同的网站之间，不同的设计之间跑来跑去，具有相当的流动性。大体上说，设计人员必须放弃对网页界面的完全控制，让用户和他们的客户端来决定一部分。 在触摸屏设计中，设计人员可以控制用户什么时候可以去哪儿。你不想让某个菜单项工作，你可以让他变灰。你可以扔出一个对话框中止计算机的运行，直到用户回答了你的问题。其次在设备显示方面。在网站方面，用户可能通过一台传统的计算机访问网站，也可能是用笔点击的手持式设备，任何一个网站设计在不同的设备上看起来都大不一样。而在触摸屏设计里，你能够控制每一个像素，你制作一个对话框的时候，你可以确定它在用户屏幕上的真实尺寸，你知道最终的显示器尺寸有多大。再次，在指点设备方面。传统的网页界面上，用户是通过鼠标箭头来完成操作的，而在触摸屏界面上，指点设备不再是鼠标箭头而是人的手指，这样势必在按钮方面产生变化。最后，是使用环境的不同。触摸屏幕的使用大多在室外，例如娱乐场所点歌点菜系统、业务查询机、自动售票机等，而网页的浏览使用大多在室内进行（除了偶尔用手提电脑在公共场所无线上网）。 手机界面和触摸屏界面：在手机界面上，虽然界面的最终显示设备多种多样，但是在尺寸上都大同小异，即不会超过一个成人的手掌大小。于是就决定了在如此范

11

围内，安排多少信息、字体大小如何等相关问题。在触摸屏界面上，最终显示屏的尺寸同样固定可以预知，不过尺寸一般大于手机屏幕，并且对于不同的设备，不同的操 作，显示屏幕的大小会相差很多，于是在布局，导航，文字等方面都会产生变化。在指点设备方面，手机界面一般运用文本I型标示或光亮显示或笔点等，而触摸屏界面的指点设备就是人们的手指，于是在所需要的按钮大小方面存在着明显的不同。

3．3： 触摸屏界面设计存在的问题

在详细叙述了“触摸屏界面设计现状”以及“触摸屏界面和一般界面的异同点”后，有关触摸屏界面设计所存在的问题基本上已是显而易见了。

当用户使用一款新手机时，可以先耐心的阅读手机说明书，在图文并茂的解

释之下，能够慢慢熟悉操作自己的手机。而对于触摸屏的使用，尤其是公共场所的触摸屏的使用，绝对没有说明书的提供，唯一能对用户进行指导的就是触摸屏界面上的提示语言以及一些图标和按钮，所以这就对触摸屏的界面设计提出了要求，如何让用户在没有说明书并且是第一次使用的情况下，仅按照屏幕上简单的语言提示就能顺利完成操作。

同样的问题在网页的设计上也存在过，因为用户浏览一个网站，是不可能事先去看操作说明书的，在可用性研究中，用户经常抱怨那些用法离谱的网站不好使。对于用户的感觉，所有的网站是一个整体，而不是某个特定的网站，也就是说，用户需要每一个网站的使用习惯都是一样的，都是他们对整个网络的使用习惯的一部分，而不是每个网站都有它不同的习惯。对于触摸屏也是如此，面对代表不同设备的触摸屏，用户不希望刚学会使用一种而又要花时间精力去学着使用另外一种。于是，个性化设计与整体设计之间的天平倾向了整体。

还有，考虑了用户，也要考虑设计人员和设计过程，在市场运作激烈的今天，效率就是利益，设计过程的效率直接影响到企业的效益，面对不同的触摸屏设备而围绕着进行设计，是被动的行为也是重复劳动的行为，因为触摸屏虽然代表的设备不同，但还是有一些共通之处的，掌握了共同之处，就可以在设计中避免重复劳动。可以说，个性化设计与整体设计之间的天平又一次倾向了整体。

面对上述问题，只有对触摸屏界面的设计建立一个比较规范、通用的设计法

则，那么设计出来的界面才不会让用户觉得繁杂而使用费时，并且对于设计人员来说，也是一种又有效率又行之有效的方法。有关详细的解决办法，在下面的章节中会逐一提到。

12

第三章：界面设计基于的原则及理论

第1节：界面设计基本原则

1．1：用户导向原则

用户导向（User oriented）原则就是说界面设计首先要明确到底谁是使用者，

要站在用户的观点和立场上来考虑设计界面。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。界面设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。设计者如果忽视了这些差别，设计出的界面在针对性和可用性上就有所不足了。并且所谓用户向导原则还要树立用户不是上帝而是魔鬼意识。为什么说用户不是上帝？因为上帝的要求是有理由的，是友善和包容的；而魔鬼不一样，魔鬼是可怕的，是随时可以翻脸和挑衅的。要让上帝满意，你只需要提供没有瑕疵的产品和服务就可以了，但是，对于魔鬼，这还远远不够，你还需不断有好的东西，才能满足他的贪婪和挑剔的需要；这是一种危机意识，要随时感觉到市场的变化和企业的危机，用一种几乎自虐的方式来要求每一个细节，只有这样就算是魔鬼也会被我们感动化成天使。

1．2：易用性原则

易用性原则即Kiss（Keep It Simple And Stupid的缩写）原则，简洁和易于操作是界面设计的最重要的原则。毕竟，界面设计出来的目的是为了让使用者更方便的使用设备。没有必要在界面上设置过多的操作，堆集上很多复杂和花哨的图片和繁杂的步骤。该原则一般的要求：使用步骤简化，页面布局简单，颜色不易过多，视觉平衡，和谐与一致性，相同内容用相同符号并且避免出现两次以上，尽量使用图形说明（减少语言障碍），图形抽象易懂等。简而言之就是，产品对用户来说有效、易学、高效、好记、少错和达到令人满意的程度，用户能否用产品完成他的任务，效率如何，主观感受怎样。

易用性原则一般包括三部分：A, 易见 (Easy to discover) 功能是否容易被发现；B，易学 (Easy to learn) 学起来容易；C, 易用 (Easy to use) 熟练使用的时候可以更快的操作。这三条本身其实是冲突的，需要平衡。比如，微软的Windows界面是这样设计的：菜单是统一的发现功能的入口，通过把拷贝和粘贴放在编辑菜单下使用户容易学习使用，而不像DOS一样，只有通过说明书或者书籍才能发现(discover)和学会(learn)。不过，如果每次拷贝操作都要通过指向“编辑”，然后选择菜单中的“拷贝”虽然易学，但是不易用，所以就设计了Ctrl+C和Ctrl+V的快捷方式，供学会的人更容易的使用。

1．3：实用性原则

所谓实用性是指能够被系统和用户所接受。所谓能够被用户接受主要是从使

13

用习惯及经济方面来讲的。如果因为系统界面的需求而迫使用户不得不配置一些昂贵的设备，这对用户来讲是不合算的，从系统的优越性来讲降低了其性能/价格比，从而也就影响到系统的推广普及工作。所谓能够被系统接受是指不应因界面设计的原因而损害整个系统的运行。比如用户界面在运行过程中需要庞大的内存支撑，这样导致内存资源短缺而使系统的某些功能因申请不到内存而不能运行或使系统崩溃。

第2节：界面设计基于的心理学和人因工程学理论

2. 1：认知心理学

认知有一个过程，看和听的过程构成知觉，图像和声音作为刺激的特征被接

收并以抽象的方式被编码，把输入和记忆中的信息进行对比得出对刺激的解释，这一过程就是认知。人体信息处理器包括感官，短期记忆、长期记忆及与其相联系的动作处理器和认知处理器。每种知觉均有一个对应的短期存储器和处理器，其中认知处理器执行的工作就是我们通常所说的思维。思维的结果或被存储起来，或送至动作处理器控制行动。假定一个人看屏幕上投射的字母 E，如果投射时间很短，比如一毫秒，那么这个人就不会看到什么，这说明知觉不是瞬时的；投射时间长一点，比如五毫秒，那么这个人就会看到某种东西，但不知是什么，这说明知觉产生了，但辨别尚未产生；如果投射时间长度足以使人看出这个字母不是O或Q，但看不出是 E还是 F或 K，那么这个人就产生了部分的辨别。由此人们就可以确定完全辨别、部分辨别或刚刚看出有东西所需的的时间。这一切表明，知觉是累积的。

认知心理学，从广义上来说，就是关于认识的心理学。人类认识客观事物，主要就是通过感觉、知觉、注意、记忆、思维想象等来进行，因此，凡是研究人的认识心理过程的，都属于认识心理学。实际上，我们这里所指的认知心理学是指纯粹采用信息加工观点来研究认知心理学过程的心理学，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究知识是如何获得、如何存贮、如何交换、如何取使用的。所以，我们这里所指的现代认知心理学实质是信息加工心理学。一般地，人们将信息加工心理学又称为狭义的认知心理学。以下是认知心理学的三个基本组成部分： A，现代认知心理学的核心： 现代认知心理学的理论实质，就是以计算机信息加工的观点来研究人的心理学活动，把人脑看作是一种如同计算机的信息加工系统。

B，现代认知心理学两个关键的重要概念： 现代认知心理学的学说内容集中体现在两个关键的重要概念上。现代认知心理学的一个重要的中心概念，就是“信息”。在某种程度上说，抽掉了“信息”的概念，认知心理学的理论也就会散架解体，难以存在。 现代认知心理学的另一个重要的中心概念，就是“信息加工系统”。信息加工系统的理论，是现代认知心理学理论的主体。

C，现代认知心理学的研究方法：现代认知心理学的研究方法有实验法、观

察法(包括自我观察法)以及计算机模拟法等。

根据认知心理学，提出以下几点针对用户界面设计的参考：

（1）由具体到抽象。即首先通过多媒体界面给用户提供具体的对象。然后从

具体对象、内容中让学习者归纳出抽象的概念或原理，或用模拟系统来引导出抽象的原理。

14

（2）由可视化的内容显示不可见的内容。尽可能利用数字、图解、动画、色

彩等清晰爽目的对象显示原理、公式或抽象的概念。

（3）由模拟引导创新。突出人机交互，尽量启发用户的积极思维和参与，并

激起用户的学习和创造欲望。

（4）合理运用再认与再忆，减少用户短期记忆的负担。所谓再认就是从系统

给定的几个可能答案中要用户选择一个正确的或最好的。再忆即要求用户输入正确的答案或关键字。

（5）考虑用户的个别差异，使用用户语言。

以上5点具体体现了“由易而难，逐步强化。”这一源于认知心理学的原则。

2．2：Miller公式

根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7±2 比特。这一原理被广泛应用于软件界面中，一般界面上面的栏目选择最佳在5～9个之间，如果界面所提供给使用者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如Msn.com的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。Aol.com的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。然而很多国内的软件界面在栏目的设置远远超出这个区间。前面提到，对于信息的分类，不能超过9个栏目。但如果你的内容实在是多，超出了9个，需要进行分组处理。

2．3：色彩的心理效应

视觉器官在接受外界色彩刺激产生直觉映像的同时，也会自动地引发对应的思维活动，比如情绪、感情、精神及行为等，我们称之为“色彩的心理效应”。色彩心理活动包括三个方面：色彩表情，色彩联想，色彩象征。

（1）色彩表情

“表情”一词原指人的面部变化表现出内心的思想和情感状态,即喜、怒、哀、

乐等,色彩表情是指色彩给人带来的情感或精神上的某种愿望。无论是有彩色还是无彩色，都具有各自的表情特征。

例如，红色的表情特征是：强有力的色，波长最长，在视觉上形成迫近感和

扩张感，易引起注意、兴奋、激动、紧张，因此红色象征着热烈和冲动，常用来表达喜庆、欢乐、、进步等一位，同时也具有危险、恐怖、暴力的含义。在非洲、南美等地的土著民族,红色也被视为生命的象征。他们在死者的遗体上涂上红色，以祈祷死者得到永生。在中国，红色意味着信誉，自古以来，中国人加盖的印章都是红色的。我国2008 年奥运会的会徽就使用红色印章图形，象征中华民族的信誉和决心。

又例如，蓝色的表情特征是：波长较短，属于收缩、内敛的冷调色彩。它的

视认性与注目性都较弱。蓝色是三原色(红、黄、蓝)之一，其色性富有纯正而高贵的特质。蓝色是博大的色彩，天空和海洋都是蔚蓝色，它标志着理智、深远、永恒、信念等含义。中国人自古对蓝色情有独钟，一贯把蓝色当作典雅、朴素、庄重的色彩,建立了具有民族风情的文化系列，如蓝花瓷、蜡染、景泰蓝等都以其渊源流长的历史和丰富的内涵向世人昭示中华民族文明的博大精深。在欧洲，蓝色是纯正与高贵的标

15

志,常用来描绘圣母的衣裳。 （2）色彩联想

视觉在接受外界色光刺激的同时，还会唤起大脑有关色彩记忆的痕迹,并自发

地与过去视觉经验联系在一起，经过分析想象，形成新的情感体验或新的思想观念，这一过程叫色彩的联想。它会因人们的年龄、性别、文化修养、职业等因素的不同而有所差别。联想又分为具象联想、抽象联想、共感联想。

① 具象联想：色彩的具象联想是由色彩想到客观存在的具体事物色彩的具

体联想形式。如看到草绿色就联想到草坪，看到蓝色就联想到蓝天和海洋。未成年人多富直观感性的色彩具象联想。

② 抽象联想：色彩的抽象联想是指由观看的色彩直接想象到某种富于哲理、

抽象性概念的色彩的心理联想形式。成年人多富抽象理性的色彩联想，（表1）。

表1. 色彩对人的抽象联想

③ 共感联想：共感联想是指色彩视觉引导出其他领域的感觉或反向心理联想

形式，（表2）。

表2. 色彩对人的共感联想

对于色彩的联想应用，例如当我们要找一个色彩表示“丧事”时，首先联想到的是黑色；但印度却是白色，土耳其是紫色，缅甸是黄色。什么颜色代表高贵？在中国的答案是黄色，在西方是紫色，在古代罗马则是红色。这些属于色彩象征意义的资料，有时必须通过调查、统计等科学方法，才能找到正确的共同性。 （3）色彩象征

各种色彩的象征：

红色：热情、活泼、热闹、、温暖、幸福、吉祥、危险…… 橙色：光明、华丽、兴奋、甜蜜、快乐……

黄色：明朗、愉快、高贵、希望、发展、注意……

16

绿色：新鲜、平静、安逸、和平、柔和、青春、安全、理想…… 蓝色：深远、永恒、沉静、理智、诚实、寒冷…… 紫色：优雅、高贵、魅力、自傲、轻率……

白色：纯洁、纯真、朴素、神圣、明快、柔弱、虚无……

灰色：谦虚、平凡、沉默、中庸、寂寞、忧郁、消极……在商业设计中，灰

色具有柔和，高雅的意象，而且属於中间性格，男女皆能接受，所以灰色也是永远流行的主要颜色，在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级，科技的形象。

黑色：崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、

死亡……在商业设计中，黑色具有高贵，稳重，科技的意象，许多科技产品的用色，如电视，跑车，摄影机，音响，仪器的色彩，大多采用黑色。

褐色：在商业设计上，褐色通常用来表现原始材料的质感，如麻，木材，竹

片，软木等，或用来传达某些引品原料的色泽即味感，如咖啡，茶，麦类等，或强调格调古典优雅的企业或商品形象。

2．4：眼动仪实验

眼睛是心灵的窗口，透过这个窗口我们可以探究人的许多心理活动的规律。人类的信息加工在很大程度上依赖于视觉，来自外界的信息约有80%～90%是通过人的眼睛获得的。因此对于“人是如何看事物”的科学研究一直没有间断过。关于这一点，对于眼球运动的研究被认为是视觉信息加工研究中最有效的手段。研究表明眼球运动的各种模式一直与人的心理、生理相关联。近年来，一些精密地测量眼球运动规律的仪器（以下称眼动仪）相继问世，为人因工程学的实验研究提供了新的有效的工具。这使人因工程学实验的客观性、科学性又向前迈进了重要的一步。

眼动仪实验是人因工程学的重要一部分，而用户界面设计中又包含了人因工程学，所以眼动仪实验也是用户界面设计中不可或缺的组成部分。

很巧的是，本人目前所在的院系实验室里正好有眼动仪设备，这就为本人在这一方面的调查研究提供了十分宝贵的机会。

根据我的观察体会以及相关资料的述说可以了解到，眼动仪工作过程是用红外线摄像机摄取受试者眼睛图像，经过MPEG编码后送入计算机进行图像数据采集分析，实时计算出眼珠的水平和垂直运动的时间、位移距离、速度及瞳孔直径、注视位置。 然后通过软件分析：显示出发生视觉刺激时注视点移动的路径，观看活动图像或静止图像时目光停留位置和时间，记录出眼睛的注视点，扫描轨迹和瞳孔直径等眼动绩效指针，构建用户在产品操作时的眼动操作模型，用数据表征用户对产品的关注点、观察产品各视觉对象的先后顺序，对各视觉对象的注视时间和感兴趣区域。从而得到用户界面设计相关的参考数据。眼动仪实验情景（图008、009）。

17

图008. 眼动仪实验情景 图009. 眼动仪实验情景

眼动仪实验的使用范围是很广泛的。比如汽车驾驶台操作的眼动记录（图

010、011），和手机操作的眼动记录（图012）。

图010. 汽车驾驶台操作的眼动记录 图011. 汽车驾驶台操作的眼动记录

图012. 手机操作的眼动记录

18

在上述的产品设计中，如汽车驾驶台的设计，因为有了眼动仪实验的帮助，

从而设计出的汽车驾驶台可以说在安全性上大大的提高了。

眼动仪实验不仅运用于产品设计中，同样也适合于平面类设计，尤其是在用

户界面设计当中更是举足轻重，因为通过眼动仪实验所测得的数据可以判断出用户的视觉流程和关注热点，从而为界面的布局，信息的安排提供可靠的帮助。

那么在用户界面设计中，是如何通过眼动仪实验来进行分析和设计的呢？下

面就举一个在网站(Toytogrowon.com)设计上运用眼动仪的例子。以下两幅截图是用户在浏览网页时的注视热点分布图。热点区域红色越深，代表用户视线停留时间越长（图013、图014）。

图013. 网页注视热点分布图 图014. 网页注视热点分布图

透过检视这些‘热点’，结果显示用户在网站(Toytogrowon.com)的眼睛移动是一种非常分散的模式。这证明用户在眼球的注意力不是集中在一个需要找的链接的位置，而是数个位置。无论何种原因，正是在这些位置上是他们花费最长的时间、搜寻最多次的地方，他们在这些位置上最终发现要找的链接。然后把这些‘热点’的分布具体化，得出的视点顺序图。由于篇幅问题，这里就放上网站(Toytogrowon.com)的第二页视点顺序图。（图015）

19

图015. 视点顺序图

通过比较网页不同区域的视觉注意力，我们了解到很多关于用户体验的特性。特别是用户眼动跟踪数据可以帮助设计人员来找出哪些兴趣区是潜在的。比如；注意力集中点、资料集中点、最容易被忽略的地方、最分散注意力的地方等等。

这种方法不但可以检视用户能否在网页上顺利寻找数据，而且还可以找出他们如何以及从何处找出他们心目中的信息。这给标准的可用性测试补充了很多有用的信息，尤其在提供设计建议方面。

第3节：界面设计可用性定义和测试指标

3．1：可用性定义

可用性是交互式IT产品/系统的重要质量指标，是产品的一个基本的自然属性，

指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是最终用户使用产品的可用的程度,是产品竞争力的核心。可用性是在产品和用户的相互作用中体现出来。

ISO 9241-11 国际标准对可用性作了如下定义：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性、效率和用户主观满意度。其中：

有效性——用户完成特定任务和达到特定目标时所具有的正确和完整程度；

20

效率——用户完成任务的正确和完整程度与所使用资源（如时间）之间的比率； 满意度——用户在使用产品过程中所感受到的主观满意和接受程度。

其中，ISO 9241 是关于办公室环境下交互式计算机系统的人类工效学国际标

准，它由17个部分组成，根据人类工效学和可用性原理，分别对各种硬件交互设备属 性和软件用户界面设计问题作了详细的规定和建议。可以对一个产品设计符合该标准 的程度进行评估和认证。

3．2：微软可用性指南 MUG (Microsoft Usability Guideline) 由于微软公司开发软件以及在用户界面设计上起步较早，有十几年甚至更长

时间的可用性工程实际运用历史，所以微软公司所制定的可用性指南(Microsoft Usability Guideline, MUG)比较全面而且具有代表性。本文采用的可用性评价指标体系就是微软公司的微软可用性指南(Microsoft Usability Guideline, MUG)。MUG围绕5个主指标形成了对用户界面进行启发式评价的基础，这5个指标是：内容、易使用性、促销、定制服务、情感因素。这些指标基本上覆盖了与用户界面可用性有关的所有特征。而且，这5个指标中的4个还可以进一步进行分解，用下属的子指标来从各个方面细化主指标。

由于本文的研究只针对触摸屏界面可用性，所以主指标中原有的促销和定制服

务这两个指标不列在调查范围内。针对此次研究的是触摸屏幕界面，本文再增加了两个主指标：使用高效性和可视界面设计，以及其包含的子指标。这些指标的细化指标及其含义如下：

（1）内容：指的是界面和所要表达的设备内容是否关联，界面能否使设备的性能完全体现出来。

（2）易使用性：指的是使用界面时对用户的能力上的要求。界面对用户能力的要求越低，则该界面越易使用。如果一个界面必须是经过某些专门培训的人才能使用，那么该界面的易使用性是低的。

在MUG中，该主指标下有3 个子指标：

① 目标：指界面的主题对用户来说是否清晰、易于理解。 ② 框架结构：指界面的信息组织方式是否方便用户使用。

③ 提供资料：界面是否给用户提供了使用该设备的引导信息。

④ 容错性：指界面允许用户操作时失误，并提供提示改正操作，而并不会

造成严重后果。

（3）使用高效性：指界面的设计能使用户最短时间内完成操作任务。界面不但需要让用户很快学会使用，更要让用户以最少的最简单的操作步骤来完成任务，达到目的，从而提高操作效率。

① 视觉隐喻：隐喻界面依赖于用户在界面视觉提示与功能之间建立的直觉

联系。视觉隐喻是用于描绘事物目的和特征的图片。用户识别隐喻的图像，通过外延理解事物的目的。

② 习惯用法：指创建好的视觉习惯用法，使用户第一次使用后，就存在记

忆中。以后的使用形成不用动脑的条件反射。

③ 操作步骤简便：用尽量少的操作步骤来达到目的。

④ 可记忆性：让用户对界面上的操作能以最快的速度变成条件反射式的操

作。

21

（4）可视界面设计：

① 使用对比和分层来区分和组织元素 ② 每个组织层次提供视觉结构和流 ③ 使用紧凑、一致和上下文适宜的图像 ④ 全面而有目的地结合风格和功能

（5）情感因素：指界面能作出情感反应的能力，这是一个比较高的要求境界。实践表明，软件系统能像人一样有情感地做出反应，在计算机使用环境中起着非常重要的作用。MUG指南在“情感因素”下面有4 个子指标：

① 挑战性：指能使用户在使用界面过程中克服一定困难而产生某种成就感。

但不能为追求挑战性而使界面功能复杂，或使人模糊、困惑，难以理解。

② 情节设计：指界面如何激发用户的兴趣。例如，使用象故事一样的情节

安排，一步步引人入胜。

③ 品质力量：指通过界面传递出对客户的吸引力，使用户产生对界面的信

任感。

④ 节奏控制：指界面提供给用户的控制信息流的能力。用户可以根据自己

的实际情况，选择合适的信息量及速度。

22

第四章：触摸屏界面通用设计原则的构想

第1节：用户界面管理程序(User Interface Manager)

1．1：用户界面管理程序的引出与形成

人机交互活动大量地存在于计算机运行的整个过程中。随着计算机的普及，

应用领域和用户范围的扩大，以及计算机硬件成本的下降和软件功能的增强，计算机已经不再采用早期的以人适应机器而换取优化程序效率，节省存储空间的策略，而是在满足系统功能需求的前提下，日益注重追求计算机系统及其应用系统的使用性能，即让计算机系统更适应于用户使用，系统必须为用户提供简单、自然、友好、方便、一致的用户界面（也称“用户接口”）。

开始，人们在设计交互应用系统的用户界面时，是由应用程序设计人员按功能及界面两方面要求混合编写人机交互和应用算法两部分程序，这种开发方法能为应用系统生成具有诸如菜单选择、提示驱动、填表输入等形式的人机交互接口，方便了用户的使用。但是，因为用户界面部分和应用功能部分的程序交错、混杂在一起，不能修改，程序可维护性差；另外，对不同的应用系统，用户界面程序部分在逻辑上和处理方法上具有高度相似性。让软件开发人员花费大量时间与精力去开发一个很类似又不具有通用性的用户界面程序（可占全部应用程序的30～50％甚至以上）显然是不可取的。因此用户界面的开发几乎无一例外地成为系统设计与实现中最为困难费时的“瓶颈”。为了产生高质量的界面，必须从需求分析阶段一开始就着手进行工作。因此人们很自然地希望能够用规范化和规模生产的方法自动生成一致的用户界面。

在20世纪70年代末，由数据对应的性，人们引入数据库管理系统DBMS来生成、管理、操作数据库（DB）；进入20世纪80年代后期，人们又基于用户界面的相对性引入了用户界面管理系统UIM来生成、控制、管理用户界面（UI）。作为支持人机交互软件开发环境的用户界面管理系统（UIM）正日益受到人们的关注和重视，取得重大的进展。迄今为止，国内外已研制、开发了多种类型的实验性和商品化UIM系统，受到了系统开发者、用户界面设计者、最终用户以及软件制造商等各类用户普遍重视，它已成为人机交换和软件工程学中的一个重要研究方向。在新世纪里，UIM将逐渐进入各类实际软件开发环境，成为继DBMS之后的又一个重要的软件开发工具。

1．2：用户界面管理程序的特点及功能

借助于UIM定义生成应用系统用户界面后，我们把原来的完整应用系统分

解为两个子系统，即应用功能子系统BAS和人机交互子系统HCIS，并形成两个界面，应用界面AI和用户界面UI。

两个子系统是：

HCIS（人机交互子系统）：集中负责与用户交互（例如从用户获得指令和数

据，向用户反馈信息等）。控制和协调接口和应用的运行。

23

BAS（应用功能子系统）：实际处理由HCIS获得的用户命令和数据，完成

应用功能。

两个界面是：

AI（应用界面）是HCIS和BAS的界面。确定需要输入什么信息及需要做

什么。

UI（用户界面）是用户和HCIS间的界面，确定怎样得到输入信息。是HCIS

提供给用户实际显示的接口（如“菜单”、“按扭”等）。

UIM系统是负责定义、生成和管理应用系统的用户界面的支撑工具。使用

UIM的用户包括应用开发者和最终用户，应用开发者是应用功能系统和应用系统用户界面的开发者；最终用户是应用系统软件的使用者。UIM可作为一种多方面适用的、可再用的界面模块负责所有界面呈现和对话管理。一个完整的UIM的方案是提供界面构件和管理工具，它们能帮助设计人员快速构造界面，并在原型开发周期中评估设计。

第2节：触摸屏界面通用设计原则简介

2．1：触摸屏界面通用设计原则概述

通过长期的观察以及自身的使用体会发现，对不同的应用系统，用户界面程

序部分在逻辑上和处理方法上具有高度相似性。举一个最简单的例子；Microsoft Word、Excel 和 PowerPoint 三者虽然功能各不相同，一个是以文档制作为主，另两个分别是以表格制作和幻灯片制作为主，但三者的用户界面都有极大的相似性，当然这和三者都是同一公司开发制作的软件并且都同属于软件界面的范畴有一定的关系。但相似的操作界面的确给用户的使用带来了极大的方便。如同前文所说，用户不希望刚学会使用一种界面而又要花时间精力去学着使用另外一种界面。于是，个性化设计与整体设计之间的天平倾向了整体。

用户界面设计的诞生已经有一段时间，各种关于用户界面设计的理论和原则

也很多，前文已经详细叙述了一些关于用户界面设计的最基本最大众化的理论原则和一些用户界面设计所涉及到的心理学原理和人因工程学理论。但这些理论原则只是范范而谈，具体的针对性不强。因为界面设计有很多分类；网页界面、软件界面、手机界面等，触摸屏界面只是其中的一个领域。不同的界面之间存在着很多不同，很难用一些简单而普遍的原则来进行设计指导，于是在进行不同的界面设计之前，进行大量的前期调研工作和专门的分析是必不可少的。

目前，市场上的触摸屏种类可谓繁多，不同的触摸屏代表着不同的应用系统。

由此，它们的界面难免会有所差别，但与其他种类的界面相比，由于同样都是触摸屏，它们之间的相似性更多。受到用户界面管理系统（UIM）的启发，觉得很有必要专门为触摸屏界面开发一套比较具有通用性的设计原则，如果把握了触摸屏界面的相似性，从中找出设计规律，整理整合成一系列针对触摸屏界面的设计参考原则，那么势必能为后续的触摸屏界面设计提供方便，节省大量时间、精力和重复的投资同时也能够开发出在操作上面比较一致的触摸屏用户界面。这就是“触摸屏界面通用设计原则”的基本构想。

24

2．2：触摸屏界面通用设计原则难点

所谓触摸屏界面通用设计原则，从字面上理解分为两部分，第一：它的适用范围是触摸屏界面；第二：它是一种通用设计原则，即适合与大部分触摸屏界面设计。然而正如前文所述说的，仅是用手指作为指点设备的触摸屏就有很多种：信息站、导航系统、业务查询机、银行自动取款机（ATM）、自动售票机等公共服务项目。它们所代表的设备和应用程序不同，故界面也会有所区别。所以说，本文所要研究的触摸屏界面通用设计原则，要具体到什么程度比较恰当，是一个关键性难点。因为如果涉及程度不深，则显得空洞而不具体，和普通的界面设计原则无异，如果涉及内容太过具体，则突显不出“通用”二字，不能为大多数触摸屏界面设计所应用。所以说，触摸屏界面通用设计原则所涉及的程度深浅是一个难点。

2．2：触摸屏界面通用设计原则目标

就像前文所说，虽然触摸屏的种类很多，它们各自使用的应用系统也不尽相同，但用户界面程序部分在逻辑上和处理方法上具有高度相似性，比如用户都是使用手指作为指点设备；设计人员能够控制每一个像素，当制作一个对话框的时候，可以确定它在用户屏幕上的真实尺寸并且知道最终的显示器尺寸有多大……因为有了这些相似之处，如果再让界面开发人员花费大量时间与精力在用户界面设计中去重复性投资，那么显然是不可取的。

所以，本文所要研究的触摸屏界面通用设计原则的目标，就是在如此多种类的触摸屏中，根据已有的界面设计原则原理，再结合相关的心理学理论和人因工程学实验，寻找出触摸屏界面设计中的相似之处，整合成一系列相关的通用设计原则，使以后在触摸屏界面设计中，无须做实则性的修改和重复性的调研即可在不同系统环境间移植和借鉴。

第3节：触摸屏界面通用设计原则

3．1：信息量最少原则

根据前文第三章第2节的中的第2小点Miller公式的介绍得知，人一次性接

受的信息量在7个比特左右比较合适，尤其适用于界面设计中，如果信息量超过了这个范围，界面给读者的感受会显得压抑。但也有特例，比如在门户类网站的首页中，一般是充斥着大量的信息、设置了多方面的栏目和内容，像搜狐，网易等（图016）。

25

图016. 搜狐网站首页

门户类网站的信息量巨大是有它原因的，所谓门户网站，是指通向某类综合性互联息资源并提供有关信息服务的应用系统。后来由于市场竞争日益激烈并且门户网站一般没有固定的客户，于是不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留驻互联网用户，而常规来说，用户都有这样的上网经历：从开始上网时乱逛式的点击，到被内容留住，再到被专业性、个人化的定制服务所吸引，注册成为某网站的忠实客户。所以说，由于为了吸引用户，提高网站的访问量，门户类网站不得不违背Miller公式，通过大量的信息和栏目去赢得客户的注意，留驻客户。 那么其它类型的网站呢，比如企业网，服务网，购物网等的情况是如何的呢？根据调查以及分析得知，由于像企业网，服务网等带有介绍和服务性质的网站，点击进入的用户都不是漫无目标的闲逛而是带有目的性的，既然不是主要为了吸引顾客，而是主要为了给用户提供可靠的服务和操作，那么就要考虑如何为进入的用户提供使用上的方便，因为只有用户在第一次使用这个网站后觉得操作便捷愉快，才能提高使用效率、留下美好的回忆。在这种情况下，前文所提到的Miller公式就派上用场了。试着对比以下两个网页，（图017、018）

26

图017

图018

虽然初看相差不多，但在具体的使用操作上，图017的网页比图018的网页

27

更一目了然，看起来更加轻松，能够在更短的时间内让用户找到所需信息。事实的确如此，通过随机的用户访问，被访者都表示图017那个网页比图018的更加清晰，更容易找到需要的内容。原因就是图017的网页遵守了Miller公式，在信息量的安排上面做到了适中，如果需要表达的信息比较多，则可以进行归类然后分组处理，比如放置在子目录里或者用“More”来代替。如此这般，即不影响信息的正常传达又做到了信息量的最少化。在这方面一个极端的例子是：Google。在后台，Google的服务器收集网络上几乎所有的信息，以复杂的公式进行运算、排序，但对用户而言，我们只需要在它那个简洁的页面中输入一个或几个要搜索的词，就可以得到我们想要的。Google首页的设计师玛丽莎・梅耶(Marissa Mayer)这样阐释它的成功：“在你想要的时候，给你所要的，而不是给你所有你可能要的，甚至在你并不需要它的时候”。当然，Google的例子并不是说设计就应当是“少就是多”(Less is More)、追求所 谓极简主义，而是说设计应当与功能匹配，在不影响操作的前提下做到信息量的最小化，为顾客创造好的用户体验。Google的成功与其强大的搜索性能有关，也与其简洁的首页界面有关，它的成功更由于它强大的功能和简洁界面是匹配的。针对“少就是多”，著名设计师米尔顿・格拉塞(Milton Glaser)曾说：“少不是多，恰恰够才是多”。无论如何，对于用户界面设计，世界知名的设计公司IDEO总经理汤姆・凯利(Tom Kelly)的一句话值得记住：我们其实都在的寻找各自的“简单明了的界面”。

那么在触摸屏界面的设计上面，关于信息量的问题又是如何一番景象呢？这就

要从触摸屏的功能上说起，绝大部分的触摸屏都是一种设备的显示窗口，而触摸屏的界面就是沟通用户和设备的一个桥梁，用户通过触摸屏界面得以操作设备，从而我们可以知道，触摸屏界面的功能和企业网，服务网等的功能差不多，即通过界面来提供某种服务使客户方便快捷的完成目标操作，而不是通过界面来吸引，留驻用户。那么Miller公式同样适合于触摸屏界面，在不遗漏关键信息的前提下，做到信息量的最少化，如果有超出适当范围的信息，则可以分组处理安放在子菜单或下一页中。

3．2：布局无障碍原则

为什么用户界面设计中要考虑布局的问题？因为界面上的内容和信息是通过界面布局而呈现在用户眼前的。布局的结构合理与否首先牵涉到信息传递的通畅性，其次也是一个很关键的美学概念。在用户界面设计中，可用性一直是强调的关键部分，但美学部分也从来没有说过要被忽视。按照认知心理学理论和眼动仪实验测下的大量数据反映，人们的视觉一般比较习惯接受“平衡”的东西，否则会产生不安全感（图019、020）。

28

图019

图020

29

很明显，图020的网页由于右上角缺少了必要的视觉元素，哪怕是占位很少一

点文字和图象，整幅网页就显得重心往左下角倾斜了。

所以说，在各类用户界面设计中的布局上，平衡性一直是不容忽视的，对于触

摸屏的界面设计也不例外。通常来说，布局平衡的基本概念是：注意屏幕上下左右平衡，不要堆挤数据，过分拥挤的显示会产生视觉疲和接收错误，对象显示的顺序应依需要排列。平衡内容分为两部分；

1，正常平衡---亦称\"匀称\"。多指左右、上下对照形式，主要强调秩序，能达

到安定、诚实、信赖的效果（图021）。

2，异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种

布局能达到强调性、高注目性的效果（图022）。

图021. 正常平衡布局

图022. 异常平衡布局

30

图022的网页就是典型的异常平衡。在整幅构图的下半部分，灰色的拦目紧

靠左侧出现，但页面就是没有给观看者倾倒的感觉。因为网页的上半部（约占65%）是深红色，起到压制的效果。下面小半部分中的浅灰色非对称的出现也不会影响整体的平衡，而恰恰能起到视觉突出的效果。

在触摸屏界面设计上，关于布局的平衡问题不但要遵守以上的布局平衡法则，

并且由于触摸屏的特殊性，对于它的平衡原则要有具体的针对性。因为触摸屏界面和一般的网站界面有所不同的是，它更侧重于某项任务的完成、某个功能的操作，这些任务和功能基本上都是平等关系，无需像某些商业网站那样突出显示最新商品为了能让用户最先看到。所以在大部分的触摸屏界面设计中虽然屏幕布局因功能不同考虑的侧重点也有所不同，但一般采用布局平衡原则中的正常平衡，各功能区都重点突出。

下面例举一个触摸式导航仪的界面设计（图023）。

图023. 纽曼S900导航仪主菜单

很显然，这款导航仪的主菜单在布局平衡方面做的有点差强人意。右下角的白色汽车有画蛇添足之嫌，不但破坏了整体界面的平衡性而且还扰乱了视觉注视点，使得视点容易分散。

布局上比较稳妥的触摸屏界面（图024）。

31

图024

当然，图024的界面只是在布局方面做到了平稳，各功能区显示明显。至于其

他方面的设计，比如颜色的使用，按钮的设置等部分则不在此版块讨论。

在研究触摸屏界面的布局设计时，平衡性是需要考虑的。然而因为触摸屏有它的特殊性，所以仅考虑布局平衡性是不够的。比如有一类触摸屏，在屏幕中还有显示窗口（图025）。

图025. 自动售票机触摸屏

像以上这类触摸屏，在实际应用中是很广泛的。由于它们的操作需要以手作为指点设备，来点击界面上的按钮，然后再能查阅界面中显示窗口里的信息。所以对于此类触摸屏的界面布局还需要考虑一个无遮挡性，因为以手为指点设备和鼠标等指点设备最大的区别就是手容易产生对界面的遮挡，一旦布局安排不合理，就会产生视觉上的不通畅（图026）。

图026. 手指的操作对显示区产生了遮挡

32

很明显，以上的界面布局，用户在操作时自身的手臂难免对“显示区”里的

内容产生遮挡，从而影响阅读。不过对于左撇子用户来说，则不存在这个问题。据调查，左撇子在人群中的比例是10%-11%。那么在具体设计中如何平衡或避免这种左右手操作带来的不便呢？在一些除了触摸屏界面之外的其他界面设计中是否有这样的先例呢？先看看网页界面设计，在网页上，指点设备是鼠标，众所周知鼠标的面积和手指相比小很多并且都是一个方向的，所以在网页界面的使用上，左右手操作只是个人的习惯问题，并不会对界面的操作和阅读造成障碍。同理，软件界面由于也是显示在计算机屏幕上并且同样用鼠标指点，所以左右手的操作一样对界面没有影响。再来看看手机的界面设计和键盘布局，曾经有位同行说“如果右撇子用左手使用手机键盘会明显感到不舒服”。初一听会感觉手机键盘的布局确实考虑了左右手的使用习惯，或者说左右手的不同使用的确会对手机键盘的布局设计产生影响。但经过仔细一分析，就会觉得其实问题并非如此。右撇子用左手使用手机会感到不舒服，是由于不习惯用左手而造成的还是手机键盘布局照顾右撇子而造成的？现在看来这种不舒服大部分是由于右撇子不习惯用左右操作所造成的，而并非键盘布局本身产生的结果。原因何在？因为手机键盘上的按键从1到9、从*到#，以及每个按键上的字母，使用频率都是大致相同的，无论是拨号码或者是发短信，人们对于数字和字母的使用不会厚此薄彼，所以在布局上只能是平均分布并不会考虑哪只手多使用而照顾哪一边。因此，无论网页界面、软件界面还是手机界面的设计都不能提供强有力的借鉴。

那么这里需要找的是一种怎么样的设计例子呢？这个案例就是由于设计本身

的问题而导致左撇子用自己习惯的左手操作同样会产生障碍。既然在界面设计中难以找出先例，那么从一些工业产品的设计中入手，来观察一下设计师是如何在人因工程角度考虑左右手的操作习惯，这对于触摸屏的界面设计会有一些帮助。

在设计上需要考虑到人因工程学同时左右手的使用习惯会对设计产生影响的例子，比较典型的是支的设计，尤其是自动步的设计。一般的自动步式样如下（图027）。

图027.“卡拉什尼科夫”自动步，一种典型的步布局，弹闸位于扳机前端

这是一款典型的“卡拉什尼科夫”自动步，1947年款式的。图中红圈所指示的是步的抛弹处。操作此款步的基本动作如下，（图028）。

33

图028. 右手拿射击的标准姿势

如上图所示，由于步采用的是大众化的前置弹闸，所以抛弹处同样位于前

端。如此设计的步，大家可以想象，无论是右手操作射击还是左手操作，抛出的弹壳均不会弹到射手的脸上，因为上图已经明白无误的用红线标出，前置抛弹口离射手 的脸部有相当一段距离（大概15厘米左右）。

20世纪70年始，世界轻武器进入了小型化研究阶段，于是无托步便

诞生了。无托步的好处是尺寸小，士兵携行方便，利于在狭小空间战斗，具有灵活机动的优点（图029）。

图029. FAMAS无托自动步，弹闸位于扳机后端

34

这是一款法国使用的FAMAS自动步，1967年开始研制，1971年交

付使用。无托步的最大改进是将机匣后部装在托内部，于是弹闸自然就位于托下部，抛弹口位于托上处。此的操作动作如下（图030）。

图030. 无托步的右手射击姿势

从上图可以清楚的看见，无托步的抛弹口离射手脸部非常之近，用右手操

作射击的话尚无多大问题，因为弹壳会被抛向射手的脸部外侧，但如果换成左撇子使用此，那么抛弹口抛出的发烫的弹壳会直接打向射手的脸部，从而影响射击。那接下来我们看看法国设计师保罗・泰尔是如何处理这个问题的，他把抛弹口设计成可以左右两边变换，射手能够使用塑料盖关闭另外一个不使用的口（图031）。

图031. 解决方案图

而另一个无托步的使用例子是英国的L85A1自动步（图032）。据说L85A1最初设计时提供有向左抛壳的转换装置，但在英国服役必须严格纠正使用右手，所以之后就省了。

35

图032. L85A1无托自动步，弹闸位于扳机后端

通过以上一些经典的关于左右手操作的产品设计案例，可以为触摸屏的界面

设计提供借鉴。法国的设计师保罗・泰尔是为FAMAS自动步的抛弹口提供左右两边可变换塑料盖以供自由调节。英国的L85A1自动步则是忽略左撇子的存在（因为左撇子所占比例确实很少，约为10%-11%）。于是我们可以为带有显示窗口的触摸屏界面设置一套布局构想（图033、图034）。

图033. 按键靠右布局 图034. 按键靠下端布局

从上述两套布局可以看出，图033的布局是忽略了左撇子的状况，图034的

布局则是左右手皆能操作而不会对显示窗口造成遮挡。

综上所述，关于触摸屏界面的布局设计，既要考虑到布局上的平衡性又要考

虑到在某些情况下布局方面不产生遮挡，这些合在一起就是“布局无障碍原则”。

3．3：界面一致性原则

在用户界面设计中，一致性是一种优点。一致的外观与感觉可以在应用程序中创造一种和谐。如果界面缺乏一致性，则很可能引起混淆，并使应用程序看起来没有条理，甚至可能引起对应用程序可靠性的怀疑。原因就是前文提到的根据现代认知心理学研究得知，人们接受和辨别信息的程度和观察的时间成正比，在初次使用或者有时间的使用条件下，人们对于信息的认识和把握是；信息条理越简明清晰越容易被用户接受和辨别，外形和色彩相近的东西容易被归为一类。先试着阅读以下两幅 网页（图035、036）。

36

图035. 图中红色椭圆框是同一个软件Flash Player的两处不同位置下载点击处。而另几个红色圆角矩形框是一些不同软件的下载点击处。

37

图036. 上图中，三个红色椭圆框是一个播放器软件的3个不同的下载点击处。

且看图035所显示的网页，网页主要传达的是软件Flash Player的下载地址，但一个软件的下载地址却有两个位置不同的点击处（图中红色椭圆框所示），并且这两个上下相距遥远的点击处无论在颜色和图形运用上都大相径庭，让用户，尤其是初

38

次使用的用户无从着手，不知道点击哪处才能正确下载，这样的界面就是设计不一致的典型代表，并且此网页除了Flash Player的两处下载地址，边上还存在着几处其他软件的下载按钮（图中红色圆角矩形框所示），如此一来大有喧宾夺主之嫌，人为的造成了不必要的麻烦。图036所显示的网页同样具有这样不一致性的毛病。

上面所阐释的是关于同一界面上设计的一致性，也就是说这些设计上的一致性都是发生在同一个页面上的，但用户界面设计一致性的概念不只局限于此，从小处看就是同一屏幕上的对象，如视窗框架、按钮、菜单等处理应一致化，使用相同的图形图标，同样的内容或命令使用相同的视觉符号并且避免出现两次以上。放大了看就是同一应用软件的不同页面在风格、外形和色彩的运用上做到一致。延伸到视觉之外就是命令上的一致性，即如果设置为用户可以通过在某个列表框里双击其中一个条目来触发一个事件，那么必须保证在所有的列表框里双击条目都会产生相似的反应。这样一来就能给用户统一的感觉，不觉得混乱。

接下来探讨一下有关界面整体设计上的一致性问题，先看以下一个餐厅服务系统触摸屏的四个子页面（图037、038、039、040）。

图037. 登陆界面

39

图038. 吧台界面

图039. 点菜界面

40

图040. 结帐界面

从上述四个页面来看，它们虽然隶属于同一触摸屏的应用程序之下，但它们间的风格迥然不同。虽然在一些细节设计上追求了一致性效果，比如每一页的按钮形状颜色都是一样的（四幅图中的红色椭圆框所圈之处），但是在整体上还是缺乏一致感，因为在不同的页面里，按钮出现的位置、布局格式、颜色的使用等都大为不同。用户每点击进入下一页，就犹如进入了不同的应用系统，产生走错房门的感觉。再来看一下相关的手机界面（图041）。

41

图041. 手机界面

图041的手机界面向我们展示了此款手机的四个子页面，在整体一致性的效

果上，这组界面已经比前面介绍的餐厅服务系统触摸屏的四个子页面进步不少，但唯一的遗憾就是在第四个子页面的处理上，和前三屏在一致性上略有差距。纠其原因，就是前三屏在底色处理上是给人“绿色”的感觉，而第四屏明显缺乏这个元素。

真正在界面设计上成功做到一致性，就是无论每一页的内容如何的不同，结

构如何的转变，但给用户的感觉就是：它们还是一家人。

42

下面请欣赏一款惠普的触摸屏界面（图042、043、044、045）。

图042. HP TouchSmart的主界面

图043. HP TouchSmart的日历提醒界面

图044. HP TouchSmart的便签留言界面

43

图045. HP TouchSmart的图片处理界面

显而易见，上面的一组界面在整体性上是设计成功的，不管内页的功能如何变换，但给人的整体感觉还是一如既往。

以上例举了一些网页界面、手机界面以及触摸屏幕界面的设计案例，有不够完善的设计也有成功的作品，通过它们可以很好的解释清楚关于界面设计一致性原则从小到大的方方面面。并且对于触摸屏幕界面设计而言，在一致性问题上基本应该遵循以上规则。

3．4：颜色合理使用原则

在用户界面设计上颜色的使用可以增加视觉上的感染力，现在的许多显示器能够显示上百万种的不同颜色，这很容易使人想要全部使用它们。如果在开始设计时没有仔细地考虑，颜色也会像其它基本设计原则一样出现许多问题。

其实关于颜色的合理使用，可以说即是前文“界面一致性原则”的延续，也

有它自身的特点。因为对于界面一致性的具体设计实现，需要通过颜色的合理使用来体现。然而色彩本身的使用也同样对界面的可用性举足轻重。比如，你决定在界面上使用色彩你就必须保证在各种可能情况下窗口文本的可读性。最好的解决办法是遵循色彩对比度规则：即在浅色背景上显示深色文本或者在深色背景上显示浅色文本。阅读白色背景上的蓝色文本非常轻松但红色背景与蓝色文本搭配就不是那么令人舒适了，因为红色与蓝色没有足够的对比度来保证文本的可读性，而白色与蓝色就有足够的对比度（图046）。

44

图046. 上图左边框中文字明显没有右边框中文字阅读起来有清晰感

每个人对颜色的喜爱有很大的不同，用户的品味也会各不相同。颜色能够引

发强烈的情感，如果是设计针对普遍用户的程序，那一般说来，最好保守传统，采用一些柔和的、更中性化的颜色。当然，对特定的用户就要依据用户自己的选择了。少用明亮色彩可以有效地突出或者吸引人们对重要区域的注意。依据许多程序设计人员的经验，应当尽量应用程序所用颜色的种类，而且色调也应该保持一致。因为一旦一个界面上色彩过于繁多，那么就像在短时间内塞给用户大量的信息一样，会使用户难以接受并且产生迷茫。这点在前文的Miller公式和认知心理学版块已经详细解说过了。下面的一个触摸屏界面就是很好的反例（图047）。

图047. 界面上过多不必要的颜色出现会扰乱用户寻找关键的信息

上面这幅触摸屏界面之所以让人感觉眼花缭乱，在于它放上了一张占位量很大

45

的风景照作为背景，并且照片几乎没有经过处理就直接应用，彩照本身过多的颜色以及占位把关键的信息和按钮压缩到了角落，这一切使得界面主题，功能不明确。如果确实需要在界面上放置图片或照片，则需要结合页面的大体风格选择合适的照片，再对照片进行适当的亮度，对比度等处理（图048）。

图048. 居于中心位置的彩色照片丝毫没有给页面的整体带来杂乱感

上面这张页面之所以用了彩照而没有造成整体上的不协调，其一在于照片本身的选材上有讲究；其二，对照片的色彩进行了处理，如果将拍摄下的照片直接放上，效果肯定大打折扣。在处理上考虑到了整体环境的深色调，于是在照片中，除了红色的花保持鲜艳，其余之处一律降低色彩感，使之接近黑白无彩色。这方面的具体操作有艺术修养的成分，在此不一一详说，只是把关键的指导思想提出，即在任何条件下，色彩的使用都要考虑周围的环境，有一个主调。再看一例（图049）。

46

图049

如上图所示，把照片去色后做为一种背景出现也不失为一种有效的手法。 一般来说，由于触摸屏只是单独的代表一种设备和应用程序，它不需要用各种

复杂的手段来抛出各种不同的信息吸引用户，它的目的就是让用户更好更快捷的完成目标操作。这点和网站设计中的企业网，服务网有点类似。所以对于触摸屏界面的设计，同一画面的色彩运用应该尽量简洁（个人建议不宜超过4套颜色，不包括无彩色：黑、白、金、银、灰），如有必要可用不同层次（如色彩渐变）及形状来配合颜色，增加变化。画面中活动对象颜色应鲜明，而非活动对象应暗淡，这一点对于色盲用户来说尤为重要。

3．5：字句易懂原则

界面上出现的不仅有图形、色彩，还有文字。当然有些文字，比如某些网站上的新闻、企业的介绍等，是属于新闻记者或文案人员的工作范畴。而有些文字，比如应用系统的步骤操作说明、动作的提示、弹出对话框的命令等(图050、051)，就是在交互设计人员的考虑范围之内了。因为作为一名交互设计员，不同与一般传统意义上的美工，对于界面设计的理解不再只是局限于图形、色彩、布局等视觉元素上的把握，而同时更要考虑界面的可用性。为了让用户顺利使用程序而在界面上出现的所有语言提示和命令，都是可用性的一种表现形式。所以在用户界面设计上，设计人员还需要研究把握语言文字的恰当使用,这个过程当然少不了和程序开发人员进行完整、彻底的沟通。

47

图050. 弹出式对话框

图051. 步骤提示

在一般的网站界面上，语言提示可能出现不多，其原因正是前文第二章第三节中所分析的，在网站里，用户可以自己主宰自己的路径和行为，可以决定自己在什么时间去什么地方，自由点击自己感兴趣的地方。而在软件界面、触摸屏界面上，设 计人员就是主导，因为那时用户只能根据你所安排的步骤来完成目标操作。这时候，

48

提示性的语言、命令就不可避免的出现了，显示在用户界面上的文字是你的用户了解当前系统状态的最主要也是最重要的信息来源。拙劣的措辞在用户看来只会导致拙劣的用户界面。

在这里，针对触摸屏界面，提出了以下一些关于文字词句使用的易懂原则： 其一，避免使用专业术语。因为界面是面向广大未受过专业训练的用户，有些甚至是第一次操作使用，对于应用程序可谓是一窍不通，这时如果放上专业性术语，无异于添加障碍，所以尽量避免使用专业术语，如果万不得已也要转换成通俗易懂的文字。

其二，尽量用肯定句而不要用否定句。从语气语境上看，肯定句稍显稳重且语气是确定的，暗示用户一切都处于控制之中而否定句则让人产生被排斥之感。例如下列两则语言提示：“您没有输入正确的信息”和“您输入了错误的信息”。后者显然更容易为人们在短时间内理解接受。众所周知，双重否定表肯定，那么既然同样要表示一个肯定的信息，又何必用双重否定绕个大圈子来最后肯定呢？在用户界面设计上的语言文字力求简洁易懂而不是文学写作需要赋、比、兴。

其三，保持一致的措辞。这点和前面提到的“界面一致性原则”似曾相识，只是此处所要求的一致性是指文字语言上的一致。例如：上句“必须输入用户名”和下句“应该输入密码”的措辞分开来看没有问题，但它们没有保持一致。因此，如果以上句为标准的话，下句应改为“必须输入密码”来保持措辞的一致性。

其四，尽量避免缩写的短语。这一点应该很容易明白，因为界面设计的语言提示目的是为了让用户明确如何操作，虽然语句需要简洁，但也并非是暗语，所以更力求明了。

其五，选择恰当的语言描述。例如一个表示关闭功能按钮，可以描述为“退出”、“返回”、“关闭”等几种，则应该根据具体的程序情况选择一种准确的表达。

3．6：按钮二原则

在用户界面设计中，无论是网页界面、软件界面、手机界面还是触摸屏界面，都少不了“按钮”这个元素。用户正是通过对按钮的点击来浏览不同的页面和完成目标操作。在网页界面、软件界面上按钮状态、形式多样，它们的指点设备都是鼠标箭头，（图052、053、0）。

图052. 红色圈中分别是Word软件按钮的三的状态

49

图053. 红色圈中分别是网页按钮的两个状态

图0. 红色圈中分别是网页按钮的两个状态

以上三个按钮例子的，是目前在网页界面、软件界面上使用最为普遍的形式。如图052的软件按钮是模仿现实世界中一般实物按钮的突起、下陷效果，而图053和图0的网页按钮则是鼠标移上及按下时，按钮变为深色或按钮文字下面出现下划线，以此来提示用户点击动作的发生。由于网页界面、软件界面上点击按钮的指点设备都是鼠标箭头。众所周知，鼠标箭头的大小远小于一个成人的指头，所以在网页界面、软件界面上的按钮一般来说并不会很大。

在手机方面，目前除了诸如iPhone之类的触摸屏式手机，一般的手机屏幕界面上没有按钮，按钮是以实物形式出现在手机界面之下。而拿iPhone之类的触摸屏式手机来看，其界面形式及各种按键如下（图055、056）。

50

图055. iPhone手机界面 图056. iPhone手机界面

由于移动电话是手掌式便携设备，从而决定了其体积以及界面的大小不会超

过一个成人的手掌面积。从上图中可以看出，此触摸屏式手机，屏幕尺寸比一般的非触摸 屏式手机屏幕来得大，因为界面之中需要放入按钮，并且在有限的空间里力图使按钮最大话，为了能让手指点击时更好的被识别感应。

在看过了以上一些各类界面中的按钮之后，再来探讨一下触摸屏界面上的按

钮。触摸屏界面上的按钮和网页界面、软件界面最大的不同就是指点设备并非鼠标箭头而是人们的手指。其次，如前文第二章第第三节所述，触摸屏的使用环境大多在室外，比如银行自动取款机（ATM）、自动售票机、导航仪等，而网页、计算机软件等的使用大多在室内进行。根据前文第三章第二节中的认知心理学部分得知，人对于信息的接收是通过感觉、知觉、记忆、思维等多渠道进行的，因而受到多方面因素的影响，有时间的长短、接收者的状态以及周围环境等。故界面使用环境的不同会对人们认知界面、接收界面信息等产生不一样的作用。所以综合以上两点，可以对触摸屏界面上的按钮设计提出两点原则：一，按钮大小原则；二，按钮感性反馈原则。

一，按钮大小原则：根据前面提到的触摸屏需要用手指点击以及从iPhone触

摸屏式手机界面设计中可以看出，iPhone手机的界面按钮大小基本和五个手指中小指的指甲盖差不多大。如果按钮比这个面积再小，一般用手指触摸点击就能难以产生识别和感应了。而触摸屏式手机由于它的特殊性，屏幕面积大小不会超过手掌，一般其它类型的触摸屏屏幕面积再小也无出其右者，所以归纳后得出：触摸屏界面上的按钮大小至少不要小于一个小指的指甲盖面积。

二，按钮感性反馈原则：所谓感性反馈，就是让用户在感觉上得到一种反馈、

操作完成的反馈。上面已经提到，触摸屏幕的使用多数在室外，而室外环境和室内比则明显嘈杂，各种干扰性因素比较多，人在有干扰的情况下对于界面信息的把握不再很清晰精确，故而针对这个情况提出了按钮感性反馈，感性反馈分为视觉反馈和听觉反馈。

1)视觉反馈；由于室外的干扰因素，会致使人们注意力相对分散，所以要使

51

得用户更简明快捷的得知按钮的操作动作已经完成。于是在图形按钮设计上，可以模拟做出人们熟悉的机械实物按钮的上下两个状态（图057、058）。

图057. 圆角矩形按钮两状态 图058. 圆形按钮两状态

2)听觉反馈；室外使用环境会遇到各种天气状况，有白天、黑夜、阴天和晴

天，光照情况可谓复杂多变。如果在阳光直接照射下，全部屏幕界面或者屏幕的一部分会看不清，或者当用户在做其它重要事情时，比如开车，这时候不可能一直盯着屏幕看。于是可以考虑在用户点击按钮之时，配上一个适当的音频，模拟实物按钮被按压时候所发出的声响。将按钮的操作与音频结合起来，以此来确定动作是否有效。

52

第五章：通过“车间通风系统触摸屏界面设计”论证以上原则

第1节：总体设计规划

1．1：界面设计一般流程

界面设计流程是一个非常科学的推导过程，它有设计师对艺术的理解感悟，

但绝对不是仅仅表现为设计师个人的绘画能力，更多的是理性的分析。通常，界面设计过程如下（图059）：

图059. 界面设计流程图

可用性设计的流程如下（图060）：

图060. 可用性设计流程图

需求阶段：首先，产品需要从使用者，使用环境，使用方式三个方面进行需求分析。也就是应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)，什么地方用（在办公室/家庭/厂房车间/公共场所），如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外，在需求阶段还需了解同类竞争产品。单纯地从界面美学考虑是没有一个很客观的评价标准的，所以只能说哪个更合适，更合适于产品的最终用户的就是最好的。对于如何判定最合适于用

53

户，在界面设计前，会进行相应的用户调研。

分析设计阶段：通过第一步的需求分析后，会进入设计阶段。也就是方案形成阶段。有了第一步的调研数据，可以定出大致的设计指标。在时间允许的前提下，设计出几套不同风格的界面用于被选。例如设计一款为25岁左右的白领男性制作家居娱乐软件。首先可以制作一个体现用户定位的词语坐标。对于这类用户我们分析得到的词汇有：品质、精美、高档、高雅、男性、时尚、cool、工业化、亲和、放松等。其中，一些词是绝对必须体现的，例如：品质、精美、高档、时尚。但有些词是相互矛盾的，必须放弃一些，例如：亲和、放松与cool、工业化等。所以可以画出一个坐标，上面是必须用的品质，左边是贴近用户心理的词汇, 右边是体现用户外在形象的词汇，同时搜集相呼应的图片，放在坐标的不同点上，（图061）。

图061. 用户定位的词语坐标图

这样根据不同坐标点的风格，再参考设计出几套不同风格的界面。接下来的步骤就是所谓的“原型设计”。原型设计可以概括的说是整个设计产品面市之前的一个框架设计。根据之前需求阶段所获得的信息和之后的分析，将各类元素、图标等进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。界面原型设计常用的流程如下：

第一步：草图阶段。就是用笔和纸进行产品原型描绘。这一般来说是进行原型构思设计阶段使用的最佳方式，是原型设计的第一步，构思和框架基本确定之后，就需要将这个“纸上谈兵”的框架转移到更形象直观的电子图像上，便于后续的研讨、设计、开发和备案。

第二步：电子图像阶段。常用工具是Photoshop或Illustrator, 在Photoshop或Illustrator文档里建立一块画布，用文本框、图片、控件等组合起来形成一个原型设计方案。

当然，对于不同类型的界面设计、不同的公司、不同的团队，可以有不同的分析设计方法，不一定非得使用某种固定的方式，最适合自己的才是最好的。以上只是提供多种设计方法中的一种。

调研验证阶段：几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观的反馈。调研验证阶段需要从以下几个问题出发：1）用户对各套方案的第一印象。2）用户对各套方案的综合印象。3）用户对各套方案的单独评价。4）选出最喜欢的和其次喜欢的。5）对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都在条件允许的情况下可以用图形表达出来，这样显的直观而科学。

方案改进阶段：经过一系列用户调研，设计师得到了目标用户最喜欢的方案。而且了解到用户为什么喜欢，还留有什么遗憾等，这样就可以进行下一步修改了。这时候可以把精力投入到一个方案上，将方案做到细致精美。

用户验证反馈阶段：修改以后的方案，便可以将他推向市场。但是设计并没有结束。设计师还需要用户反馈，好的设计师应该在产品上市以后去站柜台，直接观察用户的使用情况，零距离接触最终用户，观察和聆听用户真正使用时的感想。为以后界面的改版和相关界面的设计积累新的信息和经验资料。

可以说，界面设计是一个逐步逼近最优设计的重复性过程，以上五个步骤中，分析设计阶段----调研验证阶段（可用性评估）----方案改进阶段这三步是三个互相循环的环节。

1．2：此次触摸屏界面设计流程规划

此次论文所提出的“触摸屏界面通用设计原则”构想需要通过“纺织车间通风系统触摸屏界面设计”这个具体的设计项目来进行论证。首先，在这个设计项目的实施上要有一个流程的规划。上文已经介绍了界面设计的一般流程，那么对于具体的设计项目要有具体的流程规划。针对这个触摸屏界面设计项目，设计过程还是分五步进行：1）前期调研分析。2）原型设计。3）可用性测试。4）方案改进。5）用户验证反馈。显而易见，这五步和上文介绍的界面设计一般流程大同小异。

1. 3: 如何通过项目设计来论证以上原则

前面已经给“车间通风系统触摸屏界面设计”这个设计任务制定了一套设计

步骤，但此设计任务不仅仅是为了设计而设计，更是为了论证此篇论文所提出的设计构想——触摸屏界面通用设计原则。所以如果只是按先期制定的五步设计流程来进行，是无证这篇论文所提出的设计构想的，因为以上所制定的一个流程仅仅是针对这个具体设计项目的。那么我们需要增加哪些步骤才能达到论证的目的呢？办法可以有很多，殊途可以同归。在这里就采取“对比”的方法，即在第一步前期调研分析之后插入一个“对比”的过程。因为前期调研会得出很多数据，根据这些数据可以归纳分析总结出很多条针对这个项目的设计指标，于是我们把这些通过前期调研分析所得出的设计指标和“触摸屏界面通用设计原则”进行比较，看哪些部分是重复的，这些重复的部分就是“触摸屏界面通用设计原则”正确之处，没有重复的部分以及在设计原型出台之后用户的使用反馈就是此通用设计原则有待补充和改进的地方。因为论文所提出的通用设计原则构想就是为了避免在以后触摸屏界面设计中无谓的时间、人力和物力的重复投资。

55

第2节：项目设计之前期调研

2．1：主要用户群体调研

在调研实践中，一般对调研的安排可以分为先定性调研再定量调研。所谓定

性调研，就是指获得大量背景资料，识别问题，从而形成研究假设。而定量调研，就是指在定性调研的基础上发掘市场切入点和细分市场，为进一步掌握市场状况和消费者的需求设计具有针对性的市场调研问卷，直接面对目标消费群体进行调研。但是实践告诉我们，无论是定性调研还是定量调研都存在这一些难以避免的缺陷。具体一点来说，定性调研存在以下几点缺陷：

1、 定性调研并不一定能反映出调研者所感兴趣的人群。

2、定性调研在很大程度上依赖于调研者的主观认识和个人解释，因此就难免有主观臆断的成分在里面。

3、定性调研的结果往往不具有可比性。很多消费者对企业产品评价为“好”， 可是到底有多好，调研中没有体现出来，而且这些消费者对竞争对手的评价也为“好”，彼此之间如何比较评价呢？ 4、定性调研不能被重复、被验证。在深度访谈中，没有人愿意第二次坐到“被盘问席”上接受长时间的相同询问；而在焦点小组座谈会中，很多人的想法都是当时受激发而产生的，要想营造出一模一样的氛围来，简直就是奇迹。 而定量调研至少存在以下三个致命的缺点：

1、 概率抽样中缺乏监督，因而样本的代表性和典型性大打折扣。 2、 费者普遍有戒备心理，使得信息真实性和准确性下降。 3、 样本量大的商业性定量调研，拦截访问和电话访问难于监控，使得信息作

假严重。

以上提到的是在一般用户调研中所使用到的常规方法，有优点也有缺点。在这次“车间通风系统触摸屏界面设计”的前期用户调研中，会用到定性和定量调研法，但要做适当的调整，把存在问题的部分和徒劳重复的地方祛除，在开始用户调研之前先设定一个大体的调研方向，分两大块：1）主要用户群体范围。2）主要用户群体特点。然后再针对性的设计调查问卷进行广泛性调查，在得到问卷结果之后，挑选出比较有代表性的用户进行深入调查，比如跟踪访谈、观察测试等。

1）主要用户群体范围。这个项目所涉及的触摸屏是运用在纺织车间中的，而使用者大多是纺织车间的工人。于是对于主要用户群体的范围可以大致的确定下来，即以女性为主，年龄大约在18—35岁间。

2）主要用户群体特点。在这里，对于用户的特点细分为A.生理特点；B.心理特点。

A.生理特点。由于使用者以女性居多，年龄大约在18—35岁间，所以要详细观察和记录下这一年龄段女性的生理特点，包括视觉、听觉、反应灵敏度等尤其是用于操作触摸屏的部分，比如手指的大小。

B.心理特点。对于放置在纺织车间中触摸屏设备的主要用户——纺织女工，她们的心理特点对于触摸屏界面设计的可用性有直接的影响。于是她们的记忆水平、思维逻辑、接受能力、受知识水平、接触电脑设备的经历等都是调查的重点。

根据以上设定的一系列指标，制定出详细的调查问卷（表3），问题不易过多，

力求少而精，并且以选择题形式出现，因为过于繁琐的提问会使被调研者产生厌烦的

56

情绪。

表3. 用户调研表

2．2：使用环境调研

此次项目所涉及的触摸屏设备有关车间通风系统的，所以是放置在纺织工厂的车间中，于是使用环境即车间的环境会对设备的操作使用产生直接的影响。因为车

57

间的照明情况、噪音程度等都对触摸屏界面的可视性与可用性设计有关，于是就完全有必要针对以上几点对车间的使用环境进行调研。车间现场的拍照资料如下，（图062、063）。

图062. 车间使用环境

图063. 车间使用环境

根据以上照片可以清楚的知道，车间的照明环境还是相当不错的。接下来是

对于噪音的调查，一般资料上显示纺织厂噪声为85—106分贝，一般人说话的声音为40分贝至60分贝，嗓门稍大的人说话声音可达60分贝至80分贝。根据有关人员的现场调查掌握的情况看，此次项目所涉及的工厂车间噪音为90分贝左右。 另外，由于车间场地的，和客户讨论下来最后确定此次触摸屏设计项目的界面大小尺寸为800象素×600象素。

58

2．3：客户对于设计的要求

在开始一个设计项目的具体操作之前，了解一下客户的想法和要求是十分必

要的。做好了这方面的沟通可以有效的避免设计中不必要的弯路。这个触摸屏的主要功能是让用户通过它来了解纺织车间通风系统的具体运作情况。工厂的具体安排设置是这样的，在一个大车间里又另辟空间分隔成了3间各自的小车间，整个大车间是280平方米，长70米，宽40米，（图0）。

图0. 车间平面图

整个大车间有一整套完善的通风设备，客户的要求是大车间里整套通风系统

的流程走向和通风系统中各种设备的性能状态都要能在触摸屏界面上反映出来。然后每间小车间里又有各自的温度、湿度状态，客户要求将每间小车间里的温湿度状态分别以图表的形式显示在触摸屏界面上。最后，整个大车间的通风系统是由电力驱动的，通风系统的效率和能源的消耗是有一定比例关系的，于是就牵涉到一个节能的问题，客户要求将这个关于节能的比例关系同样用图表的形式显示在触摸屏界面上。

另外，提一下关于触摸屏界面设计以外的客户需求。客户希望用户无论在车

间的哪个房间，均能方便快速的了解到触摸屏界面上显示的内容，因为通风系统的具体运作情况瞬息万变，而车间面积较大，在其中来回跑动所需时间相对较长，由此产生的耽误将会造成一定的经济损失。

第3节：数据分析以及和“触摸屏界面通用设计原则”对比

3．1：数据收集和分析总结

调查问卷对象为当地纺织车间工人（即将来会操作触摸屏的人员），样本采集时间为2008年5月14日至2008年6月10日。共回收有效问卷50份，男性为4人，女性46人；年龄分布为：18--24岁(34%)，24--30岁(34%)，31--35岁(32%)； 其中全部受访者均为右撇子；初中文化程度者占23%，高中或中专、技校者占74%，

59

大专及以上占3%；对于电脑的使用频率，由于工作的关系没有人每天接触电脑，2-3天接触1次的占23%，一周一次的占66%，其余则更少。数据分布图如下，（表4、表5）。

表4. 受访者年龄分布图

表5. 受访者教育程度分布图

调查统计完成并且对原始数据做相关的整理之后，参照之前第三章第3节中介绍的微软可用性指南 MUG (Microsoft Usability Guideline)，把此次触摸屏界面的设计标准分为3个部分，即易用性、高效性和情感因素。

根据受访者的受教育程度以及易用性的三点基本内容：A, 易见 (Easy to discover) 功能是否容易被发现；B，易学 (Easy to learn) 学起来容易；C, 易用 (Easy to use) 熟练使用的时候可以更快的操作。于是可以在界面设计中尽可能简化

60

信息量的出现，只出现相关而有用的信息。并且由于主要用户的文化程度和专业的，对于界面中出现的提示语句、命令等均应该通俗化并且要肯定化，不能模棱两可。 对于高效性的考虑，这次全部受访者都是右撇子，所以在界面布局上除了不能把按钮放左边外，右边及下方均能安放。并且从受访者的电脑接触频率来看，目标用户对于界面的理解力有限，所以要考虑到界面设计的一致性问题，避免相同操作出现两次以上给用户造成困惑。

另外，由于车间环境，噪音会达到90分贝左右，在这样比较吵的环境中，人的注意力不可能像在安静的室内那样集中，从而在界面设计上要对用户的操作提供更为明确的答复和反应。这直接体现在按钮的设计上，要给按钮的操作配上一个适当的音频，但是由于90分贝的噪音很可能会干扰人们的听觉，在这样的情况的，要在视觉上加以补充，所以除了配上音频外还需要在视觉上营造逼真的动态效果，让用户看见按钮被按下和弹起的效果。

最后要考虑到情感因素，这是一个综合性的区域，因为人的感情是飘忽不定的且受多方面因素的影响，在界面设计上最能影响用户情感的因素除了操作的简便和高效，颜色的使用也极为关键。颜色的使用不仅和用户的情感有关还牵涉到界面一直性的问题。结合上面车间工作环境的照片以及噪音程度，不难想象这个车间给人的感觉是压抑、枯燥和烦躁的，于是在界面颜色的选择上需要以清淡、稳重为主。

经过前期调研分析后再进行小结，得出以下五点设计要求：1）界面中简化信息量；2）提示语句和命令等要通俗易懂；3）布局上，按钮不放左边并且界面前后要一致，相同内容不出现两次以上；4）按钮要配上音频和动态效果以体现真实性；5）颜色运用以清淡、稳重为主。

最后，再额外的对触摸屏界面通用设计原则以外，但又和触摸屏本身有关的方面进行一下补充。根据上一节“客户对于设计的要求”中最后提到的一点，即希望用户无论在车间的哪个房间，均能方便快速的了解到触摸屏界面上显示的内容。于是在这个项目中，将考虑在整个大车间的每个房间中均放上一个触摸屏以供用户及时方便的查看，具体安放位置如下（图065）。

图065. 图中红色圆点为触摸屏放置位置

61

安排好了触摸屏在车间里的位置问题，还有一个针对本项目需要额外考虑的问题就是触摸屏的高度问题，即触摸屏屏幕离地多少比较合适，这就和目标用户的身高有直接关系。在本设计项目中，由于是运用在纺织车间，车间用户以女工为绝大多数。对于她们的身高，无须再去重复调研，因为工厂资料库里已经存在。当初招工时候，为了使工人配合机器设备的操作高度，所招女工身高均在160cm到165cm之间。根据人因工程学原理，人的手臂从肘关节平伸出去接触屏幕对于操作和目视最为适宜，所以按照此身高范围触摸屏屏幕的高度在110cm左右最为合适，并且最好屏幕呈45度角倾斜，如此可以最大限度的减少屏幕反光，（图066）。

图066. 触摸屏高度

3．2：通过对比寻找出前期调研的重复之处

此部分可谓是论证的关键之所在。因为如果失去了把前文的调研分析总结和“触摸屏通用设计原则”进行对比，那么“车间通风系统触摸屏界面设计”这个设计项目将因此孤立存在而变得毫无意义。只有通过两者的对比以及之后的可用性评估、方案改进，才能发现哪些部分是重复的交集哪些地方存在遗漏，这样才能对之前提出的“触摸屏通用设计原则”构想进行补充完善，使之真正“通用”。 接下来我们就把两者拉出来详细对比一番。

在第四章第3节中，提出的“触摸屏通用设计原则”构想有六条，依次为：1）

信息量最少原则；2）布局无障碍原则；3）界面一致性原则；4）颜色合理使用原则；5）字句易懂原则；6）按钮二原则。

第五章第2节中对此设计项目的前期调研所进行的总结，有5条：1）界面中简化信息量；2）提示语句和命令等要通俗易懂；3）布局上，按钮不放左边并且界面

62

前后要一致，相同内容不出现两次以上；4）按钮要配上音频和动态效果以体现真实性；5）颜色运用以清淡、稳重为主。 整理后两者在表格中的显示如下，（表6）。

表6. “触摸屏通用设计原则构想”和“设计项目前期调研分析总结”对比表

通过以上表格中的对比可以发现前期调研后的分析总结与“触摸屏通用设计原则”构想的六点内容基本吻合。于是初步可以说明，如果在一个触摸屏界面设计中运用本研究论文所提出的“触摸屏通用设计原则”构想，可以避免时间、人力和物力的重复投资（比如前期调研），从而提高设计效率。但至此，“触摸屏通用设计原则”构想还不是最完善的，有待于之后的设计原型出台，通过可用性测试和方案改进阶段后，对此通用设计原则进行适当的补充，最后才能成为一个比较科学的设计原则。

第4节：原型设计

4．1：方案一样稿及其说明

根据项目前期调研分析以及触摸屏界面通用设计原则，给出三套界面风格独

立的设计方案，供目标用户选择、验证。 以下是设计方案一，（图067、068、069）。

63

图067. 触摸屏首页

图068. 触摸屏内页（二级界面）

图069. 触摸屏内页（三级界面）

设计方案一的界面按钮，（图070）。

图070. 按钮两种状态

方案一采用的是右下方按钮布局模式。界面整体颜色为深色，辅以亮黄色，除去标志本身颜色，界面所用色彩不超过两套。对话视图窗口在整幅界面的中部，大约占四分之三。

由于前期用户调研得知，此次目标用户没有左撇子，所以在按钮布局上只要不是将按钮放置在左边即可。再根据使用环境的现场调研看，车间的照明系统良好，为日光灯照明，于是为了避免界面产生反光，在界面整体颜色的使用上采用黑色为主。在某些局部位置，比如按钮、消息框、语言提示栏等处，使用小面积亮黄色，以此作为提示作用。因为小块面黄色在大面积的黑色背景下会显得十分抢眼突出。对话视图窗口放置在整幅界面中部位置，占四分之三。对话视图窗口上下采用大理石纹理的台面样式，以此加强突出视图区的窗口效果。由于大理石纹样以黑、灰、白以及他们的

65

渐变为主，故在颜色上是趋于整体一致的。这样在大体界面上所运用的颜色不超过两套，绝对不会给用户造成色彩视觉污染。在按钮的设计上，使用圆角矩形，一级界面按钮大小为3.5cmX1.5cm，二级界面按钮大小为1.8cmX1cm，完全大于一个成人的指头面积，不会造成手指点击时的识别困难。由于考虑到车间的噪音环境，所以在按钮的设计上使用凹突两种状态。手指放开时按钮为突起状态，手指按下时按钮为凹陷状态，以此加强视觉上的动态效果。按钮两状态在上文图070经单独罗列显示出来，由于图070钮是放置在白色背景之上，所以立体效果欠佳，而一旦是安放在深黑色的大理石纹样界面上，凹突效果则十分明显，效果可以查看上文图067和图068中的“系统总览按钮。按钮上的文字使用白色“微软雅黑”字体，白字在黑底上是很容易显现的。方案一的内页中，在对话视图窗口的左面，开辟出“消息对话框”，用以显示右边内容（以图像为主）的状态报告等。将“消息对话框”放置在左边，是考虑到人们的阅读习惯一般是从左往右。最后，在整幅界面的左上角，放上霍尼韦尔公司的标志“Honeywell”。标志字体使用Honeywell标准字体，字体颜色在公司红色标准色的基础上做一些小的改动，因为单一的红色放在这个界面背景之上，很难显现出来。 以上就是设计方案一的样稿和设计说明。

4．2：方案二样稿及其说明 接下来给出设计方案二，（图071、072、073）。

图071. 触摸屏首页

66

图072. 触摸屏内页（二级界面）

图073. 触摸屏内页（三级界面）

设计方案二的界面按钮，（图074）。

67

图074. 按钮两种状态

方案二所采用的布局和之前一个设计方案有一些不同。四个功能按键呈上下排

列，一致靠右放置。对话视图窗口位于界面左则，即除了右边按钮部分其余大部分面积均是对话视图窗口。视图窗口使用红黑两色为主，界面其余部分则是银灰色格调，所以整体界面色彩也是控制在两套以内。

此套方案中，按钮靠右出现是针对之前的用户调研中没有左撇子的情况而设计制定的。对话视图窗口靠左出现，能比居中出现更大限度的利用界面面积。在对话视图窗口中使用红与黑两色，用红色是为了使产品更有霍尼韦尔公司的血脉特征，用黑色在上下衬底是因为红色与黑色搭配有高雅、稳重之感。界面中除了对话视图窗口，其余部分使用灰色系，并且在框架的拐角等处配以适当的倒角或凹槽，以此来营造出工业类产品的金属质地特征，让人们在使用触摸屏的时候感觉像是在操作一个真实的工业产品。在按钮的设计上，使用圆角矩形按钮，一级界面按钮大小为3.5cmX1.5cm，二级界面按钮大小为2cmX1cm。和之前的方案一样，此处按钮也设计成具有凹突效果的两种状态以此来增加逼真度，效果如上文图074。按钮上的文字使用黑色“黑体”字体并且加粗处理。在方案二的内页中，对话视图窗口中的下方黑色部分用来显示消息内容、状态报告等文字信息。最后，在界面外框架的上端居中处，放上霍尼韦尔公司的标志“Honeywell”。 标志字体使用Honeywell标准字体，字体颜色使用标准色红色再处理成自下而上的渐变，再在整个标志后面打上投影以增加立体感。

以上就是设计方案二的样稿和设计说明。

4．3：方案三样稿及其说明 接下来给出设计方案三，（图075、076、077）。

68

图075. 触摸屏首页

图076. 触摸屏内页.1

69

图077. 触摸屏内页.2

设计方案三的界面按钮，（图078、079）。

图078. 第一种按钮两状态

图079. 第二种按钮两状态

方案三仍主要采用了按钮靠右的显示模式，即四个功能按键呈上下排列，一致靠右放置。在首屏中，采用快捷设置法，三大功能按钮同时在界面上一字排开，使用户能够直接点击进入所要查看的部分。在第二级的界面中，根据不同功能出现的按

70

钮在界面下方按需要出现。视图窗口使用以蓝色基调为主，不同部分界面或者不同功能区域呈现深浅不一的蓝色渐变，以示区别。

这套界面在视觉上力求简洁明快，同一界面的不同区域用不同颜色隔开，按钮和背景色也采用明度反差巨大的两种颜色以此拉开对比使之显而易见。但颜色无论如何发生变化，整体上把色彩控制在蓝色基调之中。在布局方面，力求简单并且通过按钮所处的不同状态来提示用户目前所在界面的位置。在按钮的设计上，此套界面出现了三种按纽，界面右边的功能按钮大小为2cmX3.5cm，界面显示区域的按钮大小为1.2cmX2.3cm，查看设备功能的圆形按钮大小直径为1.0cm。此处几款按钮也设计成具有凹突效果的两种状态以此来增加逼真度，效果如上文图078、079。并且此处按钮有别于上两套方案的地方就是在功能按钮上安放了图标（即针对按钮所代表的不同功能，在相应的按钮上放置对应的图标，然后按钮文字出现在按钮下放紧贴按钮之处。

以上就是设计方案三的样稿和设计说明。

第5节：可用性评估及问题的发现

5．1：可用性评估及其方法

可用性评估是系统化收集交互界面的可用性数据并对其进行评定和改进的过

程。

Hartson （1998）指出对产品界面和设计原型进行可用性评估都具有重要意

义。产品界面可用性评估的目的包括：①改进现有产品界面，提高其可用性；②在设计新界面之前，对已有界面进行可用性评估，借鉴优点，改进缺点，更有效的达到可用性目标。

界面设计是一个逐步逼近最优设计的重复性过程，主要包括设计—可用性评

估—改进设计三个互相重叠的环节。界面设计过程中，可用性评估的对象是原型，即能够体现交互界面设计的某些特点，并能够实现部分或全部功能的设计实体。

Newman等人(1995)认为，对设计原型进行可用性评估是改进界面设计的有效途径。 由于界面可用性对产品成功影响深远，也逐渐将提高可用性作为核心目的，可用性评估在其中的地位也日渐重要。

主要的可用性评估方法包括可用性测试、启发式评估、认知过程浏览走查法

和行为分析法。

（1）可用性测试

可用性测试是测试者邀请用户使用设计原型或产品完成操作任务，并通过观

察、记录和分析用户行为和相关数据，对界面可用性进行评估的一种方法。可用性测试能够对界面的可用性进行全面的评估，是最为常用的方法之一。它适用于产品界面和界面设计中后期界面原型的评估。可用性测试通常在一个备有摄像和监视装置的专门实验室内进行。

测试的工具和设备包括：①测试量表：自编量表，标准量表；②常用的测试

设备：眼动仪、动作分析仪，实时监控设备；③专门的测试软件：网上和单机。

71

评估过程和评估结果：可用性测试主要包括5个步骤：①确定测试计划；②

准备评估对象和测试设备；③招募用户；④正式测试；⑤分析结果并撰写报告。测试 计划需要确定测试目的和目标。测试前，测试者要准备好评估对象和测试设备并招募用户。测试过程中，主测试者负责引导用户完成测试，用户利用产品或原型完成测试任务，观察者负责观察和记录用户的行为反应数据。测试完成后，测试者们对结果进行分析并撰写报告。

测试过程中，多种方法可以用来收集用户的行为反应数据，其中包括：①直

接观察法；②思维法；③访谈法；④问卷法；⑤录像记录法。

一般说来，可用性测试的结果包含定量数据如任务完成时间等和定性数据如

操作过程等。测试者需要综合两类结果并提出界面改进的建议。

可用性测试对提高界面可用性帮助较大，更有研究理论提出，只需测试5个

用户，提高 85%的可用性，（表7）。

表7. 测试用户数与可用性提高度的比例图

根据研究中搜集数据的类型和方式，我们把可用性测试的方法大致分为主观、客观测试两大类，（表8）。

表8. 主观、客观测试的比较

72

（2）启发式评估

Nielsen 和 Molich（1990，1994） 提出了启发式评估，它是一种邀请可用

性评估专家或软件工程师了解或使用交互界面，并根据人机界面的设计原则，对交互 界面进行评估的方法。启发式评估简便易行，但缺乏精度，适用于交互界面设计的中前期。

启发式评价是一种专家评审法，由几个评价者根据通用的可用性原则和经验

来发现系统潜在的可用性问题。启发式评价以可用性启发式为基础，让少量评价者对用户界面进行系统的检查，找出存在的可用性问题，从而构建一个对系统的评价并试图找出解决的方案。由于启发式评估不需要用户参与，也不需要特殊设备，所以成本相对较低。而且使用快捷，被称为“简化的可用性工程方法”。

参与人员和评估对象：启发式评估的参与人员包括一名观察者和3-5名评估者。观察者负责记录评估者对界面的评价。Muller（1998）等人认为，除了可用性专家和软件工程师，评估者还应包括熟练用户。

启发式评估的对象可以是产品界面或原型，甚至纸上原型。

（3）认知过程浏览走查法

认知过程浏览走查法是由 Clayton 等人（1992）提出的，它是指当设计者具

备了原型或设计的详细说明后，邀请其他设计者和用户共同浏览并分析典型任务的完成步骤，从而发现可用性问题并提出改进意见的一种方法。认知过程浏览走查法适用于界面设计的早期阶段。

它是通过分析用户的心理加工过程来评价用户界面的一种方法，最适用于界面设计的初期。分析者首先选择典型的界面任务，并为每一任务确定一个或多个正确的操作序列，然后走查用户在完成任务的过程中在什么方面出现问题并提供解释。

因此用这个方法对界面进行及时修改，可大大降低设计与修改时间和费用。

认知过程浏览走查法的主要所得结果是设计中存在的问题。研究者需要针对这些问题提出改进建议以完善设计方案。

（4）行为分析法

行为分析是由 Card 等人（1983）首先提出的。它是一种将用户的操作过程

分解成连续的基本动作以发现交互问题的方法。

根据精度不同，行为分析法可以分为正式的行为分析法和非正式的行为分析

法。

参与人员和评估对象：对用户的操作过程进行行为分析的人员一般为设计者

本人。评估对象为产品或原型。

评估过程和评估结果： 行为分析法包括2个主要步骤，①将用户的操作过程

分解成基本动作；②从基本动作水平对用户的操作过程进行分析，发现可用性问题。

正式的行为分析法通常需要设计者对用户的操作过程进行细致的分解并用树

状图体现分析结果，然后计算和累积各个动作的完成时间，通过比较任务完成的时间和操作过程来确定界面可用性的优劣。非正式的行为分析法只需要对操作过程进行大致的分析，评估的着眼点主要在于动作间联结的合理性。

行为分析的结果通常是交互过程中存在的问题，设计者通过消除这些问题对

设计或产品界面进行改进。

在之后的实验和评估中，本文主要运用可用性测试法同时辅助使用另外三种

测试方法，并分别从参与人员、评估对象(评估材料)、评估过程、评估结果及方法适

73

用这五个方面对触摸屏界面进行评估。

5．2：测试过程

测试前准备：设备、被测者、引导测试员和观察员。 设备：眼动仪，摄像机，电脑。

十位被测者：2位男性，8位女性，年龄为20-40岁之间。

一位引导测试员：引导可用性测试。根据测试步骤，告诉被测者具体任务，如设置使用场景和布置操作目标，鼓励被测者去尝试。同时，也可以对测试过程做一定的纪录。

两位观察员：通过摄像机及眼动仪电脑录屏的文件，观察测试过程中测试用户碰到的问题及反应。 测试过程：整个测试过程包括对参加测试者关于这个触摸屏界面的简单介绍，对他们以前上网习惯和使用触摸屏设备经历等背景问题的询问，看他们对界面的反应，完成某些指定任务的测试（一般3-4个场景设置和任务），以及附带询问一些对于界面设计中细节问题的看法。一个测试基本控制在半小时以内。

然后再邀请一些可用性评估专家了解或使用此界面，提出一些具体的专业性看法。

三个原型设计方案分别用以上方法测试评估一边，然后再要求用户谈一下对各套方案的综合印象并且选出最喜欢的和其次喜欢的同时对各方案的色彩，文字，图形等分别打分。结论出来以后请所有用户说出最受欢迎方案的优缺点。根据少数服从多数的原则选出一种最为大众接受的原型设计，并且按照测试中发现的问题进行设计改进。

5．3：交互设计方面的问题总结

经过实际测试，在三个原型设计中，用户多数倾向于使用方案三（比例占到十分之七）。用户自己的体会是方案三的设计在界面整体感觉方面最为简洁明了，这当然是和设计时的框架布局以及颜色的使用有关，并且用户表示在使用方案三时，按钮的操作更加得心应手，也许这和按钮设计的大小以及按钮与周围背景的色彩对比度有关。然后通过眼动仪电脑记录屏显示，在方案三的界面使用中，用户的视觉热点比较集中，视觉流程线路比较简单（通俗的讲就是在看界面时能少走弯路），记录也显示用户在方案三的界面中找到和发现消息的时间比较短。

但所有这些也并不是说原型设计方案三就是十全十美了，通过具体测试、之

前的调查问卷和之后的用户访谈来看，设计方案三还是存在一些问题的，有些问题的 出现是由于用户在界面使用方面的经历有限所造成的，但这不是最主要的。有些问题的提出确实是界面设计中需要改进的地方。下面做出了一些问题的归类和总结。 问题一：在用户操作出遇到障碍时，无法返回或重新开始。

问题二：当屏幕区域出现反光同时周围噪音比较大时，用户无法确定按钮的操作动作是否已经完成。

根据这些在可用性评估中发现的问题，在下一节中将做出适当的改进。

74

第6节：方案改进阶段

6．1：新的设计指标

经过一系列可用性评估，得到了目标用户最喜欢的方案。而且了解到用户为

什么喜欢，还留有什么遗憾等。这时候可以把精力投入到一个方案上，将方案做到细致精美。

根据上文所总结的问题，在这里要逐一进行设计考虑，找出适当的解决办法。 对于问题一中提到的当用户操作界面出错时，无法返回或重新开始。可以考虑在原有界面中有需要的地方再安放两个按钮，当用户操作遇到瓶颈时可以点击退出或返回。新增的两个按钮，一个按钮应该与原来界面中的按钮同样安置在右边，功能是用户点击后可以返回至首页；另一个按钮应当放置在设备状态显示界面的下放，用户点击后可以返回至系统流程图继续查看。

对于问题二所提出的当屏幕区域出现反光同时周围噪音比较大时，用户无法确定按钮的操作动作是否已经完成。设计改进的焦点还是在按钮上或是与按钮有关的方面。问题二中遇到的场景是：1，屏幕在某些光照下出现反光；2，周围噪音比较大，并且是这两个条件是同时出现时，用户无法确定按钮的操作动作是否已经完成。把问题拆散开后分析比较直观且容易，针对1，屏幕在某些光照下出现反光，那么可以知道在上文第四章第三节中最后一条“按钮二原则”里所提出的按钮视觉反馈设计将不起作用，因为一旦屏幕出现反光，按钮在设计时所做的两个状态将不易被看清。针对2，周围噪音比较大，在上文第四章第三节中最后一条“按钮二原则”里所提出的按钮听觉反馈设计也将不起作用。人的知觉包括视觉、听觉、嗅觉和触觉，在以上问题二的场景中，视觉和听觉在操作界面时遇到了干扰从而影响了操作判断，那么剩下的就只有嗅觉和触觉了。对于嗅觉，在用户界面的使用上实在是没有用武之地。而触觉则是可以考虑的对象，因为所谓“触摸屏”，就是通过“触摸”来实现功能的设备。于是可以考虑在按钮的设计上再增加一项——触觉反馈。就是当用户点击按钮时，提供一个脉冲以此来产生一定的震动幅度。设想是不错，但是在目前的条件下确实难以实现这个目标，因为要做到按钮的触觉反馈不是界面设计人员一方面的努力就可以达到的。

综上所述，在接下来的改进中先着重解决问题一，至于由问题二而引发提出的按钮触觉反馈，是一个不错的讨论研究点，但在这个项目的设计实施上存在困难，所以暂时搁浅一下。

6．2：改进后的界面设计

针对上文中问题一而提出的解决方法是，在原有方案的二级界面中做了改动，

添加了一个“返回主页”按钮，保证了用户操作时候遇到障碍时，可以返回至首页。新方案（图080）。另一个按钮应当放置在设备状态显示界面的下放，用户点击后可以返回至系统流程图继续查看（图081）。

75

图080. 改进后的方案

图081. 改进后的方案.2

76

新增加的按钮和先前按钮呈上下并列放置在界面右边。按钮下方使用文字最初有几个选择，分别是“退出”、“返回”和“关闭”。在听取了多方意见之后，最终选择使用“返回主页”。

6．3：方案三完整版

在此部分中，需要把之前三款设计方案中所采用的第三款方案具体化，即在方案三的不同界面里放入相应的信息和内容，如流程图、图表和数据等。在方案三不同界面中出现的流程图和图表等内容，其本质也是交互设计中的一部分，但由于这些内容是根据不同的后台程序与设备要求而针对性开发设计的，虽然它们有界面设计的特点，要遵守界面设计的基本原则，但也有别于此文所谈及研讨的“触摸屏界面通用设计原则研究”。所以对于此项目中流程图以及图表的设计，是放在整体界面框架基本定型之后，再做补充。方案三完整版依次为（图082、083、084、085、086、087）。

图082. 方案三首屏

77

图083. 方案三之系统总览界面

图084. 方案三之设备状态显示界面

78

图085. 方案三之选择车间界面

图086. 方案三之车间图表数据界面（车间一）

79

图087. 方案三之节能分析界面

第7节：用户验证反馈

7．1：剧情测试过程

修改以后的方案，还应该再次提交用户做测试，但是此次测试应该和前一次

有所区别，因为如果测试方法和先前一样，将不可能对新的改进方案做出客观的评价。 测试所需的设备和人员结构可以不变，但测试时制定的场景和所要求完成的任务要和前一次不同。

设备：眼动仪，摄像机，电脑。 十位被测者（人选和前一次不同）：2位男性，8位女性，年龄为20-40岁之间。

两位观察员：通过摄像机及眼动仪电脑录屏的文件，观察测试过程中测试用户碰到的问题及反应。

测试过程：先对被测试者简单介绍一下这个触摸屏界面，然后设置剧情，要求完成几个任务，包括进入浏览系统总流程，寻找查看指定车间的系统图表参数。任务和前一次测试有所不同并且故意设置障碍，以此来检验用户能否快速找出出错原因，并且同时查看“返回主页”按钮的设置是否合理有效，最后总体把握一下用户对界面的反应。以及附带询问一些对于界面设计中细节问题的看法。任务分别交给10位被测者单独完成，安排好任务和角色后，剧情测试开始展开，一个测试基本控制在半小时以内，最后统一评判。

在这里，由于篇幅有限，所以就罗列一个测试剧情详细介绍一下。

80

用户角色：女性，31岁，代号A, 车间组长，负责监控车间通风系统的整体流畅性，万一系统中有设备出错，要及时能从触摸屏界面上发现原因，然后向维修工程师报告。并且要每天定时（上午10点和下午3点各一次）对各小车间的温湿度状态做记录。

任务设置：1，在用户浏览车间通风系统流程图时，提出要求需要用户详细查看一下送风机这个设备的各项指标状况，既要求用户能够通过界面上的提示快速找到该设备并且能够点击进入查看其具体详细信息，从而记录之后能够及时上报。2，在用户将要点击“图表数据”进入查看小车间温湿度状态时，系统突然“卡”住，即无法进入所需要的下一界面，这时观察用户能否通过目前所显示的界面进行操作从而绕开此步或退出。

测试过程：A通过触摸屏首页的“系统总览”按钮，顺利进入到二级界面（即流程图界面）。然后在第1时间（10秒内）看懂了流程图下方的语言提示，于是点击送风机这个设备下放的圆形按钮进入查看送风机的各项运行指标，随后A把界面中所显示的数据记录下来，以供汇报给技术工程师。根据实验观察人员计算，整个操作过程A从进入界面到根据提示自己查找到所要查看的内容并且记录下来，前后花费1分30妙。接着，A点击了界面下方的“返回系统”按钮，回到二级界面（即功能键界面）。根据右边一排由上至下第二个按钮下的文字——“图表数据”，A略做思考后（大约15妙），就明白了此按钮代表的含义，于是点击进入，这时界面没有反应（此处是实验故意设置的障碍，人为设置为暂时性死机），A等待了大约2分钟后，见还没有反应。于是根据目前界面右排按钮的提示，点击了最下方的“返回主页”按纽，返回到触摸屏首页（一级界面）。

7．2：用户使用体会

通过第二次测试，即剧情测试。结果显示用户基本能顺利完成指定任务，界面操作上没有遇到太大的障碍。并且十位中有六位表示“返回主页”按钮和“返回系统”按钮的设置对他们的操作帮助极大，因为在具体操作中难免遇到问题被卡住，这个时候只要通过点击这两个按钮即可返回界面首页以便重新开始或者可以少走一些弯路。

第二次测试中，有2位提出了和上文问题二中相似的情况，就是在界面产生反光并且同时周围噪音比较大时，难以确定对于按钮的操作是否完成。如此看来，在前文第四章第三节最后一点中，对于按钮设计时在感性反馈方面仅运用视觉反馈和听觉反馈还是有些捉襟见肘的，必定再要加入一种知觉上的反馈才能更好的让用户体验到按钮的操作是否完成。这样，看来在按钮设计上需要加入的一种知觉上的反馈只能是前文第六章第一节中提到的“触觉反馈”，就是当用户点击按钮时，提供一个脉冲以此来产生一定的震动幅度。对于这个设计目标的实现，此处目前还不能达到，有待与之后再做探索研究。

81

第六章：研究结论和展望

第1节：研究结论

1．1：研究结论概述

此次论文中，首先根据前辈的经验和理论以及自我的设计总结，在第四章第

三节中提出了关于触摸屏界面的六点通用设计原则构想。然后在第五章中，通过一个实际的触摸屏界面设计项目——“车间通风系统触摸屏界面设计”来论证之前提出的六点通用设计原则构想。通过论证，发现之前所提出的六点设计原则构想基本正确，从而不再是构想而可以变成真正的通用设计原则。但此六点设计原则还存在需要完善和有待补充之处。当然，在论证过程中发现的问题，通过总结并再次测试觉得可行之后，可以作为一条界面设计原则添加到“触摸屏界面通用设计原则”之中。对于在论证过程中发现的有些问题，目前只能提出解决构想，但在实际设计中还无法真正运用或达到，所以暂时不能作为界面设计原则进行添加。

1．2：触摸屏界面通用设计原则

在这个板块里，需要对之前提出的所有关于触摸屏界面的设计构想进行整理和总结，然后罗列出来。精简后的“触摸屏界面通用设计原则”总结如下：

1，信息量最少原则：在不遗漏关键信息的前提下，做到信息量的最少化，尽量减少用户记忆负担。根据Miller公式，在同一界面中出现可供用户选择的信息点不应该超过7个，如果有超出适当范围的信息，则可以分组处理安放在子菜单或下一页中。

2，布局无障碍原则：注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。一般采用布局平衡原则中的正常平衡，各功能区都重点突出。并且在按钮的设置上应该考虑到人们的左右手操作习惯，不能让点击按钮的手对屏幕其它区域产生遮挡。按钮可以统一放置在界面的下放，这样可以同时适合于左撇子和右撇子用户。当某一设计的前期调研中可以确信用户里不存在左撇子，那么按钮可以放置在界面的右边。但是按钮绝对不可以放置在界面左边，因为任何情况下都有右撇子用户，右撇子在人群中的比例远大于左撇子。

3，界面一致性原则：屏幕上所有对象，如窗口、按钮、菜单等处理应一致化。相同的内容或命令使用相同的视觉符号并且避免出现两次以上。给用户统一感觉，不觉得混乱。

4，颜色合理使用原则：同一画面不宜超过4套颜色（不包括无彩色：黑、白、金、银、灰），如有必要可用不同层次（如色彩渐变）及形状来配合颜色，增加变化。画面中活动对象颜色应鲜明，而非活动对象应暗淡。

5，字句易懂原则：其一，避免使用专业术语。如果万不得已也要转换成通俗

易懂的文字。其二，尽量用肯定句而不要用否定句。从语气语境上看，肯定句稍显稳重且语气是确定的，暗示用户一切都处于控制之中而否定句则让人产生被排斥之感。其三，保持一致的措辞。这点和前面提到的“界面一致性原则”似曾相识。其四，尽

82

量避免缩写的短语，虽然语句需要简洁，但也并非是暗语，所以更力求明了。其五，选择恰当的语言描述。例如一个表示关闭功能按钮，可以描述为“退出”、“返回”、“关闭”等几种，则应该根据具体的程序情况选择一种准确的表达。

6，按钮二原则：1，按钮大小原则，触摸屏界面上的按钮大小至少不要小于

一个小指的指甲盖面积。2，按钮感性反馈原则，感性反馈分为视觉反馈和听觉反馈：A视觉反馈——在图形按钮设计上，可以模拟做出人们熟悉的机械实物按钮的上下两个状态。B听觉反馈——在用户点击按钮之时，配上一个适当的音频，模拟实物按钮被按压时候所发出的声响。将按钮的操作与音频结合起来，以此来确定动作是否有效。

7，恢复原则：在用户操作出错时，每一页面有一固定按钮可提供返回并重新

开始。

以上七点就是“触摸屏界面通用设计原则”的总结概括。在接下来的一节中，

将要具体讨论前文提到的但目前还不能充分实现的设计目标——按钮设计感性反馈中的触觉反馈。

第2节：研究中有待日后改进之处

2．1：何为按钮触觉反馈

触摸屏正在逐渐替代键盘，这种转变带来诸多方便。但是由于用户缺乏使用

机械按钮所具有的触觉反馈体验，比如当屏幕区域出现反光同时周围噪音比较大时，用户无法通过视觉和听觉来确定按钮的操作动作是否已经完成，因此触摸屏也引发了一些人机界面（HMI）方面的问题。在以往的一些应用中，缺乏按钮触觉反馈引起的问题足以阻止按钮向数字控制转换发展的进程。目前人们对使用触觉感应设备的需求非常强烈，设计人员也需要很好地了解触觉反馈技术给用户界面带来的价值。最简单的解决方案是在触摸屏按钮上增加触觉反馈功能，就是当用户点击按钮时，提供一个脉冲以此来产生一定的振动幅度，从而可以使触摸屏按钮提供和键盘的相似特性。这就是对于触摸屏按钮触觉反馈最简单合理的解释。

2．2：如何做到触摸屏按扭触觉反馈

这是一个综合性的领域，可以说它是由界面设计人员提出构想，但并不能仅凭设计人员一方就能简单完成的，它的实现更需要工程技术人员的参与和努力。 通过大量的资料检索以及和相关技术人员的交流后，在此粗浅的对如何实现触摸屏按钮触觉反馈做一下简单的介绍。

触摸屏按钮触觉反馈工作原理简单概述就是，当用户按下某个图形按钮时，触觉反馈系统根据预存的触觉“效果(振动)”驱动执行机构。执行机构的移动可形成图形按钮振动的感觉，从而让用户体验到按下/松开机械按钮那样的感觉。触觉反馈系统架构包括：(1)执行机构。可以是振动电机或更大型的用户定制设计器件；(2)控制软件。可以安装在控制板上，也可以嵌入在产品的主微处理器中；(3)触觉效果库。触觉效果库包含大量丰富的效果；(4)用于从主程序调用触觉效果的程序接口。软件集成指南介绍了用流线型API从主程序调用触觉效果的方法。

以上的介绍相对来说还比较表面化，只是提供了一个大致的方向，在具体的效果实现中必然还会遇到不同程度的困难，这就需要工程技术人员更多的探索以

83

及工程技术人员和界面设计人员两者更好的沟通交流。但可以肯定的是，在触摸屏界面的设计中，为按钮提供触觉反馈功能是一个不可动摇的设计趋势，因为大量的调查发现，使用者很需要用户界面中的触觉反馈功能，因为它有助于提高使用性能，并使用户获得更多可控的感觉。

84

车间通风系统触摸屏界面设计项目前期用户调查表

85

参考文献

[1] （美）尼尔森Nielsen,J著，刘正捷等译。《可用性工程》，机械工业出版社，2004-9-1

[2] （美）J.R.布朗，S.坎宁安，卡小燕等译。《用户界面程序设计原理与实例》，科学

出版社，2003

[3] （美）Robert Reimann. So you want to be an Interaction designer.

http://www.cooper.com/newsletters/2001_06/so_you_want_to_be_an_interaction_designer. htm /2002-11-18.

[4] （美）Somadeepti N. Chengalur，Suzanne H. Rodgers，Thomas E. Bernard, 杨

磊主译。《柯达实用工效学设计》，化学工业出版社，2007 [5] （美）Donalda A.Norman. ，Basic Books Press，

2002

[6] （美）威肯斯等，张侃等译。《人因工程学导轮（第二版）》，华东师范大学出版社，

2007

[7] 方志刚,吴晓波,马卫娟。《人机交互技术研究新进展》，计算机工程与设计出版

社,2002

[8] 李岩芳。《基于认知规律的CAI课件人机界面设计》，长春光学精密机械学院学报，

2001

[9] 柴乔林,陈承文,朱红。《如何使计算机更友好-谈人机界面设计》，计算机工程与设

计出版社,2001

[10] 伯恩。《行为心理学》，湖南人民出版社,1987

[11] （美）Bernard, M. Developing schemas for the location of common web objects.

Usability News 3.2. [Online]. Available

http://psychology.wichita.edu/surl/usabilitynews/3W/web_object.htm. (2001)

[12] （美）Bernard, M. Examining user expectations for the location of common

e-commerce web objects. Usability News 4.1. [Online]. Available

http://psychology.wichita.edu/surl/usabilitynews/4S/web_object.htm. (2002)

86

[13] Jennifer Preece，Yvonne rogers，Helen Sharp.《交互设计-超越人机交互》，电

子工业出版社，2003

[14] UPA中国：http://www.upachina.org/index_en.asp

[15] 周荣刚，张侃，界面可用性评价之认知过程走查法—《人类工效学》，2003

[16] 罗仕鉴，朱上上，孙守迁，《人机界面设计》，机械工业出版社，2002

[17] 中国欧盟可用性研究中心网站：http://usability.dlmu.edu.cn/chinese/kyxrd.htm

[18] 董建明，傅利民，沙尔文迪，《人机交互：以用户为中心的设计和评估》，清华大

学出版社，2003

[19] 李征。《论色彩的心理效应》，石家庄职业技术学院学报，2004

[20] Wichens C D， Hollands J，《工程心理学与人的作业》，华东师范大学出版社，

2003

[21] 朱祖祥。《工程心理学教程》，人民教育出版社，2003

[22] 兰哲。《软件人机界面设计的认知基础》，山西科技出版社,1998

[23] 夏洪山，林志坚编著。《Microsoft Windows软件开发技术基础》，海洋出版社,1992

[24] Bruce Fraser，《色彩管理》，电子工业出版社，2005

[25] Donalda A.Norman，《情感化设计》，电子工业出版社，2005

[26] Usability Views.com网站：http://www.usabilityviews.com/

[27] Usability News网站：http://psychology.wichita.edu/surl

[28] Usability.gov 网站：http://usability.gov/guidelines/index.html

[29] Jakob Nielsen的网站：http://useit.com(www.useit.com)

[30] 臭鱼的交互设计：http://www.chouyu.com.cn/

87

致 谢

当我给这篇论文做完最后的收尾工作时，已经是2008年12月8日凌晨2点

了，然而我依然毫无睡意，在我的案头，堆积了众多资料和草稿，看到它们就让我想起了这半年多来的点点滴滴。值此论文完成之际，首先向我的导师陈贤浩教授致以深深的感谢和崇高的敬意。在我撰写论文的过程中，陈贤浩老师倾注了大量的心血和汗水，无论是在论文的选题、构思和资料的收集方面，还是在论文的研究方法以及成文定稿方面，我都得到了陈贤浩老师悉心细致的教诲和无私的帮助，本人在论文中每一点进步的取得，无不凝聚着恩师的心血。两年多来的研究生学习过程中，导师严谨治学的学术作风，深渊的知识和为人师表的风范使我终生受益，在此表示真诚的谢意。

在论文的写作过程中，也得到了许多同学的宝贵建议，同时在实习工作过程中

还得到许多同事的支持和帮助，在此一并致以诚挚的谢意。感谢所有关心、支持、帮助过我的良师益友。

最后，向在百忙中抽出时间对本文进行评审并提出宝贵意见的各位专家教授表

示衷心地感谢！

硕士研究生 刘思文 记于 2008年02月

上海交通大学 媒体与设计学院 设计系

88

攻读硕士学位期间发表的论文

《设计排版里中英文字体的使用研究》，作者 刘思文 发表于2008年2月期《艺术与设计》（国际统一刊号ISSN 1008-2832；国内统一刊号 CN11-3909/J）