以用户为中心的设计开发与整合本章“设计开发与整合”主要讲述用户界面设计以及软硬件产品的整合设计。

7.1 用户界面设计7.1.1 用户界面的定义用户界面（User Interface）也称人机界面（Human-Machine Interface），是用户（人）与机器互相传递信息的媒介，其中包括信息的输入和输出。

好的用户界面美观易懂、操作简单且具有引导功能，使用户感觉愉快、兴趣增强，从而提高使用效率。

7.1.1.1 广义的用户界面在研究广义的用户界面之前，先让我们来了解一下人机系统（Human-Machine System）的概念。

“系统”是由相互作用、相互依赖的若干组成部分结合成的具有特定功能的有机整体。

人机系统包括人、机和环境三个组成部分，它们相互联系构成一个整体。

我们可以用模型来描述人机系统，如图7.1所示图7.1 人机系统模型7.1.1.2 狭义的用户界面狭义的用户界面是指计算机系统中的人机界面（Human-Computer Interface，HCI），又称人机接口，它是计算机科学中最年轻的分支之一。

用户界面是计算机科学与心理学、设计艺术、认知科学和人机工程学的交叉研究领域，是人与计算机之间传递和交换信息的媒介，是计算机系统向用户提供的综合操作环境。

计算机系统是由计算机硬件、软件和人共同构成的人机系统，人与硬件、软件结合而构成了用户界面，如图7.2所示。

其工作过程是：人－机界面为用户提供观感形象（Look and Feel），支持用户应用知识、经验、感知和思维等获取界面信息，并使用交互设备完成人－机交互，如向系统输入命令、参数等，计算机将处理所接受的信息，通过人－机界面向用户回送响应信息或运行结果。

图7.2 人－计算机系统的组成示意图对于用户界面设计师而言，他（她）的作用就是协调好计算机硬界面与软界面之间的关系，可以用图7.3来解释：图7.3 计算机系统中的用户界面设计在上图中，界面设计师处理的是人与硬件界面、人与软件界面的关系，而硬件界面与软件界面之间的关系则通过计算机与信息技术来解决。

Hewett等将用户界面分为自然的人机交互、计算机使用与配置、人的特征、计算机系统与界面结构、发展过程等五个部分，并将其关系表示如图7.4所示。

图7.4 计算机用户界面的研究内容总之，用户界面是介于用户和计算机系统之间，是人与计算机之间传递、交换信息的媒介，是用户使用计算机系统的综合操作环境。

用户界面设计是用户体验的重要组成部分，也是体验的视觉体现形式。

7.1.2 手机界面不同的产品，其界面设计的范围和内容是不一样的。

手机的界面不仅仅是图形化用户界面。

从大的方面来看，手机的界面可以分为三种类型：逻辑用户界面（Logical User Interface，LUI）、物理用户界面（Physical User Interface，PUI）和图形用户界面（Graphical User Interface，GUI）（Heo等，2009），如图7.5所示。

图7.5 手机用户界面的三个层次Ketola和Röykkee（2001）将手持设备（如手机等）的用户界面元素按照功能分成了七类：输入（如软键、字母数字键和导航工具）、显示（如图标和指示）、听觉和声音（如铃声和话筒）、人机工程（如触觉和感觉）、可拆卸部分（如SIM卡和电池）、沟通方式（如蓝牙）和应用（如打电话和游戏）。

另外，手机界面的发展形式也日益发生着变化，从最初的文字输入，到多媒体界面以及苹果iPhone的触摸式输入，以及今后基于分布式网络的模块化，智能变形体等等，如图7.6所示。

界面也从二维到三维发生了变化，对设计提出了更多的要求。

图7.6 手机界面的发展在本章节中，我们将软件界面和硬件界面结合起来讨论。

7.1.3 用户界面的设计元素7.1.3.1布局布局（Layout）指的是在一个限定面积范围内合理安排图形图像和文字的位置，将零乱的页面、混杂的内容依整体布局的需要进行分组归纳，进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，使浏览者有一个流畅的视觉体验。

在所有的屏幕中，视觉的布局设计是核心：界面的特征、元素、控件和内容如何摆放。

界面布局提供了一种层次化结构，让用户了解哪些是最关键的，哪些是次关键的。

1、网格系统网格系统（Grid System）是对整个界面划分区域，以保持前后的一致性，这样设计师就不容易弄错了。

设计师可以在网格系统中安排标题栏、工具栏、图像以及工作区域。

在Dreamweaver网页设计软件中，就提供了一种专门的框架结构，这样设计师就可以保持各个页面的风格统一性了，可以设计“同”字型结构、“国”字型结构、左右对称以及自由式布局。

目前，大多数网站都采用如图7.7所示的结构。

图7.7 一种网站结构布局示例当然，网格只是建议，并非强求，要根据界面设计的需要来定。

运用得好的话，对于界面设计大有帮助。

有些网格系统甚至成为了一种标准。

图7.8所示为微软PowerPoint和苹果iTune的一种应用，上面和左边的控制板留给了控件或者导航键，右边留出了较大的工作区域。

图7.8 微软PowerPoint和苹果iTune的网格布局另外，在空白区域，也要留有空间，不要设计得满满当当，在视觉上不好看，也不“透气”，让人感觉到压抑。

2、视觉流视觉流（Visual Flow）是界面中，人们浏览内容的顺序。

一般而言，人们的视线总是从左到右，从上至下的顺序。

在进行界面设计时，设计师要遵循这一常识，将界面中最重要的内容安排在最容易引起人们注意的地方。

在一个页面中，用户的眼睛不可能浏览到每一个地方。

在目前的很多网页设计中，颜色、文字、动画等常被用来吸引人的眼球。

例如，在搜狐网站新闻中心的首页，就设置了不同的区域（尤其是颜色、文字和Flash动画）以及弹出式、浮动的动画来突出要显示的内容和多种广告；而且，不同的页面位置，其广告价值也是不一样的。

图7.9 搜狐网站新闻中心首页（2009年9月17日）另外，设计对象在位置上的对齐也是很重要的，有利于页面的整洁和规范。

对齐方式主要有上下对齐和左右对齐两种方式，如图7.10所示。

图7.10 界面中对象对齐后显得规整7.1.3.2 文字在界面设计中，尽管动画、图片和色彩很吸引人注意，但是文字也扮演了重要的角色。

斯坦福大学（Stanford University）和The Poynter Institute合作研究人们对于Internet 上新闻的注意程度时发现，文字的注视率是最高的，如表7.1和图7.11所示。

表7.1 Internet上新闻的注意程度图7.11 斯坦福大学和The Poynter Institute合作进行的眼动试验文字包括字体和版式。

（1）字体字体包括衬线字体（Serif）和无衬线字体（San-serif）。

衬线字体在笔画上有自身的细节，例如罗马字体（Times）和加拉蒙字体（Garamond），容易阅读，比较适合于应用在内容方面。

无衬线字体，例如赫维提卡字体（Helvetica）和Arial字体，在笔画上没有多少细节，适合于简短的段落、文章标题或者用以扫描的文字。

在界面设计中，无衬线字体常被用来做屏幕文字，或者硬件产品的表面，适合于按钮标签、结构性文字以及菜单，如Verdana 和Georgia字体常被用作于屏幕文字。

在一些大公司，界面设计中的文字字体与大小应用是要形成标准的，便于管理，统一界面形象。

例如，Windows XP中对字体的应用就做了规定。

表7.2 基本字体的应用情况图7.12为Franklin Gothic字体在控制面板中被用作标题，图7.13为Tahoma字体在“了解关于”中的应用。

图7.12 Franklin Gothic字体作标题用图7.13 Tahoma字体在“了解关于”中的应用（2）版式与企业形象中的标准字体与应用字体设计一样，界面中的字体使用也不能过于繁杂，也要进行规范，形成标准。

在设计版式时，要注意字体的大小写、大小、对齐方式、留白、色彩、字符间距等等，使得版面清新、自然、简洁、大方，易读。

7.1.3.3色彩计划在界面设计中，色彩较之形往往具有先声夺人的魅力，同一种界面设计由于色彩的差异可以给人截然不同的感受和印象。

如何才能最大限度地发挥色彩的美学功能和视觉效应，创造良好的界面效果，仍是用户界面色彩设计的关键问题。

色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站专业特点和艺术规律。

网页的色彩搭配应遵循以下几个原则：（1）色彩的合理性网页的色彩要漂亮、引人注目，同时还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛产生疲劳。

（2）色彩的独特性要有与众不同的色彩搭配，并且与行业特征相结合，以衬托出网站的个性，使得大家对网站的印象更深刻。

（3）色彩的艺术性色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。

蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。

现在有一种趋势就是，尽量减少大面积色彩的运用（除了灰色），通过文字内容和图片的搭配凸现内容，减少“色彩污染”，如青蛙设计公司的网站设计（/）。

图7.14 青蛙设计公司的网站首页界面设计7.1.3.4图标设计“Icon”这个词起源于希腊的“Eikon”，原意为图像，在字典里被定义为宗教的图腾，图标概念引入到计算机以后被认为是图像、图片或者是表示概念的符号。

图标（Icon）是人类记录、交流信息的主要手段之一，它以图形符号的形式来规划并处理信息和知识。

由于人在知觉图标信息时，辨认的信号与客体本身有着形象上的直接联系，其信息接收的速度远远高于抽象符号，如路标图、气象图、地图以及标准符号等。

并且图标具有形、意、色等多种刺激，因而传递的信息量大，抗干扰力强，易于接收，因此图标在硬件界面和软件界面中具有重要的意义。

1、图标设计的特点一个图标设计美观与否，就要看它是否具有以下特点：色彩、层次丰富，过渡自然流畅，边缘清晰，立体感强，符合所指对象的特点。

使用的设计工具主要是Illustrator、CorelDRAW 以及Photoshop等，并特别推荐请具有3D设计经验的人员来完成图标的设计。

同时，必须注意的有以下事项：（1）图标的图形编码应该和目标的外形相似。

只要可能，应该尽量避免抽象，使人们可以快速、准确地识别图标，图7.15所示为Macintosh OS中的几个图标设计。

图7.15 Mac OS X中的几例图标图7.22分别用写了字的纸和笔、计算器、盖了邮戳的邮票、有电影图像的放映机、带了DVD碟片的放映机表示相应的写字板、计算器、E-mail、媒体播放器、DVD播放器等。