header_v0.7.31

《About Face 4 交互设计精髓》读书笔记(Part 2 设计行为和形式)

1年前发布

原创文章 / 不存在 / 书籍
Qinsman 原创,如需商业用途或转载请与Qinsman联系,谢谢配合。

《About Face 4》作为交互设计的经典书目,涉及设计流程、交互行为、交互细节的方方面面,内容丰富,这篇笔记主要是针对各章节内容的核心内容摘录,作为温故知新的目录也好,作为反复精读的索引也好。希望对喜欢交互设计的你们有用。

/*

觉得排版不方便阅读的请戳上面的“原文链接”

重要的事只说一遍:)

*/


分享一下自己学习《About Face 4》的过程中记录的读书笔记:)

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

本篇对应本书的第二部分——设计行为和形式(即第7章-第17章)

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

第7章 良好产品行为的基础

1 设计价值

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

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

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

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

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

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

2 交互设计原则

2-1 作用于不同层面细节的原则:概念原则(第8-13章)、行为原则(第14-17章)、界面原则(第18-21章)

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

3 交互设计模式

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

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

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

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

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

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

第8章 数字产品的礼仪

1 设计体贴的软件

1-1 *人来思考,计算机干活*

1-2 *软件应像人一样体贴*:体贴的软件特征

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 设计聪明的产品

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

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

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

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

3 设计社交软件

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

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

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

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

3-5 允许简单协作

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

3-7 助于增长网络监控:

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

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

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

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

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

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

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

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

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

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

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

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

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

第9章 平台和姿态

1 产品平台与姿态

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

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

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

2 桌面软件姿态

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

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

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

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

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

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

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

2-2 暂时姿态:

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

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

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

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

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

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

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

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

3 网络姿态

3-1 信息类网站姿态:

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

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

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

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

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

3-3 网站应用姿态:

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

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

4 移动设备的姿态

4-1 智能手机和手持设备姿态

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

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

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

5 其他平台的姿态

5-1 信息亭姿态

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

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

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

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

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

(6) *信息亭应针对首次使用者进行优化*。

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

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

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

第10章 为中级用户优化设计

1 永久的中级用户

1-1 *不要将培训工具固定化*

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

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

2 扭转界面

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

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

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

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

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

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

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

3 为三层用户设计

3-1 三层设计目标:

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

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

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

3-2 新手想要什么

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

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

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

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

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

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

3-3 专家想要什么:

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

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

(3) 专家更喜欢高密度信息

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

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

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

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

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

第11章 编配与流

1 编配与流

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

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

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

2 和谐交互

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 动作、时间和过渡

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

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

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

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

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

(4) 让人能看到进度或动作

(5) 创造虚拟空间

(6) 激发融入和进一步操作

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

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

(2) 简单、有意义和恰当

(3) 自然和顺滑

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

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

第12章 减少工作 消除负担

1 负担任务

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

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

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

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

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

(4) 信息之间:

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

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

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

1-3 拟物化负担:

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

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

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

1-4 模态负担:

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

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

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

1-5 样式负担:

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

1-6 负担取决于情景:

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

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

2 消灭负担

2-1 减少要去地方的数量

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

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

(3) 将控件数目限制到最小

(4) 尽可能减少滚动

(5) 区分用户类型进行分类导航

2-2 提供导航标志

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

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

2-3 提供预览

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

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

(3) 注释滚动条

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

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

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

2-7 常见的负担陷阱

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

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

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

(4) 强迫用户移动窗口

(5) 强迫用户重新设置

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

(7) 强迫用户请求许可

(8) 让用户确认其动作

(9) 让用户的行为产生错误

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

1 界面范式

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

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

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

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

(3) *不要让界面强行适应隐喻*

(4) 隐喻的其他局限:

A. 不易调整,

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

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

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

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

1-3 习惯用法范式界面:

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

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

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

2 创建习惯用法

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

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

3 手动能供性

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

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

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

4 直接操作与顺从

4-1 直接操作:

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

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

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

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

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

4-4 顺从与提示:

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

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

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

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

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

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

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

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

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

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

1 重新思考数据输入

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

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

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

1-2 处理丢失数据:

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

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

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

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

1-4 审核与编辑:

(1) *出错可能不是程序的问题,但是程序的责任*。

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

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

2 重新思考数据存储

2-1 数据存储的问题:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 重新思考数据检索

3-1 存储与检索:

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

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

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

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

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

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

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

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

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

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

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

第15章 防止错误 通知决定

1 运用富视觉非模态反馈

1-1 富视觉非模态反馈:

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

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

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

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

1-2 听觉反馈:

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

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

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

2-1 撤销应当遵循心理模型

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

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

2-2 撤销的共通类型:

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

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

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

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

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

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

2-3 撤销的其他类型:

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

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

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

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

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

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

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

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

3 假设:对比和预览

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

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

第16章 为不同的需求而设计

1 易学性和帮助

1-1 命令模态:

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

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

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

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

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

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

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

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

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

1-2 有效功能工作集:

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

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

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

1-3 上下文帮助和辅助页面:

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

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

(3) 库和模板:*给用户提供一个现成模板库*

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

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

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

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

2 可定制性

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

2-2 配置:

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

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

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

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

3 本地化和全球化

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

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

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

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

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

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

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

(5) 逗号和句号使用方法不同

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

4 无障碍性

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

4-2 无障碍的目标:

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

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

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

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

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

4-5 无障碍指导方针:

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

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

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

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

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

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

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

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

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

第17章 整合视觉设计

1 视觉界面设计元素

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

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

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

1-4 颜色:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 视觉界面设计原则

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

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

(1) 建立关系:

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

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

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

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

(1) 对齐到网格

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

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

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

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

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

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

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

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

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

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

(2) 传达功能感:

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

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

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

D. 保持图标简单

E. 尽可能重用元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 视觉信息设计的原则

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

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

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

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

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

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

3-7 可量化的数据就要量化。

4 一致性和标准化

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

4-2 界面标准化:

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

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

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

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

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

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


本页面所刊载图文首发于作者博客qinsman.com,欢迎分享、转发,如需转载,请联系作者(jiaqi_dong@163.com)并标明出处及原链接。非经本站授权许可禁止转载,未经授权许可的转载均视为商业用途,请按20元/字之标准,于转载后15日内联系本站付款。转载人的转载行为,视为同意本条。转载须附本条。

5
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功