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

以用户为中心的设计开发与整合本章“设计开发与整合”主要讲述用户界面设计以及软硬件产品的整合设计。7.1用户界面设计7.1.1用户界面的定义用户界面（UserInterface）也称人机界面（Human-MachineInterface），是用户（人）与机器互相传递信息的媒介，其中包括信息的输入和输出。好的用户界面美观易懂、操作简单且具有引导功能，使用户感觉愉快、兴趣增强，从而提高使用效率。7.1.1.1广义的用户界面在研究广义的用户界面之前，先让我们来了解一下人机系统（Human-MachineSystem）的概念。“系统”是由相互作用、相互依赖的若干组成部分结合成的具有特定功能的有机整体。人机系统包括人、机和环境三个组成部分，它们相互联系构成一个整体。我们可以用模型来描述人机系统，如图7.1所示图7.1人机系统模型7.1.1.2狭义的用户界面狭义的用户界面是指计算机系统中的人机界面（Human-ComputerInterface，HCI），又称人机接口，它是计算机科学中最年轻的分支之一。用户界面是计算机科学与心理学、设计艺术、认知科学和人机工程学的交叉研究领域，是人与计算机之间传递和交换信息的媒介，是计算机系统向用户提供的综合操作环境。计算机系统是由计算机硬件、软件和人共同构成的人机系统，人与硬件、软件结合而构成了用户界面，如图7.2所示。其工作过程是：人－机界面为用户提供观感形象（LookandFeel），支持用户应用知识、经验、感知和思维等获取界面信息，并使用交互设备完成人－机交互，如向系统输入命令、参数等，计算机将处理所接受的信息，通过人－机界面向用户回送响应信息或运行结果。图7.2人－计算机系统的组成示意图对于用户界面设计师而言，他（她）的作用就是协调好计算机硬界面与软界面之间的关系，可以用图7.3来解释：图7.3计算机系统中的用户界面设计在上图中，界面设计师处理的是人与硬件界面、人与软件界面的关系，而硬件界面与软件界面之间的关系则通过计算机与信息技术来解决。Hewett等将用户界面分为自然的人机交互、计算机使用与配置、人的特征、计算机系统与界面结构、发展过程等五个部分，并将其关系表示如图7.4所示。图7.4计算机用户界面的研究内容总之，用户界面是介于用户和计算机系统之间，是人与计算机之间传递、交换信息的媒介，是用户使用计算机系统的综合操作环境。用户界面设计是用户体验的重要组成部分，也是体验的视觉体现形式。7.1.2手机界面不同的产品，其界面设计的范围和内容是不一样的。手机的界面不仅仅是图形化用户界面。从大的方面来看，手机的界面可以分为三种类型：逻辑用户界面（LogicalUserInterface，LUI）、物理用户界面（PhysicalUserInterface，PUI）和图形用户界面（GraphicalUserInterface，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、网格系统网格系统（GridSystem）是对整个界面划分区域，以保持前后的一致性，这样设计师就不容易弄错了。设计师可以在网格系统中安排标题栏、工具栏、图像以及工作区域。在Dreamweaver网页设计软件中，就提供了一种专门的框架结构，这样设计师就可以保持各个页面的风格统一性了，可以设计“同”字型结构、“国”字型结构、左右对称以及自由式布局。目前，大多数网站都采用如图7.7所示的结构。图7.7一种网站结构布局示例当然，网格只是建议，并非强求，要根据界面设计的需要来定。运用得好的话，对于界面设计大有帮助。有些网格系统甚至成为了一种标准。图7.8所示为微软PowerPoint和苹果iTune的一种应用，上面和左边的控制板留给了控件或者导航键，右边留出了较大的工作区域。图7.8微软PowerPoint和苹果iTune的网格布局另外，在空白区域，也要留有空间，不要设计得满满当当，在视觉上不好看，也不“透气”，让人感觉到压抑。2、视觉流视觉流（VisualFlow）是界面中，人们浏览内容的顺序。一般而言，人们的视线总是从左到右，从上至下的顺序。在进行界面设计时，设计师要遵循这一常识，将界面中最重要的内容安排在最容易引起人们注意的地方。在一个页面中，用户的眼睛不可能浏览到每一个地方。在目前的很多网页设计中，颜色、文字、动画等常被用来吸引人的眼球。例如，在搜狐网站新闻中心的首页，就设置了不同的区域（尤其是颜色、文字和Flash动画）以及弹出式、浮动的动画来突出要显示的内容和多种广告；而且，不同的页面位置，其广告价值也是不一样的。图7.9搜狐网站新闻中心首页（2009年9月17日）另外，设计对象在位置上的对齐也是很重要的，有利于页面的整洁和规范。对齐方式主要有上下对齐和左右对齐两种方式，如图7.10所示。图7.10界面中对象对齐后显得规整7.1.3.2文字在界面设计中，尽管动画、图片和色彩很吸引人注意，但是文字也扮演了重要的角色。斯坦福大学（StanfordUniversity）和ThePoynterInstitute合作研究人们对于Internet上新闻的注意程度时发现，文字的注视率是最高的，如表7.1和图7.11所示。表7.1Internet上新闻的注意程度图7.11斯坦福大学和ThePoynterInstitute合作进行的眼动试验文字包括字体和版式。（1）字体字体包括衬线字体（Serif）和无衬线字体（San-serif）。衬线字体在笔画上有自身的细节，例如罗马字体（Times）和加拉蒙字体（Garamond），容易阅读，比较适合于应用在内容方面。无衬线字体，例如赫维提卡字体（Helvetica）和Arial字体，在笔画上没有多少细节，适合于简短的段落、文章标题或者用以扫描的文字。在界面设计中，无衬线字体常被用来做屏幕文字，或者硬件产品的表面，适合于按钮标签、结构性文字以及菜单，如Verdana和Georgia字体常被用作于屏幕文字。在一些大公司，界面设计中的文字字体与大小应用是要形成标准的，便于管理，统一界面形象。例如，WindowsXP中对字体的应用就做了规定。表7.2基本字体的应用情况图7.12为FranklinGothic字体在控制面板中被用作标题，图7.13为Tahoma字体在“了解关于”中的应用。图7.12FranklinGothic字体作标题用图7.13Tahoma字体在“了解关于”中的应用（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所示为MacintoshOS中的几个图标设计。图7.15MacOSX中的几例图标图7.22分别用写了字的纸和笔、计算器、盖了邮戳的邮票、有电影图像的放映机、带了DVD碟片的放映机表示相应的写字板、计算器、E-mail、媒体播放器、DVD播放器等。（2）不同的目标必须使用不同的图标表示，以避免引起混淆。如果仅使用图形表示目标的含义不够清楚、明确，还可以在图标中附加上简要的文本标注，以明确图标的含义。图7.16所示为MacintoshOS中的几个图标设计，分别用人们熟悉的视觉形象表现不同的对象，比如用禁止符号表示删除，电脑图像表示计算机，房子图像表示主页，用红心表示喜爱的对象，配上文字后让人一目了然。图7.16几种图标设计（3）设计图标应尽可能简单，尽量符合常规的表达习惯，保持图标含义的前后连贯。同一含义的图标在系统的不同位置应保持一致，并且尽可能与系统的风格保持一致。不同的图标之间应该相互区别，图7.17所示为媒体播放器中的按钮图标。图7.17媒体播放器中的按钮图标（4）注意避免采用的图形内容与用户文化观念上起冲突。（5）一般为图标设置一个清晰的边界轮廓以利于辨别区分图标对象；同时，所有的图像中的线条边缘和角都要求圆滑，不能有生硬的感觉，如图7.18所示。图7.18图标设计草图及设计示例阴影使图标显得更加清晰，具有立体感。WindowsXP给图标添加了后置下沉的阴影，这一过程是在Photoshop中完成的，如图7.19所示。图7.19图标的阴影（6）适当设置图标的尺寸，在能够表示实体对象的情况下，图标宜小一些为好，以减少图标所占用的内存空间及显示空间。但是如果要表示复杂对象，可以使用较大尺寸的图标。在同一系统中使用的图标推荐使用一致的图像尺寸。WindowsXP的图标的大小有