触摸屏界面设计原则

上海交通大学

硕士学位论文

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

姓名：刘思文

申请学位级别：硕士

专业：设计艺术学

指导教师：陈贤浩

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: 图形用户界面设计

图形用户界面 (Graphical User Interface，简写GUI)是指采用图形方式显示的机器设备操作环境用户接口。准确来说，图形用户界面就是屏幕产品的视觉体验和互动操作部分。比如，与早期计算机使用的命令行界面相比，图形用户界面对于用户来说更为简便易用。它为用户提供了最简单的方式去真实地形象化的看每一件东西。

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

2．3：色彩的心理效应

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

（1）色彩表情

“表情”一词原指人的面部变化表现出内心的思想和情感状态,即喜、怒、哀、乐等,色彩表情是指色彩给人带来的情感或精神上的某种愿望。无论是有彩色还是无彩色，都具有各自的表情特征。

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

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

15