界面设计步骤

        一旦完成了界面分析,最终用户要求的所有任务(对象和动作)都已经被详细确定下来,界面设计活动就开始了。与所有的软件工程设计一样,界面设计是一个迭代的过程。每个用户界面设计步骤都要进行很多次,每次精细化的信息都来源于前面的步骤。

引述
        交互设计是图形艺术、技术和心理学的无缝结合。
                                                                ——  Brad Wieners        

        尽管已经提出了很多不同的用户界面设计模型(例如[Nor86]和[Nie00]),但它们都建议结合以下步骤:(1)定义界面对象和动作(操作);(2)确定事件(用户动作),即会导致用户界面状态发生变化的事件;(3)描述每个状态的表示形式;(4)说明用户如何利用界面提供的信息来解释每个状态。

1  应用界面设计步骤
        界面设计的一个重要步骤是定义界面对象和作用于对象上的动作。也就是说,撰写用例的描述。名词(对象)和动词(动作)被分离出来形成对象和动作列表。
        一旦完成了对象和动作的定义及迭代细化,就可以将它们按类型分类。目标、源和应用对象都被标识出来。将源对象(如报告图标)拖放到目标对象(如打印机图标)上,这意味着该动作要产生一个硬拷贝的报告。应用对象代表应用中特有的数据,它们并不作为屏幕交互的一部分被直接操纵。例如,邮件列表被用于存放邮件的名字,该列表本身可以进行排序、合并或清除(基于菜单的动作),但是,它不会通过用户的交互被拖动和删除。
        当设计者满意地认为已经定义了所有的重要对象和动作(对一次设计迭代而言)时,便可以开始进行屏幕布局。与其他界面设计活动一样,屏幕布局是一个交互过程,其中包括:图标的图形设计和放置、屏幕描述性文字的定义、窗口的规格说明和标题,以及各类主要和次要菜单项的定义等。如果一个真实世界的隐喻适合于该应用,则在此时进行说明,并以补充隐喻的方式来组织布局。
        为了对上面的设计步骤提供简明的例证,我们考虑SafeHome系统的一个用户场景。下面是界面的初步用例(由房主写的)描述。

        初步用例: 我希望通过Internet在任意的远程位置都能够访问SafeHome系统。使用运行在笔记本上的浏览器软件(当正处于工作或者旅行状态时),我可以决定报警系统的状态、启动或关闭系统、重新配置安全区以及通过预先安置的摄像机观察住宅内的不同房间。
 
        为了远程访问SafeHome,我需要提供标识符和密码,这些定义了访问的级别(如并非所有用户都可以重新配置系统)并提供安全保证。一旦确认了身份,我就可以检查系统状态,并通过启动或关闭SafeHome系统改变状态。通过显示住宅的平面图,观察每个安全传感器,显示每个当前配置区域以及修改区域(必要时),可以重新配置系统。通过有策略地放置摄像机以观察房子内部。通过对每个摄像机进行摇动和变焦以提供房子内部的不同视角。
        基于这个用例,确定房主的任务、对象和数据项如下:

  •         访问SafeHome系统。
  •         输入ID和密码实现远程访问。
  •         检查系统状态。
  •         启动或关闭SafeHome系统。
  •         显示平面图和传感器位置。
  •         显示平面图上的区域。
  •         改变平面图上的区域。
  •         显示建筑平面图上的视频摄像机位置。
  •         选择用于观察的视频摄像机。
  •         观察视频图像(每秒4帧)。
  •         摇动或变焦摄像机。

        从房主的这个任务清单中抽取出对象和动作。所提到的大部分对象都是应用对象。然
而,视频摄像机位置(源对象)被拖放到视频摄像机(目标对象)以创建视频图像(视频显示的窗口)。

        为视频监控设计的屏幕布局初步草图如图所示°。为了调用视频图像,需选择显示在监控窗口中的建筑平面图上的视频摄像机位置图标C。在这种情况下,起居室(LR)中的摄像机位置被拖放到屏幕左上部分的视频摄像机图标处,此时,视频图像窗口出现,显示来自位于起居室中的摄
像机的流视频。变焦和摇动控制条用于控制视频图像的放大和方向。为了选择来自另一个摄像机的图像,用户只需简单地将另一个不同的摄像机位置图标拖放到屏幕左上区域的摄像机图标上即可。

建议
        尽管自动化的工具在开发布局原型中十分有用,但有时候铅笔和纸张也是需要的。

        所显示的布局草图需以菜单条上每个菜单项的扩展来补充,指明视频监控模式(状态)
有哪些可用的动作。在界面设计过程中,将创建用户场景中提到的房主的每个任务的一组完
整草图。


2  用户界面设计模式
        图形用户界面已经变得如此普遍,以至于涌现出各式各样的用户界面设计模式。设计模
式是一种抽象,描述了特定的、界限明确的设计问题的解决方案。
        作为通常碰到的界面设计问题的一个例子,考虑用户必须一次或多次输入日历日期这种
情况,有时候需要提前输入月份。对于这个简单的问题,有很多可能的解决方案,为此也提
出了很多种不同的模式。Laakso[Laa00]提出了一种称为CalendarStrip的模式,此模式生成
一个连续、滚动的日历,在这个日历上,当前日期被高亮度显示,未来的日期可以在日历上
选择。这个日历隐喻在用户中具有很高的知名度,并提供了一种有效的机制,可以在上下文
环境中设置未来的日期。
        在过去的十年间,人们已经提出了很多用户界面设计模式。此外,Erickson[Eri08] 提供
了许多基于Web的文献资料。        

        在进行用户界面设计时,几乎总会遇到以下四个问题:系统响应时间、用户帮助设施、错误信息处理和命令标记。不幸的是,许多设计人员往往很晚才注意到这些问题(有时在操作原型已经建立起来后才发现有问题),这往往会导致不必要的反复、项目拖延及用户的挫折感,最好的办法是在设计的初期就将这些作为设计问题加以考虑,因为此时修改比较容易,代价也低。

        响应时间。系统响应时间包括两个重要的属性:时间长度和可变性。如果系统响应时间过长,用户就会感到焦虑和沮丧。系统时间的可变性是指相对于平均响应时间的偏差,在很多情况下这是最重要的响应时间特性。即使响应时间比较长,响应时间的低可变性也有助于用户建立稳定的交互节奏。例如,稳定在1秒的命令响应时间比从0.1秒到2.5秒不定的响应时间要好。在可变性到达一定值时,用户往往比较敏感,他们总是关心界面背后是否发生了异常。

引述
        当试图设计一些十分简单的东西时,人们经常犯的共性错误就是低估了笨人的智慧。
                                                                                                              ——  Douglas Adams

        帮助设施。几乎所有计算机交互式系统的用户都时常需要帮助。现代的软件均提供联机帮助,用户可以不离开用户界面就解决问题。
        错误处理。通常,交互式系统给出的出错消息和警告应具备以下特征:(1)以用户可以理解的语言描述问题;(2)应提供如何从错误中恢复的建设性意见;(3)应指出错误可能导致哪些不良后果(比如破坏数据文件),以便用户检查是否出现了这些情况(或者在已经出现的情况下进行改正);应伴随着视觉或听觉上的提示,并且永远不应该把错误归咎于用户。
        菜单和命令标记。键入命令曾经是用户和系统交互的主要方式,并广泛用于各种应用。现在,面向窗口的界面采用点击(point)和选取(pick)方式,减少了用户对键入命令的依赖。但许多高级用户仍然喜欢面向命令的交互方式。在提供命令或菜单标签交互方式时,必须考虑以下问题:

  • 每个菜单选项是否都有对应的命令?
  • 以何种方式提供命令?有三种选择:控制序列(如Alt+P)、功能键或键入命令。
  • 学习和记忆命令的难度有多大?命令忘了怎么办?
  • 用户是否可以定制和缩写命令?
  • 在界面环境中菜单标签是否是自解释的?
  • 子菜单是否与主菜单项所指功能相一致?
  • 有适合于应用系列内部的命令使用约定吗?

        应用的可访问性。随着计算型应用变得无处不在,软件工程师必须确保界面设计中包含使得有特殊要求的用户易于访问的机制。对于那些实际上面临挑战的用户(和软件工程师)来说,由于道义、法律和业务等方面的原因,可访问性是必需的。有多种可访问性指导方针(如[W3C03])一很多都是为WebApp设计的,但这些方针经常也能应用于所有软件--为设计界面提供了详细的建议,以使界面能够达到各种级别的可访问性。其他指南(如[App13]、[Mic13])对于“辅助技术”提供了专门的指导,这些技术用来解决那些在视觉、听觉、活动性、语音和学习等方面有障碍的人员的需要。

        国际化。软件工程师和他们的经理往往会低估建立一个适应不同国家和不同语言需要的用户界面所应付出的努力和技能。用户界面经常是为一个国家和一种语言所设计的,在面对其他国家时只好应急对付。设计师面临的挑战就是设计出“全球化”的软件。也就是说,用户界面应该被设计成能够容纳需要交付给所有软件用户的核心功能。本地化特征使得界面能够针对特定的市场进行定制。
        软件工程师有多种国际化指导方针(如[IBM13])可以使用。这些方针解决了宽度设计问题(例如,在不同的市场情况下屏幕布局可能是不同的),以及离散实现问题(例如,不同的字母表可能生成特定的标识和间距需求)。对于几十种具有成百上千字母和字符的自然语言的管理,已经提出的Unicode标准[Uni03]就是用来解决这个挑战性问题的。
 

软件工具    用户界面开发

[目标] 用户界面开发工具使得软件工程师只需做有限的定制开发就可以建立复杂的功能就可以建立用户界面。
[机制] 现代用户界面由一组可复用的构件组成,这些构件与一些提供特殊特性的定制构件相结合。大多数用户界面的开发工具能够通过使用“拖放”功能来完成界面的设计。换句话说,开发人员选择预定义的功能(例如,表格构造器、交互机制、命令处理),并将这些功能放置在所创建界面的环境中。
[代表性工具] θ

  • LegaSuite GUI。由Seagull Software(http://www-304.ibm.com/partnerworld/gsd/sol-utiondetails.do?solution=1020&expand=true&lc=en)开发,能够创建基于浏览器图形用户界面。这些工具提供了对可复用构件的访问,并且通过选择工具上预定义的图形用户界面(GUI)并且提供了对过时界面的再造功能。
  • Motif Common Desktop Environment。由Open Group(www.osf.org/tech/desktop/cde/)开发,是一个集成的图形用户界面,用于开放系统桌面计算。它对数据、文件(图形化桌面)和应用系统的管理提供了单一的、标准的图形化界面。
  • Alita Design 8.0。由Altia(www.altia.com)开发,是一种可以在多种平台(例如,自动的、手持的、工业的)上创建图形用户界面(GUI)的工具。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值