流行的用户界面风格.docx
《流行的用户界面风格.docx》由会员分享，可在线阅读，更多相关《流行的用户界面风格.docx（12页珍藏版）》请在冰豆网上搜索。
流行的用户界面风格
流行的用户界面风格
业内有很多流行的用户界面风格。
对此，您可能有不同的见解，会说大型机或小型机风格界面占主导地位。
然而，主导地位的趋势显有利于图形用户界面及其派生界面。
尽管您会争辩说这些同样也是图形界面风格的变体。
但实际上并不清楚手持设备中哪些风格的用户界面会占统治地位。
图形用户界面统治着个人电脑，其风格也有少量变体。
网页用户界面，是在它们自己权限范围内的使用图形用户界面的应用软件，它在Internet、Extranet（企业外部网）和Intranet（企业内部网）的访问中占主导地位。
在Web浏览器窗口中，也有一些细节上略有变化的网页用户界面变体。
然而，应用软件用户界面的细节变化大多不同。
手持设备用户界面的风格包括图形用户界面风格和非图形用户界面风格。
本章将讨论以下内容：
。
。
图形用户界面（GUI）
。
。
网页用户界面（WUI）
。
。
手持设备用户界面（HUI）
。
。
软件用户界面的应用层
。
。
面向对象的用户界面
。
。
项目中用户界面风格的实现
5.1图形用户界面
图形用户界面被定义为一种采用了4种基本组件（窗口、图标、菜单和鼠标指针）的人机交互形式，参见图5.1。
图形用户界面有时称为WIMP界面（即Window（窗口），Icon（图标），Menu（菜单），Pointing Device（指点设备）的缩写。
--编者注）。
图形用户界面的基本特性中，固有的重要特性是直观操作、提供鼠标或指针支持、图形和应用软件功能和区域。
图形用户界面风格基础的最初讨论是，分离出以图形用户界面为基础的应用软件的应用级，详情参见后文。
1.窗口
窗口是显示设备中的一 个区域，用于观看并与对象、对象相关信息以及应用与对象的动作进行交互。
窗口有标题栏、有移动和改变大小的操作、菜单和提供对象信息的区域。
一般说来，窗口是矩形的。
使用窗口的应用软件的一个示例是一个Address Book（地址簿）应用程序，如图5.2所示。
它以图形用户界面为基础，并在计算机显示器出来。
窗口的其他作用是动作对话框、消息和帮助。
窗口定义中，表明它是显示设备上显示信息的一个区域。
显示设备的用法之一是允许为同时实现多个对象或命令对话框之间的交互而查看多个窗口，如图5.2所示。
窗口定义中，另一个含义是利用图形或可视的信息来取代文本信息，以显示多少信息是有用信息。
例如，用滚动条来代替45行选项中的第1行。
2.图标
图标和窗口有很多相似的地方，尽管其正式定义中如此描述：
图标是一个显示设备区域，通过图形化方式来表示对象。
与图标相关的典型特性包括：
用于表示一个对象的图形标志、一个标题名名字和直观操作。
图标的示例用法之一是代表地址簿窗口中的一个人或代表计算机显示屏上的应用软件。
对于代表对象的图标，对它执行的最重要的动作是“Open（打开），令其显示一个窗口（其中包含对对象的详细描述）。
采用非正式图标的图形化用户界面中，有很多图形化符号。
用于表示动作（如最小化）的图形标志、对象（如颜色）的属性或状态（新邮件到达通知）可能会被最终用户当作图标；但在开发图形用户界面和标准的人员看来，它们是图形按钮。
本书将交替使用术语“图标”和图形来表示所有这些应用。
3.菜单
菜单用于显示一组选项，供用户选择。
一般情况下，基于图形用户界面的菜单选项是供用户选择的、用于对对象执行动作的命令。
菜单的一个典型例子是文件菜单，位于文件菜单的一个命令选项是Print（打印）。
所有用户命令集合都包含在菜单中。
相反地，非图形用户界面系统则需要通过分级对话框技术所实现的整体显示来使用菜单。
一般说来，菜单通过窗口来显示，尽管它们有时可以部分扩展到窗口区域外。
菜单的类型有多种：
工具栏、下拉式、弹出式和级联式。
因其使用意图和目的，像图标工具栏这样的东西也可能是菜单。
4.指针
图形系统一般都有通过鼠标或轨迹来实现的指点设备。
与指点设备相关的是屏幕上的某个位置，用户可以在那里通过指点设备进行输入。
指针是一个图形，用以对指点设备输入到系统的位置进行可视化描述。
图形用户界面的指针包括系统箭头、十字型交叉图形和文本I型标。
指针在很多地方都与显示设备上描述接收键盘输入位置的文本输入光标相似。
使用指针的例子是在地址簿中选择一个图标。
5.应用程序客户区
图形用户界面的突出特性往往被忽略。
客户区是一个窗口的子区域，用于显示应用程序的信息，并与应用程序的信息发生交互。
典型例子有概念模型、视图、输入域、选择列表、图形、文本、用户帮助和表格。
与应用程序信息交互的例子有输入或选择数字与文字化数据。
6.直观操作
关于图形用户界面，最重要的特性或许是直观操作，它允许用户通过指针的使用与对象交互。
例如，通过移动鼠标、使指针指向窗口的标题栏、按下并压住鼠标按钮和移动鼠标（有时也中拖放）能够把窗口移到屏幕上。
通过指针来进行直观操作的另一个例子是选取文本（读取和键入）或使用指针和类似画笔的图形工具在一个图形区域直接画图。
使用菜单选项来进行的很多动作都可通过直观操作来实现。
例如，在大多数系统上，都可将一个文档的图标拖到桌面的打印机图标开始打印。
通过直观操作来进行其他动作还有Move（移动）、Copy（复制）Delete（删除）和Link（链接）。
7.其他特性
剪贴板、；快捷键、菜单和对话框中的快捷键和鼠标键盘扩展适用于图形用户界面中的其他用户界面技术。
它们尽管有用，但不是图形用户界面的本质特性。
8.图形用户界面风格示例
对基于图形用户界面的主流操作系统进行分析，可了解WIMP特性支持是如何实现的。
主要的相似点和不同点被突出显示，以展现设计与开发的复杂性。
从图形用户界面的角度看，每个系统都支持窗口、图标、菜单和指针。
。
。
相似性。
在很多方面，系统都是相似的。
有人曾说过：
“初看，它们似乎都非常相似”。
窗口用于显示对象信息。
图标用于描述对像。
菜单用于为对象选取命令。
指点设备支持一些操作如选取、直观操作、缩放窗口和移动窗口和图标。
每个系统都只有一个指针和光标。
快捷操作（如关闭、最大化、缩放等）则有图形标志。
。
。
差异性。
不同图形系统的区别也较大。
OSF/Motif在其窗口和图标中使用三维特性。
Microsoft Windows在其主要应用程序中使用多文档窗口风格。
Macintosh 则用一个单独的菜单栏，支持所有应用程序窗口，其他系统则是每个窗口都有菜单栏。
为了把命令映射到菜单。
OSF/Motif、Macintosh和Windows都遵循了文件—编辑—视图的模式。
OSF/Motif用鼠标左键来进行直观操作，Windows用鼠标左键和右键来进行不同的直观操作。
Macintosh则用单独的鼠标按钮来进行直观操作。
尽管键盘映射不同，但是鼠标点击和移动不支持的操作可能通过鼠标—键盘扩展（按键与鼠标按钮点击的结合）来获得支持。
。
。
风格指南。
每个主流操作系统都有其独一无二的用户界面风格指南。
为了在这个环境中实现跨不同应用软件的一致用户界面风格，应用软件需要遵循这些指南。
每种风格指南提供了一系列的设计原则。
总体外观和感觉的设计意图体现在常见操作（如存取和执行菜单中命令的放置）的描述中。
系统工具包支持各种风格特色的实现。
9.非图形用户界面
相比之下，很多系统都是非图形化的。
最有名的示例是全屏幕的MS-DOS及其应用软件。
然而，MS-DOS和其他非图形用户界面的应用软件，同样可在有菜单和有限指针支持Windows中使用。
10.图形用户界面的好处
图形用户界面当然不会提供任何免费午餐。
同其他任何用户界面一样，很多好处与所考虑的有关权衡有关。
每个权衡都依赖于图形用户界面和使用图形用户界面的应用软件。
然而，未公开发表的IBM可用性测试（新手和专家执行同样的办公任务）表明：
基于图形用户界面的应用软件所提供的可用性高于非图形用户界面的应用软件（如图5.3所示）。
图形用户界面最适合初学者。
在使用环境内遵循一个平台标准，即使应用软件不同，但也很容易融会贯通。
这已经经过历史证明。
经验法则：
图形用户界面不能保证较好的可用性，但是，针对特定的任务的技能，精心设计的、基于图形用户界面的应用软件在效果和满意度方面比非图形用户界面的类似软件更出色。
对于初级用户，最初的挑战是学习使用指点设备和如何在菜单中选取命令。
对于图形用户界面，用户只花一个小时就能基本了解它的使用。
然而，要想学会适应指点设备，所花的时间可能较长，这与个人习惯大有关系。
用户必须培养一种使用习惯以适应手眼的协调。
随着时间的推移，用户会掌握其他一些隐藏的高级功能来提高工作效率。
一旦用户建立了一种恰当的交互方式，就会忽略不同环境图形用户界面特色的相似性，把学习注意力明显转移到如何使用基于图形用户界面的应用软件。
5.2网页用户界面
除比较形象的描述和超链接外，一个简单的网页用户界面非常类似于用户所熟悉的非图形用户界面环境上的分级菜单结构。
基本的导航通过一个或更多使用了文本或可视化超链接的应用软件来实现。
根据应用软件超链接的结构，网页用户界面的内部的导航是在一个单独的图形用户界面窗口中，以线性或非线性的方式来显示一个按页分的应用软件中的网页。
基于网页用户界面风格的应用软件在很多地方与将来的定型产品不同，或者说更糟（假设网页上的电子书和其他材料过多的话）。
使用网页用户界面的应用软件中：
。
。
信息一般在一个名为浏览器的GUI（图形用户界面）窗口中显示，尽管应用软件可能通过多个浏览器窗口来显示信息
。
。
浏览器为Web应用软件提供菜单
。
。
。
。
在应用程序中，如果菜单中的功能不便于用户访问，动作选项就会受到限制
。
。
。
。
网页对用于侦测专用弹出菜单的客户区缺少控制
。
。
。
。
专用菜单的创建需要额外的编程工作
。
。
。
。
应用程序的特性必须映射到调用命令的方法
。
。
应用程序区没有任何约定俗成的图标
。
。
。
。
很多应用程序为了美观和导航的方便而使用图片和动画。
这样会带来负面影响，因为 下载和打开图形文件的时间太长，会导致用户的不满或延长回应时间
。
。
。
。
浏览器和应用程序提供了禁止显示网页图片的功能以便显示纯文本版本
。
。
指针主要支持单击选择导航选项。
拖放操作一般是不支持的，除非在某个特殊环境中通过特殊的编程。
鼠标右键的行为也是有限制的。
经验法则：
基于网页的软件正越来越接近于基于图形用户界面的软件，亦可能是用户越来越钟情于流行的且用的用户界面特性（如拖放和弹出式菜单）。
1.导航
在网页用户界面中，使用较频繁的功能是，通过超链接和搜索机制在不同网页间跳转。
用户打开的网页与同一页或其他页同时存在。
Web浏览器为站点转移和站点内部，以一种线性方式通过{后退}和{前进}工具按钮提供基本的导航功能。
从一个应用程序页到同一个程序中的另一页则通过超链接、站点地图、按钮和导航栏来实现。
2.显示和行为
网页的主要目的是提供有用的信息，包括导航的组织和结构。
网页是由一个或多个光彩夺目的结构和很多五彩缤纷的图形组合而成的“自助餐”。
基于网页用户界面的应用程序中，包含有意义、但不为用户所知的功能（如动画）都超过了基于图形用户界面的应用程序。
Internet上的用户的确没有固定标准。
3.网页用户界面组件
常用组件有横幅、导航栏和以很多方式编排的图形或文本超链接。
此外还有各种各样的图形、动画和颜色。
。
。
横幅是显示在网页顶部的可视化标题
。
。
导航栏是选择信息的超链接选项列表
。
。
超链接是显示下一个信息页或把显示焦点移到同一页中其他区域的一个选项
4.页面布局
信息在网页上通过一个或多种样式和导航风格显示出来：
。
。
浏览器。
屏幕上出现的浏览器一般都有标题、导航栏和浏览区域
。
。
目录。
目录是一个可视化的搜索机制，它列出了用于导航到其他选项的超链接选项，直到找到所需要的结果。
可用一个标题和其他类型的导航选项
。
。
搜索和搜索结果。
用户为执行搜索而键入或选择搜索条件的一个或多个。
搜索结果会在同一个或期货窗口中显示出来
。
。
文档。
与其原来的形式非常接近，网页文档将显示文本信息以级指向其他资源或扩展性信息的链接
。
。
记事本。
一些站点会显示一个可见的记事本，用它来比喻信息的组织方式。
这与导航栏没有明显差别，不过选项较少
5.数据收集
一些网页还可以用于从用户那里收集人名、地址和其他信息。
传统图形用户界面控制也可用于该用途，尽管有时有所限制。
6.设计挑战
对于使用网页用户界面风格的应用程序，影响其可用性的最关键因素与大型机的类似—易于在信息结构中导航、方便并能快速地找到所需要的结果、回应也较快。
其他一些重要因素包括当前信息内容的艺术价值。
5.3手持设备用户界面
如今的个人数字助理（PDA）主要分为两类：
使用真正图形用户界面风格外观与行为的；使用图形用户界面子集的。
两类用户界面都采用手写输入风格，即用户通过手写笔和触摸屏实现输入。
一般而言，此类设备的显示器较小（如图5.5所示）。
和台式机上大多数基于图形用户界面的应用程序窗口和便膝式电脑的显示窗口相比，个人数字助理的显示区域显然要小得多。
便携式电脑或台式机中一般都有基于图形用户界面的软件支持个人数字助理。
1.图形用户界面子集
手持设备用户界面提供图形用户界面的一些特性，也就是图标、菜单和指针行为。
在没有任何装饰窗口的情况下，同一时间只能显示一个对象。
整体用户界面风格可以被称为SIMP（屏幕、图标、菜单、指针）。
它提供了很多图形用户界面特性；
。
。
许多个人数字助理都使用了图标，这些图标的分辨率随显示设备的分辨率变化而变化。
在图形用户界面中，图标用于描述对象、动作和属性
。
。
菜单样和菜单在请求时才显示，并且具有用户熟悉的行为
。
。
对多数需要单击的交互来说，手写笔的作用相当于指针。
对话框显示为与访问对象交叠的窗口。
但这些窗口没有标准图形用户界面的修饰性窗口部件，并且不能被移动或改变大小
2.交互操作
尽管个人数字助理可以连接键盘，但是用户必须学习基于指针的交互操作，以及学习通过手写笔来操作个人数字助理。
有的命令可以使用与图形用户界面中的快捷键相同的手写快捷方式来执行。
3.设计挑战
对于基于手持设备的用户界面，主要的设计挑战有：
。
。
简化用户需求，便于用户输入和交互操作
。
。
开发受限制的显示区域
5.3.4手持设备用户的好外
对个人数字助理用户而言，此类界面的主要好处是利用电子装置从物理上代替了口袋里的组合（如纸张化的日历、日记本和通讯簿）。
集成式PD-PC软件包（即同时适用于个人数字助理和个人电脑的软件包）问世后，利用物理电子设备来执行任务，可大幅度提高效率。
使用手写或笔迹技术来输入大量的信息，显然不受欢迎。
然而，这些个人电脑上的输入和后期维护却非常高效。
为了与个人电脑保持同步，只顺简单地在个人数字助理上进行少量的修改。
个人电脑和个人数字助理之间的信息同步，改进了物理式管理工具（如通讯簿）与个人电脑及便携式电脑之间的信息同步。
5.4软件用户界面的应用层
图形的、网页的和个人数字助理的用户界面属于一般风格。
现在我们把重点放在一个为了用户交互技术而使用图形用户界面风格的应用软件上。
我们将使用其他用户风格来开发同一个应用软件用户界面。
基于图形用户界面的应用软件为了用户与软件的交互而使用图形用户界面技术实现软件。
图形用户界面的基本组件增强了应用软件的可用性。
然而，有很多因素并不受以下两方面的约束：
决定一个应用软件是否可用：
是否比对应的竞争性应用软件好用。
很多应用软件用户界面，影响可用性的因素都与图形用户界面风格怎样使用应用层的用户界面组件有关。
图5.6用一个作为用户界面组件和应用层用户界面组件的功能，描述了一个应用软件的可用性。
基于图形用户界面的应用软件对用户界面风格组件的使用，可能较好，也可能较糟。
图形用户界面与应用层用户界面组件的结合使用可从整体上保证可用性。
5.4.1应用层
基于用户界面的应用软件，除了输入信息、使用菜单实现交互、提供图标和指针，还有更多其他功能。
基于用户界面的应用软件的应用层包括各种修饰性窗口的所有特性。
应用层包括所有最终用户可见的特性和使用不同用户界面风格来实现的交互。
应用层的特性包括：
。
。
概念设计
。
。
对象与命令的语义和属性
。
。
客户区中对象的可视化描述和行为风格
。
。
对象的语法（结构）--数据格式、输入范围和窗口流程
。
。
跨越简单数据输入和直观操作的交互技术
。
。
独一无二的动作
。
。
物理设备的用法
5.4.1示例：
地址簿
图5.7描述了一个基于图形用户界面的地址簿。
该地址簿显示在一个窗口中，并且用图标来表示人。
使用不同类型的菜单，如弹出式菜单（分别用于地址省簿对象和代表人的图标）、工具条和菜单栏。
使用指针对窗口、图标和文本信息进行选择和直观操作。
要想把信息输入地址簿记录，并选择记录，键盘输入较为方便。
这个地址簿在概念上与图5.8中描述的地址簿有很大差异。
虽然都是使用相同的基本GUI风格、相同WIMP特色的基于GUI的应用软件。
假设两者有相同的特性、性能和对用户而言很重要的其他因素，那么图5.7中的地址簿就比较讨人喜欢，因为它看起来像是用户原来所用过、并编写了索引的笔记本，因为它使用了图形用户界面和应用层图形用户界面组件。
对不同基于GUI的应用软件执行相同功能后，再进行比较，会得出一个有趣的结论：
基于GUI的应用软件比其他同类软件出色，有的甚至非常明显。
基于GUI的程序比其他程序优秀，其优势表现在任务时间、对帮助的请求、错误、用户偏爱和用户满意度等方面。
在基于网页用户界面的地址簿中，地址簿用户界面的应用层与图5.9所描述的网页风格对应。
除了通过浏览器菜单得到的简化的一系列特色外，基于网页用户界面的地址簿与图5.8基于GUI的地址簿，在外观和感觉上都非常相似。
在个人数字助理上，图5.8中的地址簿对应于图5.10中所描述的手持设备用户界面。
这种环境下，除了窗口特色和无效的笔记本控制之外，它的外观和感觉也与前两者相似。
随着将来智能设计和编程的发展，肯定能设计并开发出更协调的用户界面。
5.4.2优秀的应用软件用户界面
我们看到一个优秀的用户界面时，不出半小时，即可以知道它拥有其他用户界面缺乏的独特特色，不管它采用的是哪种用户界面风格。
基于GUI的工基于网页或基于HUI用户界面的应用软件的特点均以5个主要原则（即SAPCO）为中心，即简约（Simple）、美观（Aesthetic）、高效（Productive）、可定制（Customizable）和其他（Other）。
1.简约
尽管一些计算机化的用户任务相对复杂和麻烦，但是软件对象在现实世界中的相对物比较简单。
在用户界面中，软件对象提供的增加生产效率的特性并不特别复杂。
尽管简约和分层次被广泛用于入门介绍性和交互性的风格中。
影响简约原则的主要有：
。
。
这不是火箭科学
。
。
尽量使对象简约化，并分层次
。
。
违背简约原则
在应用软件领域和用户界面与可用性上定义的需求通常较为复杂。
例如，假定软件领域是火箭科学，并且任务是执行太空船飞行的计算，应如何处理？
正是因为它是火箭科学，才不意味着应用软件的功能和信息的用户界面必须拥有像它那样的行为。
经验法则：
对于简单的最终用户任务，优秀的应用软件用户界面应不需要使用书籍和在线帮助就可完成。
最糟糕的情况下，优秀的应用软件用户界面也是直观的（关于如何得到结果，用户仅被告知一次即可知道）。
2.美观（看起来好）
图画来自于现实世界，流行的实体对象需要符合美学和人类工程学。
软件对象要用相同的方法展现给用户。
要广泛使用图形设计和可视化。
影响美观原则的主要有：
。
。
看起来不太像计算机产物，更像是用户对象。
。
。
很迷人（有魅力、吸引人）
。
。
可视化的信息
经验法则：
优秀的应用软件用户界面看起来很美。
3.高生产率（感觉好）
软件对象的使用，最好几个简单的步骤就可完成最终用户的任务。
用户界面的实现无须层次较多的窗口和/或屏幕以级不必要的键盘或鼠标步骤。
影响高生产率原则的主要的有：
。
。
对任务敏感
。
。
用户界面的优化使用80/20原则
。
。
把工作步骤减至最少
。
。
提供方便特性
。
。
宽大一些，或者至少不要对小错误施以严厉的处罚
经验法则：
一个优秀的应用软件用户界面，其用法基本上很容易掌握，并且比使用物理形式的相对物更方便。
一个优秀的应用软件界面会避免太多屏幕和太多步骤（或者相当于使用多样的用户界面风格）等最常见的缺陷。
4.可定制
为了适合个人需要，软件对象可以使用很多形式。
软件用户界面对象、以及最终用户创建的对象是可调整的。
影响可定制原则的主要有：
。
。
在设计中遵循工具箱模型
。
。
初始对象包括入门级特性
。
。
提供多种可选择的视图、字体和颜色
。
。
逐渐暴露的秘密逐渐地显示出软件的所有特色
经验法则：
一个优秀的应用软件用户界面允许用户选择相互交流的技术以及整体外观和对用户所需优化方法的存取权限。
5.其他
一旦超越了简单、美观、高生产率和可定制原则，就会有无数的其他原则可使用，其中多数是SAPC的变体。
5.5面向对象的用户界面
设计软件对象有利于交付具有OO（面向对象）用户界面风格和/或OO内部特性的应用软件。
现实世界中很多面向对象的特色包含在用户界面的外观、行为、交互需求和功能中。
对最终用户而言，任何一个对真实对象的面向计算机的增强和扩展是清晰可见的，且易于学习和理解，除非设计和实现的确很糟。
尽管设计中有冲突，但是，类对象的概念类层次结构和对类层次结构的继承，对用户而言，是透明的。
面向对象的用户界面应具有以下特性：
。
。
可直观操作（将任何一个东西拖到任何地方）
。
。
可直接输入（在任何东西上写）
。
。
与对象关联的（弹出式菜单、帮助、一致性等）
面向对象的优秀应用软件简单、使用方便；也就是说，它的用户界面机制是透明的。
5.6返回项目主题
接下来要讨论实际项目中用户界面风格的具体含义。
尽管您很早就参与了项目（您在项目开始后的第2周迟到了），但对于决定项目成功的用户界面，高级管理层是很关注其重要性的。
他们希望与项目领导和您开会讨论项目的用户界面。
进度、假期和其他冲突都需要在第二天上午7：
30进行简要介绍。
如果不能满足要求，在高级管理层举行一次会议之前，又会拖延一月之多的时间，在获得总经理批准的过程中，这会引发一定的风险。
项目领导已同意召开会议。
项目领导要求您开发一个原型或框架，以便第二天向高级管理层展示：
“不管多么简单，但它最后会变好！
这些人正在谈论这个话题！
但是，如果经理感觉不对或他们对我们失去了信心，就不会继续支持整个项目”。
针对项目领导的这个要求，您已经工作了大约两个小时。
因为没有安装用于该项目的软件工具，所以必须使用其他工具而非合适的实现工具开发一个粗糙的屏幕设计。
要为合适的主要对象和合适的动作（与项目相关）提供可视化的设计（例如，一个会议议程和在会议议程的条目中的一个搜索动作）。
针对每种可能使用的用户界面风格（GUI、WUI、HUI）进行设计：
。
。
可用于显示每日会议议程的屏幕
。
。
可用于在一个在议程中执行搜索的屏幕
。
。
每一种用户界面风格的基本用户交互示例
设计一些项目领导和高级管理人员可能提供的问题。
针对跨平台的用户界面风格中简单和不同、潜在的开
升级会员 