《About Face 4 交互设计精髓》读书笔记

《About Face 4》作为交互设计的经典书目,涉及设计流程、交互行为、交互细节的方方面面,内容丰富,却也相当庞杂。尤其在翻译极其糟糕的情况下,学习者太多的精力会放在理解生硬的译文上,而读完一章甚至全书后却不容易对整个知识体系有一个相对完整的脉络。因此这篇笔记主要是针对各章节内容的核心内容摘录,作为温故知新的目录也好,作为反复精读的索引也好。希望对喜欢交互设计的你们有用。今后的学习中会逐渐对其中的一些条目结合实践进行补充和完善,并添加更多自己的心得体会。

注:标注星号(*)的内容为书中重点列出的“设计原则”

Part 1 目标导向设计

1 数字产品的设计过程

1.1 产品行为恶劣的后果

  1. 数字产品粗鲁无礼:指责、质问等无礼的对话或提示,缺乏对用户需求的预测

  2. 数字产品要求人们像计算机一样思考:假设用户非常了解技术和术语,出现莫名其妙的“行话”

  3. 数字产品马虎大意:“忘记”用户的操作,或对用户的操作缺乏理解,过于容易触发危险的命令,过于杂乱的外观

  4. 数字产品要求人来干重活:大量重复操作,如复制或重新输入

1.2 为何数字产品表现如此糟糕

  1. 重点错置:产品管理和开发团队工作重点错置——需求与用户期望脱钩,仅根据市场调查猜测(而很少有用户能清晰地描述自己的需求),开发人员的任务诉求与用户缺乏一致性,收到的指示不完整、缺乏远见。

  2. 无视产品的真实用户:不了解哪些用户的基本需求能推动产品成功,未能很好地理解如何取悦用户

  3. 利益冲突:开发团队既要设计又要打造用户体验时存在利益冲突,开发者需要在易于变成和易于使用之间做出选择

  4. 设计流程缺失:

    1. 缺少可靠的生产设计流程,对客户需求进行收集、分析和利用过程的缺失。产品功能、如何与用户交流等决定更像是构建过程中的副产品

    2. 错误地让用户直接融入开发过程是将设计知识同领域知识混为一谈,设计问题不该交由用户解决,听一听用户反馈的问题,远比直接从用户处得到拟解决方案更有价值。

1.3 规划并设计产品行为

  1. 识别用户目标:

    1. 现代产品开发三原则:功用性(技术)、可行性(管理)、称许性(设计)

    2. 多数人都有简单的个人目标,当产品设计能满足用户个人目标时,商业目标也会更有效地实现

    3. 用户界面的常见问题:让用户感觉自己很愚蠢、导致用户犯大错、费很大力气才能有效操作、无法带来愉快的体验

    4. 当编写了大量重要切不容变更的代码后,想让程序服从于目标就不是那么容易了。

  2. 目标 vs. 任务和活动:目标受人类动机驱使,随时间推移变化很慢,甚至没有变化,行动和任务则易于变化,因为几乎完全依赖于手头的技术水平。完全按照对活动和任务的理解来设计存在很大风险,而通过目标来看问题,便可利用现有科技消除不相关的任务。

  3. 设计要满足情境中的目标:优秀的设计让用户更有效率。

1.4 实现模型和心理模型

  1. 实现模型:有关机器和程序实际的运作方式,映射技术。设计出能反映实现模型的软件更为简单,但没有为用户提供连贯机制,来完成其目标。

  2. 心理模型:使用产品时,用户无需了解复杂机制、工作原理的所有细节,反映用户的愿景。

  3. 呈现模型(设计师模型):

    1. 呈现模型:软件呈现的计算机功能独立于计算机的真实动作。

    2. *用户界面应该基于用户心理模型,而不是实现模型。

    3. 目标导向的交互设计反映了用户的心理模型。

1.5 目标导向设计概论

  1. 消除隔阂:

    1. 设计提供产品定义

    2. 设计师应学着成为研究者,设计师最强有力的工具是同理心

    3. 研究经过模型、需求、框架等阶段才能转化为具体蓝图

  2. 设计过程概述:

    1. 研究:实地研究(观察+情境访谈)、研究分析、相关者及专家访谈(第2章)。

    2. 建模:将研究和访谈中发现的行为和工作流模式综合到领域和用户模型中,人物模型是基于场景的叙述式方法中的主角,基于用户需求确定不同功能的优先级(第3章)。

    3. 需求定义:以场景为基础,将人物模型的目标和需求置于首位,通常通过情境场景完成,此外还要考虑人物模型使用产品的技巧和体能状况。(第4章)

    4. 框架定义:采用通用的交互设计原则,对通用解决方案进行分类,加上情景场景,形成一套交互框架。完成需求描述后即可将其转变为设计元素,组织为设计草图和行为描述。交互框架成型时,便可开始着手创建一些视觉框架。

    5. 提炼:使用关键路径场景(走查)验证场景,顶点是详细的设计文档——一份形式和行为规范或蓝图。

    6. 开发支持:及时回答开发者的问题,对设计进行调整和取舍。

  3. 产品成功的关键是目标,不是特性:*交互设计不是凭空猜测

2 理解问题:设计研究

2.1 设计研究中的定性研究与定量研究

  1. 定性研究的价值:

    1. 帮助理解:用户行为能力、产品领域、领域词汇及相关社会问题、已有产品

    2. 利于进展:提供设计依据、有助团队共识、更全面的决策

    3. 为重要问题更快、更低成本地提供答案:产品如何融入用户生活背景、用户的基本目标与基本任务、能吸引用户的体验及其融入产品的方式、用户易遇到的问题

  2. 定量研究的利弊:

    1. 定量数据而更加明晰,但在定义什么产品能够抓住市场机遇时,效果不好,且不能解释行为产生的原因

    2. 定量分析能指导设计研究:定量分析并非一无是处,如市场研究可帮助评估产品可行性、选择访谈目标、发现设计问题。

    3. 用户研究有益于市场研究:行为模型的市场规模研究是单靠定性研究无法获取的,可采用量化技术填补缺失信息。

2.2 目标导向设计研究

  1. 启动会:提出初始关键问题的好机会——产品、用户、用户需要、用户重要性分类、挑战、竞争对手、熟悉产品领域所需文献资料

  2. 文献综述:查阅内部资料、行业报告、网络搜索

  3. 产品/原型和竞争者审核:检查产品现有版本或原型、主要竞争对手

  4. 利益相关者访谈:利益相关者即委托设计方的所有关键成员,有助于启发开展用户研究,最有效的方式是单独进行,一对一能促使一些利益相关者畅所欲言。可收集的重要信息包括:产品初期设想、预算和日程计划、技术限制和机遇、商业驱动、利益相关者对用户的看法

  5. 主题专家(SME,产品所在领域的权威人士)访谈

    1. 许多主题专家本身就是产品或上一代产品的用户,但应注意其看法可能有所歪曲

    2. 主题专家通常是专业用户,看法可能倾向于专家级用户

    3. 主题专家知识渊博,但不是设计师,他们对产品改进提出的想法不乏有效信息,但对设计师更有价值的信息是,哪些问题诱发了他们的拟解决方案。

    4. 主题专家在复杂或者专业领域必不可少

    5. 确保设计过程的不同阶段都能得到主题专家的帮助

  6. 客户访谈:对消费品而言客户往往等于用户,对企业、医疗、技术产品而言则往往有所分离。访谈客户应了解:购买产品的目的、当前解决方案中的难题、决策过程、管理产品中的角色、产品所在领域相关问题和词汇。

  7. 用户访谈:包括现有用户和潜在用户。应了解:产品如何适应用户生活工作流程、用户完成工作所需知道的信息、产品需要完成和不能完成的任务和活动、产品使用动机和期望、心理模型、现有模型的问题。

  8. 用户观察:大多数用户不能准确地评估自己的行为,因此可以直接观察用户,将访谈和观察结合起来。可考虑利用录音或摄像,但不要太过明显以引起用户分神或表现得不自然。

2.3 访谈并观察用户

  1. 情境调查:

    1. 情境:尽量选择用户正常的工作环境

    2. 伙伴关系:采取合作的方式探索,观察和讨论可交替进行

    3. 解读:综合分析,解读信息,但应避免不经用户证实而做出的主观臆断

    4. 焦点:巧妙地引导访谈以利于捕捉重要数据,而不是机械提问或完全自由发挥

  2. 改进情境调查的措施:

    1. 缩短访谈过程:一个小时足够收集必要数据。一组(6个)多类型用户相处各一小时优于与单一用户相处一整天。

    2. 小规模设计团队:同一组设计师依次进行每场访谈的效果更好。

    3. 首先找出用户目标,确定目标的轻重缓急

    4. 超越商业情境,在消费者领域调查也可行。

  3. 为人种学访谈做准备:

    1. 确定候选人:确定多样化、合适的用户样本类型,以此为起点选择候选人

    2. 人物模型假设:基于可能的行为模式及区分这些模式的因素。解决:哪些不同类的人会使用该产品、其需求和行为会发生哪些变化、需要探索哪些行为和环境。

    3. 商业和消费领域的角色:商业情境中,角色大致等于工作描述,通过职位类别获得一些初始类型相对容易。消费情境中,用户类型源于用户态度、能力、生活方式、生活阶段。

    4. 行为和人口统计学变量:人物模型假设应建立在不同变量基础上

    5. 技术专业知识、行业专业知识之间的不同是行为区分的一个重要类型

    6. 环境因素:用户就职组织之间的文化差异,对商业产品尤其显著——规模、位置、产业、部门、IT部门规模设置、安全级别

    7. 做好计划:对企业或专业产品,每个假设的行为模式都要经过大约4~6次访谈才能得到证实或证伪,这些访谈可能重叠。对消费品则需要8~12次。

  4. 进行人种学访谈

    1. 接触访谈对象:与可接触到用户的利益相关者密切合作,或联系市场研究或可用性研究公司,或招募朋友或亲属。

    2. 访谈团队和时间:两位设计师参加,一个引导和简单记录,一个负责详细记录,团队访谈次数应在每天6次内,以留有时间总结和调整策略。

    3. 人种学访谈的阶段:早期探索领域知识为主、提问较为开放,中期开始提出开放式和明确的问题,后期调整假设、侧重封闭性问题。

  5. 人种学访谈基本方法:

    1. 在交互发生的地方进行:有助于了解发生的环境,留意访谈对象未提及的任务线索。

    2. 避免按照固定的问题提问:话题清单可能随着访谈进程而演变,可考虑目标导向型问题(目标、机会、优先级、信息)、系统导向型问题(功能、频率、偏好、失败、经验)、工作流程导向型问题(过程、频率、特殊情况)、态度导向型(期望、避免、动机)

    3. 假装成门外汉而非专家:不要害怕问一些肤浅的问题,做一个富有同理心、善于倾听的访谈者

    4. 采取开放式和封闭式问题相结合引导提问:开放式问题鼓励受访者详尽地回答问题,封闭式问题则鼓励简短的回答

    5. 首先关注目标,任务其次:理解用户行为的原因

    6. 避免把用户当设计师:引导访谈对象审视问题所在,但要避免受访者提出解决方案

    7. 避免讨论技术问题:不了解技术决策背后的目的就讨论技术问题没有任何意义

    8. 鼓励讲故事:鼓励讲述使用产品的典型和特殊案例

    9. 请求演示和讲解:请求受访者演示和讲解,或者展示与设计问题的相关内容,要格外留意现有设计中未碰到的需求或不足之处

    10. 避免诱导性问题:以免无意间让受访者产生偏见

    11. 访谈之后:比对、回顾、通览访谈笔记

2.4 定性研究的其他类型

  1. 焦点小组:将代表性用户聚集在一间屋子,询问一组结构化问题(在收集产品用途、如何使用产品、为何这样使用产品等信息上表现不佳,且用户倾向于达成一致性意见)

  2. 可用性测试:需要在较为完善和连贯的设计成品上进行

  3. 卡片分类:对一叠卡片进行分类、排序、安排事后交流

  4. 任务分析:用问卷调查或开放式访谈来深入理解人们目前如何执行具体的任务

3 为用户建模:人物模型和目标

3.1 为何要建模

  1. 人物模型是满足用户的最佳方式:为具有特定需要的特定个体类型设计。产品涵盖受众过多,只会增加所有用户的认知负担及导航成本。能够取悦某些用户的功能设置可能对其他用户造成困扰。

  2. 人物模型作为设计工具的优势:

    1. 确定产品功能、行为

    2. 为交流决策提供共同语言

    3. 利于就设计意见达成共识和承诺

    4. 可用于衡量设计效率

    5. 助力营销工作

  3. 人物模型有助于避免各种陷阱:

    1. 弹性用户:用户定义过于宽泛、被意见强势者扭曲、或聚焦在用户职衔而非具体原型上

    2. 自我参考设计:设计、开发人员将自己过多地代入设计

    3. 边缘功能设计:将边缘功能当做重点

3.2 人物模型为什么有效

  1. 人物模型以研究为基础:人物模型建立在对现实世界的观察上

  2. 人物模型代表特定产品的用户类型:跨产品人物模型不易实现,多数情况下,不同产品应单独研究和开发不同的人物模型,原型不等于模式化形象。

  3. 人物模型拓展了用户行为的范围:确定范围内具有典型性和确定性的行为模式。

  4. 人物模型有动机:人物模型要捕捉动机,把动机当成目标

  5. 人物模型可以代表用户之外的相关人士:不与用户界面直接交互的人物(如医疗产品与病人)、恶作剧者、避免为其服务的人物

  6. 人物模型是比其他用户模型更合适的设计工具:用户角色、用户信息、市场划分均有其局限性

3.3 理解目标

  1. 目标驱动使用模式:目标来自定性数据

  2. 用户目标和认知处理:产品设计应解决三个不同层次的认知和情感处理过程:本能、行为和反思

    1. 为本能反应设计:设计视觉外观、动作、声音,实际上是为情感设计(在特定情境下引起人们心理和情感上的反应,而不只是美学设计),对消费品和服务来说,有吸引力的用户界面通常是恰当的。

    2. 为行为而设计:交互设计的日常行为应作为设计重点,本能和反思层次起辅助作用

    3. 为反思而设计:满足用户动机和目标,以某种方式将用户以个人或文化关系与产品联系起来,引发深层次的反思

  3. 用户目标的三种类型:

    1. 体验目标(对应本能层次):使用产品所期望的感受或与产品交互的感受,包括产品视听特性、交互感、物理设计、微交互

    2. 最终目标(对应行为层次):使用产品时执行任务的动机,让用户感觉值得为此付出时间和金钱

    3. 人生目标(对应反思层次):人物模型长期的欲望、动机和自我形象的特征,设计师需要将人生目标转换为高层次的系统功能、正式的设计概念和品牌战略。有助于用户向人生目标迈进可以更决然地赢得用户。

  4. 用户目标是用户的动机:体验目标(本能)即用户想要感受什么,最终目标(行为)即用户想要做什么,人生目标(反思)用户想要成为什么。

  5. 非用户目标:

    1. 客户目标:消费品客户(用户的亲友)关注用户是否获得幸福感,企业客户(信息管理或采购人员)关注产品安全、维护、定制

    2. 商业目标:利润、市场占有率、留住现有客户、打败对手、高效、提供更多产品服务、保证知识产权

    3. 组织目标:教育大钟、筹集足够资金以维持运转

    4. 技术目标:降低软件创建、维护、伸缩性、扩展性等任务难度

  6. 成功的产品首先要满足用户目标:考虑产品实际用户的目标,而不是购买者或开发者的目标。不要让用户感觉自己愚笨

3.4 构造人物模型(十步)

  1. 根据角色对访谈对象分组:对企业应用,角色常与工作角色或指责相对应,消费产品则由家庭角色、态度、相关活动方法、兴趣、选择生活方式的能力等对应。

  2. 找出行为变量(15~30个):活动、态度、能力、动机、技能

  3. 将访谈主体和行为变量对应起来:有些变量可能呈带状,有些则为多个不连续的选择,将访谈者精确映射到区间某点上不如确定受访者之间的相对位置关系那么重要。

  4. 找出重要的行为模型:如果一组主体聚集在6~8个不同变量上,则可能代表一种行为模式。

  5. 综合各种特征,阐明目标:

    1. 综合数据中的细节:列出描述行为特征的简短要点,包括行为活动及其动机、环境、当前挫折痛苦、相关人口统计学、相关技巧经验、相关态度情感、相关交互、替代或竞争方案。增加一两个凸显个性的描述可使模型生动(但虚构描述过多则不耽分散精力,还会降低人物模型自身的吸引力),可以添加一些人口统计学信息。

    2. 定义目标:大部分有用的目标是最终目标,对消费性产品来说人生目标是最有用的目标;没有或只有一个人生目标对大多数人物模型是恰当的;通常而言0~2个体验目标比较恰当。

    3. 人物模型和社会关系:注意观察访谈主体是否友随公司大小、家庭社会关系变化而变化的,以及同事、家庭社会成员之间的工作流程或社交交互非常关键。

  6. 检查完整性和冗余:确定是否存在重要的漏洞需要弥补,是否有两个人物模型仅存在人口统计数据方面的差异,每个人物模型都至少要有一个显著的行为与其他人物模型的不同。

  7. 指定人物模型的类型:对人物模型进行优先级排序,确定主要涉及目标,目的是找到一个人物模型,其需求和目的能够用一个界面就完全得到愉快满足,同时不剥夺其他人物模型的权利。

    1. 主要人物模型:界面设计的主要标的,一个界面只有有一个主要人物模型。界面设计的关注点在于单个人物模型。如果没有发生明显的主要人物模型,则或是产品需要多个界面,或是产品想实现的结果太多。应避免选择面向最大市场的人物模型作为主要人物模型的误区,有时满足最极端的需求者(只占一小部分市场)即可满足大多数用户的需求。

    2. 次要人物模型:次要人物模型存在一些不削弱产品能力、以服务主要人物模型的前提下得以满足的需求。并非总是有次要人物模型。

    3. 补充人物模型:主要、次要之外的人物模型,政治人物模型通常可作为补充人物模型。

    4. 客户人物模型:非终端用户的需求

    5. 接受服务的人物模型:非产品用户、却直接受产品使用影响的人物

    6. 负面人物模型:不会为其服务的用户类型,如罪犯、恶作剧者、IT专家。

  8. 进一步描述特性和行为:综合最重要的行为类型细节,叙述长度不应长过1~2页PPT,不必包含每个观察到的细节,需包含一些虚构细节(如快速介绍职业或生活方式,简述其一天的生活)但细节不应超过研究深度,不要引入解决方案而是突出痛点,不要为人物画像列出区间或均值(因为人物模型是个体)。

  9. 人物模型照片:不仅能捕捉人口统计信息及环境线索,还要捕捉其一般态度。不要选择角度奇怪、表情夸张、造型刻意、模特、风格及剪切不一致的照片,照片中的人应是在现实背景中从事一项合适的活动。此外,照片拼贴画、环境模型图(如楼层平面图)有时也很有效。

3.5 实践中的人物模型

  1. 关于人物模型的误解:

    1. “设计者虚构人物模型”:虚构成分并不会影响用于刻画人物模型的真实行为数据

    2. “人物模型不如引入真人有用”:实际用户在场会给概念化设计带来严重的问题

    3. “人们并非为了任务而完成任务”:任务不是人物模型的核心,目标才是。

    4. “人物模型是可溯源的”:人物模型可追溯到研究中发现的模式而不是某次具体访谈

  2. 人物模型的量化:了解人物模型的市场份额有一定作用,但并非一定需要定量数据验证人物模型,一个界面所服务的主要、次要和补充人物模型三者加起来也足以代表大部分的市场。

  3. 机构的人物模型:人物模型同样可用于企业、组织

  4. 资源有限时使用临时人物模型:至少好于不使用任何用户模型,但无数据支撑可能导致聚焦错误、遗漏关键行为、难以获得青睐、导致所属组织长期拒绝使用人物模型。因此,应注意:明确标示、素描代替照片、尽量使用现有数据(并记录使用了哪些数据)、避免使用典型、专注于行为和目标而不是人口统计。

3.6 其他设计模型

  1. 工作流模型:序列模型,捕捉企业组织内的信息流和决策过程

  2. 人工制品模型:代表执行任务或工作流中的各种

  3. 物理模型:捕捉构成用户工作空间的物理对象布局

4 设计愿景:场景和设计需求

4.1 场景:以叙述为设计工具

  1. 叙事是弥合研究与设计之间鸿沟的黏合剂

  2. 场景对比使用案例、用户故事:使用案例通常是一种技术,具有事务性;用户故事常在敏捷编程方法中使用,更像是非正式的措辞要求,而不是场景。

  3. 基于场景的设计:场景一般用来描述具体解决设计问题的方法——运用一个具体的故事构建并阐明设计方案

  4. 基于人物模型的场景:用叙事的方式简明描述运用产品或服务来实现具体目标的一个或多个人物模型。从人物模型的角度描述一种理想的体验,聚焦于人及其思考和行为方式。

  5. 三类场景:情境场景(构建情境场景阶段)、关键路径场景(设计框架阶段)、验证场景(测试阶段)。

4.2 设计需求:交互“什么”的问题

  1. *设计产品行为前,首先定义产品会做什么。

  2. 设计需求不是特性(必须满足人类和商业的需要),不是规格说明(不单是一张功能列表),设计需求是战略性的,且应来源广泛。

4.3 需求定义过程(五步)

  1. 创造问题和愿景陈述:

    1. 问题陈述定义了设计启动的目标

    2. 把商业问题和可用性问题联系起来是推动利益相关者支持设计的关键

    3. 愿景陈述是问题陈述的倒转,以用户需求为引领,将需求转化为如何让设计愿景满足商业目标

  2. 探索和头脑风暴:将脑海中的想法提炼出来,记录下创意,暂时先把想法放在那里,以允许设计师保持开放灵活。

  3. 确定人物模型期望:

    1. 界面的呈现模型应尽量与对用户心理模型的理解相契合

    2. 正式记录以下期望:影响人物模型期望的因素、人物模型对产品体验可能持有的期望、人物模型对产品行为的期望、人物模型如何看待数据

    3. 分析访谈对象:首先提到什么、使用了哪些词语、没有提到哪些步骤/任务/物体

  4. 构建情境场景:

    1. 开发情境场景时,重点是如何才能使设计的产品最有效地帮助人物模型实现目标

    2. 情境场景应该范围广而浅

    3. 情境场景解决以下问题:产品使用背景、是否会被超时使用、是否经常被打断、是否多个用户使用单个工作设备、与其他产品一起使用吗、需要执行的首要活动、最终结果、允许的复杂程度

    4. 多数情况下,可能不只需要一个情景场景

    5. 场景完全由文字构成

    6. 开发场景早期阶段,假设界面就是魔法

  5. 明确设计需求

    1. 提炼出人物模型的需求或设计需求,包括对象、动作和情境

    2. 数据需求:必须在系统中呈现的对象和信息(账号、用户名、地址、文件、消息、歌曲等)

    3. 功能需求:对系统对象执行的操作或功能

    4. 情境需求:系统中对象之间的关系或依赖、产品的物理环境、人物模型使用产品的技能和能力

    5. 其他需求:企业和技术的现实需求,包括业务需求、品牌和体验需求、技术需求、顾客和合作伙伴需求

5 设计产品:框架和提炼

5.1 创造设计框架

  1. 设计框架:在一个高层次上关注用户界面和相关行为的整体结构

  2. 设计框架定义了用户体验的整个结构,包括交互框架、视觉设计框架,有时也包括工业设计框架。

  3. 定义产品交互框架(3~5步可能多次反复):

    1. 定义形式要素、姿态和输入方法:每种形式要素(分辨率、尺寸等)对设计暗含不同的限制条件,产品姿态(用户将会投入多大的注意力和产品互动,以及产品的行为将会对用户投入的注意力做出何种反应)确定系统的输入方法,输入方法(用户与产品互动的方式)受产品外形、姿态、人物模型的喜好和能力驱使。

    2. 定义功能性和数据元素:功能性和数据元素代表着界面中要展现给用户的功能和数据。数据元素通常是交互产品中的基本主题,考虑数据元素间的关系也大有裨益。功能元素是针对界面中的数据元素及其显示所做的操作,功能元素包括数据元素操作工具一级数据元素的视觉和结构化管理方式。最后应回到场景、人物模型目标和心理模型,审视哪个方案能最有效地满足用户目标、符合设计原则、适合当前技术和成本等条件。设计中可假定产品是有人情味的真人。除非有充足的理由,不要轻易背离标准。

    3. 确定功能组和层级:把数据和功能纳入屏幕、框架或网络等高层次容器元素,要考虑区域、元素互相容纳、工作流优化、元素捆绑、使用顺序、有助于决定、交互模式和原则、心理模型的作用。相关联的需求可置于同一个视图,最终目标未能全部体现在现有视图中时应考虑定义不同视图。进行比较、同时使用、代表同一过程不同步骤的对象应相邻。

    4. 勾画交互框架(方块图阶段):开始阶段要勾画整体且高层次的框架,不要被细节分散注意力。框架可尝试几种不同排列。

    5. 构建关键线路情境剧本:关键路线情境剧本是人物模型最频繁使用界面的主要路径,必须在细节上严谨描述每个主要交互的精确行为,并提供每个主要线路的走查。可采用故事板,即低保真草图序列和关键线路情境剧本的叙述。

    6. 通过验证性的场景检查涉及:将重点转移到不太频繁、不太重要的交互设计上,以指出方案的漏洞。包括替代场景(关键路径某个点的替代或分叉点)、必须使用的场景(必须要执行、但又不经常发生的动作)、边缘情形场景(必须要有但不太常用的功能)。

  4. 定义视觉设计框架

    1. 开发视觉体验特征:选择三到五个形容词定义产品的音调、语音和品牌承诺。

    2. 开发视觉语言研究:研究颜色、类型、小部件处理、整体外形尺寸、界面的“材料”属性,以探索多种视觉处理方案。这些方面的展示应当是抽象的、独立于交互设计的。视觉语言研究应同人物模型体验目标相关联,要考虑环境因素和人物模型能力。首次向涉众展示时通常会拿出3~5套方案,还会开发一两个极端的备选方案。绝对不要向涉众展现你不满意的设计方案,那可能正是他们喜欢的

    3. 将已选择的视觉风格应用于屏幕原型:综合协调视觉设计和交互设计工作

  5. 定义工业设计框架

    1. 与交互设计这就形式要素和输入方法进行合作:如果产品依赖于特定硬件,则交互设计者和工业设计者要在物理外形和输入方法上达成一致意见。重点考虑人物模型的体验目标、态度、能力和环境因素,以及品牌和体验关键词、市场研究、制造成本及预期价格等。用户体验只有一个,即形式和行为的设计必须相互和谐

    2. 开发粗略的原型

    3. 开发形式语言研究:探索不同的物理风格,包括形状、三围尺寸、材料、颜色和修饰

  6. 定义服务设计框架:描述客户旅程(从初次露面到最终完成交易)、创建服务蓝图(服务的宏大图景)、创建体验原型

5.2 细化外形和行为

  1. 提炼阶段中,草图故事版将变成全分辨率的屏幕,在像素级上来描绘用户界面,关注更深更细微的方面

  2. 此阶段应尽可能考虑所有的主要视图和对话,提出一套视觉风格指南。交互原型很有用,但不足以表达底层的模式风格、原则和基本原理。

  3. 最终应形成一份可打印的外形和行为规格文档,包括带有详细编号的屏幕渲染说明。

5.3 验证与测试设计

  1. 用户反馈和可用性测试对发现交互框架中的主要问题及某些方面的细化非常有用。

  2. 和用户一起验证设计方案的方法有很多,较为简单的比如与用户进行非正式谈话。

  3. 可用性测试的本质是评估而非创造。

  4. 测试”什么“——可用性测试的对象

    1. 命名:部件和按钮标签是否合理,词语反响是否好

    2. 组织:是否进行有意义的分类,能否在想找的位置找到特定的部件

    3. 初次使用和可发现性:是否易于戏弄用户寻找,指令是否清晰必要

    4. 有效性:能否有效完成具体任务,犯错的地方及出错是否经常发生

  5. 何时测试:

    1. 最终性评价:对已完成产品的测试,排查隐患,但有可能这时改变的代价较大

    2. 形成性评价:对设计过程中交互过程的某一部分进行的测试,快速且定性,一般在提炼阶段进行

  6. 形成性可用性测试:

    1. 不能太早(在基本设计成型后进行)也不能太晚(便于及时调整)

    2. 挑选适合现有产品的测试任务和用户体验内容,从目标用户群中招募参与人员

    3. 让测试人员清晰地执行规定任务并出声思考,让其使用技术含量低的原型,观察其行为及基本原理

    4. 协调会议讨论,确定问题及起因,让未参与该项目的人充当协调者,尽可能减少偏见

    5. 测试后和观察者一起听取报告,研究过程中应有设计者参与

  7. 设计者参与可用性研究的合理方式:

    1. 将重点放在重要问题上

    2. 使用任务角色制定实验参与者的标准,运用场景开发用户任务

    3. 观察测试过程,和其他人共同分析研究中的发现

6 创造型团队合作

6.1 小而专注的团队

  1. 核心团队小而专注,扩展团队规模较大,至少包括若干个核心团队。

  2. 共同思考更好(思考伙伴):创意创造者与综合者担任不同责任,创造者必须主导概念性方向,综合者必须有文字和象征意义上的主导权,同时创造者必须相信综合者能够主导整个讨论。

  3. 与思考伙伴的起始合作:

    1. 思想伙伴要满足:在开始工作前明晰要解决的问题、向具有创造能力者求助,敢于坚持和反对

    2. 思想伙伴要会综合

    3. 动态角色转换——可在进程中暂时性地互换角色

    4. 脱离困境(15分钟规则):如果讨论停滞超过15分钟,建议引入另外一位设计者参与讨论

  4. 核心团队规模适度:单个问题的解决需要核心团队保持2~4人规模,至少2人以保证快速评估和迭代,超过4个成员会徒增间接成本、要迎合的人、失去动力的风险。

6.2 跨设计领域工作

  1. 交互设计者:负责了解及明确产品的行为方式

  2. 视觉界面设计者:

    1. 必须同交互设计、(合适的话)工业设计保持一致

    2. 强调设计的组织方面以及视觉暗示和启示同用户行为的交流方式

    3. 必须掌握基本的视觉特性(颜色、排印、形式和组成等),并且必须知晓这些元素如何有效地传递启示、信息层次和情绪,因此应当了解品牌心理学、平面设计历史、熟悉流行趋势。

  3. 平面设计者:精于创造丰富、符合审美需求并且激动人心的各种界面

  4. 视觉信息设计:关注数据、内容核导航的视觉化,而不是交互功能,主要目标是以一种易于理解的方式展现数据。

  5. 工业设计者:定义物理产品外形,利用形状和材质来展现品牌,创造具有吸引力、恰当、使用户目标和设备交际行为相匹配的产品外观。

6.3 扩展团队

  1. 责任和权威:

    1. 设计要对目前产品用户目标负责

    2. 可用性要对验证用户对设计预期的反应负责

    3. 工程师有权决定“原材料”的选择和建造过程

    4. 市场营销负责定义市场机遇

    5. 商业领导通常负责定义商业机遇

  2. 同敏捷开发人员协作

    1. 敏捷开发:优化时间和能量、减少浪费,保证概念能够确切地向用户传达设计理念的开发方法

    2. 设计者在敏捷团队的工作:分清重点,形成思维图像,有能力对用户体验的重要因素进行定义,允许用户在早期并经常给予开发。

    3. 定义敏捷团队的用户体验:快速决定用户的最大体验挑战是什么,并确保能在产品开发前定义相关的元素流

    4. 融合用户反馈:用户反馈只要经恰当的刺激、收集并给予解读,将极为有用

6.4 创建创造性的文化

  1. 工作环境的馈赠:小的环境惊喜为创意的激发提供外部动力

  2. 小的工作场所:遇到难题时,尽量同外部世界隔离开来

  3. 协作的行为准则:团队对于如何开展工作应该达成一致

  4. 容许积极正面的题外话:”留点迷路的时间“法则

6.5 确定设计师的技术水平

  1. 学徒:早期需要跟师傅学习技巧的阶段

  2. 技术高手:核心团队中的领导,有新创意、新想法,许多设计者终其一生停留在这一阶段,尤其当他们不愿承担起组织内领导角色的责任时

  3. 领导者:既掌握了高超的设计技术,又有意愿和能力承担领导责任。为团队提供指导和架构,鼓吹预算和权威,为项目确立范围、确定重点,推动设计开发,招聘设计师。

  4. 协作是设计团队的关键。

Part 2 设计行为和形式

7 良好产品行为的基础

7.1 设计价值

  1. 合乎伦理的交互设计:

    1. 不造成伤害:人际关系、心理、身体、经济、社交/社会、环境伤害

    2. 改善人类处境:促进理解、效率、沟通、平等、文化多样性、社会凝聚力,降低个人与团体之间的社会文化张力

  2. 目标明确的交互设计:基于用户目标与动机的理解,采取目标明确的设计,使用目标导向的开发流程

  3. 实用的交互设计:考虑商业目标、技术要求与限制条件十分重要。

  4. 优雅的交互设计:简约(代表最简单而完整的设计方案)、拥有内在一致性、适当顺应并调动认知与情感

7.2 交互设计原则

  1. 作用于不同层面细节的原则:概念原则(第1. )、行为原则(第11. )、界面原则(第12.章)

  2. 行为与界面层面的设计原则使工作负荷降至最低

7.3 交互设计模式

  1. 建筑模式和交互设计:最终目的十分接近,但交互交设计模式不仅关注结构和元素组织,还关注相应用户活动的动态行为与变化

  2. 记录和使用交互设计模式:模式总是应用于特定情境。为了达到使用效果,模式必须根据应用场景进行有条理的组织,这种模式称为模式库或类目表。如果用户需求清晰,一套全面的模式类目表可以帮助设计新手迅速且轻松地整合出协调的设计方案。

  3. 交互设计模式的类型:

    1. 定位模式:概念层面,帮助界定产品对于用户的整体定位

    2. 结构模式:解答如何在屏幕上安排信息和功能元素之类的问题

    3. 行为模式:解决功能或数据元素的具体交互问题(如器件行为)

8 数字产品的礼仪

8.1 设计体贴的软件

  1. 人来思考,计算机干活

  2. 软件应像人一样体贴:体贴的软件特征

    1. 关心用户喜好:记住用户的小习惯,尤其是告诉过软件的事

    2. 恭顺:提出建议,而不是命令,避免监督并随意判断人的行动

    3. 乐于助人:主动以合适的途径向我们提供有用的信息

    4. 具有常识:避免在不合适的地方提供不合适的功能

    5. 有判断力:记住该记住的信息,而避免再没有接受用户指令的情况下自动记录个人隐私数据

    6. 预见需求:利用闲散时间提前下载,减少等待请求加载时间

    7. 尽责:从长远的角度认识所执行任务的意义

    8. 不会因为自己的问题增加用户负担:对自己的问题保持沉默

    9. 通知及时:提供大量运行状态的非模态反馈

    10. 敏锐:察觉用户的操作和偏好,并利用这些观察为用户提供相关信息。

    11. 自信:不应该怀疑用户或自己

    12. 不问过多的问题:避免提出过多问题,而是提供选择,并能够记住用户的信息

    13. 即使失败也不失风度:利用撤销从崩溃中恢复

    14. 知道什么时候调整规则:人类对于轻微调整系统有着强烈的需求,现实世界中限制总是可以调整的,体贴的软件需要意识到并且包容这类事实

    15. 承担责任:避免将任务交由硬件继续工作时“甩手“

    16. 帮用户避免犯低级错误:应当像人类伙伴一样及时给予提醒,且不应该以标准的错误信息对话框的形式阻止动作的发生,恰当的方式是通过细致的视觉和文字反馈,提醒用户。产品应能够帮助用户避免令其尴尬的错误,并不因此责备用户。

8.2 设计聪明的产品

  1. 利用计算机的空闲周期:利用空闲时间在后台执行额外的工作而不影响当前任务

  2. 聪明的软件有记忆、能够预测需求:通过回忆用户上传的行为来预测用户将要做什么

  3. 聪明的软件能记住细节:*如果用户愿意操作,就值得程序记住“,可使用用户以前的设置作为默认值,如果错了则可以让用户纠正。例如:记住文件位置、推断信息、取消多会话后重新打开时加载用户上次运行程序时的取消堆栈、录入过去的数据(历史记录)、程序文件的外部程序活动(关注它所处理的文件)。

  4. 让聪明的产品发挥聪明:缩小决策数量、判断偏好阈值、遵循”多数情况下,多数是对的“原则

8.3 设计社交软件

  1. 社交软件要知道社交规范和市场规范的区别:在社交背景中错误地使用市场规范会被看做极端粗鲁的行为

  2. 社交软件帮助用户展现最好的一面

  3. 用户身份:半随机选择自己的图标、上传图片(需审查)

  4. 动态vs.静态用户形象:社交网络中,行动胜过自我描述。可以对用户在网络的社会贡献进行动态收集并简要展示,对此用户应完全掌握其浏览权限。

  5. 允许简单协作

  6. 知进退:只有外部社交功能的软件中,社交功能不能喧宾夺主

  7. 助于增长网络监控:

    1. 有助于让新成员发现网络

    2. 在成员违反亚文化规范时稍加提醒

    3. 优雅地处理成员去逝后的事宜

    4. 妥善设置社区规则(例如防止用户不同意联系的情况下要处理另一用户的联系请求)

  8. 社交产品尊重社交圈的复杂性:

    1. 人类的邓巴值(社会关系中确保每个成员充分发展的普遍限制)为150

    2. 每个次群体的规则和规范对用户至关重要

    3. 利用这些规则规范可用于对这些群体进行区分

    4. 定位明确的社区可能提供会员的准入制。

  9. 社交产品尊重其他用户的隐私

    1. 对用户了解和分享的越多,广告针对性越强

    2. 用户希望感受到自己的隐私被尊重

  10. 社交产品要恰当处理反社交行为:在可以简单、匿名方式申请账户的大型网络系统中,滋事者对自己的言行更不负责。

9 平台和姿态

9.1 产品平台与姿态

  1. 产品平台:使产品运转起来的软件和硬件的共同作用提

  2. 产品姿态:产品的行为立场,也就是产品对用户的展现方式

  3. *技术品台相关的决定最好能融入交互设计的成果

9.2 桌面软件姿态

  1. 独占姿态:长时间占据使用者注意力的程序姿态(通常窗口呈最大化)

    1. 锁定中级用户:独占姿态类程序应当锁定中级用户优化,因此不能牺牲速度和动力,将产品设计得易于掌握却不灵活,也不能一味追求精密复杂的超级工具

    2. 全屏幕使用独占应用程序,让它发挥最优效果:独占姿态类程序在像素使用方面有正当的理由。程序可调整大小,但必须为全屏使用而优化。

    3. 独占界面应当采用保守的视觉风格:因为用户会长时间注视,应考虑弱化视觉表现上的颜色和纹理,不要使用太多的颜色,并且使用保守颜色。使用小虚点或者加重的颜色比使用大块颜色更好。工具栏和其他控件可比正常的小,辅助控件可以更小、更紧凑。

    4. 丰富的视觉反馈:可在界面上添加大量额外的信息——状态栏、滚动条、标题栏、可视区域角落都可以设置视觉提示

    5. 独占式应用程序支持丰富的输入方式:每个常用部分都应该可以用多种方式操作,最常用的功能可放在最显眼的位置,将有可能造成初级用户困惑的功能放在不显眼切相对分离的位置。

    6. 以文档为中心:在独占应用程序中让文档视图最大化

  2. 暂时姿态:

    1. 暂时应用程序必须简单,清晰并且意思明确

    2. 尽管暂时性应用可以在桌面上单独运行,但它通常是辅助支持独占应用程序的。

    3. 较大尺寸和丰富的渲染可以带给使用者足够的视觉吸引力

    4. 明亮而清晰:醒目的图形有助于用户更快定位,暂时是应用程序上不应该使用缩写

    5. 保持简一:暂时式应用程序只使用一个窗口和视图,暂时式应用程序必须是可以动的,且必须有一个标题或者有其他明显的地方可供使用者拖放。

    6. 记住用户的选择:启动暂时式应用时,它应当处于上一次的位置和配置状态下。

    7. 几乎所有对话框的行为模式都与暂时是应用程序相似,关于暂时式应用程序的所有指导准则同样适用于对话框的设计。

  3. 后台姿态:通常不与用户互动的程序是后台姿态应用,代表后台姿态的图标被安放在桌面右下角的系统托盘区,只有在连续提供有用状态信息的请下,后台应用才应该一直亮着图标

9.3 网络姿态

  1. 信息类网站姿态:

    1. 信息类网站最大设计问题的恰当方式是搜索特定信息的便利性

    2. 平衡独占和暂时姿态:有用信息的密度要适当,便于首次或不经常使用网站的用户学习和搜索。偶尔更新的网站则更多用于偶尔查询,应处于暂时姿态而非独占姿态。

    3. 独占属性:详细的信息显示最好以独占姿态完成,网站中采用独占姿态唯一的难点是全屏幕分辨率,设计者需要在设计初期确定要设计的屏幕采用的分辨率,虽然可以采用液态布局,但仍应针对最常用的显示器尺寸优化。

    4. 暂时属性:主要任务角色不经常访问的网站、智能手机网站入口都倾向于暂时姿态,意味着网站需要容易使用、导航标识清晰。应保证任意一个页面都可以被收藏,并考虑提供类似”最常访问的文章“的导航帮助用户用最少的导航工作量找到所需信息。手机版需要简化导航,采用响应式技术使得网站可以转化为桌面或掌上屏幕形式,但必须注意导航和信息流。

  2. 事务性网站(在线商店、金融服务门户、搜索引擎)姿态:不能强迫用户做没有必要的导航动作,事务性网站设计需要关注内容的信息架构和页面组织,专注于交互设计,以创造更具功能因素特点的合适行为。

  3. 网站应用姿态:

    1. 独占姿态应用:将其看作桌面应用,而不是一组网页。需要丰富并交互的用户界面,多数应使用全屏,用户应该感觉他们处于某一环节中,而不是从一个页面浏览到另一个页面,尽可能避免或尽可能少地重新渲染或刷新页面。

    2. 暂时姿态应用:提供清晰的导向和导航,此外,一个用户的暂时式应用有可能是另一用户的独占式应用,要努力思考两个用户的需求在多大程度上能兼容。

9.4 移动设备的姿态

  1. 智能手机和手持设备姿态

    1. 卫星姿态:强调信息的检索和浏览,控件按仅限于数据或文档的导航和浏览,例如数码相机、Kindle及集合式设备中关注内容导航和录音重放功能的应用。

    2. 独立姿态:独立姿态应用也通过屏幕上方或下方的菜单和工具栏实现全屏和运动型功能,同时包含暗示的模式对话式屏幕或提示框。手持应用的独立性意味着大多数用户会在短时间内使用大量的暂时性应用。

    3. 平板电脑姿态:类似独立手持应用,但下拉菜单变宽后会看起来不舒服,应避免平板电脑看起来像是特大号的手机屏幕。通常平板电脑操作系统只允许全屏应用,因此还应注重应用程序的独占质量。安卓平板的小部件则提供了一种卫星暂时姿态。

9.5 其他平台的姿态

  1. 信息亭姿态

    1. 具有大屏幕的特点,看起来像是独占姿态,但实际上多数的信息亭是暂时姿态

    2. 特点:使用者通常是首次使用者,多数人不会花费很多时间,采用的触摸屏或两侧硬按键都不适合大量数据的输入,使用环境多是嘈杂、明亮、干扰多的公共场所

    3. 应避免使用悬浮窗口和对话框,操作和信息最好集成在单一且全屏的界面中

    4. 事务性信息亭注重简单完成交易或搜索,因此基于情境定位、提供退出和取消方法很重要

    5. 教育和娱乐信息亭更加注重探索,因此可以增加数据密度

    6. 信息亭应针对首次使用者进行优化

  2. 远距离界面姿态(电视和操控性游戏等):某种程度上类似于卫星姿态,但交互方式采用红外或蓝牙而不是触摸屏,且聚焦在远距离界面姿态用户界面中的位置必须显眼。

  3. 汽车界面姿态:类似信息亭,娱乐、暖通空调、设置的改变界面倾向于简单操作和暂时交互,导航则倾向于独占姿态,此外应注意尽可能少地干扰驾驶员。

  4. 智能家电姿态:暂时姿态界面,尽可能简单、直接,习惯采用硬件控件,避免使用LCD触摸屏形成令人困惑的控件集合体。

10 为中级用户优化设计

10.1 永久的中级用户

  1. 不要将培训工具固定化

  2. 人们从事某项活动的经验水平倾向于遵循经典正态分布统计曲线,但只不过是瞬间快照。

  3. 没有人愿意永远当个新手,新手和专家随着时间推移都会倾向于成为中级用户。因此应当为中级用户而优化设计

10.2 扭转界面

  1. 为常见的导航调整界面:转换界面意味着将界面中的常见导航最小化。

  2. 付出与回报要相称:*用户只有获得充分的回报,才会付出相应的努力。在应用中添加复杂的功能,要想让用户忍受复杂的操作,结果必须有足够的吸引力。

  3. 渐进式展开:高级部件或不太经常使用的部件隐藏在扩展型窗格后面

  4. 组织界面的扭转:按照3个原则对界面中的部件和显示器进行整理

    1. 使用频率:最经常使用的-触手可及之处,不太经常使用的-点击次数不超过一两次,其他功能-两三次点击,很少使用却对用户有实际好处的功能不能删除,可以深藏在工具栏中

    2. 转换程度:由于某一功能或命令引发正在处理的界面或文档、信息突然发生变化的程度。一般来说最好将这一类型的功能隐藏于界面深处

    3. 风险承担程度:不可更改的功能或更改后会产生危险后果的功能,应设计得对用户而言更难以使用。

10.3 为三层用户设计

  1. 三层设计目标:

    1. 迅速轻松地将新手培养成中级用户

    2. 不要在中级用户成长为专家用户的过程中设置障碍

    3. 保证永久的中级用户在技术范围的终端搜索时有愉快的体验

  2. 新手想要什么

    1. 将用户想象成为非常聪明蛋很忙碌的人

    2. 一个新手必须迅速掌握程序的概念和范围

    3. 新手一旦成为用户,额外帮助会反过来妨碍用户,因此无论提供什么样的额外帮助都不应该在界面中固定下来,不需要时就应当消失。

    4. 对话框中显示的单个指南工具是告诉用户基本功能的好工具。

    5. 菜单彻底且详细,菜单项发起的对话框应该是解释性的,且设有方便的撤销按钮

    6. 适应不同平台的新手:是透明且易发现对交互设计来说越来越重要

  3. 专家想要什么:

    1. 专家的选择可能对市场交易产生重要的影响

    2. 专家可能会时不时寻找深奥的功能,甚至需要所有功能的快捷方式

    3. 专家更喜欢高密度信息

  4. 永久的中级用户需要什么:

    1. 需要快速进入最经常使用的工具,因此工具提示是适合中级用户最好的习惯用法

    2. 在线帮助是永久中级用户的极佳工具

    3. 通常要求把常用功能中的工具放在用户界面的前端和中心位置

    4. 知道高级功能在哪,软件具有这些高级特性的事实让他们感到放心

11 编配与流

11.1 编配与流

  1. 流:全身心投入某个活动、对周边干扰视而不见的状态,是一种深层、几近冥想式的投入状态

  2. 为了创造流,与软件的交互必须“透明”,不论界面多酷,越少越好

  3. 编配:交互产品和谐、与用户的交流安排得当的组织形式,不会让步于固定的规则

11.2 和谐交互

  1. 遵循用户的心理模型:不同用户的心理模型不同

  2. 少就是多:努力减少用户界面的元素数量,同时不能减少所创造的的产品功能,也不应增加使用产品的难度。产品设计的极简主义与清楚理解其目的密不可分。做减法是一种平衡艺术,需深入理解用户的心理模型。

  3. 让用户指示而不是讨论:避免莽撞地要求用户开展对话、通知用户的不足之处、要求得到答案

  4. 提供选择(工具栏和选项面板),而不是提出问题(对话框):根据呈现的信息自由选择,和被应用程序盘问是不一样的。无模态选择有助于给用户带来控制杆和掌控感。

  5. 让必要的工具近在咫尺:使工具的选择和操作变得更容易,避免破坏流。工具应该近在咫尺,通常放在选项板或者工具栏供新手和中级用户使用,提供快捷键供专家用户使用。

  6. 提供无模态反馈:操作的状态和效果必须容易看到、容易理解、不会干扰或阻止当前的操作(反例:弹出对话框,属于模态技术;正例:iOS的通知中心)

  7. 设计要以防万一,但应预测其可能性:避免大量由很小错误概率造成的冗余交互,更好地编配用户界面的一个强大方法是把可能性与概率分开。

  8. 上下文信息:可视化地显示数据,而不是简单地用文字或数据表示

  9. 反映对象和应用程序的状态:应将休眠、运行、无法像平时那样快的响应等状态用显而易见的方式告诉用户

  10. 避免不必要的报告:避免不停地通知用户不必要或不易理解的进度细节,容易造成分神。不要用对话框报告

  11. 避免空白状态:避免事先提出一大堆问题给用户,可按照设计师的推测、用户的过往经验或者其他多数用户的偏好做出相当正确的假设。做很可能是争取的事情,然后为用户提供强大的工具来调整第一次的尝试。请求原谅,而不是许可

  12. 区别命令和设置:配置和调用一个功能有着巨大差别(例如打印和打印设置),前者也许包含后者,然而后者不应该包含前者。

  13. 隐藏弹射座椅的操纵杆:造成应用程序严重的视觉错位或执行不可逆动作的功能,对经验较少的用户都应该隐藏起来。

  14. 为响应而优化,但容许延迟:应该用最小的延迟,提供最合适、丰富的交互,不可避免时应明确地告诉用户,允许取消可能导致延迟的操作,理想情况是让用户等待时还能执行其他工作。

11.3 动作、时间和过渡

  1. 动作和动画切换使移动应用看起来是响应式、沉浸式的。但始终需要节制和谨慎,过度使用动画有能让用户困扰甚至反感。使用动作和动画切换的首要目标是支持和增强用户的流状态。

  2. 动画和切换应有助于达到以下目标

    1. 让用户注意力集中在合适的地方

    2. 展示对象及其动作之间的关系

    3. 在视图或者对象状态之间的转换中保持背景不变

    4. 让人能看到进度或动作

    5. 创造虚拟空间

    6. 激发融入和进一步操作

  3. 使用动画和切换应努力实现的交互品质:

    1. 短暂、愉快和响应:在任何情况下不应超过1秒

    2. 简单、有意义和恰当

    3. 自然和顺滑

  4. 动作有节奏时最成功,声音有助于引导交互

  5. 毫不费力的理想:最好的界面通常不会让用户惊叹它有多漂亮,而是因为能够几乎不会被人注意,毫不费力地使用。

12 减少工作 消除负担

12.1 负担任务

  1. 目标导向任务vs.负担任务:目标导向任务指可以直接实现的目标的任务,负担任务则不直接实现目标,代表了额外的工作。尽可能消除每一种负担

  2. 导航负担:可用性中最大、最普遍的问题之一,发生在多个层次

    1. 多个屏幕、视图或页面之间:严重转移注意力,需要不断地在窗口之间移动,使用户体验到导航创伤

    2. 窗格之间:如果对象能够在多个窗格之间拖放,那么这些窗格应相邻。当相邻支持窗格数目太多,或摆放位置与工作流不匹配时会出现问题。可考虑使用标签窗格(如Excel中的Sheet)、选项卡窗格。

    3. 工具和菜单之间:无关紧要的鼠标移动会让用户烦恼疲惫,经常使用的工具应在空间上组织在一起。经常使用的功能应以工具栏、选项板等方式提供,菜单应该用来放很少访问的命令。

    4. 信息之间:

      1. 滚动(平移):虽必要,但应尽可能减少,分页-滚动之间找平衡

      2. 链接(跳转):易引起视觉混乱,应格外小心使用

      3. 缩放:查看超出二维的任意数据或抽象数据时力不从心

  3. 拟物化负担:

    1. 把熟悉的机械制品带入软件中,毫无必要地限制了交互

    2. 充满拟物化呈现方式的屏幕空间也很拥挤,尤其是对独占姿态应用

    3. 设计师容易以用户有好的名义陷入拟物化陷阱

  4. 模态负担:

    1. 不要愚蠢地打断进程:毫无理由中断用户的流就是愚蠢地停止进程,是一种最具破坏性的负担

    2. 错误、通知和确认信息:模态错误消息没必要出现,没有提供任何信息,却要求我们做出不可逆转、可能代价高昂的决定。

    3. 让用户请求许可:如果想改变显示的值应该直接就能改,而不是要到另外一个地方请求许可。不要让用户请求许可任何输出之处应允许输入。请求许可的反面或许有用——不是让程序发出对话框,而是让用户告诉对话框消失,此外设有“恢复所有已关闭对话框*的选项。

  5. 样式负担:

    1. 来源:过度使用样式元素和界面元素。视觉样式可营造气氛、强化品牌,但不应牺牲实用性和可用性,至少在效率类而非娱乐类应用上是如此。
  6. 负担取决于情景:

    1. 情景不同:一个人(或人物模型)的目标导向任务可能是另一个人的负担任务

    2. 软件姿态不同:暂态应用程序需要分配一部分屏幕,并不像在独占式应用中那样构成负担。

12.2 消灭负担

  1. 减少要去地方的数量

    1. 将页面和视图的数量减至最少,两三个视图全屏窗口对多数人是最合适的

    2. 尽量限制界面中相邻窗格的数量:独占式应用中3个为宜,网页2个导航区和1个内容区为宜,平板应用2个窗格为宜

    3. 将控件数目限制到最小

    4. 尽可能减少滚动

    5. 区分用户类型进行分类导航

  2. 提供导航标志

    1. 通过用户参考界面上的持久对象来导航:标题/菜单栏/工具栏/用于显示或编辑数据的固定区域

    2. 让网站的每个页面长相类似可以保持视觉连贯

  3. 提供预览

    1. 概览区域本身应该是持久的

    2. Web中典型的面包渣(Bread Crumb)导航

    3. 注释滚动条

  4. 恰当地把控件映射到功能上:控件与功能的布局、逻辑、心理模型应清晰对应(如“最近/最早”比“升序/降序”对时间排序的映射清晰得多)

  5. 避免层级关系:存储或检索信息时,层级关系对人并不是很自然,单层分组更为适宜。强迫用户在复杂的深层树状结构中导航,不如给他们工具,让用户自己找出来所要的东西。

  6. 不要复制机械时代的模型:数字模型应允许用户做些以前(机械模型)不容易的事情,重大改变必须显著优秀

  7. 常见的负担陷阱

    1. 强迫用户到另外一个窗口去完成本窗口相关的功能

    2. 强迫用户记住事物在层级文件系统中的位置

    3. 强迫用户调整窗口大小。

    4. 强迫用户移动窗口

    5. 强迫用户重新设置

    6. 用户填充字段时需有任意完整度,数据库的完整性不值得骚扰用户

    7. 强迫用户请求许可

    8. 让用户确认其动作

    9. 让用户的行为产生错误

13 隐喻、习惯用法及能供性

13.1 界面范式

  1. 实现中心范式界面:用户界面完全建立在实现模型上。多数人并不想知道得太多,只想成功地使用产品

  2. 隐喻范式界面:依赖于用户在真实世界的实际经验在界面上建立视觉-功能关系。

    1. 隐喻界面可能因没有建立这种联系所需的语言、学习经历或推理能力而失效。

    2. 全局隐喻虽然可以让用户直接理解软件的基本功能,在此功能后,隐喻就会大大地增加导航成本。用在电子游戏中可能不错,但不宜用在效率类界面中。

    3. 不要让界面强行适应隐喻

    4. 隐喻的其他局限:

      1. 不易调整,

      2. 难以为进程、关系、服务、变体找到隐喻

      3. 用户与设计者文化背景不同时容易失败或误解

      4. 当新手晋升后,易于新手理解的隐喻则会增加该用户的成本。

    5. 避免使用隐喻和拟物化界面的例外:电子游戏、音乐创作软件

  3. 习惯用法范式界面:

    1. 图形界面大都是习惯用法范式,无论鼠标输入还是多点触摸输入

    2. 所有的习惯用法都需要学习,而好的习惯用法只需学习一次

    3. 综合习惯用法是产品品牌的精髓。

13.2 创建习惯用法

  1. 基本元素越多,学习耗时越多;限制交互词汇数量则会降低表现力,但基本元素可极易构成大量复杂的交互。

  2. 交互用法的组合:底层为原语(鼠标定位、点击,键盘按键,触控敲击、拖曳),中间层为复杂的组合用法,最上层为习惯用法。

13.3 手动能供性

  1. 人性能供性:当人工制品明显打造得适合我们的手或身体时,我们能看出直接操作它们的方法,不需要任何书面说明。

  2. 拟物化的阴影、突出等立体感被近来流行的扁平化和视觉极简界面取代,易用性受到了影响。

  3. 能供性的实现预期:未加修饰的虚拟手动能供性无法提示执行后将完成的功能,必须依靠补充文本和图片。

13.4 直接操作与顺从

  1. 直接操作:

    1. 现代图形用户界面建立在直接操作屏幕上图形对象的概念上

    2. 直接操作设计策略:对象的视觉呈现、在对象上执行的视觉和手势机制、动作的即刻可视结果

    3. 丰富的视觉反馈是成功的直接操作的关键

  2. 直接操作的通用原则:更好、更加容易引发”流“的界面,高级直接操作习惯用法更多。

  3. 直接操作并不总是合适:直接操作要求用户发展自己的技能,能有效完成复杂任务,但根据人物模型的技巧和使用背景,也可能过犹不及。

  4. 顺从与提示:

    1. 任何可以拖动的物件都是顺从的。

    2. 对象是顺从的这一事实应该通过视觉传达给用户,唯一不适用的情况是只想向专家用户呈现丰富、复杂的功能时。

  5. 表达顺从的方式:尽可能用视觉表达顺从。一般来说控件应提供静态或动态视觉提示,而顺从(可操控)数据更应提供光标提示。

    1. 静态提示:静态视觉能供性作为对象本身的一部分:例如按钮控件的三维雕塑效果

    2. 动态提示:动态改变对象的视觉能供性

      1. 翻滚:光标经过顺从对象时暂时改变外观(不适用于触屏设备)

      2. 顺从响应提示:正在按下控件时,控件必须显示已经准备好改变的状态。

    3. 光标提示:鼠标经过并与对象交互时改变光标的外观来传达顺从。

  6. 逃脱隐喻的掌控:只在少数特殊情境中使用全局隐喻(如隐喻是体验不可或缺的一部分时),随着用户达到中级水平,容易记忆、有丰富顺从反馈的习惯用法才能有效提高用户效率。

14 重新思考数据输入、存储与检索

14.1 重新思考数据输入

  1. 数据完整vs.数据免疫:

    1. 数据完整假定:因为外面信息混乱,任何数据在进入计算机前,都要过滤并清洁。

    2. 数据免疫力:不正确的数据接近正确时,应创造更加聪明、更加先进的程序,能够处理数据置换(或失败时为数据添加注释,以使用户检查问题)。

  2. 处理丢失数据:

    1. 应让用户注意到有必填字段的信息缺失,可以通过丰富的无模态反馈。

    2. 应帮助用户校验输入数据条目的有效性,并提供不唐突的无模态反馈。

    3. 应容忍信息缺失,尽可能通过重构来解决缺失的信息,而不是打断用户造成生产力降低。

  3. 数据输入和规避机制:让用户做他们想做的,但用计算机详细记录下这些动作,这样可以完整地追查责任并可恢复。

  4. 审核与编辑:

    1. 出错可能不是程序的问题,但是程序的责任

    2. 应用程序可以提供警告,清楚、不唐突且无模态地告知用户他们做了什么,最终依靠用户自己的能力解决问题。

    3. 审核,不要编辑(例:Word中的下划线拼写检查是一种审核,自动更正和编号功能则是一种编辑)

14.2 重新思考数据存储

  1. 数据存储的问题:

    1. 保存更改:保存更改对话框总是得到相同的回答,是一种应消灭的冗余。移动应用中则已基本消灭了明确保存的概念。

    2. 关闭文档但不保存:撤销功能比用关闭文档实现放弃不想要的更改更妥当。

    3. 另存为:要求用户熟悉文件系统并记得默认目录,且不创建一份新文档就无法更改文件名或存放的目录。

    4. 存档:没有明确的功能来为一份文档创建副本或存档,而使用”另存为“实现此功能会造成新手的误解(另存为后,实际上正在更改这份信息的唯一副本)。

  2. 用统一文件模型修复数据存储:

    1. 原则:应始终把文档当做一件事来处理,而不是磁盘或内存中的一个副本。

    2. 自动保存文档和设置:理想情况下,只要用户做出修改程序就立刻保存;或在内存中追踪小幅改动,经过一定时间间隔就写到磁盘中。自动保存功能不能影响用户界面的响应。

    3. 创建副本:应有一个功能明确地叫做”创建副本“,副本应和原始文档一模一样,但不应与原始文档捆绑在一起。

    4. 命名和重命名文档:如果用户决定重命名文档,可以单击标题栏直接修改。

    5. 在文件系统中存放和定位文档:把文件放在用户能找到的地方,合理存放位置取决于用户及产品姿态——独占式应用应定义一个针对该应用的存放位置,暂时式应用或不太频繁使用的独占应用,则不要把文件藏在特殊的角落。

    6. 指定文档格式:指定格式不该和保存到磁盘的操作关联起来,把它放在文档属性对话框中更合适。

    7. 还原所做更改:错误的更改必须可还原(撤销工具),文件系统(另存为后打开旧文件)不应该作为撤销的代替品。

    8. 放弃所有更改:在主菜单放一个简单的”放弃更改“,或类似的”还原版本“功能。

    9. 创建版本:由应用来管理而不是用户通过复制实现。

    10. 新型文件菜单示例:新建/打开/关闭(自动保存后关闭文档,不提示对话框)/重命名或移动/创建副本/打印/创建版本/放弃更改/属性/退出。

    11. 文件菜单的新名字:可以根据应用程序所处理文档的类型来给菜单加标签。

    12. 传递状态:其他程序正在使用因而无法修改的文件可显示不同颜色,或在文件名旁显示特殊符号。

14.3 重新思考数据检索

  1. 存储与检索:

    1. 存储与检索的传统机制基于文件夹或目录这一隐喻交互模式。

    2. 物理世界的检索:基于位置/索引

    3. 数字世界的检索:基于位置/标示(文件名)/属性

    4. 基于属性的检索系统:便于使用者按照他们所思考的方式来查找所要的东西。

    5. 允许用户给文档加标签或手动指定属性也非常有价值(分众分类法),可以填补上技术无法师姐所有有意义属性的孔雀,还能让用户定义实际的组织方案。

  2. 关系数据库vs.数字汤

    1. 组织难以组织的电子邮件、Web等信息关系丰富多样的系统。所有数据库记录都是单一、预定义的类型,通过检查内容核匹配搜索条件来查找和提取记录无法解决上述问题。

    2. 基于属性的替代方案:关键是分离存储系统和检索系统

      1. 存储功能:可以放进所有记录的数字汤(digital soup)

      2. 基于属性的检索功能:创建无限数量的索引,存储一个代表自己的键值和包含一个令牌的副本。

  3. 受限的自然语言输出:基于属性的检索系统要真正成功,需要一个前端让用户容易理解、复杂而又相互关联的属性级,自然语言(如英语)在当前计算机条件下难以被有效地理解,受限的自然语言输出则提供一系列有限空间,让用户从中选择,本质是一个自我建档的有限查询机制。其中,语法必须提前映射好,如果为多种语言设计则需要不同的语法映射。

15 防止错误 通知决定

15.1 运用富视觉非模态反馈

  1. 富视觉非模态反馈:

    1. “富”:能够深入全面的信息

    2. “视觉”:按习惯方式利用屏幕上的像素

    3. “非模态”:信息能及时轻松地显示出来

    4. 不适用于初学者,用来代替警告和严重错误警示的富视觉模态反馈必须得让用户格外清楚其含义才行

  2. 听觉反馈:

    1. 普遍问题是认为负面反馈比正面听觉反馈更合适,然而即使警告声音被改良得再温暖,也改变不了其传达负面、无礼信息的特点。

    2. 正面听觉反馈真正的价值,在于没有反馈就已经极其有效地指出了问题。例如发出持续、微弱、听得到、令人安心的线索。

15.2 撤销、恢复、可逆的历史操作

  1. 撤销应当遵循心理模型

    1. 撤销应当遵循心理模型,让用户安心、敢于探索尝试。

    2. 撤销不是一个扭转错误的工具,而是一个帮助探索的工具。撤销最好是整个应用通用的功能。撤销应避免在保存文件后无法撤销,以及内嵌对象与文档的分离问题。

  2. 撤销的共通类型:

    1. 渐增动作指包含数据部分的操作;过程动作指无数据转换,没有添加、修改或删除。

    2. 相比没有迹象指明撤销内容的隐蔽撤销,解释性撤销更让人喜欢。

    3. 单次撤销只撤销用户最近的一次操作,可能导致重要的撤销历史被覆盖。

    4. 多次撤销能连续重复执行、撤销多个先前的操作,按先进后出(LIFO)顺序。严格按LIFO顺序会导致可能要付出多次重复操作的代价以撤销某个多步之前的操作,且问题一旦复杂,渐增的多次撤销模式无法恰如其分地解决问题。

    5. 撤销和恢复:把上一次撤销动作当做一个可撤销的动作,这样第二次调用撤销功能相当于一个小的恢复功能。

    6. Word的分组多次撤销功能只能组合起来一起撤销,不能只撤销其中的一步。应当事先可选撤销,让用户只撤销那些不想要的操作,而不是撤销所有之后完成的操作。

  3. 撤销的其他类型:

    1. 不连续的多次撤销:不按顺序,挑选几个步骤予以撤销,剩下的保留

    2. 分类撤销:针对每个特定的操作类型设计单独的撤销功能

    3. 已删除的数据缓冲区:长时间处理文档的用户需要一个储存已删除文本的仓库(缓冲区)。

    4. 版本控制和还原:版本控制功能有效与否关键在于还原命令的行为。版本控制应该提供一份所有已保存文档版本的清单。还原的时候,文档当前状态应当作为另一个版本保存下来。

    5. 冻结:锁住文档中选中的数据使其不能更改,但可以增加新的数据。

  4. 撤销可撤销的:发现可撤销却尚未实现的撤销功能

    1. 邮件撤回:应当在发送后提供几秒未真正将邮件发出的时间,供用户中止发送。

    2. 受商业或机构规则不应允许撤销的条目和记录:可提供撤销或修改途径,但留下审计痕迹。

15.3 假设:对比和预览

  1. 撤销和恢复功能是一个很方便的对比工具,可呈现对比或假设分析控件供用户先比较几种状态,再确认(如预览功能)。

  2. 用于对比时,撤销和恢复实际上是一个功能而不是两个。

16 为不同的需求而设计

16.1 易学性和帮助

  1. 命令模态:

    1. 命令模态:让用户将指令发给应用的特殊技术,如直接操作柄、下拉菜单和弹出菜单项、工具栏控件、快捷键,体贴的用户界面往往会提供多重命令模态。

    2. 教学式模态:以查看的方式讲授自己的行为,如对话框和命令菜单用描述性文本教会如何使用。

    3. 直接模态:不需要中间步骤、即时生效的命令,如直接操作控件、实时操控控件、普通按钮及各种工具栏变体。

    4. 隐形模态:可视界面上不显示的快捷键和手势,只有隐形的按键、滑动、挤捏或轻弹手指。

    5. 头脑中的信息比现实中的信息更易用,也更快,但前提是得确保已学了,未忘且最新。现实中的信息虽更慢、更麻烦,但是非常可靠。教学式命令通过现实中的信息实现,隐形命令通过头脑中的信息实现。

    6. 记忆矢量:让用户学会每个教学式命令相对应的直接命令的途径。

      1. 提供记忆矢量的方法:用户文档(效果最差)、在线帮助系统、将记忆途径集成到主界面(热键/快捷键)

      2. 任何记忆矢量都不会主动打扰新用户,但很容易记住并使用。

      3. 图标按钮是提供记忆矢量的优秀方式。

  2. 有效功能工作集:

    1. 定义:经过重复,中级用户总会记住的一部分命令和特性。

    2. 相似使用模式的用户工作集可能有相当大的重叠,但组成工作集的命令对用户个人来说都是特殊的。

    3. 设计师在提供直接访问最小工作集的功能时,还必须提供方法把其他命令提升为直接模态。(例外:毕竟危险的命令应予以保护)

  3. 上下文帮助和辅助页面:

    1. 导览教程:第一次运行时自动启动,最多不超过7.屏。提供”跳过“按钮,提供手动重启教程的途径。

    2. 覆盖层教程:在界面上放置了一层”透明薄片“,嵌入了箭头和描述性文本。

    3. 库和模板:给用户提供一个现成模板库

    4. 输入与内容区域提示:一小块文本,通常用灰底,在输入字段提供简要说明或者使用范例,一旦输入区域获得焦点,输入提示文本被清除后就可以输入了。

    5. 向导的优缺点:初次配置、在线调查界面中,向导是合适的。然而,向导严格的步骤而不是机智的对话,让用户觉得像是在受审问。

    6. 工具提示和覆盖式工具提示:悬停显示的工具提示用于桌面应用和触控笔应用非常有效,触摸屏则不支持手指悬停。覆盖式工具提示由点击帮助按钮触发,显示针对主要功能的简短、工具提示一样的标签和注释,所有提示一起出现,模态呈现,设一个关闭按钮。

    7. 传统的在线帮助:有许多特性和功能的复杂应用应该带一份参考文档。包括全文搜索、索引、概述、应用内置用户指南。

16.2 可定制性

  1. 个性化:个性化是特质模态的(特质模态:用户偏好明确地分成两组的情况),喜欢个性化和不喜欢个性化的用户都存在,设计师必须都考虑到。个性化工具必须简单易用,并提供可视化预览。

  2. 配置:

    1. 配置适合经验丰富的中级用户,以为了速度和易用而调整应用。

    2. 配置对专家用户是必需的。

    3. 移动工具栏配件是个性化的一种方式。

    4. 配置可以帮助企业应用更好地与公司流程、工具、软件契合。

16.3 本地化和全球化

  1. 本地化指按特定语言文化翻译某个应用软件,全球化指让应用软件尽可能在多语言文化下通用。

  2. 设计师需要确保颜色和符号在特定文化中没有不想要的特殊意义。没有隐喻意义的习惯用法对全球化界面来说相当安全。

  3. 界面翻译的注意事项:

    1. 有些语言的单词词组较长(德语、西班牙语),注意空间排列

    2. 有些语言的单词(尤其是亚洲)难以按照字母排序

    3. 不同国家的日期时间格式不同

    4. 数字和货币中小数点的使用方式不同

    5. 逗号和句号使用方法不同

    6. 部分国家采用星期计日。

16.4 无障碍性

  1. 大多数企业和消费应用都有需要无障碍界面的用户

  2. 无障碍的目标:

    1. 用户能轻易感知、理解所有的指示、信息和反馈

    2. 用户能轻易感知、理解、操控所有控件并进入输入

    3. 用户能轻易导航,并随时知道所处界面位置及其导航结构

  3. 典型的无障碍措施是设计一个单独的无障碍模式

  4. 无障碍人物模型的创建,最好是采访因为残障而影响使用产品的用户或潜在用户。

  5. 无障碍指导方针:

    1. 利用操作系统的无障碍工具和指南:按键和手势避免冲突,尽可能使用API输入

    2. 不要覆盖用户选择的系统设置

    3. 启用标准的键盘访问方式

    4. 为视力不佳的人加入显示选项:高对比度,放大字体和加粗,考虑色盲,减少界面元素动作和动画,不能单靠颜色传达含义

    5. 提供只有视觉和只有听觉的输出,不要闪动、闪烁、滚动、闪现的视觉元素

    6. 使用简单、明确、精炼的语言

    7. 响应时间要能满足所有用户:允许用户选择较长的响应时间

    8. 使用一致的布局及任务流程

    9. 给视觉元素添加文本释义

17 整合视觉设计

17.1 视觉界面设计元素

  1. 情景:光源、持握方式、姿势、背景

  2. 形状:人们识别一个对象是什么的首要方式

  3. 大小:较大的物品吸引的注意力更多,但可能增加成本。是有序变量、量化变量。

  4. 颜色:

    1. 色值:颜色深浅(与背景相比),是有序变量。对必须突出的元素,色值是吸引注意力的好工具。

    2. 色调:色相差异能迅速吸引注意力,但应使用有限数量的色调,以防让用户不堪重负。内在不是有序或量化的。需注意:

      1. 在某些行业,色调有特殊含义。

      2. 避开品牌和需求之间的色调冲突。

      3. 色盲在普通大众中很常见且分很多种。

    3. 饱和度:虽然饱和的颜色表示兴奋、生机,但也会带来喧闹、刺耳之感。

    4. HSV:色调/饱和度/色值系统,描述界面的任何颜色(与RGB类似)

  5. 方向:需要传达方向信息时使用,但最好当做次要沟通向量,因为观察不便。

  6. 纹理:多作为能供性信号,很少用于传达不同或者吸引注意力。即便在高度极简的扁平化设计中,恰当使用少量纹理也能大幅改善用户界面的易学性。

  7. 位置:可利用屏幕的阅读顺序连续定位元素,还可以反过来暗指概念关系。

  8. 文字与版面:*表明这是什么用视觉,明确这是哪一个用文字“

    1. 避免在界面中全部使用大写

    2. 使用高对比度文字(通用规则80%)

    3. 恰当的字体和大小:无衬线字体最适于阅读,衬线字体可用高分辨率、大字号、次像素平滑技术缓解显示问题。多数情况下10像素以下的字号难以阅读,必须使用时最好用锯齿无衬线字体。

    4. 简洁地组织文字:用最少的文字传达含义,避免使用缩写。

  9. 信息层级:使用视觉属性差异给界面分层。

  10. 动作及其随时间的变化:用以传达信息、不同部件间的关系,吸引注意,缓和过渡,确认命令效果。

17.2 视觉界面设计原则

  1. 传达风格/传播品牌:理解并体现产品线和机构的品牌承诺

  2. 带领用户理清视觉层级:确定用户需要理解的控件和数据的优先级,用基本视觉元素(位置、颜色、大小等,调整应克制)区分层级级别。

    1. 建立关系:

      1. 同时使用的在空间上组织在一起,不必同时使用但功能相似的在视觉上组织在一起。

      2. 相邻元素间设定不同距离即可有效实现分组,不相邻项目的分组可通过赋予共通视觉属性实现。

    2. 眯眼测试:闭上一只眼睛,眯着另一只眼睛观察元素。

  3. 在组织的每一层提供视觉结构和流:

    1. 对齐到网格

      1. 需要对齐的元素:对齐标签、对齐一组控件、对齐控件组和窗格

      2. 网格系统:采用原子网格单位代表元素间的最小间距。

      3. 不同大小的屏幕区域之间应保持一致的关系:黄金分割(1.61)、根号2、4:3等。

      4. 良好的布局网格是模块化的,足够灵活,同时尽可能保持一致性。

      5. 布局要明确,比例要突出、干脆,避免”差不多“是某个比例的情况。

      6. 网格的好处:提高可用性,美学上吸引人,提高效率。

    2. 创建逻辑路径:人眼阅读习惯是从上到下、从左到右

    3. 界面元素平衡:完美对称的界面缺乏层次感,平衡的不对称为屏幕和主要屏幕区域提供了视觉入口点。

  4. 在特定屏幕上告诉用户能做什么

    1. 使用图标:传达功能值和品牌属性,无论风格如何,都应保持一致。

    2. 传达功能感:

      1. 同时表达动作和动作施加的对象,以增进理解

      2. 小心使用与目标用户想象不同的隐喻和表现方式

      3. 在视觉上将相关功能分组,以提供空间上的使用情境,如果不行就用颜色或其他视觉主题提供。

      4. 保持图标简单

      5. 尽可能重用元素

    3. 将视觉符号与对象关联起来:行为不同的元素要在视觉设计上明显区分

    4. 简单地渲染图标和视觉符号:图标必须保持简单和示意性,使用最少的颜色和阴影,保持适当大小。充分渲染的图标会造成注意力分散和视觉上的不紧凑。

    5. 尽可能预览视觉效果:从视觉上传达功能和行为,将含义可视化。

  5. 响应命令:执行命令后用户需要看到某种响应

    1. 即时响应不需要额外的视觉设计

    2. 耗时超过0.1s的响应:提供细微的视觉线索

    3. 耗时达到10s的响应:提供线索告知轻微延迟

    4. 耗时超过10s的响应:显示提示,解释延迟原因,显示运行进度

  6. 把注意力吸引到重要事件上:积极向提供重要信息

    1. 吸引注意的机制不在我们有意识的控制下

    2. 挑战:很难再保持注意力信号有效地同时还保持体验一致

  7. 最小化视觉工作量:避免不必要的视觉噪音

  8. 保持简单:不必要的差异是可用且一致的设计的大忌

    1. 删减东西,直到破坏了设计为止,再把最后去掉的东西加上

    2. 杠杆:在界面中使用一个元素来表达多重相关的意图

17.3 视觉信息设计的原则

  1. 加强视觉对比:为用户提供可进行相关变量和趋势的对比手段,或是事件前后的对比手段

  2. 显示因果关系:使用非模态视觉反馈告诉用户其行为的可能结果

  3. 显示多个变量:在不影响清晰度的情况下,提供多个相关变量信息的数据应同时显示。

  4. 在一个界面中整合文本、图形和数据

  5. 确保内容的质量、相关性和完整性:确保所显示的信息能帮助用户实现特定目标

  6. 在相邻控件上显示事物,而不是按时间堆积:表达按时间发生的变化时,将变化安排在相邻控件上显示,而不要彼此叠加。

  7. 可量化的数据就要量化。

17.4 一致性和标准化

  1. 收购软件的一致性:软件厂商收购的软件具有相似的外观、感觉和行为,可以使其看起来就像内部开发的产品。

  2. 界面标准化:

    1. 益处:改善用户学习界面的能力、提高生产率,降低客户培训和技术支持费用。

    2. 风险:根据标准创建的产品不可能比标准更好。且多数界面标准强调的是界面语法(外观和感受),而很少涉及更深的行为和更高层次的逻辑结构。

    3. 界面标准最适合作为具体的指导准则和经验法则,但不能僵化地遵循。

    4. 什么时候打破规则:遵守标准,除非有极好的其他选择(目标用户试用后大多数人明显觉得更好)

  3. 应用程序之间的一致性和标准:一致性不意味着僵化,特别在一致性不恰当时,界面和交互风格指南准则必须随其缩服务的软件而成长和演化。

  4. 编写风格指南有助于设计师合理和简化设计语言。

Part 3 交互细节

18 为桌面应用而设计

18.1 剖析桌面应用

  1. 主窗口和辅窗口

    1. 主窗口:通常设计成独占式姿态,分隔成多个窗格。

    2. 辅窗口:最典型的辅窗口是对话框,如浮动的面板或工具板。

  2. 主窗口的结构:

    1. 一个(或多个,对可以并列查看或编辑多个文档的应用)内容区或工作区

    2. 一个菜单条:菜单栏、Ribbon(标签式)

    3. 多个工具栏、窗格(包括索引、侧栏)、工具板等,用于在工作区导航、选择或操作内容对象。

18.2 桌面系统中的窗口

  1. 层叠窗口:没有其他交互导航的辅助时不太实用

  2. 平铺窗口:用统一的小矩形均分屏幕,没有成为主流

  3. 虚拟桌面空间:屏幕上显示各个虚拟桌面的缩略图,该状态会被保留至下次重新登录

  4. 全屏应用:随着平板电脑和智能手机的普及,大家更偏爱全屏的使用体验

  5. 多窗格应用:独立而相关的信息可以在单个独占屏幕上轻松显示,并将导航和窗口管理的附加工作减少到几乎为零。另一种形式是堆叠窗格或标签。

  6. 窗口状态:最小化、最大化、多元化

  7. 窗口和文档:多文档界面(MDI)操作效率上很成问题,单文档界面(SDI)则每次只管理一个窗口,优化了操作效率。但MDI依然有其合理性,尤其当使用者需要在一个环境下处理多个有关联的信息视图时。无论是运用哪种交互习惯用法,都要考虑实际运用场景的客观情况。

  8. 窗口的运用:

    1. 对话框是一个房间,去之前要有个好理由

    2. 将功能置于需要它们的窗口中,避免开发太多不必要的房间(窗口污染),这些辅窗口包含的大量功能本该归类于主窗口中的窗格或其他工具栏。

    3. 日常操作所用的常用工具必须放在能顺手操作的地方,而非日常功能时,应用程序必须提供必要的房间(特殊场所)。

18.3 菜单

  1. 把菜单作为教学工具

    1. 菜单是一种教学工具,用户可以通过菜单和对话框来看所有可用功能。用菜单来提供一条学习途径

    2. 菜单的文本特性有助于功能解释,应有详细的文本描述

    3. 对初级用户而言,菜单的主要任务就是作为索引工具。对高级用户而言,菜单提供了一个固定的物理位置。

    4. 菜单中可为相关命令提供暗示,如将对应快捷键或按钮图标放到旁边。

    5. 从菜单调出的每个对话框中都应设置一个全局的撤销或取消按钮。

  2. 禁用的菜单项:禁用掉不适用的菜单项,用加亮或文本变灰表示。

  3. 复选标记菜单项:紧挨着菜单项的复选标记通常用来启用或禁止应用界面中的某个方面,最好用在结构简单的菜单中,否则会让菜单显得臃肿。复选标记菜单项远优于可切换两种状态的滚翻式菜单项(因为使用者无法分辨它到底是提供一个选择还是在描述一个状态)。

  4. 菜单上的图标:相同的命令要使用相同的视觉符号;使用Ribbon可将菜单和工具栏合二为一。

  5. 快捷键:

    1. 设计窍门:

      1. 遵循标准(惯用的组合)

      2. 形成日常使用的习惯

      3. 标明如何使用它们

    2. 验伤分类:确定命令集中哪些是日常命令时,用户与用户之间对于什么算“日常”的看法有非常大的差别。每个人都认为是的归为一组,每个人都不认为是的归为一组,其他归为一组。第三组还可以继续进行验伤分类。

    3. 最佳的加速器分配给最常用的功能,比较模糊的加速器分配给最不可能是每天使用的命令。

    4. 一定要在菜单中将加速器显示出来。

    5. 用字母键和数字键配合元键形成加速器时,要选择命名名字的首字母。

    6. 可提供自定义组合键功能,及其配套的“恢复默认值”控件。

  6. 助记符模式:例如可用Alt键开启助记符模式,此时用箭头键即可导航到所需的菜单。主要目的在于为每个菜单命令提供一个等效的键盘操作,因此必须是完善的。

  7. 级联菜单vs.单层分组:级联菜单已逐渐被单层分组的扁平菜单取代,可极大地提升应用界面的可自学性和可被发现性。对话框则是一种简版的菜单。

18.4 工具栏、工具板、侧栏

  1. 工具栏和菜单:

    1. 工具栏解决了模态下拉菜单的缺点:不易发现、操作繁琐。

    2. 工具栏为有经验的用户提供了快速访问常用功能的途径

    3. 同样是非模态,工具栏比对话框好用,因为用完后不必取消,且节省屏幕空间。当然,对话框可按喜好放在任意位置也是它的优势。停靠工具栏则是一个两全其美的方法。

  2. 工具栏按钮:具备按钮的受范特征,以及能够快速识别的图像。其图像并不需要告诉用户用途,只要容易辨识即可,用户通过其它方式会知道它的用途。

  3. 工具提示:图标同时配以图和文字会消耗掉过多地宝贵像素,工作提示则解决了这一问题。仅在图标旁边弹出一个暂时的、很小的窗口,包含一个文本标签(极简的短语或轻量级的帮助信息),鼠标悬停1s左右后才会出现。所有工具栏和图标控件都应使用工具提示

  4. 禁用工具栏控件:如果工具栏控件不适用于当前选择,应当被禁用。

  5. 工具栏的新用法:

    1. 包含组合框(显示当前选择的属性)、下拉菜单等,以紧凑的方式提供了强大的功能。

    2. 可移动工具栏:停靠或悬浮工具栏,互相遮挡时可通过扩展组合图标按钮和下拉菜单解决。

    3. 可定制工具栏

    4. 情境(弹出)工具栏:图标组和被选择对象有关

    5. Ribbon控件:包含多个带有文本标签的功能组

  6. 工具板:包含一系列互斥的功能,每个功能代表了应用的一种操作状态(创建状态、选择状态、操作状态),通常包含两列图标按钮或组合图标按钮。

  7. 侧栏、任务窗格(抽屉)

    1. 侧栏:可调整对象的参数,修改备选对象,把用户的困惑和屏幕管理工作量降至最低。

    2. 抽屉:任务窗格的一个变种,保留屏幕主题内容区域的同时,还可以被大部分或彻底隐藏,表现形式类似一个弹出式的抽屉。单机某个键就可将所有耳机窗格和工具板全部隐藏或恢复。

18.5 点操作、选择、直接操作

  1. 鼠标的人体工学:

    1. 在近距离活动和远距离移动之间有一条明显的分界线,前者使用的是手指肌肉的精细运动机能,而后者使用的是手臂肌肉的粗略运动机能,两者的转换是困难的(例如滚动条的拖动)。

    2. 原则:同时使用的东西,一定要放在一起

    3. 对于数据密集的任务,键盘比鼠标要好

    4. 浏览和选择的任务要同时提供鼠标和键盘支持

  2. 鼠标按键和控制:

    1. 左键:所有主要的直接操作功能,最常用的方式是激活或选择。

    2. 右键:额外、备选、高级功能,可直接访问属性及其他情境中针对对象和功能的相关动作

    3. 滚轮和滚球:屏幕上下卷,使用户无需费力地与滚动条打交道。按下滚轮较少使用(因为不好操作,或不小心滚动引起误操作)。

    4. 元键:ctrl, alt, command(Mac), shift,被用于改变命令。现已形成一部分习惯用法。用光标形状变化表明元键的用法

    5. 指向:当鼠标光标移到对象上时,对象会显示其受范性。

    6. 单击:单击意味着选择数据或对象,或改变控件状态。另外,按下的状态下光标离开控件可提供一条方便的“逃逸途径”。

    7. 指向+单击:

      1. 指向

      2. 单击

      3. 右击

      4. 单击拖放:选择、改变形状/位置、绘图、拖放,需提供逃逸途径。

      5. 双击:双击意味着单击再加上动作。注意对不太灵活的用户来说双击是困难的,可以设计既可以双击又有对应单击操作的习惯用法,以实现同样的功能。双击应尽量少用,特别是在单击可以胜任的时候(因为无法判断某个对象是否应该被双击)。

      6. 合击:同时单击两个按钮,不多见。

      7. 双击拖动:仅为专业人员专用,仅在特殊的独占式应用中使用。

      8. 鼠标释放和按下事件:在对象或者数据上按下鼠标意味着选择在空间上鼠标按下意味着预备动作;鼠标释放意味着执行动作,这种机制允许用户从容地退出无意中发生的单击。

  3. 触控板、轨迹球、手势传感器:触控板操作比鼠标困难,仅有当用户的确频繁使用时才必须考虑其可用性。轨迹球多用于需精细操控逻辑轨迹的软件中。手势传感器近年来多见于触控鼠标和多点触控板,设计应用时应注意与系统保留的手势发生冲突。

  4. 光标和选择:

    1. 光标:在任何光标上设置一个单像素作为指向的确切位置——热点。

    2. 命令次序

      1. 动词-对象次序:当用户想将动词施加于多个对象时显得较为笨拙。

      2. 对象-动词次序:可以轻松地在同一复杂选择上执行一系列动词,并且当用户选定了对象后,应用可以只显示出合适的相应命令,由此减少用户的认知负担。

    3. 选择:

      1. 选择可分为连续选择(如Word、excel中的文本和表格)与离散选择(如用ctrl+点击选择的多个不相邻文件)。

      2. 互斥:当做出一个选择后,以前的任何选择都作废了。

      3. 添加选择:多数离散选择系统默认情况下采用互斥机制,只有使用元键时才允许添加选择(Shift最常用,Ctrl其次)。连续选择系统通常不允许添加选择,但可以对选择方式加以拓展,Shift可用于选择第一个和第二个对象之间的所有内容。

      4. 成组选择:拖动矩形选择框,选择成组的对象。

    4. 选择的视觉提示:必须清晰、醒目地向用户指出选中的对象

      1. 要让选中这种状态,在视觉上明确而醒目

      2. 确保用户能轻易地辨别哪些项目已选定、哪些没有。仅仅让人能看出项目不同是不够的,注意色盲。

      3. 常用手段:反色、背景变彩色、勾勒边框、伪3D凹陷、控制柄、动画选取框(围绕对象移动的虚线)。

  5. 插入和替换:

    1. 插入点:两个元素之间的位置。

    2. 文字处理器中称为插入符号,多为一小段闪烁的黑色垂直光标,如果拖动并扩展选择,插入符号会消失并变为文本的连续选择。

    3. 电子表格中则通常没有插入点的概念。

    4. 应用程序支持插入点的副作用:使任何拖放习惯用法更难表达。

  6. 拖放:

    1. 视觉反馈:

      1. 拖放候选对象必须在视觉上表明它们的接受能力

      2. 拖动光标必须在视觉上表明源对象

      3. 把表示禁止的符号添加到光标暗示中是两种较差习惯用法的糟糕组合,应避免使用。

    2. 指示拖动受范性:开始拖动操作后,必须有某些视觉指示——最生动是的是使拖动操作完全活动起来。拖动轮廓对大多数重新定位也是合适的。

    3. 指示拖放候选对象:当光标带着源对象移动经过多个候选对象时,拖放候选对象应在视觉上显示它们是可能的目标。只有当前可见的对象才可能是拖放候选对象。

    4. 插入目标:有些应用中,源对象可以被释放并落在其他对象之间的位置。

    5. 完成时的视觉反馈:将操作已发生这个事实在市局上表达出来(通过动画或视觉状态的改变)。

    6. 自动滚屏:

      1. 当对象拖出软件边界时,如果用户期望的是将其拖放至同一软件的不同位置,程序则必须朝拖动的方向自动滚屏。

      2. 任何可滚动的拖放目标对象都必须支持自动滚屏

      3. 变速滚屏:光标距离窗口边界越近,自动滚屏速度越快。

      4. 时间延迟:避免用户无意中启动自动滚屏,应为拖动光标进入自动滚屏敏感带设置一个合理的缓冲值(约半秒)。

      5. 当拖动光标完全超出软件的可滚动窗口时,则不会发生自动滚动,而是意味着将内容拖放到其他程序中。

    7. 避免拖放抖动(去颤动):

      1. 当一个对象既可以被选择、又可以被拖动时,鼠标偏向于选择操作。

      2. 拖动阈值:除非移动超过最小阈值(如3个像素),否则忽略掉鼠标按下事件后的所有小幅度的鼠标移动消息,以避免无意中激活拖动操作。

      3. 所有应用程序都要去颤动

      4. 更复杂的拖动阈值:如区分水平拖动和垂直拖动的“轴向不对称阈值”,为其中更不常用的一者(如垂直方向)设置较大的阈值,使操作更倾向于水平拖动。而如果用户确实像要垂直拖动,一个向上或向下的明显活动都可以确认其意图。

    8. 精确滚动:将一个对象拖动到确切的位置上非常困难,因此需要精确滚动功能。

      1. 方法1:拖动期间,如果用户需要更精确的调整,就可以改变鼠标移动与显示屏上对象移动的比值。

      2. 方法2:拖动期间按下元键,将鼠标改为游标模式。

      3. 方法3:拖动期间激活箭头键以移动单个像素,辅以元键可提供稍大倍数的移动距离。然而,释放鼠标时用户手的移动可能导致一两个像素的偏离,解决方法是在接受第一个游标按键时,使鼠标不敏感。

  7. 控件操作:

    1. 避免过多使用“单击并拖放”这一复杂操作,尽量用一系列单击来操作,而无需单击和拖动。

    2. 模态工具和工具板:

      1. 使用模态工具时,显示区完全处于这种工具的模态中。通常应用程序会改变光标的外形,来表明当前激活的是什么工具。

      2. 通常提供光标选择工具用以将光标恢复到用于选择的指针状态。

      3. 管理模态工具应用的难度,更多来自工具胖达的数量,而不是模态本身。可通过充分利用元键等键盘命令解决这一问题。

    3. 加载光标工具:单击一次即创建一个实例,创建新的对象后即处于选择状态,控制柄能立即精确地调整对象和形状和大小。

  8. 2D对象操作:

    1. 调整位置:通过单击-拖动实现。

      1. 问题在于会侵占其他直接操作习惯用法的使用空间,因此可将对象的某个专门区域用于调整位置(如工具栏)。

      2. 约束拖动:元键常用于限制对象在一维上拖动。

      3. 网络:提供网格辅助位置调整。

    2. 调整大小和形状:通过控制柄实现,也可以用元键约束、调整尺寸的方向。操作更复杂的对象形状时,则需要顶点控制柄、贝塞尔控制柄等。

    3. 连接:

      1. 拖动两个对象之间的连接时,以橡皮筋的形式提供视觉反馈。

      2. 连接本身也可以成为对象,具有操作点和可以编辑的属性。

      3. 连接不需要光标暗示,但需要在存在逻辑关系的连接中体现出指向性。

  9. 3D对象操作:

    1. 显示问题:2D显示不具备视差,近距离对象会挡住远距离对象。

    2. 多重视点:俯视图、正视图、侧视图、正交投影、透视投影等,可启动多窗格窗口便于对比。缺点在于,用户需要同时观看多个地方才能找到对象位置。

    3. 多重视点缺点的解决途径:

      1. 基线网格:提供带有虚拟地板和强迫的场景,每个轴一个

      2. 景深:视野较深的对象显得暗淡

      3. 阴影:将轮廓投影到网格上,投影与网格相互影响时可以用单层地板网络+标杆来解决。

      4. 准线:上述方法引入了过多的网格和标杆,对部分应用程序具有破坏性。因此可通过布置3D网格和度量准线解决。

    4. 线框和边框:可解决对象的可视化问题。此外,透明化也可以达到类似的目的,但有很高的计算强度要求。

    5. 输入问题和习惯用法:

      1. 拖动阈值:沿一个轴的运动应以光标和其他类型的暗示来提供丰富的视觉反馈。

      2. 选取问题:鼠标在重叠的项目中选取时,软件很难知道选择的究竟是哪一个。可考虑以下解决方法:在视图外的列表中选取、在键盘上输入对象名字、按对象属性选取、弹出重叠对象的工具提示式列表允许用户从中选取。此外,便捷的旋转可在某种程度上改善选取问题。

      3. 在空间上能实现的操作数目过多:要兼有调整位置/大小/形状、对象旋转、摄像机缩放/移动/旋转等大量操作,因此元键和快捷键的分配非常关键。为便于判断视点位置,可在显示屏的一角加入情景绝对视图的缩略图。

19 为移动设备和其他设备而设计

19.1 剖析移动应用

  1. 移动应用的姿态

    1. 虽然占据整个屏幕,但根据交互特点(短暂、临时、关注与特殊任务),大多数移动应用是暂态的

    2. 移动屏幕上的信息和控制密度与桌面应用上对话框相近,同样说明最好把移动屏幕当做暂态对待。

  2. 移动设备的外形大小

    1. 手持设备:4~6寸高而窄的屏幕(多为16:9),使用时竖直方向为主。

    2. 平板:9~10英寸(苹果4:3,谷歌和微软多为16:9),苹果竖直和水平使用皆可,谷歌和微软则侧重水平使用。

    3. 小平板:7~8英寸,类似平板。

  3. 移动设备应用特点:

    1. 手持设备:

      1. 全屏

      2. 堆叠布局

      3. 屏幕轮显

      4. 基于屏幕方位的布局:大多数应用可保持垂直布局不变(尤其是列表或网格式的内容浏览),但部分适合横屏的应用应允许屏幕选择。

    2. 平板应用:

      1. 堆叠布局

      2. 可包含索引窗格:可包含索引等辅助窗格,按键调出,可覆盖一部分主内容(横屏状态下取消覆盖)

      3. 可弹出控制窗格

      4. 基于屏幕方位的布局:不但需要可旋转,还需要灵敏自然地自我调整。部分特殊应用(如播放器、电子书)可能只需要考虑支持一个方向。

      5. 类桌面布局:多数情况下不实际,媒体浏览、查看和网购类应用、复杂的创作型应用例外。如果采用类桌面布局,应当:确保各控件具备一定面积(足够手指操作)、不用或少用拖放操作、弹出面板要指向来源地并标明页眉、尽可能将工作流线性化。

      6. 类硬件控件布局:多点触控的引入,特别适合将音乐创作领域软件设计成类硬件控件布局,甚至在模仿的基础上设计更有创意的操作动作。

    3. 小平板应用:

      1. 避免多个相邻的窗格:水平屏显时最多2个,垂直屏显时极力避免。

      2. 工具栏最好垂直地放在侧边。

      3. 列表:单列列表在小平板上过于单薄,网格、泳道、卡片才是最佳方式。

      4. 弹出对话框:代替手持应用上的全屏习惯用法。

19.2 关于移动导航、内容、控制的习惯用法

  1. 浏览控件

    1. 列表:最常用的组织方式

      1. 例:一行一行的项目、一段一段的文本、一排一排的控件及其标签、图片或视频缩略图等。

      2. 列表通常和标签栏一起,提供多平内容的访问,每个标签调出一个独立的列表

      3. 无限滚动的列表是一个优美的方法,但前提是列出新内容的等待时间要足够短(一定要<1s)

    2. 网格:将应用的图标、缩略图、功能图标等组织成规则的行列形式

      1. 主画面网格用于组织应用图标,其中微软的Zune还结合了通知信息

      2. 网格视图通常被用来展示媒体内容

      3. 使用张合手势缩放网格会造成严重的可读性问题

      4. 网格也可以进行有限或无限的滚动,靠近边缘的图标只能部分显示可以暗示滚动方向

    3. 内容轮显:使用水平滑动手势以全局布局的方式在不同内容间导航

      1. 轮显内容应有适当的尺寸和间距

      2. 轮显可设计为从头到尾循环显示,在末尾需给用户以清晰地视觉提示

      3. 一个屏幕上只能使用一个轮显,且其位置在整个布局中要显著

      4. 页标小部件可提示当前处于哪一页,但仅适合条目不多的轮显

      5. 自动滑动轮显有助于用户学会该行为并确保用户看到应用想突出显示的东西

      6. 用户在操作屏幕上其他元素时,自动滑动要停下来以免干扰。

    4. 泳道:一组垂直排列的轮显,每个轮显都可以独立水平滚动,对其他轮显没有影响,导航到其他泳道只要垂直滚动就可以。

      1. 泳道可设计成到达末尾就自动返回起点,并在起点和末尾打上记号。

      2. 泳道千万不要设计成自动滚动。

    5. 卡片:一个自我封装的交互对象,包含媒体、文本、网页链接、社交动作等,甚至和用户当前情境有关的信息片段(位置、时间等)。

      1. 很多社交软件都将其作为核心的习惯用法

      2. 最常见的组织形式是列表,但也可以网格、轮显和泳道的形式出现。

  2. 导航和工具栏

    1. “栏“是手持应用中用于导航的主要机制,通常位于屏幕顶端或底端的水平窄区域,栏里是一系列类似于标签或者按钮的控件(图标/文本/二者兼有)。如导航栏下方或屏幕底部的标签栏,平板应用中可能位于屏幕左侧。

    2. “更多“控件:标签栏项目数最好不要超过5个,超过5个时可引入”更多“控件,将用户带到下一个屏幕或显示更多导航选项。

    3. 标签轮显:水平滑动轮显和标签栏的完美结合。应至少让一个标签看起来是部分处于边缘外的状态。

    4. 导航栏:屏幕顶端,提供导航功能,左边有回退按钮,中间是标题,右边是功能菜单或按钮。安卓系统在底部有系统自带的导航栏,含回退控件、主画面控件、“最近访问“控件,因此应用自己的导航栏只能放在屏幕顶端。

    5. 工具栏:包含针对当前应用或应用内所选内容的操纵功能。

    6. 工具板:工具栏的变体,包含一些图标按钮,用于访问和操作被查看和编辑的对象,平板中多使用弹出控制面板。

    7. 垂直的工具栏和工具板:用于平板应用,出现在屏幕左边/右边或两边的支持弹出控制面板的更为复杂的工具栏和工具板。

    8. 工具轮显:工具栏与轮显结合的形式,带文本标签的缩略图描述了当前的滤镜或特效。

    9. 菜单栏:移动设备上应避免使用的习惯用法,难以从标签看出其功能。

  3. 抽屉:

    1. 抽屉:用于访问一个包含了导航元素的垂直列表,其内的项目通常都是文本的。

    2. 抽屉图标:三个堆叠的横杠,昵称为”汉堡包菜单图标“。

    3. 抽屉可取代导航标签栏,也可与应用中的次要对象交互。

    4. 双抽屉:左右各设置一个抽屉,一个用于导航,一个用于收发信息等操作。

    5. 条目级抽屉:将滑动抽屉的概念用到了列表中的单个条目,滑动单个条目(向左或向右)后,会将条目底下的工具栏展现出来。存在的问题:难以察觉、条目被滑走(或模糊)后增加记忆负担、使类似的水平滑动操作不可用(滑动删除或全局导航抽屉)。

    6. 要避免的抽屉行为:过度使用动画式屏幕转换、弹出窗格、滑动窗格,要限制动画式屏幕转换的次数和出现的方向

    7. 抽屉存在的问题与补救:抽屉将功能隐藏了起来,妨碍了使用,可用文本按钮代替汉堡包图标以增强辨识度,或将抽屉的初始状态设为开,或在首次使用帮助或提示中提供教学。

    8. 如果应用本身很少被用到,则最好不要使用抽屉。

  4. 轻拍显示及其他直接操作:轻拍显示控件指轻拍一个对象,调出一些隐藏功能。手势直接操作控件需要探索和尝试,但很容易上手。

  5. 搜索、排序、筛选

    1. 隐式排序、显示排序:聪明的应用会跟踪用户浏览过的、喜欢做的、过去购买的东西,来推荐用户可能需要的东西。

    2. 构建搜索要求:语音搜索、自动填充、预加载、最近/频繁搜索建议、自动推荐、分类推进。

    3. 排序和筛选:

      1. 有效的排序可将不需要的结果筛选掉或置于搜索结果的最下方。

      2. 可将排序和筛选结合起来做成一个控件。

  6. 欢迎和帮助界面:

    1. 制约用户学习和掌握速度的因素:

      1. 有限的屏幕尺寸

      2. 控件通常不具备能供性提示

      3. 无法使用鼠标悬停调出提示

    2. 欢迎和帮助界面通常无须分开,但创作类应用除外,因此两个界面应同时具备。

    3. 导览:由一系列带有文本和图片的卡片轮显组成,一般在首次使用或重大更新后激活。让导览引导首次使用的用户

    4. 覆盖层:半透明覆盖层将屏幕覆盖住,并在上面显示出提示和帮助。用覆盖层展示手势的用法

    5. 工具提示覆盖层:覆盖层的变体,在一个覆盖层界面上同时显示出当前页面的全部主要功能,通常用于复杂的创作类软件,适合用在帮助而不是欢迎界面。

19.3 多点触摸手势

  1. 轻拍选择、激活或开关

  2. 轻拍保持(不建议)

  3. 拖滚:垂直拖动可用于滚动列表(到边缘时拖动并释放可刷新)、调出顶(底)端抽屉,水平拖动可用于滚动轮显或泳道、打开左(右)侧抽屉。

  4. 拖移:移动或复制对象

  5. 拖动控制:控制旋钮、滑块、单维操控板、各式情境触控物

  6. 滑动:

    1. 向上/下滑动:与拖动基本同义,但具有惯性效果,使列表或网格向上(下)滚动数秒。iOS桌面编辑模式下向上滑动意味着关闭应用。

    2. 向左/右滑动:与拖动基本同义,但具有惯性效果,使轮显或泳道向左(右)滚动数秒。有时也用于打开或关闭抽屉、导航、删除等操作。

  7. 双指张合:合拢用于缩小对象,张开用于放大视图。

  8. 旋转:用于旋转控件,但做起来不太方便。

  9. 多指滑动(不建议)

19.4 应用间集成

  1. 应用独立运行模式的缺点:应用之间的协作和数据交换困难。

  2. 应用间集成示例:电话-联系人,联系人-邮件,电话-场所检查-情境模式设置,IFTTT等专业的集成应用。

19.5 其他设备

  1. 一般性设计原则:

    1. 不要把你正在设计的产品认为是计算机:大多数嵌入系统没有桌面软件的屏幕、内存、输入设备等环境,且场合与桌面应用大不相同。

    2. 把硬件和软件设计集成在一起:软硬件交互非常关键。

    3. 让使用情境驱动设计:嵌入设备的使用常处于持续移动中、公共场所等特殊情境元素中。

    4. 模式的运用要明智,如果有的话:限制模式的数量很重要,且模式的切换最好是可以在情景转换时自然地进行。

    5. 限定范围:一定不要把这些专用系统变成通用的电脑。

    6. 根据显示器分辨率考虑导航:在信息显示的清晰度和导航的复杂度上进行取舍和平衡,避免屏幕的闪烁。

    7. 尽可能简化输入:

      1. 嵌入系统的输入(尤其是文本输入)是非常困难的,应极力避免。

      2. 首选的输入方法应该是非接触式的:语音、接近开关、非接触式手势输入、软键盘

      3. 避免拖放操作

  2. 为专用手持设备而设计:

    1. 考虑持握和携带方式

    2. 尽早决定单手操作还是双手操作

    3. 避免使用多个窗口或弹出窗口

  3. 为信息台而设计:

    1. 信息台vs.桌面系统:

      1. 使用者是最典型的非频繁使用者,通常最多使用一次。

      2. 通常不提供键鼠输入,即使有也不是非常顺手。

      3. 通常处于公共场所,充斥噪音和干扰,身后可能还有等待者。

    2. 交易型(金融服务、贩卖机):

      1. 用户:用户只关心他们早已明确的目标是否能以最快的速度以最无痛的方式完成

      2. 公共场合下的交互:无需故意吸引使用者,但位置应该显眼并照顾使用者的来去,自动提款机等还要考虑安全因素。

      3. 声音反馈:谨慎使用。

    3. 探索型(教育和娱乐类):

      1. 用户:期待通常是开放式的,其探索行为必须要吸引住使用者、激发使用者的兴趣以进一步探索系统中的其他内容。

      2. 公共场合下的交互:既不能离景物或展品太近,也不能离得太远(还需要安放一些路牌或周边地图);考虑几个人同时使用的情境;鼓励长时间的逗留。

      3. 声音反馈:可以使用,但音量要适度。

    4. 公共场合下的其他注意事项:考虑各自能力人士的需要、尽量做成非接触式(接触式容易变脏、传染疾病)。

    5. 管理输入:

      1. 确保单击对象足够大

      2. 保守使用软键盘输入

      3. 避免使用拖放操作

      4. 硬按键与屏幕对象之间应特别注意一致性

  4. 为十英寸(电视机)界面设计:

    1. 交互方式:遥控器对着电视和机顶盒方向

    2. 列表、网络、轮显、泳道等设计可考虑与遥控器的D型板(含上下左右四个键)对应起来。

    3. 注意事项:

      1. 屏幕的布局和视觉设计要看清楚

      2. 导航要简单,最好充分利用五向遥控器(上下左右中),或采用一些视觉的道路导向技术。

      3. 牢记控制集成,避免需要同时用多个遥控器。

      4. 遥控应尽可能简单,复杂的遥控器上包含过多极少用到的功能。

      5. 可考虑在遥控器上加一个小显示屏,但可能分散注意力,因此需要权衡风险。

      6. 重点要放在用户的目标和活动,而不是产品的功能。

  5. 为汽车界面设计:

    1. 交互特点:复杂或令人费解的交互需要占用驾驶员过多注意力,让驾驶员处于危险境地。

    2. 设计原则:

      1. 手离开方向盘的时间尽可能短,常用的导航控制应直接放在方向盘(供驾驶员使用)和中心控制台(供乘客使用)。

      2. 屏幕切换时布局要一致。

      3. 尽可能运用直接控制对应关系。

      4. 小心选择输入方式,旋转型比按钮型更合适。

      5. 硬件控件的物理外形区别应尽可能大。

      6. 显示屏在视觉设计上的对比度强烈。

      7. 模式和情境的转换要简单且易于理解。

      8. 提供声音反馈,并注意音量大小。

  6. 为语音界面设计(如语音留言系统、自动呼叫中心):

    1. 交互特点:无任何视觉信息

    2. 设计原则:

      1. 按照用户的心理模型来组织和命名功能

      2. 一定要明示出当前可选的功能

      3. 任何时候都可以返回到上一步或最高等级

      4. 任何时候都可以转到人工接听

      5. 给用户足够的时间来响应

20 网页的设计

20.1 基于页面的交互

  1. 导航和寻路

    1. 最普通的网页应用,导航量通常也比本地应用大得多。

    2. 一级导航:如何让用户到达网站的主要区域或位置。多置于顶端(顶端导航),侧边导航会使页面显得拥挤。

    3. 用户正在某一页面上时,也可以按照用户在系统中所处位置来动态地控制导航的隐藏和显示,不一定彻底隐藏或始终显示。

    4. 采用永久固定的页眉来保持情境:即用户向下滚动屏幕时,将顶端导航始终置顶,但品牌信息和其他元素被尽可能缩小以降低视觉干扰。

    5. 移动端网页应用中则避免将导航栏永久地固定在屏幕上,而是在用户点击某个菜单或汉堡包控件时才调出。

  2. 二级(及更深层级)导航

    1. 最好能控制层级数量,让导航空间扁平化。

    2. 优化二级或更深层级导航的方式:

      1. 在左侧放置一个跟随一级导航的二级水平导航链接菜单

      2. 胖导航:当用户点击上一级导航项目时,扩展显示出一大块选择内容的区域,得以很自然地接续一级导航的交互,具有模态和临时显示的优点,可以被允许运用大块的屏幕空间。

    3. 反馈用户位置信息的方式:

      1. 在导航元素上提供视觉反馈

      2. 面包渣:一系列直接显示用户所在层级结构中的位置的链接。*带有横向链接的“面包渣”让导航更快捷。

    4. 内容导航:

      1. 列表:最常用的内容导航方式,将文章标题、简介、照片等内容条目组织成列表的形式,如社交软件中的推送风格。

      2. 突出的版面设计:比较新或重要的项目可以用较为突出的版面设计(例如轮显),或是改变其大小和位置。

      3. 内容应按照一些方式来组织和排序。

    5. 搜索:

      1. 自动填充(预先键入)、自动推荐(去模糊)、分面搜索(让用户指定被搜索条目的属性)可以让用户更快地找到所需的东西

      2. 基于属性的排序和筛选在设计分面搜索时可以借鉴。

      3. 分类推荐是提高搜索效率的另一种方法。

    6. 滚动:

      1. 网页体验中,重要的信息和功能都是可以滚动的,且有时必须要滚动才能看到并操作它们。

      2. 视差:当今流行的一种新型、吸引人的交互方式,当用户滚动页面时,页面上的元素会按照不同速度移动。

      3. 让滚动变的更投入:让用户始终知道自己在滚动页上所处的位置。

      4. 完整的内容单元最理想的情况下应放在一个滚动页面中,但现实中出于广告流量考虑多采用分页。

    7. 页眉和页脚:

      1. 页眉:通常可包括品牌元素、永久固定的导航项目、一级导航项目、网站注册入口、搜索框

      2. 页脚:适合放置用户下一步去向的建议和推荐,以及法律声明、胖导航信息等永久固定信息。

    8. 分页vs.无限滚动:

      1. 社交媒体流和搜索结果页面一般采用无限滚动形式。

      2. 无限滚动与网站页脚是互斥的习惯用法

      3. 无限滚动的其他可用性问题:导航可能无法有效工作、后退/前进/刷新后无法记住上次离开时的位置,使用户缺乏安全感。

      4. 无限滚动适合无法直接到达,或无法预测滚动到何时才能看到所需信息的页面(如推送新闻)。如用户需要快速到达信息列表底部,或是浏览一段时间后还需回到先前某个位置,则避免使用无限滚动。

20.2 移动网页

  1. 自适应设计

    1. 定义:界面可以自我调整,从而去适应任何尺寸的屏幕的界面技术。

    2. 临界点:自适应设计中关键的几个屏幕宽度。

    3. 原则:*如果你的网站只有一个版本,一定要把它设计成自适应。

    4. 基本观点:网站或应用无须为不同屏幕尺寸设计多个版本,一个可以动态适应多种大小的屏幕版本足矣。

    5. 优点:所有开发人员组成单一团队,面对单一概念框架。

    6. 缺点:UI复杂,每个临界点都意味着要多开发一个布局。

  2. 单独创建移动版本:

    1. 移动设备屏幕尺寸不尽相同:但这几乎是不同移动设备间唯一的大的区别

    2. 输入方式不同

    3. 不同光线下的屏幕浏览效果

21 设计细节:控件和对话框

21.1 控件

  1. 命令控件(“谓语”)

    1. 按钮:

      1. 进入移动时代后,三维印记被移除,导致可学性变差。但矩形(或圆角矩形)的控件仍具有命令的能供性。

      2. 对话框中总有一个默认按钮常被高亮,将最合理的动作标示出来。

    2. 图标按钮:

      1. 能供性只有在被鼠标指向时才出现,减少了视觉上的混乱。

      2. 缺点往往不是来自按钮部分,而是来自图标部分,首次使用者很难一下子明白图像的确切含义,此时需要引入工具提示。

      3. Ribbon控件结合了文本和图标,虽然牺牲了部分屏幕空间,但更加易用。

    3. 超链接:链接用于导航,按钮用于动作

      1. 超链接已发展为具备更复杂用途、功能的东西,例如作为构建复杂交易网站的导航基础。

      2. 链接通常还是应该被用在浏览内容上,而在动作和功能上采用按钮和图标按钮。

      3. 技巧:同一界面中的相邻位置上,同时运用按钮和超链接按钮,按钮用于缺省选择,而超链接用于另一个不常用的选择。(实际上是诱导用户不要注意超链接的“诡计”,应避免滥用)

  2. 选择控件(“宾语”)

    1. 复选框:

      1. 单击后有一个检查标记,再次单击除去标记。

      2. 有强烈的视觉启示:有受范区域,当鼠标经过时会突出显示。

      3. 方形复选框是一个重要的标准。

    2. 开关按钮:

      1. 单击时保持凹进(按下),再次单击时凸起(弹回)。

      2. 按下的状态不是瞬间的,而是锁定直到再次单击。

      3. 图标的费解性同样需要工具提示解决。

    3. 状态切换按钮:会造成矛盾和歧义,应避免使用

    4. 单选按钮:

      1. 行为上是互斥的,选择一个选项时,以前选择的选项会自动取消。

      2. 只出现一个单选按钮是没有意义的,此时应该使用复选框或相似的非互斥选择控件。

      3. 单选按钮都是圆形的。

      4. 单选图标按钮:图标按钮也可以代替单选按钮,将两个或以上开关图标按钮按组放在一起,并且相互排斥。

    5. 开关:由两个挨着的压缩版单选按钮组成,由鼠标单击或手机上的滑动实现切换。

    6. 组合图标按钮:

      1. 通常是一个右侧有向下小箭头(或向下/右的小三角)的单一锁定图标按钮,按住箭头(或该单一图标)时会下拉出一个菜单,包含数个可选的单选图标按钮。

      2. Ribbon控件中,点击图标本身会直接运行命令,而点击图标上的箭头才会打开包含不常用命令的菜单。

      3. 优点:可以将很多效能和信息堆积为紧凑的控件。

  3. 列表控件:

    1. 列表控件:一个很小的文本区,右侧有一个垂直滚动条,用户在一组有限的文本字符串中进行选择,排除了做出错误选择的可能。有一种可多选的变体,单击时配合元键Ctrl或Shift可选择多个项目。

    2. 下拉菜单也可以看作是列表控件的一个变体,其初始状态展示了上次被选中的条目,直到该条目被点击或轻触,其他选项才出现。

    3. 滚桶控件(iOS):文本列表被印在圆柱体的表面,滑动旋转圆柱体直至需要的条目出现在控件中央。有时可以包含几个独立选择的圆柱,使得它特别适合用来选择日期和时间等内容。

    4. 用图标来区分列表中重要的文本项:在列表视图控件的每行文本前点缀一个图标或预览视图,有助于提供比纯文本更好的交互。

    5. 做记号:可用的离散项目集合太大,不适合在单个视图显示时,可用复选框提供做记号的功能。

    6. 从列表中拖放:帮助用户把可拖动的条目收集成一个集合,有两个相邻列表控件:一个显示可用项,一个显示已选项。两个框之间有一个(或一对双向的)按钮,允许选择项目并且从一个框转移到另一个框,或两个框之间可以直接拖动。

    7. 列表排序:为重要的列表提供自动排序功能。除了对整个目录的排序外,还应提供单独对一部分内容进行排序的功能,以及将条目从一个位置拖动到另一个位置的功能(需要配合自动滚屏)。

    8. 列表中的水平滚动:绝对不要水平滚动文本。文本太长可考虑换行缩排或截断(在工具提示中显示完整文本)。

    9. 在列表中输入数据:现代的列表和树形控件都提供了现场编辑工具。

    10. 下拉列表和弹出列表:以更紧凑的方式从列表中单选一个条目,单选完毕后,弹出列表便自动收起。

    11. 组合框:一个列表框和编辑字段的组合,提供了一个确定的方法在列表控件中输入数据。和一般的列表框一样,组合框也有一个下拉列表,显示当前的选择,而不是显示选项列表(例:Office的字体栏)。

    12. 树形控件:表达层级关系数据的列表视图,展现得如树的分支,每个条目一个图标,条目可以展开或折叠。注意避免将非层级数据强行放在树形控件中,只有具备非常自然地层次结构时,才可以使用树形视图。

  4. 输入控件:

    1. 有界输入控件:能限制用户输入值大小的控件,可有效避免用户输入无效的值。原则:有界输入要使用有界控件

    2. 微调器:包含一个小的编辑字段,附有两个半高的上、下按钮。iOS中称为“步进控件”,有一个加号键和一个减号键,手指操作更容易。

    3. 刻度盘和滑块:设计不当的刻度盘造成操作困难,滑块是更好的选择,可以在一个维度上移动。刻度盘最适合专业的独占式应用(尤其是音频软件),以供用户逐步熟练并适应。

    4. 拇指轮:刻度盘的变体,普遍用在某些三维应用中,适合平移和缩放。

    5. 无界输入控件:可接受用户键入任何数据的控件,主要是文本编辑控件。如果所需的值是有限的,就不应该使用文本控件,而是考虑滑块等有界输入控件或列表控件。

  5. 输入验证控件:

    1. 验证控件:内嵌验证和反馈功能的无界文本输入控件。考虑到在视觉上区别行为不同的元素这一设计原则,验证控件在视觉上要与非验证控件区分开来。密码或其他的安全输入控件不完全遵循可用性的设计原则。

    2. 主动验证和被动验证:

      1. 主动验证:在输入过程中控件主动拒绝按键,告知用户、提醒用户拒绝的原因。

      2. 被动验证:只有等到用户完成数据输入才验证。

      3. 递减计时器;每次按键重新计时的计时器,变为零时开始验证。周期约为半秒,当用户暂停超过半秒时,应用程序理应认为用户已经停止思考,继续完成对当前输入的分析。

      4. 可以改变输入字段的颜色,反映对输入数据有效性的判断,提供丰富的视觉反馈。

    3. 暗示:小的弹出文本,外观行为与工具提示相似,功能是解释验证控件可接受数据的范围。另外,工具提示只有光标在控件上停留了一会才出现,而暗示框只要控件检测出无效字符就会出现。

    4. 处理出界数据:恢复到先前有效地值,或更智能的转换。

    5. 单位和度量:能识别单位的文本编辑控件可有效地将不同单位制的数据转化为后台所需单位,甚至允许输入default、best fit等值(同时在组合框中提供相同的功能)。

    6. 不要使用文本编辑控件输出,使用户误以为可编辑。仅供输出的文本用非编辑控件(显示控件)显示

  6. 显示控件:管理对象在屏幕上的视觉展现和静态只读信息的控件。

    1. 文本控件:做其他控件的标签,或输出一些不能或不应该由用户改变的数据。问题在于经常被用在了本应使用编辑控件的场合(或相反),实际上区分这两种机制是没有意义的,几乎所有的情况下,显示的值应位于可编辑字段中,用户单击后即可直接更改它。

    2. 滚动条:指示着当前位置且通常显示出可滚动区域比例的控件。

      1. 文本页面的滚动条在滚动时应同时显示出总页数、当前页数、页面缩略图。

      2. 滚动条的功能拓展:跳读按钮、跳至首尾的按钮、书签、注释

      3. 移动应用甚至一些桌面应用中,滚动条都在需要滚动时才出现。

      4. 桌面应用上的滚动条隐藏不可避免地会带来一些问题,如用户看不出窗格是可以滚动的,滚动的精确控制也更困难。因此桌面应用上最好不要隐藏滚动条,屏幕较大时除外。

      5. 文件导航器:用一个小缩略图来表示整个文档空间,提供文档某个部分的视图,是滚动条的一个优秀的变体。

    3. 分割线:将独占应用分为多个相关窗格的有用工具,每个窗格中的信息都可以浏览、操作、变换。

    4. 抽屉和拉动杆:

      1. 抽屉:独占式应用中可以用一次动作打开或关闭的窗格,用于存放不常用的控件和功能,配合分割线可打开多个抽屉。

      2. 抽屉通常通过单击抽屉临近的控件打开,该控件通常是锁定按钮、图标按钮或者拉动杆,且必须始终可见。

21.2 对话框

  1. 合理运用对话框

    1. 把主要的交互操作放在主窗口内,对话框适用于放那些主交互流之外的功能

    2. 对话框非常适合用来整理关于单一主题或应用程序功能的信息

    3. 对话框的主要服务对象:

      1. 对应于熟悉并频繁使用的用户,用于控制更高级或更危险的设置。

      2. 对不熟悉并偶尔使用的用户,用于学习基础知识。

  2. 对话框的基本交互

    1. 标题:每个对话框都必须有一个标题来标示它的用途,在功能对话框的标题中使用动词,在属性对话框的标题中使用对象的名字

    2. 终止:至少提供一个终止命令的控件,让对话框关闭或消失。通常为两个按钮OK和Cancel,以及右上角的关闭按钮。由应用程序单方面控制显示和消失是一种糟糕的设计,应避免。

  3. 模态和非模态对话框

    1. 模态对话框是最常见、最容易理解的对话框。

    2. 应用程序模态对话框打开后所属的应用程序不能继续进行,直到对话框关闭为止。系统模态对话框打开后整个系统中的应用程序都停止,大多数情况下都不应该考虑这类模态对话框。

    3. 非模态对话框操作范围不确定,使用的较少,是个难以使用和理解的“怪物”。

    4. 区别对待模态对话框和非模态对话框

      1. 模态对话框一定要包含一个或多个终止命令,通常将终止命令放在较大的按钮上,并置于对话框底部。不要在窗口标题栏上使用关闭控件。

      2. 不要在飞莫泰对话框中使用终止命令按钮,而应该在窗口标题栏上使用关闭控件。

    5. 不要动态地改变终止命令按钮的标签:避免把“取消”改为“应用”、“关闭”这类变体。

    6. 非模态对话框中,用户做出的改变是立即生效的。

    7. 为主窗口内的活动提供持久的支持时,最好不要用非模态对话框,而是用边栏控件窗格。

  4. 对话框的五个目的:

    1. 属性对话框:向用户呈现或让用户改变所选对象的属性或者设置。通常是非模态,不过对所选对象属性的修改操作量较大时,最好还是在任务窗格或边栏进行。

    2. 功能对话框:只控制单一功能的对话框,不仅允许用户启动一个动作,还经常允许设置动作的细节,但配置和启用两种功能最好还是分开访问。

    3. 进度对话框: 应用程序无响应,必须通知用户。由应用程序启动、展现进度的对话框(注意,当该功能属于主窗口功能的一部分,就应该在主窗口中显示,而不是单独设置对话框。如网页的进度指示器被安放在当前加载页的标签栏中)。进度对话框应清晰地展现:

      1. 一个耗时的进程正在运行中(在对话框中使用接近用户心理模型的动画)

      2. 现在一切正常

      3. 该进程还需要多长时间完成:进度表(耗时进度,而不是规模进度)

      4. 还有多少事情或项目没做完

      5. 如何取消或重获控制权,甚至撤销:提供取消和暂停按钮。

    4. 通知对话框:将一些重要信息报告给用户,来自触发事件或其他用户的信息(因此与系统警告不同)。移动设备常用通知中心来收取和管理各自通知,在屏幕边缘以很小的弹出式窗口或抽屉的形式出现,还伴以细微的动画引起用户的注意(可非模态地驻留在屏幕边缘,也可以显示片刻后自动关闭)

    5. 公告对话框:分错误、警告、确认三种,一类最糟糕的交互方式。一般都是应用程序级模态的,也有可能显示一段时间后自动消失(称为临时性公告)。绝对不要用临时型对话框作为错误对话框或确认对话框:如果某件事值得用对话框表达,那就要确保用户能够清楚地获得这些信息,而临时对话框永远不能。

    6. 属性功能管理对话框1:选项卡对话框

      1. 对话框中不同窗格的内容,必须有放在一起的道理。每个选项卡涉及主题的不同特性,还可以对同一特性的主体进行更深入的探索(例如“高级”标签)。

      2. 用堆叠选项卡应对选项卡过多的局面,很容易造成用户的困惑,所有交互的习惯用法都有其适用范围

      3. 不要堆叠选项卡:不要用一个包含很多选项卡的对话框,而是用几个有着较少选项卡的对话框。

    7. 属性功能管理对话框2:扩展对话框

      1. 扩展后会显示更多控件的对话框,有一个“更多”或“扩展”按钮,通常是为高级用户提供的。

      2. 使新手用户不必面对复杂的工具,熟练用户也不必为寻找这些工具而烦恼。

      3. 应同时设置一个“缩减”或“较少”命令,让对话框返回初学者状态。

    8. 属性功能管理对话框3:级联对话框(糟糕的用法,应避免层次太深的界面)

21.3 消除错误、警告和确认

  1. 错误对话框:

    1. 错误对话框愚蠢地停止进度,应该避免

      1. 错误对话框的根源通常是计算机自己的错误。

      2. 错误消息不管用:它无法阻止用户犯错误

      3. 错误消息应作为结局罕见问题的特殊方法、最后一招。

    2. 让错误不可能发生:使用户不可能犯错是消除错误的最好方法(例如限定用户选择数据的范围)。

    3. 正面反馈:软件难以学习的原因之一在于正面反馈太少。当软件告诉用户他们失败时,用户会觉得很没面子

    4. 不需要消除的错误消息很少,除非十分紧急、需要以一种突然的、吸引注意力的方式来通知用户。

    5. 改进错误消息:最后一招

      1. 有礼貌、表达清楚、助人为乐

      2. 向用户提供一个而解决问题所需要的信息,澄清问题的范围、可选择的方法、默认情况下应用程序的动作、丢失了哪些信息

      3. 至少直接提供一种正确的建议方法,提供以不同方式处理问题的按钮

  2. 警告和确认:

    1. 警告的原理在于告知用户这是令人满意的目标,但不能以打断流畅的交互作为代价。适度的反馈是可以的,但弹出一个注定要被关闭的对话框没有必要。

    2. 确认对话框显示了软件没有自信对操作承担责任。

    3. 消除确认对话框:

      1. 做,不要问。

      2. 让所有动作都可以撤销。

      3. 给用户提供非模态反馈,避免用户犯错

本站所刊载图文之著作权归本站作者Qinsman(qinsman.com)所有,欢迎分享、转发,如需转载,请联系作者(jiaqi_dong@163.com)并标明出处及原链接。非经本站授权许可禁止转载,未经授权许可的转载均视为商业用途,请按20元/字之标准,于转载后15日内联系本站付款。转载人的转载行为,视为同意本条。转载须附本条。

Qinsman wechat
关注我的公众号,一个卖馒头,也卖故事的地方:)