以用戶为中心的设计开发与整合.docxVIP

以用户为中心的设计开发与整合本章“设计开发与整合”主要讲述用户界面设计以及软硬件产品的整合设计。7.1 用户界面设计7.1.1 用户界面的定义用户界面（User Interface）也称人机界面（Human-Machine Interface），是用户（人）与机器互相传递信息的媒介，其中包括信息的输入和输出。好的用户界面美观易懂、操作简单且具有引导功能，使用户感觉愉快、兴趣增强，从而提高使用效率。 广义的用户界面在研究广义的用户界面之前，先让我们来了解一下人机系统（Human-Machine System）的概念。“系统”是由相互作用、相互依赖的若干组成部分结合成的具有特定功能的有机整体。人机系统包括人、机和环境三个组成部分，它们相互联系构成一个整体。我们可以用模型来描述人机系统，如图7.1所示图7.1 人机系统模型 狭义的用户界面狭义的用户界面是指计算机系统中的人机界面（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 用户界面的设计元素布局布局（Layout）指的是在一个限定面积范围内合理安排图形图像和文字的位置，将零乱的页面、混杂的内容依整体布局的需要进行分组归纳，进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，使浏览者有一个流畅的视觉体验。在所有的屏幕中，视觉的布局设计是核心：界面的特征、元素、控件和内容如何摆放。界面布局提供了一种层次化结构，让用户了解哪些是最关键的，哪些是次关键的。1、网格系统网格系统（Grid System）是对整个界面划分区域，以保持前后的一致性，这样设计师就不容易弄错了。设计师可以在网格系统中安排标题栏、工具栏、图像以及工作区域。在Dreamweaver网页设计软件中，就提供了一种专门的框架结构，这样设计师就可以保持各个页面的风格统一性了，可以设计“同”字型结构、“国”字型结构、左右对称以及自由式布局。目前，大多数网站都采用如图7.7所示的结构。图7.7 一种网站结构布局示例 当然，网格只是建议，并非强求，要根据界面设计的需要来定。运用得好的话，对于界面设计大有帮助。有