恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
深入了解交互? 看透《交互设计精髓》就够了 (四)
0.0°
2020-04-11 原创文章 经验/观点 举报 1593 5 10 0

《About Face 4: 交互设计精髓》是一本数字产品和系统的交互设计指南,全面系统地讲述了交互设计的过程、原理和方法。很多产品开发中的流程,包括用户调研、视觉优劣等,书中都有详细讲解,是一种交互“圣经”的存在,时不时翻出来看看都会有不同见解。

和《要点提炼:设计心理学》一样,我会根据我看书时总结的思维导图,来罗列书中的重要知识点。为了避免流水账,我会在每个章节前面,列出本章节的知识结构,大家理解完结构后再看知识点,效果会更好。



上期回顾:

上期介绍了优秀产品应该是什么样子的,一句非常重要的话“完美不在于无以复加,而在于无可删减”。并且介绍了一些交互设计的原则,当然这些原则在后续的文章中也会有详细介绍。




第二部分、设计行为和形式



Part 13、隐喻、习惯用法及能供应



知识结构



一、界面范式

1.实现中心范式

实现中心范式用户界面仍应用广泛,主要应用在企业、医疗和科学软件中。工程师希望了解内部工作方式,但多数用户要么没有时间、要么不想了解这些东西。用户并不想知识渊博,只想成功使用产品,对于这一点工程师却很难理解。

  • 展示软件流程,赋予每种功能一个按钮,每个代码模块对应一个对话框,命令和流程精确反映内部的数据结构和算法。

  • 组织结构中心

    某个产品或者网站,不是依据用户考虑信息的方式来组织,而是按照公司或者组织的部门拥有的用户信息来设计的


2.隐喻范式

依赖于用户在真实世界的实际经验在界面上建立实际与功能之间的联系,用户不必了解软件的运行机制。

  • 直觉、本能与学习

    • 直觉通常表示易于使用或易于理解

    • 直觉不同于本能,我们理解界面隐喻元素的含义,因为心理上把他们与我们之前学过的东西联系起来。

      比如人们知道废纸篓不是用直觉去理解如何使用,而是曾经学过如何使用真正的废纸篓

  • 全局隐喻的暴政

    1. 隐喻最大的问题是把界面与机械时代的制品绑在一起

    2. 用户虽可以直接理解软件的基本功能,在此功能以后,隐喻就大大增加导航成本

  • 隐喻的其他局限

    • 隐喻不易调整,即使在一个简单程序的简单过程中,随着程序的规模和复杂性的增加可能会失效

    • 隐喻依赖于设计者与用户有这相似的联想,如果用户没有和设计者相似的文化背景,就容易导致隐喻失败。

    • 隐喻适合新手,一旦变为中级,成本就高了,按照习惯来设计很好,而只在真正合适、强大的隐喻正中下怀时才使用隐喻会更好


3.习惯用法范式

  • 图形界面大都是习惯用法范式

    • 窗口、标题栏、关闭框都是我们学过的习惯用法,而不是具有隐喻意义的直觉

    • 鼠标输入设备没有任何隐喻,而是习惯性的。第一次使用鼠标,能立刻明白鼠标和光标是联系在一起的,这种感觉很容易学习,也很难忘记,这就是习惯用法的学习

    • 多点触控用户界面也是习惯用法

    • 可调窗口和无限嵌套文件夹不是隐喻用法,而是习惯用法,因为在现实世界中没有对应的东西

  • 好的习惯用法只需要学习一次

    • 在体验实现中心软件过程中形成的条件反射,令人们总认为学习界面很困难

    • 习惯用法虽然必须学习,但很容易学习

习惯表达法不会像隐喻那样引起联想,例如王叔叔翘辫子了。我们明白习惯用语的意思,只是因为已经学习过这种用法,完全下意识的理解。

人的大脑拥有惊人能力来迅速地轻松学习并记忆大量习惯用法,而无须比较已知情形,学习、记忆很有必要,因为多数习惯用法没有丝毫隐喻含义。



二、创建习惯用法

1.底层原语

鼠标定位、点击、按下、拖拽


2.中间层组合用法

通过组合一个或多个原语创建而成,如双击、拖动、表单、链接、调整大小控点等可操控对象


3.最上层习惯用法

结合并组织了所考虑的问题的领域知识,包括用户的工作模式和目标,但不是计算机解决方案的信息,如标签按钮、字段、导航条、列表框、图标等。



三、手动能供性

1.手动能供性的语义学

  • 一个未加修饰的虚拟的手动能供性不能提供对执行之后完成哪些功能的提示

  • 控件必须有文本或图标标签来指明其意义


2.能供性的实现预期

很多网站缺少能供性,导致很难区分控件、内容和装饰,要确保程序兑现它手动能供性所表现的期望


事物所感知到的及其实际的属性,只要是那些能决定事物可能如何使用的基本属性。手动能供性是多数视觉用户界面设计的基础。一些扁平界面为了视觉的简化,移除了虚拟手动能供性,实际影响到了易用性。



四、直接操作与顺从

1.直接操作的使用

  • 很少有直接操作界面要求输入复杂的数值数据的情况,通常会给出数值数据字段或者滑块

  • 直接操作简单、直接、易用,必须学习,不过交互可见和直接的特质,学习这些习惯往往很容易,学习之后,很难忘记


2.直接操作并不总是合适

  • 直接操作需要用户发展自己的技能,能有效地完成复杂任务,比如用户CAD设计一架飞机

  • 设计直接操作习惯用法时,需要记住这些挑战,始终考虑人物模型需要手动操控什么,应用辅助做什么


3.顺从与提升

顺从:对象或者屏幕区域对用户输入及其他操作的响应

  • 静态提示

    • 通过对象本身的静态渲染来传达顺从

    • 对有大量对象和控件的复杂桌面应用而言,不适合使用不切实际的渲染

    • 扁平界面在视觉上虽然更加简单,但是学习起来更难

  • 动态提示

    常用于桌面应用,如鼠标悬停状态改变

  • 顺从响应提示

    如果鼠标按下或者手指正在按下控件,应该显示已经准备好改变的状态

  • 光标提示

    • 桌面顺从提示方式

    • 经过窗口框架,鼠标样式改变


4.逃脱隐喻的掌控

不要把隐喻当成快速学习或者短期舒适的拐杖,应该创造容易记忆、恰当有丰富的顺从反馈的习惯用法,能提高用户工作效率,不要陷入机械时代的隐喻和交互的桎梏。用户最终都希望变成中级用户。





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



知识结构



一、重新思考数据输入

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

数据完整:不让被污染、不干净的数据进入程序中。一旦数据进入数据库,代码就不必反复检查数据是否有效或适当。

  • 出于数据完整要求,导致用户每次向计算机输入数据都会受到同等检查

  • 软件检查数据等于宣称:用户无关紧要,软件无所不能,用户为软件工作

  • 数据免疫力:能够处理数据置换

  • 用户输入不正确的数据时,数据往往接近正确,程序应该提供尽可能多的帮助。


2.处理丢失数据

程序应该更灵活,通过无模态反馈提醒用户


3.数据输入和规避机制

让用户做他们想做的,但用计算机详细记录下这些动作,这样可以完整地追查责任并可恢复


4.审核与编辑

  • 程序必须假装用户永远是正确的

  • 警告应该清楚且无模态的告知用户,比如高亮显示

  • 记住用户的动作,保证每个动作能够明确撤销

  • 审核,不要编辑


二、重新思考数据存储

在磁盘上存储程序和数据文件的文件系统,很难使用,很难理解。

Web应用基于云的网络应用能够自动存储,免去用户的担忧和困惑。

iOS把文件与创建该文件的应用紧密关联起来,事情变得简单,除非需要其他应用程序来处理该文档。

1.数据存储问题

  • 保存更改:

    用户请求关闭或者退出时,程序就启动“保存更改”对话框,因为这时程序要消除内存版本和硬盘版本之间的差异。多数情况下,询问用户完全没必要,默认“是”即可

  • 关闭文档但不保存:

    多数文档很难大规模撤销更改,因此人们用“保存更改”对话框选择“不保存”达到类似目的。如果发现自己对错误的文件做了大量的修改,就使用对话框当做逃生阀,返回初始状态。这很方便但不合理。

  • 另存为:

    如果用户企图使用资源管理器重新命名一个文件,而word仍然在编辑该文件时,资源管理器就蠢得没法克服这个问题,弹出错误提示,这很粗暴,新用户被编辑程序和操作系统同时拒绝,可能得出结论,文档不能重命名。

  • 存档:

    另存为对话框是复制或者管理副本的错误工具,最后用户不得不自己收拾残局


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

设计合理的软件应该把文档当做一件事来处理,而不是磁盘或内存中的一个副本。在这样同一文件模型中,用户不用面对计算机的内部机制。对在磁盘和内存之间写数据的管理是文件系统的工作。

  • 自动保存

    • 自动保存文档和设置

    • 只要用户做出更改(每次按键后)程序就立刻保存

    • 内存中追踪小幅改动,经过一定时间间隔就写到磁盘中

  • 创建副本

    • 和原始文档一模一样,不和原始文档捆绑在一起

    • 副本和原始文档放在一个目录下,在文件名后面加上时间戳或日期戳

  • 命名和重命名文档

    参考Mac软件的命名方式

  • 在文件系统中存放和定位文档

    把文档放在用户能找到的地方,如桌面

  • 制定文档格式

    不应和保存捆绑在一起,文档格式是文档特征,而不是磁盘文件特征。放在文档属性对话框中更合适

  • 还原所做更改

    主菜单放一个放弃更改就足够了

  • 放弃所做更改

  • 创建版本

  • 新型”文件“菜单

    • 新建

    • 关闭

    • 重命名/移动

    • 创建副本

    • 打印

    • 创建版本

    • 放弃更改

    • 属性

    • 退出

  • 传递状态

    文件正在使用:将文件名显示为红色,或在文件名旁边显示特殊符号



二、重新思考数据存储

1.储存与检索

  • 储存系统由容器和工具组成

    文件夹交互模式的隐喻有局限,因为用户必须知道某项东西放在哪里。


    • 容器负责在储存系统中存取对象

    • 工具是根据某些关联值(如名称、位置或某些内容属性)在仓库里寻找并取回东西的方法


2.物理世界的检索

  • 基于位置检索

    必须知道他们在哪,储存系统就是检索系统,二者都基于记忆位置

  • 基于索引检索

    图书馆的书架书号的储存系统


3.数字世界的检索

存在的问题:想要找到文件,必须记住文件名和存储位置。没有创造一套有效的磁盘存储文件的索引。把存储系统交给用户,称之为“检索系统”

  • 数字检索方法

    • 位置检索

    • 标示检索

    • 属性检索

  • 基于属性的检索系统

    1. Spotlight提供了基于属性的有效检索,不仅按照有意义的属性来查找文件(名称、文档类型、上次打开位置),还可以吧这些搜索结果保存为智能文件夹”。此外,使用一种有意的技术设计,可以在空闲时间索引内容


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

  • 组织难以组织的事物

    邮件和Web网页

  • 数据库的问题

    • 数据库记录都是单一、预定义的类型,一种记录类型的所有实例被组织在一起

    • 一条记录可能代表一个发票或者一个客户,但是不能即代表发票又代表客户

  • 基于属性的替代方案

    • 分离储存系统和检索系统

    • 索引作为检索系统使用,储存技术仍然是数据库,把储存功能设想为一种数字汤

    • 创建一个索引,储存一个键值和令牌的副本。能够创建无限数量的索引,每一个代表它自己的键,包含一个令牌副本。


5.受限的自然语言输出

类似于包含、大于、小于等的用户能理解的受限语句





Part 15、防止错误、通知决定



知识结构


一、运用富视觉非模态反馈

1.富视觉非模态反馈

  • 富:能够深入全面的嬉戏,让人了解一个进程的状态或者属性,或者当前应用程序的对象

  • 视觉:按习惯方式利用屏幕上的像素

  • 非模态:信息能够轻松地显示出来,即不需要用户做特殊动作或转换模式,就能看到和理解这些反馈

    例如iOS下载软件时候桌面的图标;《文明》的游戏界面


2.听觉反馈

  • 避免负面听觉反馈

    正常的关系中,报警声是不必要的

  • 提供正面声音反馈

    • 成功的时候工具发出声音,成为正面听觉反馈

    • 正面听觉反馈的有效性源自于人的敏感度,人都不喜欢被告知自己失败了,软件不必为了达到目的而羞辱用户

    • 用户操作正确的时候,如果用户程序能够发出细微但容易辨识的声音,会更加友好易用。



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

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

  • 犯错的用户心理模型

    1. 用户的心理模型不包括自己会犯错这一点,用户不应受到责备

    2. 在于用户交流的时候,不应违背这个心态

  • 撤销让人敢于探索尝试

    撤销在用户界面中是一个协助探索的工具,能够让用户安心,支撑用户进一步探索的意愿

  • 设计撤销功能

    • 撤销不能帮助用户实现目标,但能防止意外事件将用户的努力毁于一旦

    • 撤销不是一个扭转错误的工具,而是一个帮助探索的工具

    • 用户保存文件后,依旧可以撤销之前的操作


2.撤销的共通类型

  • 渐增动作和过程动作

    撤销对用户的动作执行操作

    典型应用中的典型用户动作通常即包含过程部分(用户做了什么),也包括数据部分(哪些信息受影响)

  • 隐蔽撤销和解释性撤销

    • Ctrl+Z就是隐蔽撤销

    • “撤销某某文字”就是解释性撤销

  • 单词撤销的局限

  • 先删除六段文字,又删除一个单词,而单次撤销只能恢复一个单词

  • 多次撤销的局限

  • 撤销和恢复

    • 撤销的实现模型导致恢复功能的出现

    • 恢复的本质是取消所有进行的撤销

  • 分组多次撤销

  • 尽管多次撤销是一个很有用的机制,但需要运用计算资源,实现可选撤销,让用户只撤销那些不想要的操作,而不是撤销所有之后完成的操作






Part 16、为不同需求而设计

易学性和帮助、可定制化、本地化、全球化、无障碍性



知识结构


一、易学性和帮助

1.命令模态

①用户界面是用户向计算机输入数据和发布命令的方法

②命令模态是让用户将这些指令发给应用的特殊技术。直接操作手柄、下拉菜单和弹出菜单项、工具控件栏都是命令模态

  • 教学式命令、直接命令和隐形命令

    • 教学式模态:对话框和命令菜单用描述性文本教会用户如何使用

    • 直接:直接操作控件如拖放处理、实时操控控件

    • 隐形:可视界面不显示这些命令,只有隐形的按键、滑动。隐形命令广为中级用户设置,更多地为高级用户所用

  • 现实中的信息和头脑中的信息

    头脑中的信息比现实中的信息更易用,更快。现实中的信息虽更慢、更麻烦,但非常可靠。

  • 记忆矢量

    比如Word菜单上会有快捷键的提示

    • 用户想要找到更多直接命令来完成常用任务

    • 除了教学式命令外,还必须提供直接或隐性命令

    • 提供一个途径,让用户学会每个教学式命令相对应的直接命令。这种途径称为记忆矢量。



2.有效功能工作集

  • 常做的事情总会学会,中级用户最终会记住一部分命令和特征。这组记下来的特征成为有效功能工作集。

  • 设计师应该使用直接模态,来设计应用程序主要用户使用的最少工作集中的所有命令


3.上下文帮助和辅助界面

  • 导览教程和覆盖层教程

    由于移动端必须更加依赖直接和隐形命令模态,所以导览和覆盖充当了引导新用户的角色

    • 在移动端流行,合理地解决了用户初始学习问题

    • 导览类似安装向导,但不需要用户配置,只是为了展示产品的功能和行为

      不超过五到七屏

    • 覆盖层教程适合相对简单的应用

      在应用中某个地方提供再次启动的方式,通常是在设置菜单,或在屏幕的一个角落

  • 库和模板

    给用户提供一个现成的模板库,如Word、Sketch.

  • 输入与内容区域提示

    空状态提示,并给出操作的提示

  • 向导的优缺点

    • 一步步的操作,用户很少分析原因。违反了提供选择而不是提问原则

    • 在初次配置某一硬件设备时,是合适的。如首次打开iPhone,或在线调查界面,向导也是合适的

  • 工具提示和覆盖式工具提示

    • 工具提示是非模态交互的例子

      鼠标悬停在工具图标后,会显示文字

    • 覆盖式工具提示:通过一个帮助按钮(开关)。打开后,界面上会显示所有的帮助提示,模态呈现。


4.传统的在线帮助

  • 全文搜索和索引

    有个全文搜索,一般会放弃索引,因为索引需要大量工作,但还是有理由慎重考虑这个决定

  • 概述

    使用范围、效果、力量、优势、缺陷、通用过程、由于竞品的地方

  • 应用内用户指南

    • 应用内用户指南不应是帮助首选,而是导览教程和覆盖层教程

    • 一个复杂的专业工具应该含有应用内置指南

    • 指南里包括目录超链接,指南本身的全文搜索,可打印



二、可定制性

1.个性化

  • 人们喜欢照自己的喜好改变周围的事物

  • 个性化即对持久对象的装饰或修饰

  • 个性化工具需要简单、提供可视化预览,容易撤销


2.配置

移动、添加、删除持久对象。

比如PS里可以移动工具窗口


3.特质模态行为

  • 用户在界面习惯用法上,会分为两组或更多,这种偏好成为特质模态行为

  • 需要迎合,全部满足


4.本地化和全球化

有些语言中单词和词组比较长;不同国家使用日月年的顺序不一样;数字和货币中小数点的使用方式不同

  • 本地化:按特定的语言和文化翻译某个应用软件

  • 全球化:让应用软件尽可能地在各种语言和文化下通用


5.无障碍性

设计应用时应考虑到,无论因为年龄、事故或疾病而有认知、感官或移动障碍的人,还是没有此类障碍的人,都能够有效使用所设计的应用。



Powered by Froala Editor

更新:2020-04-11

下载
收藏

5人已收藏

  • 10

    作品

  • 76

    粉丝

  • 7

    关注

  • 深入了解交互? 看透《交互设计精髓》就够了 (三)
  • 深入了解交互? 看透《交互设计精髓》就够了 (二)
  • 要点提炼:设计心理学-情感化设计(下篇)
  • 要点提炼:设计心理学-情感化设计(上篇)

    猜你喜欢

      2020-04-11 原创文章 经验/观点 举报 1593 5 10 0

      深入了解交互? 看透《交互设计精髓》就够了 (四)

      0.0°

      你确定要举报深入了解交互? 看透《交互设计精髓》就够了 (四)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年04月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录