触摸屏友好界面设计对策分析

2013年度 申报助理工程师任职资格评审答辩论文

题 目 触摸屏友好界面设计的对策分析和实用原则 作者姓名 工作单位 工作部门

目 录

摘要 ............................................................................................................................... 1 第一章 绪论 ................................................................................................................. 2 1.1 课题的研究背景及意义 ............................................................................................ 2 1.2 研究的目的、意义及方法 ....................................................................................... 3 第二章 触摸屏及界面设计的基本概念 ..................................................................... 4 2.1 触摸屏的基本概念..................................................................................................... 4 2.2 界面及图形用户界面设计 ....................................................................................... 4 第三章 界面设计常用的原则及理论 ......................................................................... 6 3.1 界面设计基本原则..................................................................................................... 6 3.2 界面设计基于其他学科的理论 ............................................................................... 6 第四章 触摸屏界面设计提出友好界面策略 ............................................................. 8 4.1 信息量最少原则 ......................................................................................................... 8 4.2 布局无障碍原则 ......................................................................................................... 9 4.3 界面一致性原则 ....................................................................................................... 10 4.4 颜色合理性原则 ....................................................................................................... 11 4.5 按钮实用性原则 ....................................................................................................... 12 第五章 结论和展望 ................................................................................................... 15 参考文献 ..................................................................................................................... 16

触摸屏友好界面设计的对策分析和实用原则

摘 要

随着科学技术的发展，嵌入式产品的显示器件也越来越丰富，有LED数码管显示显示屏、点阵液晶显示显示屏、彩屏液晶显示屏等。这些屏幕现在已经越来越不能满足市场需求，在市场的推动下，一种新的显示屏——触摸屏应运而生。触摸屏拥有屏幕大、功能强、分辨率高、色彩丰富等特点。在触摸屏上开发人机交互界面也更容易把以人为本的设计理念融入产品之中，更容易在外观上提高产品的吸引力和竞争力。

关键词：触摸屏 界面设计 友好 实用性 自动化控制

1

第一章 绪论

1.1 课题的研究背景及意义

20世纪70年代后期，科学技术的发展使社会进入信息化时代，于是简单的体力劳动转向了复杂的脑力劳动，人们面对更多的不再是机械类的直接物理性操作，而是电子类产品，计算机、移动电话、导航仪等等，即使是工厂的生产车间，家禽养殖农场，很多时候都使用电子计算机控制系统来减轻人们的体力劳动。在这样的转变下，和人们直接发生关系的媒介就是设备的显示屏。无论输入还是输出都是通过显示屏使得人们才能和机器设备进行人机交互，完成操作。而显示屏充斥着我们生活的方方面面，由LED数码管，到点阵字符显示屏，到彩屏液晶显示屏，再到触摸显示屏等等。如此多的显示屏幕都给人们提供了各种不同的显示手段，而随着显示屏幕的发展，人们对人机互动的要求也越来越高。这就要求我们对人机互动过程有个明确的定义和设计。

人和机器互动过程（Human Machine Interaction）中有一个层面，即是我们说的界面（interface）。界面是屏幕产品的重要组成部分，用户界面设计（User Interface Design）随之而产生，这可以说是一个新领域的诞生。

用户界面设计充斥这我们生活方方面面，LED大屏幕，手机，银行自动取款机，火车站售票机等，这些生活中很多触摸屏的设计给我们生活带来了很大的方便和快捷，可见触摸屏界面的可用性，方便性在各个人机交互界面设计中具有很大的潜在空间。

用户界面设计已经经历了两个界限分明的时代，第一代是以文本为内容的交互，如字符、命令等，难用且不灵活，典型代表就是计算机的MS-DOS磁盘操作系统（图001）。第二代则是更直观的图形操作界面，引出了很自然的视觉通信交互，最典型代表就是Windows操作系统（图002）。用户界面设计经历了上面两代的摸索和发展，以后则更趋向于交互式多媒体集成的方法，就是人机交互需要大量的语言，文字，图形和其他交互媒体，如动作，手势，三维图像等。

2

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

1.2 研究目的、意义及方法

用户界面设计的总体设计思想是“人性化”三个字。人性化的界面能反应出用户的真实需求，按用户的期望去做出相应的反应。使用户感受到对系统的可控性，体验到一种满足感。然而，由于用户界面本身包括很多类型，比如，手机界面，网页界面，触摸屏界面等，所以说单纯的“人性化”的设计理念显得也就太泛泛而谈。

触摸屏界面是用户界面的一个分支，有一般用户界面的共性，也有它自己的特性。此次论文的主要内容就是结合已学习的有关的界面设计的原则，再针对触摸屏界面领域的特殊性，新型性，并结合自己“触摸屏环境控制器的界面设计”整合一些关于触摸屏界面通用的设计原则和策略。

首先，用户对产品第一次使用的感受对一个产品产生的评价很重要，一个良好的用户界面设计，就能让用户使用起来更加方便，体验到满足感。其次，触摸屏的使用正在不断扩大，种类趋于繁多，不同厂家触摸屏分类设计在所难免，所以再次找出一些有规律的通用的且是实用的原则。

3

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

2.1 触摸屏的基本概念

如果说鼠标的发明，把电脑操作带入一个新的时代，那么触摸屏的出现，则 使图形化人机交互界面变得更加直观。触摸屏发展至今，一共有五种独特的已经 商业化的触摸屏技术，即电阻式触摸屏、电容式触摸屏、表面声波、红外、矢量 压力传感式触摸屏。目前使用最为普遍的是电阻式触摸屏，使用最具发展潜力是 电容式触摸屏。

2.2 界面及图形用户界面设计

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

一个必须接受的基本现实：用户界面是面向用户的。界面设计的优秀与否直接影响到用户的使用欲望。用户需要的界面是能满足其需求并且易于使用的。那么用户界面是当最终用户使用系统时所接触到得全部内容。可见，界面及界面的设计是一个复杂的有着不同学科参与的系统工程，平面设计，用户行为学，色彩心理学，语言学，认知心理学等都扮演着重要的角色。

图形用户界面（Graphical User Interface，简称GUI）是指采用图形方式显示机器设备操作环境的用户接口。准确来说，图形用户界面是屏幕产品的视觉体验和互动操作部分。它为用户提供最简单的方式去形象化看每一个东西。 视窗：视窗就是显示设备的一个区域，用于观看并与对象，对象相关信息以及应用与对象动作进行交互（图003）。

菜单：菜单用于显示一组选项供用户选择，一般情况下，基于图形用户的菜单选项是供用户选择的，用于对对象执行动作的命令。此时，相关命令集都包含在菜单中。一般来说，菜单通过窗口来显示（图004）。

指针：一般与指点设备相关的是屏幕上的某个位置，用户可以在那里通过指点 设备进行输入。

4

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

图004.图形用户界面中的菜单样式

手形：随着图形用户界面延伸的领域越来越广，手机界面、触摸屏界面等都涉及 到图形用户界面，在这些领域里，图形用户界面的组成也都会产生一些变化。至 少在手机界面和触摸屏界面里，指点设备这个概念发生了巨大变化，取而代之的 是人们的手指，而不在是指针。

5

第三章 界面设计常用的原则及理论

3.1 界面设计基本原则

用户导向原则

说界面设计首先要明确使用者是谁，需要站在用户的观点和立场上来考虑设计界面。做到这一点，必须和用户有着很多的沟通，了解他们的需求、目标、期望和偏好。设计者要清楚，用户差别很大，能力各不相同。有的用户，可能视觉有欠缺，对颜色分辨不明；有的用户听觉可能有障碍，对软件语音提示反应迟钝；还有相当一部分用户，对软件使用经验很少，稍微复杂的操作都会很费力。设计者如果忽略这些，设计出的界面在针对性和可用性上就有所不足了。 易用性原则

简洁和易于操作是界面设计的重要原则。该原则一般要求：使用步骤简化，布局简单合理，颜色不易过多，视觉平衡、和谐与一致性，尽量使用图形说明等。

易用性一般包括：A，易见，功能是否容易被发现；B，易学，学起来是否容易；C，易用，熟练使用后可以更快操作。这三条本身其实有冲突的，需要再平衡。例如，微软Windows界面中，菜单是统一的发现功能的入口，通过把拷贝和粘贴放在编辑菜单下使用户容易发现和学习使用，虽然易学，但是不易用，所以又设计了Ctrl+C和Ctrl+V快捷方式，供学会的人更快捷使用。 实用性原则

所谓实用性原则是指能够被用户和系统接受。能够被用户接受主要从使用习惯和经济方面来讲。如果，因为系统界面的需求迫使用户不得不配置昂贵的设备，这对用户而言是不可接受的。所以，从系统的优越性来讲降低其性价比，也就影响了整个产品的推广和普及。所谓能够被系统接受是指不应受界面设计而损害整个系统的运行。比如用户界面运行时需要庞大的内存来支撑。这也是不可接受的。

3.2 界面设计基于其他学科的理论

认知心理学

（1） 由具体到抽象。首先通过多媒体界面给用户提供具体的对象。然后从具体的对象、内容中让用户学习，归纳出抽象的原理。

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

6

动画、色彩等清晰的对象显示抽象的东西。

图005.可视化的形象性

（3） 由模拟引导创造。突出人机交互，尽量启发用户的积极思维和参与，并激起用户的创造和学习欲望。 色彩心理学

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

7

第四章 触摸屏界面设计提出友好界面策略

4.1 信息量最少原则

人一次性接受的信息量都是有限的，如果在界面设计中，信息量超过一定范

围，界面就会很明显给使用者造成一种压抑的感觉。

图007.信息量大小的对比

通过图中对比，我们很容易发现，左边按钮比右边按钮明显减少，既能给视窗腾出空间来，还能给用户一种协调美的感觉。而右途中拥挤的按钮很明显太多，给用户制造一种压抑和拥挤感。

绝大多数触摸屏界面都是一种设备显示窗口，通过界面来提供用户方便快捷的目标操作。在不遗漏关键信息的前提下，做到信息量小，超出的信息量，可以分组，或者子菜单，或者下一页处理。而图中的处理方式就是将其他的按钮放在了可以滑动的下一个分组菜单中。

所以一般我们可以给界面布局的相同性质的信息布局在7个左右浮动，这个

8

数量也是大众一般可以一次性接受的信息量。

4.2 布局无障碍原则

界面上的内容和信息是通过界面布局呈现在用户面前的。布局的结构合理性与否既牵涉到信息传递的通畅性，又是一个关键的美学概念。用户界面设计中，实用性一直是强调的关键部分，但是布局的美学概念在任何产品中也都是引起设计者的重视的。

图008

9

图009

很明显，图008的左边中部略显缺失了必要的视觉元素，整个界面显得重心不够稳重。

所以说，用户界面设计布局上，平衡性很重要。一般做到屏幕上下左右平衡，不要堆挤数据，对象显示的顺序应当排列。当然了，这里的平衡不是必须绝对的强调秩序，而是讲究“均称”，讲究整体布局的谋划。

4.3 界面一致性原则

在用户界面设计中，既包括视图、按钮、菜单简单对象的一致性，又包括界面的一致性，还包括整体设计的一致性。

一般单个对象的一致性，我们在用户界面设计过程中都能把握，但是有关界面整体设计上的一致性就很容易出问题。看图010中，基本界面，登录界面和键盘输入界面，如果单独列开，每个界面都是可以的，都有一种主色调，甚至很多人都会觉得这样每个界面都有一个不一样的风格会给别人耳目一新的感觉。但是组合在一个整体时，这种迥然不同的风格势必给用户造成一种走错门的感觉，犹如进入了不同的系统程序中。

图010

10

图011

而图011向我们展示了多个子页面在整体一致性上做的比较好的效果。每个界面都各不相同，放在一起也能融为一体。

真正在界面上设计成功做到一致性，就是无论每个页面的内容如何变化。结构如何转变，但给用户的感觉都是一样的：有一个共同的主题色彩，它们都还是一个系统。

4.4 颜色合理性原则

颜色合理性与界面一致性有相关联。但是又有它自身的特点。因为界面一致性的具体设计体现需要通过颜色的合理使用来体现。比如设计者决定在界面上使用色彩就必须保证窗口上有关文字的可读性。比较好的解决办法就是遵循色彩对比度规则：在浅色背景上显示深色文本或者在深色背景上显示浅色文本（见图012）。

而且每个人对颜色的喜爱有很大不同，用户的品味也各不相同。颜色能够引发强烈的情感，一般来说，如果针对大众的用户，那么可以保守传统，界面颜色

采用一些柔和的、中性化的颜色。如果对特定用户，那就可以视具体情况而定。

11

图012.不同的颜色对比度带来不同的阅读清晰感

在这一点上，微软公司的界 面就特别的有导向性。它的每一代操作系统的刚一上市，很多软件公司的软件紧接着升级的时候就会调整各自的界面颜色，使

得自己的产品在微软的操作系统运行时显得更能融为一体。这既说明了微软公司的界面设计相当的完美，同时也说明颜色的合理使用相当重要，因为其他软件商担心自己的产品的色彩如果不与操作系统兼容会让用户产生一种厌烦的感觉，最终导致用户对其产品的放弃使用。

4.5 按钮实用性原则

在用户界面设计中，无论是网页界面、软件界面、手机界面还是触摸屏界面，都少不了“按钮”元素。用户通过对按钮的点击来浏览不同的页面和完成目标操作。

12

图013.Word软件按钮的三种操作状态

图013中，Word软件按钮的三种状态基本上是当前最为普遍的形式。即鼠标不在、鼠标移上、鼠标按下。一般至少要有两个状态，来模拟现实中一般实物的突起和下陷效果。而这两个状态是突起、下陷的效果，或是颜色深浅变换效果， 还是标注下划线突出的效果又有各种变化。

一般软件、网页界面的按钮它的指点设备都是鼠标箭头，而触摸屏界面的按钮的最大特点就是指点设备是人的手指，这就要求在有限的空间里使按钮最大化，这样才能让手指点击时更好地被识别感应。同时触摸屏界面的使用很多时候在室外或者更为复杂的环境，而复杂的环境有要求按钮对用户的反馈更明显才能不被环境干扰。所以对触摸屏按钮设计提出以下两个原则。

图014.触摸屏中按钮的一般按钮比例大小

一、按钮形状大小原则。触摸屏界面上的按钮大小至少不要小于一个小指的指甲盖大小，面积再小，手触摸点击就难以产生识别和感应了。同时形状应当以圆、方、或者长宽比差距很小的长方形为主（如图014），这样更能方便提高按钮的大小。

13

二、按钮感性反馈原则。所谓感性反馈，就是让用户感觉上得到一种操作完成的反馈。尤其是，触摸屏在室外使用时，室外环境与室内环境相比，具有明显的嘈杂和干扰性。人在有干扰的情况下，对于界面信息的把握不再很清晰，所以这种情况下按钮的感性反馈，可能仅仅依靠视觉反馈形成按钮的突起和凹陷还不够（见图015），还可以在设计按钮增加听觉反馈，让按钮操作的同时发出声响。这样视觉和听觉两个反馈信息来确定动作的是否有效。

图015.按钮的视觉反馈效果

针对以上本人在设计触摸屏控制器的界面设计过程中遇到的一些问题提出 了一些策略和原则。每一个原型设计方案都会遇到各种问题和困难，但是我们经过多次的可行性评估和改进就会使得产品越来越人性化，这也是一个新产品设计产生的必须流程。这也是我们在提升产品质量和品质时所必须总结的经验和教训，以往在以后的设计过程中能够引以为鉴，指导我们更好的设计出友好的人机界面。

相信在经过市场和用户的考验之后，我们还会发现更多在用户界面设计上有价值的策略和原则。

14

第五章 结论和展望

此次论文中，根据其他参考的资料和理论进行的触摸屏界面设计，又自我进行了设计总结，提出了几点与其他平台界面设计不同的触摸屏界面设计时应注意的原则。也就是信息量最少原则、布局无障碍原则、界面一致性原则、颜色合理性原则、按钮实用性原则。

在设计和论文完成的过程中，也发现本次设计有许多有待改进之处。 其一、在触摸屏界面设计过程中，没有充分考虑到人的左右手使用习惯差别的问题（毕竟90%的人习惯用用手，而10%不到的人习惯用左手），安置界面的主要按钮部分都在界面左边。如果放在网页，或者软件的界面这也不是一个大问题，恰恰在触摸屏界面上这种情况的出现会造成一个很严重的后果，就是90%的用户在使用右手操作过程中，手臂会遮挡界面部分，造成不能一边操作，一边按界面提示再操作，或者再分析界面数据。这一问题，属于设计缺陷，应当在下一代产品跟新中会彻底解决。

其二、我们设计的触摸屏环境控制器，属于禽群饲养环境下的控制器。现在的养殖现场环境噪音和灰尘很大，这两点都对我们触摸屏界面的触控操作带来致命的打击。灰尘大可能导致视觉反馈效果的不清晰；环境噪音大可能导致听觉反馈效果的不清晰。所以我们应当再提供一个反馈信息——触觉反馈信息，就是一个明确的操作还可以有震动反馈。这样就可以克服以上两点的不足。这一问题，属于材料选择的缺陷，我们选用的触摸屏产品还没能支持此项功能。以后的产品我们也应当考虑到这一问题。

以上就是本人此次论文的总结部分。

15

参考文献

[1].罗仕鉴，朱上上，孙守迁，《人机界面设计》，机械工业出版社，2002 [2].李岩芳，《基于认知规律的CAI课件人机界面设计》，长春光学精密机械学院

学报，2001

[3].EasyBuilder8000使用手册，威纶通触摸屏开发使用说明书，2012 [4].柴乔林，陈承文，朱红，《如何使计算机更友好-谈人机界面设计》，计算机

工程与设计出版社，2001

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

16