以用户为中心的设计开发与整合

以用户为中心的设计开发与整合

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

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）色彩的艺术性

色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。

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

（https://www.360docs.net/doc/363231496.html,/）。

图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是概念设计阶段的软硬件对应设计。