第五章界面设计5.1 界面设计原则n人机交互界面设计所要解决的问题是如何设计人机交互系统，以便有效地帮助用户完成任务。n以用户为中心的设计中，用户是首先被考虑的因素。一个成功的交互系统必须能够满足用户的需要。5.1 界面设计原则n设计开发人员和管理人员更多关注用户应该如何执行任务，而不是用户以何种偏好执行任务n用户的偏好是由用户的经验、能力和使用环境决定的，这对于设计过程相当重要主要内容n界面设计原则n理解用户n以用户为中心的设计流程n站在用户的立场任务分析n以用户为中心的界面设计5.1 界面设计原则根据表现形式，用户界面可以分为：n命令行界面n图形界面n多通道用户界面5.1 界面设计原则n命令行界面可以看作是第一代人机界面，其中人被看成操作员，机器只做出被动的反应，人用手操作键盘，输入数据和命令信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。n图形界面可看作是第二代人机界面，是基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。基于鼠标和图形用户界面的交互技术极大地推动了计算机技术的普及5.1 界面设计原则n多通道用户界面则进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。5.1.1 图形用户界面的主要思想n桌面隐喻n所见即所得n直接操纵1. 桌面隐喻n桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。n图例可以代表对象、动作、属性等概念n这些概念可以用文字也可以用图例来表示n尽管文本表示某些抽象概念有时比用图例表示要好n好的图例比文本更易于辨识；n与文本相比，图例占据较少的屏幕空间1. 桌面隐喻-图例表示的优点n优点：图例还可以独立于语言-因其具有一定的文化和语言独立性，可以提高目标搜索的效率隐喻的表现方法n静态图标流行的图形用户操作系统大多采用，如画有磁盘的图标表示存盘操作；打印机表示打印。直观易懂，单击图标即可n动画n视频隐喻分类n直接隐喻：隐喻本身就带有操纵的对象。如Word绘图工具中的图标，代表图形绘制操作n工具隐喻：磁盘图标（隐喻存盘操作），打印机图标（隐喻打印操作） 简单形象直观，最普遍n过程隐喻：通过描述操作的过程来暗示该操作，如Word中撤销和恢复图标1. 桌面隐喻n图形用户界面设计中，隐喻一直非常流行，如文件夹及垃圾箱。n晦涩的隐喻不仅不能增加可用性，反而会弄巧成拙。n隐喻的缺点：占用屏幕空间，难以表达和支持比较抽象的信息2. 所见即所得n在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。大多数图形编辑软件和文本编辑器都具有该界面n弊端：屏幕空间或颜色的配置方案与硬件设备所提供的配置不一样，两者之间很难产生正确的匹配，如打印机的颜色域小于显示器的颜色域，打印质量往往较低3. 直接操纵n直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。n直接操纵的对象是命令、数据或是对数据的某种操作直接操纵特性n直接操作的对象是动作或数据的形象隐喻 这种形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容n用指点和选择代替键盘输入 操作简便，速度快捷； 不用记忆复杂的命令，对于非专业很重要直接操纵特性n操作结果立即可见 用户可以及时修正操作，逐步往正确的方向前进n支持逆向操作 有了直接操纵后，会更容易出现错误操作 逆向操作可以很方便地恢复到出现错误之前的状态，有助于初学者探索直接操纵用户界面n图形用户界面和人机交互过程极大地依赖于视觉和手动控制的参与，因此具有强烈的直接操作特点n直接操纵用户界面更多地借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。有利于解决问题和进行学习n不用过多为计算机语义和句法分心n尊重用户的使用经验，易于理解和使用5.1.2 图形用户界面设计的一般原则n界面要具有一致性:风格一致，简洁和谐n常用操作有快捷方式:(用户界面)简洁高效n提供必要的错误处理功能:纠正错误,取消n提供信息反馈:重要操作，避免无所适从n允许操作可逆:允许恢复，对出错宽容n设计良好的联机帮助:n合理划分并高效地使用显示屏幕:放大缩小5.2 理解用户5.2.1用户的含义n简单的说，用户是使用某种产品的人，其包含两层含义：1）用户是人类的一部分； 2）用户是产品的使用者。n产品的设计只有以用户为中心，才能得到更多用户的青睐。5.2 理解用户5.2.1用户的含义n衡量一个以用户为中心的设计的好坏，关键点是强调产品的最终使用者与产品之间的交互质量n它包括三方面特性：产品在特定使用环境下为特定用户用于特定用途时所具有的1有效性（Effectiveness）、2效率（Efficiency）和3用户主观满意度（Satisfaction）。n延伸开来，还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。5.2 理解用户5.2.1用户的含义以用户为中心的设计，其宗旨就是：n在软件开发过程中要紧紧围绕用户，n在系统设计和测试过程中，要有用户的参与，以便及时获得用户的反馈信息，根据用户的需求和反馈信息，不断改进，直到满足了用户的需求。5.2.2 用户体验n用户体验（User Experience，UX）通常是指用户在使用产品或系统时的全面体验和满意度。n用户体验多半与交互设计有关5.2.2 用户体验n用户体验主要有下列四个元素组成：品牌（Branding）使用性（Usability）功能性（Functionality） 内容（Content）n四个元素单独作用都不会带来好的用户体验，综合考虑，一致作用则会带来良好的结果5.2.2 用户体验n实际操作中的用户体验建设，更多是一种“迭代”式的开发过程：按照某种原则体系设计功能、版面、操作流程；n在系统完成后，还要通过考察各种途径的用户反馈，经历一个相对长时间的修改和细化过程5.2.2 用户体验影响用户体验的因素很多，包括：n现有技术上的限制，设计人员必须优先在相对固定的UI框架内进行设计n设计的创新，用户的接受程度上有风险n开发进度表n设计人员容易认为他们了解用户需要，其实不然5.2.2 用户体验要达到良好的用户体验，理解用户是第一步要做的：n用户本身不同n用户知识不同这在系统设计之初进行充分了解5.2.2 用户体验影响用户体验的因素很多，包括：n现有技术上的限制，设计人员必须优先在相对固定的UI框架内进行设计n设计的创新，用户的接受程度上有风险n开发进度表n设计人员容易认为他们了解用户需要5.2.3 用户的区别1. 用户的分类n偶然型用户：n生疏型用户：n熟练型用户：n专家型用户：5.2.3 用户的区别1. 用户的分类n偶然型用户：没有计算机应用领域的专业知识，也缺少计算机系统基本知识的用户。n生疏型用户：他们更常使用计算机系统，因而对计算机的性能及操作使用，已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解，不太熟悉，因此对新系统而言，他们仍旧是生疏用户。5.2.3 用户的区别1. 用户的分类n熟练型用户：这类用户一般是专业技术人员，他们对需要计算机完成的工作任务有清楚地了解，对计算机系统也有相当多的知识和经验，并且能熟练地操作、使用。n专家型用户：对需要计算机完成的工作任务和计算机系统都很精通的，通常是计算机专业用户，称为专家型用户。5.2.3 用户的区别1. 用户的分类不同的用户会有不同的经验、能力和要求：n偶然和生疏型用户要求系统给出更多的支持和帮助；n熟练型和专家型用户要求系统运行效率高、能灵活使用n计算机和领域经验对易于学习和易于使用的影响2. 计算机领域经验和问题领域经验的区别5.2.4 用户交互分析 在理解用户的基础上，需要针对软件的功能和目标用户，全面分析用户的交互内容，主要包括：n产品策略分析、n用户分析、n用户交互特性分析1.产品策略分析n确定产品的设计方向和预期目标，特别要了解用户对设计产品的期望n同类产品的竞争特点，用户使用同类产品的交互体验：正面的和负面的体验，从而得出产品交互设计的策略2. 用户分析n深入而明确地了解产品的目标用户。n确定目标用户群就可以了解到目标用户群体区别于一般人群的具体特征，年龄区间、文化背景、职业特征、计算机使用经验、同类产品使用经验、爱好n在此基础上，找到“典型”用户。(更为具体)3. 用户交互特性分析n与用户交流的基础上，了解目标用户群体的分类情况及比例关系，对用户特性进行不断的细化，根据用户需求的分布情况，可以进行一些交互挖掘，如：问卷、投票、采访、直接用户观察等。n得出准确、具体的用户特征，从而可以有的放矢设计5.3 设计流程5.3.1用户的观察和分析n通过观察用户是如何理解内容和组织信息，可以帮助人们交互设计更合理的组织信息。主要的方法有：n情境访谈（Contextual Interviews）n焦点小组（Focus Groups）n单独访谈（Individual Interviews）5.3 设计流程5.3.1用户的观察和分析n情境访谈（Contextual Interviews）走进用户的现实环境，尽量了解你的用户的工作方式、生活环境等情况。n焦点小组（Focus Groups）组织一组用户进行讨论，让你更了解用户的理解、想法、态度和需求。n单独访谈（Individual Interviews）一对一的用户讨论，让你了解某个用户是如何工作，使你知道用户的感受、想要什么及其经历等。5.3.2 设计n对用户的观察和分析为设计提供了丰富的背景素材，应对这些素材进行系统分析常用的素材分析方法是对象模型化，即将用户分析的结果按照讨论的对象进行分类整理，并且以各种图示的方法描述其属性、行为和关系。5.3.2 设计n对象抽象模型可以逐步转化为不同具体程度的用户视图。比较抽象的视图有利于进行逻辑分析，称为低真视图（Low-fidelity Prototype）；比较具体的视图更接近于人机界面的最终表达，称为高真视图（High-fidelity Prototype）。5.3.2 设计n随着设计理念和思路发展，设计师会继续收集用户反馈的信息 用户直接参与或向其展示产品的原型n随着原型的发展，用户可能被邀请“漫步”其中，提出整体上是否满足用户的需要n对意见、反馈样本进行分析评估，把得到的结果推展到设计思想，以进行下一轮的设计和评估。不停迭代，直至满意为止n随着产品进入实施阶段，设计师对高真设计原型进行最后的调整，并且撰写产品的设计风格标准（Style Guide），产品各个部分风格的一致性由该标准保证。n产品实施或投入市场后，面向用户的设计并没有结束，而是要进一步的搜集用户的评价和建议，以利于下一代产品的开发和研制。5.3.3 实施5.4 任务分析n用户使用产品的目的是能够高效地完成他们所期望的工作，而不在于使用产品本身。n产品的价值在于其对于用户完成任务过程的帮助。n一般而言，用户在自己的知识和经验基础上，建立起完成任务的思维模式；n如果产品的设计与用户的思维模式相吻合，用户只需要花费很少的时间和精力就可以理解系统的操作方法，5.4 任务分析n能够很快熟练使用以达到提高效率的目的n反之，如果产品的设计域用户的思维模式不一致，用户就需要花费较多的时间、精力来理解系统的设计逻辑，学习系统的操作方法，这些时间和精力 不能直接服务于用户完成任务的需要，显然会影响用户的使用体验；n进一步，使用上的偏差造成用户完成任务的低效与失误，促使用户放弃该产品5.4 任务分析n任务分析是交互设计至关重要的环节，在以用户为中心的设计中，关心的是如何从用户那里理解和获取用户的思维模式，进行充分、直观的表达，并用于交互设计。n描述用户行为的工具有很多，目前经常提到的是通用标识语言UML（Unified Markup Language）。nUML 2.0共有10种图示，分别为组合结构图、用例图、类图、序列图、对象图、协作图、状态图、活动图、组件图和部署图，它们分别用以表现不同的视图。n在任务分析中使用UML工具，可以清晰地表达一个交互任务诸多方面的内容，包括交互中的使用行为、交互顺序、协作关系、工序约束等。5.4 任务分析5.4.1 使用行为分析n使用行为分析就是要理解系统中每个参与者及其所需完成的任务，即分析系统所涉及的问题领域和系统运行的主要任务，分析使用该系统主要功能部分的是哪些人，谁将需要该系统的支持以完成其工作。n使用行为分析一般使用例图描述，它从参与者的角度出发来描述一个系统的功能，主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求。图书管理系统为例参与者：n读者n图书管理员n图书管理系统的管理员分别就使用行为进行分析实例-读者请求服务用例实例-图书管理员处理借书、还书的用例实例-系统管理员进行系统维护用例5.4.2 顺序分析n每个使用行为都是由若干步骤组成的，这些步骤可以使用顺序图进行描述。n顺序图描述了完成一个任务的典型步骤；n它可以按照交互任务发生的时间顺序，把用例表达的需求转化为进一步、更加正式层次的精细表达；n用例常常被细化为一个或更多的顺序图。读者借书的时序图5.4.3 协作关系分析n协作图着重显示了某个用户行为中各个系统元素之间的关系，而不再重点强调各个步骤的时间顺序。5.4.4 工序约束陈述n用户完成任务的步骤又被称为工序，某些工序之间的顺序是有一些逻辑关系的。工序约束陈述是工序分析的最直接的方法。5.4.4 工序约束陈述n本案例中可能存在如下工序约束：系统管理员必须先增加借阅者信息，读者才能登陆。系统管理员必须先增加书籍信息，读者才能查阅。读者借阅信息生成后，图书管理员才能去书库取书。读者必须先在系统中办理借阅，才能取书。读者必须先借书才能还书。5.4.5 用户任务一览表n当所有任务分析完毕，就可以用一览表的形式描述系统中的所有用户及其可能需要完成的所有任务。任务读者图书馆管理员系统管理员书籍信息查询、读者信息查询借书还书书籍预定增加、删除或更新书目增加、删除书籍增加、删除或更新读者帐户信息5.4.6 任务金字塔n任务金字塔描述了不同层次的任务之间的关系。任何一个任务都可能包括若干子任务，从而构成金字塔状的结构。n以读者查询图书为例5.4.7 故事讲述和情节分析n通过描述实际的任务场景可以非常直观的进行任务描述，便于与用户的交流，n并可以帮助分析设计者和真正用户之间对任务的不同理解。5.4.7 故事讲述和情节分析n故事讲述（story telling）可以是真实的案例，也可以是虚构的情节，甚至可以是对理想场景的虚构，n关键是使这些故事能够典型的反映交互任务，具有充分的代表性。5.4.7 故事讲述和情节分析n情节分析（scenario analysis）是对故事所反映的交互任务的理性分析，分离出故事中所描述的角色、目标、环境、步骤、策略、感情等诸方面的因素。5.5 以用户为中心的界面设计 Gould、Boies和Lewis于1991年提出了以用户为中心设计的四个重要原则。 n及早以用户为中心：n综合设计：n及早并持续性地进行测试：n反复式设计：5.5 以用户为中心的界面设计 n及早以用户为中心：设计人员应当在设计过程的早期就致力于了解用户的需要。 n综合设计：设计的所有方面应当齐头并进发展，而不是顺次发展，使产品的内部设计与用户界面的需要始终保持一致。 5.5 以用户为中心的界面设计 n及早并持续性地进行测试：当前对软件测试的唯一可行的方法是根据经验总结出的方法，即：若实际用户认为设计是可行的，它就是可行的。n通过在开发的全过程引入可用性测试，可以使用户有机会在产品推出之前就设计提供反馈意见。 5.5 以用户为中心的界面设计 n反复式设计：大问题往往会掩盖小问题的存在。设计人员和开发人员应当在整个测试过程中反复对设计进行修改。5.5 以用户为中心的界面设计 以用户为中心的设计方法有很多种，包括n图形用户界面设计与评估（Graphical User Interface Design and Evaluation，GUIDE）n以用户为中心的逻辑交互设计（Logical User-Centred Interaction Design，LUCID）5.5 以用户为中心的界面设计 n用于交互优化的结构化用户界面设计（Structured User-Interface Design for Interaction Optimisation，STUDIO）n以使用为中心的设计（Usage-Centered Design）OVID设计nIBM公司采用的OVID方法，通过对用户、目标和任务的分析，系统指导人机交互界面设计，以达到用户满意的设计要求nOVID中涉及三个模型，模型之间相互关联：设计者模型编程者模型用户概念模型OVID设计三模型n设计者模型：就是用对象、对象之间的关系等概念来表达目标用户意图的概念模型n编程者模型：广泛应用于面向对象的开发方法中，用于表示和实现构成系统的类n用户概念模型：表示用户对系统的理解，依赖于用户的交互经验n实际开发中，需求分析，设计者从用户获得对系统的理解，融合到设计者模型中，确保界面设计能反映用户意图OVID设计nOVID方法的关键是确定交互中涉及的对象，并把这些对象组织到交互视图中。n其中对象来自用户的概念模型，视图是支持特定用户任务的对象的有机组合，而交互就是那些交互界面中对对象执行的操作n对象从用户概念模型的人物分析中获得，并被转化到设计者的对象模型中，而交互是界面中执行对象操作的必须动作。OVID设计n如果该模型能够有效地设计和实现，用户就可以通过与系统的交互理解设计者模型所要表达的信息；n这些模型可以使用面向对象概念去表达5.5.1 对象建模分析n对象建模分析是将系统和用户任务分析的结果转化为用户界面设计的第一步；n建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来；n分析则是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间的关系。n网上机票订购系统的界面开发为例：5.5.2 视图抽象设计n视图表达了人与系统交互过程中某一时刻系统的状态，以及用户在这一时刻可能改变系统状态的方法n视图抽象设计通过组合概念模型中的对象和对象操作，提供系统运行的方法和方式，为具体的设计提供指导，并要为系统的不同实施方案提供灵活的界面选择。5.5.2 视图抽象设计n视图抽象设计阶段就是仔细研究系统的对象模型，列出其系统状态，对每个视图抽象出其中涉及的对象，以及对象的属性和行为n订机票的过程基本上由用户登录、查询航班、预订机票、支付、出票等具体交互过程组成。5.5.2 视图抽象设计n在线机票订购例子中完成上述交互的视图可能包括：用户查询航班视图，航班信息列表视图，用户选中的某个具体航班的信息视图，订购信息填写视图，支付视图，交易成功反馈和出票视图等。n涉及的对象（航班对象），属性（城市、日期、机票类别、出票城市），操作（查询）5.5.3 概要设计n针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。n实际设计中，这些视图通常是用铅笔画在纸上，这样做速度快，而且修改起来也比较方便。5.5.3 概要设计n在概要设计阶段，因为知道了具体的实现条件，就可以针对这种交互的用户考虑下面一些可用性的问题：航班信息如何展现进一步的操作如何展示考虑与其他界面可能的关联接口查询条件航班号起飞城市到达城市起飞时间到达时间全票票价剩余票额CA1100济南北京17：3519：1050020订票操作员B保存操作员B打印操作员B上一页操作员B下一页操作员B新查询操作员B结果中查询操作员B5.5.4 视图的关联设计n任何一个人机交互系统的界面都可能包括若干状态，用户在不同界面状态下根据自己完成任务需要进行不同的操作；n很多交互任务需要从一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和功能，并将不同交互视图之间的联系和状态转换关系整理清楚。n订票业务网站各视图之间的关系图：5.5.5 视图的全面设计n确定各个视图的具体内容和大致布局，n并在每个视图上明确体现与其他视图的关系，保证系统的整体性和和谐性。n然后可以借助具体的开发工具进行界面的实际设计。5.5.5 视图的全面设计浏览器交互方式下，Web界面视图的整体性主要通过下列几点保证：n使用相同的界面风格，包括颜色、字体、布局、行距，间距，导航条等；n使用相同的识别标志，如公司LOGO，底纹图案，版权和联系方式等；5.5.5 视图的全面设计n系统视图结构清晰，在每个界面上明确表示当前视图与整体系统的关系；n使用一致的术语，特别是在不同语言的版本之间保持信息翻译的一致。5.5.5 视图的全面设计n视图之间的转化是通过用户的交互动作实现的，如在交互元素上双击，单击按钮或点击链接等n在全面设计阶段要将各个视图间的转换条件和执行的交互动作予以明确说明习题n请简要论述界面设计的一般原则。n请描述任务分析主要包括哪些内容？n利用本章介绍的人机交互界面设计方法，完成网上银行系统的交互界面分析和设计，包括账户查询、存款、取款、转账等业务流程。该系统要能够同时支持浏览器方式和电话银行方式（可参考互联网上实际网上银行的设计）。