以用户为中心的设计开发与整合
本章“设计开发与整合”主要讲述用户界面设计以及软硬件产品的整合设计。
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字体作标题用
（2）版式 图7.13 Tahoma字体在“了解关于”中的应用
与企业形象中的标准字体与应用字体设计一样，界面中的字体使用也不能过于繁杂，也要进
行规范，形成标准。
在设计版式时，要注意字体的大小写、大小、对齐方式、留白、色彩、字符间距等等，使得
版面清新、自然、简洁、大方，易读。
7.1.3.3色彩计划
在界面设计中，色彩较之形往往具有先声夺人的魅力，同一种界面设计由于色彩的差异可以
给人截然不同的感受和印象。如何才能最大限度地发挥色彩的美学功能和视觉效应，创造良
好的界面效果，仍是用户界面色彩设计的关键问题。
色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站专业特点和艺术规律。网页的色彩搭配应遵循以下几个原则：
（1）色彩的合理性
网页的色彩要漂亮、引人注目，同时还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛产生疲劳。
（2）色彩的独特性
要有与众不同的色彩搭配，并且与行业特征相结合，以衬托出网站的个性，使得大家对网站的印象更深刻。
（3）色彩的艺术性
色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。
现在有一种趋势就是，尽量减少大面积色彩的运用（除了灰色），通过文字内容和图片的搭配凸现内容，减少“色彩污染”，如青蛙设计公司的网站设计
（http://www.frogdesign.com/）。
图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播放器等。
（2）不同的目标必须使用不同的图标表示，以避免引起混淆。如果仅使用图形表示目标的含义不够清楚、明确，还可以在图标中附加上简要的文本标注，以明确图标的含义。图7.16所示为Macintosh OS中的几个图标设计，分别用人们熟悉的视觉形象表现不同的对象，比如用禁止符号表示删除，电脑图像表示计算机，房子图像表示主页，用红心表示喜爱的对象，配上文字后让人一目了然。
图7.16 几种图标设计
（3）设计图标应尽可能简单，尽量符合常规的表达习惯，保持图标含义的前后连贯。同一含义的图标在系统的不同位置应保持一致，并且尽可能与系统的风格保持一致。不同的图标之间应该相互区别，图7.17所示为媒体播放器中的按钮图标。
图7.17 媒体播放器中的按钮图标
（4）注意避免采用的图形内容与用户文化观念上起冲突。
（5）一般为图标设置一个清晰的边界轮廓以利于辨别区分图标对象；同时，所有的图像中的线条边缘和角都要求圆滑，不能有生硬的感觉，如图7.18所示。
图7.18 图标设计草图及设计示例
阴影使图标显得更加清晰，具有立体感。Windows XP给图标添加了后置下沉的阴影，这一过程是在Photoshop中完成的，如图7.19所示。
图7.19 图标的阴影
（6）适当设置图标的尺寸，在能够表示实体对象的情况下，图标宜小一些为好，以减少图标所占用的内存空间及显示空间。但是如果要表示复杂对象，可以使用较大尺寸的图标。在同一系统中使用的图标推荐使用一致的图像尺寸。
Windows XP的图标的大小有4种类型：48×48pixels，32×32pixels，24×24pixels以及16×16pixels。微软推荐用户图标的使用大小为：48×48pixels、32×32pixels以及16×16pixels，如图7.20所示。
图7.20 微软推荐用户使用图标的3种大小
（7）鉴于用户的学习和记忆能力所限，为了避免引起混淆，一个系统的图标类型不宜过多，一般不得超过20种。
（8）有时为了更好地说明，可以在一个图标里包含几个相关的对象。但是在同一个图标中，画面中相互关联的物体应控制在三个以下，如果过多，将显得拥挤，或尺寸比例不好处理。物体与物体之间要错开一定距离，可以使图标倾斜一定的角度。
图7.21 Windows XP中图标的透视与组合效果
（9）支持颜色深度。
所谓支持颜色深度，可以直观地理解为设计时可用的颜色种类数。支持的颜色种类数越多，可以显示的颜色将越丰富。按照通常习惯，分为：
24bit 24位真彩色
8bit 256色
4bit 16色
只有显示卡设置的颜色模式等于或高于某种上述设计模式时，图标的颜色才能得以完全显现。例如，如果当前显示卡设置的8bit（256色），则只有8bit及其以下的可以正确显示，高于8bit的图标显示的颜色将失真很大。若熟悉显示卡的设置，这些将不难理解。
Windows XP支持32位的图标，即24位图像和8位的α通道（alpha channel）。这样，图标就可以以光滑边缘来显示，并且可以与任何背景进行混合。
每一个Windows XP图标包含3个色彩深度以支持不同显示器的设置：
（1）24位和8位的α通道（32位）；
（2）8位（256色）和1位透明；
（3）4位（16色）和1位透明。
2、灵性化设计
自从苹果公司推出了透明的iMac电脑，并在其产品中设计了炫酷的图标之后，水晶体、透明、色彩鲜艳的图标设计，甚至产品设计在世界上刮起了一股旋风，尾随者也不计其数。产品设计、图标设计不再是人们想象中的那样枯燥、呆板，而显得更加有情感，有活力，有灵性，成为了人们表达情感的“伙伴”，如MSN和QQ聊天软件中各种具有丰富表情的小图标、Flash动画等。如图7.22所示为一些透明的情趣化的图标设计。
图7.22 透明色的图标设计
另外，个性化也是图标设计的另外一大发展特点。
3、图标设计的文化性
我们目前所接触到的几乎所有的界面图标，除了日本和韩国的具有一定的地域和文化特色以外（图7.23），一般的文化特色不明显，都是国际通用性（Universal）的。
图7.23 粘土动画形式的图标设计
在进行手持终端的界面设计项目时，我们以中国的商务女性为目标，设计了一系列具有中国特色的图标，如图7.24所示。以紫色和红色系为色调，以中国女性旗袍为设计原点，结合
现代元素和色彩，将旗袍图纹、剪裁与邮件、时钟、口红、相机、铃铛等结合，过光影、倒影表现质感，古典女性元素的现代应用。对图标设计进行了有益的探索。
鸿雁传书 重要记事 安全设置 音效设置
时尚之都 光影留痕 视频 游戏
图7.24 具有中国特色的图标设计
7.1.3.5控件设计
大多数应用程序和硬件（Device）都要用到控件来控制软件或者硬件的运行，如音响的按钮、应用软件的滑块等。
控件的设计要根据设计任务，按照人机工程学原理进行统一规划和考虑，避免带来形式、规格混乱，识别性差等不好的影响。
一般说来，控件有以下几种形式。
（1）开关
开关是常见的控件之一。
图7.25 开关
（2）按钮
在几乎所有的界面上，我们都会用到按钮。在微软的Office软件中，在任何时候，总都会有30几个可视的按钮。一部带键盘的手机也许至少有20几个按钮。按钮有很多用途：如改变模式、移动对象或者通过箭头键来移动光标。对于软件中的按钮而言，可以有4种状态：正常状态、激活状态、鼠标滑过状态以及不可用状态。
图7.26 手机和计算器上的按钮
图7.27 软件界面的按钮
（3）旋钮
旋钮一般与显示设置一起使用，表示开启或者关闭某种状态。旋钮有很多种类型，可以按照形状进行视觉编码或者触觉编码，以便于识别和操作。例如图7.28是美国空军开发了15个旋钮的形态编码的方案，这些形态编码被认为是很难混淆的。
图7.28 旋钮的形状
（4）滑块
滑块被用来进行细微调节控制，如音量或者数据的多少。
图7.29 滑块控制
（5）窗口句柄
在软件界面中，窗口句柄通常被用来重设窗口大小，或者拖动窗口。
图7.30 窗口句柄控制
从大的方面来讲，控件有物理控件和数字控件两种类型。
（1）物理控件
物理控件只在产品上能找到，而在屏幕上找不到，如滚盘、游戏杆、轨迹球等。图7.31为苹果iPod Mini上的按触式转盘按钮设计。当用手指压下转盘时能感觉到自己已经按下操作按钮，这也克服了少数消费者对于原来设计的抱怨，取得了非常好的效果，以至于苹果公司在第四代iPod上完全采用了这一设计。
图7.31 苹果iPod Mini上的按触式转盘按钮设计
（2）数字控件
数字控件如复选框、单选按钮、滚动条、文本框、多选列表（Multiple-Selection List）以及旋转框（Spin Box）等。
7.2 软硬件产品的整合设计
从宏观上来看。近年来，数字家电、手持娱乐终端（Portable Media Center）、智能手机（Smart Phone）等跃居3C产品的主流地位，由于数字整合的需求日益增长，嵌入式软件（Embedded Software）系统愈来愈复杂，牵扯到的接口愈来愈多，因而触发了对软、硬件整合设计（SW-HW Co-Design）的强烈需求。根据软硬结合的趋势，嵌入式软件质量成为数字家电等商品成功的关键，软件组件设计及其架构规划技术逐渐成为业界关注的焦点。传统的嵌入式系统开发大多采取软件与硬件分开设计的方式，这会导致软件无法应付硬件的快速更新，阻碍新产品及时上市，错失商机。因此，应该强调软硬整合设计，让软件和硬件设计师共同合作一起思考整体架构，软件设计者充分考虑硬件的可变性，以更好的设计模式支持硬件组件的可调换性。从微观上来看。站在开发角度上，我们要将软件界面与硬件的操控进行整合，以便软件工程师与硬件工程师能够协同工作。软硬件的整合设计分为两个大的阶段：一是在概念设计阶段进行信息架构的时候，将软硬件的构架一起设计；二是在产品开发的后期，将软硬件整合，形成完整的产品。
图7.32 和图7.33是概念设计阶段的软硬件对应设计。
图7.32 概念设计阶段的软硬件对应设计
图7.33 概念设计阶段的软硬件对应设计
图7.34是将图标等元素整合后的界面设计。
图7.34 界面设计
将开发的软件与硬件（Device）整合后，就形成了完整的产品。
以用户为中心的设计开发与整合
本章“设计开发与整合”主要讲述用户界面设计以及软硬件产品的整合设计。
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字体作标题用
（2）版式 图7.13 Tahoma字体在“了解关于”中的应用
与企业形象中的标准字体与应用字体设计一样，界面中的字体使用也不能过于繁杂，也要进
行规范，形成标准。
在设计版式时，要注意字体的大小写、大小、对齐方式、留白、色彩、字符间距等等，使得
版面清新、自然、简洁、大方，易读。
7.1.3.3色彩计划
在界面设计中，色彩较之形往往具有先声夺人的魅力，同一种界面设计由于色彩的差异可以
给人截然不同的感受和印象。如何才能最大限度地发挥色彩的美学功能和视觉效应，创造良
好的界面效果，仍是用户界面色彩设计的关键问题。
色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站专业特点和艺术规律。网页的色彩搭配应遵循以下几个原则：
（1）色彩的合理性
网页的色彩要漂亮、引人注目，同时还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛产生疲劳。
（2）色彩的独特性
要有与众不同的色彩搭配，并且与行业特征相结合，以衬托出网站的个性，使得大家对网站的印象更深刻。
（3）色彩的艺术性
色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。
现在有一种趋势就是，尽量减少大面积色彩的运用（除了灰色），通过文字内容和图片的搭配凸现内容，减少“色彩污染”，如青蛙设计公司的网站设计
（http://www.frogdesign.com/）。
图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播放器等。
（2）不同的目标必须使用不同的图标表示，以避免引起混淆。如果仅使用图形表示目标的含义不够清楚、明确，还可以在图标中附加上简要的文本标注，以明确图标的含义。图7.16所示为Macintosh OS中的几个图标设计，分别用人们熟悉的视觉形象表现不同的对象，比如用禁止符号表示删除，电脑图像表示计算机，房子图像表示主页，用红心表示喜爱的对象，配上文字后让人一目了然。
图7.16 几种图标设计
（3）设计图标应尽可能简单，尽量符合常规的表达习惯，保持图标含义的前后连贯。同一含义的图标在系统的不同位置应保持一致，并且尽可能与系统的风格保持一致。不同的图标之间应该相互区别，图7.17所示为媒体播放器中的按钮图标。
图7.17 媒体播放器中的按钮图标
（4）注意避免采用的图形内容与用户文化观念上起冲突。
（5）一般为图标设置一个清晰的边界轮廓以利于辨别区分图标对象；同时，所有的图像中的线条边缘和角都要求圆滑，不能有生硬的感觉，如图7.18所示。
图7.18 图标设计草图及设计示例
阴影使图标显得更加清晰，具有立体感。Windows XP给图标添加了后置下沉的阴影，这一过程是在Photoshop中完成的，如图7.19所示。
图7.19 图标的阴影
（6）适当设置图标的尺寸，在能够表示实体对象的情况下，图标宜小一些为好，以减少图标所占用的内存空间及显示空间。但是如果要表示复杂对象，可以使用较大尺寸的图标。在同一系统中使用的图标推荐使用一致的图像尺寸。
Windows XP的图标的大小有4种类型：48×48pixels，32×32pixels，24×24pixels以及16×16pixels。微软推荐用户图标的使用大小为：48×48pixels、32×32pixels以及16×16pixels，如图7.20所示。
图7.20 微软推荐用户使用图标的3种大小
（7）鉴于用户的学习和记忆能力所限，为了避免引起混淆，一个系统的图标类型不宜过多，一般不得超过20种。
（8）有时为了更好地说明，可以在一个图标里包含几个相关的对象。但是在同一个图标中，画面中相互关联的物体应控制在三个以下，如果过多，将显得拥挤，或尺寸比例不好处理。物体与物体之间要错开一定距离，可以使图标倾斜一定的角度。
图7.21 Windows XP中图标的透视与组合效果
（9）支持颜色深度。
所谓支持颜色深度，可以直观地理解为设计时可用的颜色种类数。支持的颜色种类数越多，可以显示的颜色将越丰富。按照通常习惯，分为：
24bit 24位真彩色
8bit 256色
4bit 16色
只有显示卡设置的颜色模式等于或高于某种上述设计模式时，图标的颜色才能得以完全显现。例如，如果当前显示卡设置的8bit（256色），则只有8bit及其以下的可以正确显示，高于8bit的图标显示的颜色将失真很大。若熟悉显示卡的设置，这些将不难理解。
Windows XP支持32位的图标，即24位图像和8位的α通道（alpha channel）。这样，图标就可以以光滑边缘来显示，并且可以与任何背景进行混合。
每一个Windows XP图标包含3个色彩深度以支持不同显示器的设置：
（1）24位和8位的α通道（32位）；
（2）8位（256色）和1位透明；
（3）4位（16色）和1位透明。
2、灵性化设计
自从苹果公司推出了透明的iMac电脑，并在其产品中设计了炫酷的图标之后，水晶体、透明、色彩鲜艳的图标设计，甚至产品设计在世界上刮起了一股旋风，尾随者也不计其数。产品设计、图标设计不再是人们想象中的那样枯燥、呆板，而显得更加有情感，有活力，有灵性，成为了人们表达情感的“伙伴”，如MSN和QQ聊天软件中各种具有丰富表情的小图标、Flash动画等。如图7.22所示为一些透明的情趣化的图标设计。
图7.22 透明色的图标设计
另外，个性化也是图标设计的另外一大发展特点。
3、图标设计的文化性
我们目前所接触到的几乎所有的界面图标，除了日本和韩国的具有一定的地域和文化特色以外（图7.23），一般的文化特色不明显，都是国际通用性（Universal）的。
图7.23 粘土动画形式的图标设计
在进行手持终端的界面设计项目时，我们以中国的商务女性为目标，设计了一系列具有中国特色的图标，如图7.24所示。以紫色和红色系为色调，以中国女性旗袍为设计原点，结合
现代元素和色彩，将旗袍图纹、剪裁与邮件、时钟、口红、相机、铃铛等结合，过光影、倒影表现质感，古典女性元素的现代应用。对图标设计进行了有益的探索。
鸿雁传书 重要记事 安全设置 音效设置
时尚之都 光影留痕 视频 游戏
图7.24 具有中国特色的图标设计
7.1.3.5控件设计
大多数应用程序和硬件（Device）都要用到控件来控制软件或者硬件的运行，如音响的按钮、应用软件的滑块等。
控件的设计要根据设计任务，按照人机工程学原理进行统一规划和考虑，避免带来形式、规格混乱，识别性差等不好的影响。
一般说来，控件有以下几种形式。
（1）开关
开关是常见的控件之一。
图7.25 开关
（2）按钮
在几乎所有的界面上，我们都会用到按钮。在微软的Office软件中，在任何时候，总都会有30几个可视的按钮。一部带键盘的手机也许至少有20几个按钮。按钮有很多用途：如改变模式、移动对象或者通过箭头键来移动光标。对于软件中的按钮而言，可以有4种状态：正常状态、激活状态、鼠标滑过状态以及不可用状态。
图7.26 手机和计算器上的按钮
图7.27 软件界面的按钮
（3）旋钮
旋钮一般与显示设置一起使用，表示开启或者关闭某种状态。旋钮有很多种类型，可以按照形状进行视觉编码或者触觉编码，以便于识别和操作。例如图7.28是美国空军开发了15个旋钮的形态编码的方案，这些形态编码被认为是很难混淆的。
图7.28 旋钮的形状
（4）滑块
滑块被用来进行细微调节控制，如音量或者数据的多少。
图7.29 滑块控制
（5）窗口句柄
在软件界面中，窗口句柄通常被用来重设窗口大小，或者拖动窗口。
图7.30 窗口句柄控制
从大的方面来讲，控件有物理控件和数字控件两种类型。
（1）物理控件
物理控件只在产品上能找到，而在屏幕上找不到，如滚盘、游戏杆、轨迹球等。图7.31为苹果iPod Mini上的按触式转盘按钮设计。当用手指压下转盘时能感觉到自己已经按下操作按钮，这也克服了少数消费者对于原来设计的抱怨，取得了非常好的效果，以至于苹果公司在第四代iPod上完全采用了这一设计。
图7.31 苹果iPod Mini上的按触式转盘按钮设计
（2）数字控件
数字控件如复选框、单选按钮、滚动条、文本框、多选列表（Multiple-Selection List）以及旋转框（Spin Box）等。
7.2 软硬件产品的整合设计
从宏观上来看。近年来，数字家电、手持娱乐终端（Portable Media Center）、智能手机（Smart Phone）等跃居3C产品的主流地位，由于数字整合的需求日益增长，嵌入式软件（Embedded Software）系统愈来愈复杂，牵扯到的接口愈来愈多，因而触发了对软、硬件整合设计（SW-HW Co-Design）的强烈需求。根据软硬结合的趋势，嵌入式软件质量成为数字家电等商品成功的关键，软件组件设计及其架构规划技术逐渐成为业界关注的焦点。传统的嵌入式系统开发大多采取软件与硬件分开设计的方式，这会导致软件无法应付硬件的快速更新，阻碍新产品及时上市，错失商机。因此，应该强调软硬整合设计，让软件和硬件设计师共同合作一起思考整体架构，软件设计者充分考虑硬件的可变性，以更好的设计模式支持硬件组件的可调换性。从微观上来看。站在开发角度上，我们要将软件界面与硬件的操控进行整合，以便软件工程师与硬件工程师能够协同工作。软硬件的整合设计分为两个大的阶段：一是在概念设计阶段进行信息架构的时候，将软硬件的构架一起设计；二是在产品开发的后期，将软硬件整合，形成完整的产品。
图7.32 和图7.33是概念设计阶段的软硬件对应设计。
图7.32 概念设计阶段的软硬件对应设计
图7.33 概念设计阶段的软硬件对应设计
图7.34是将图标等元素整合后的界面设计。
图7.34 界面设计
将开发的软件与硬件（Device）整合后，就形成了完整的产品。