app中的交互手势和意符设计

版权申明：本文原创作者“Seany”，感谢“Seany”的原创经验分享！

本期文章13108字，一篇顶过去两篇。

我写这么多字用了接近一周，而你阅读最多只用2天，看不看由你。

· 下期预告

一个人和一块触摸板到底能衍生出多少种交互方式？

每一次点击和每一次滑动的背后心理学逻辑又是怎样的？

下期我想说说人在使用app过程中是如何和屏幕进行互动的？

敬请期待。

本期文章相对之前的文章会晦涩那么一点点，但是良药总是苦口，这篇文章可能是目前国内最通俗的从理论开始讲解交互手势的文章。

这篇文章有接近1%的内容非原创，摘抄原文来自唐纳德·诺曼《设计心理学1》。

另外说一下为什么我有的引号用的是常规的双引号有些用的是知乎上的双引号，因为这篇文章分为两半，一半是我pages写的，一半是用知乎专栏写的。

那么我们就言归正传，进入这一期的内容：

PART 1 - 唐纳德诺曼关于交互设计的可视性的基本原则

唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典，我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》，而是第一本《日常的设计》，这本第一本书最精华的内容是阐述了交互设计的基本原则，这个原则无论是对工业设计中的人和物件交互，还是说是建筑中的人和空间交互都有很深刻的指导意义。

作为一名app产品设计，对于这几个含义理解之后，融汇到app设计的情境下，会让你对之前工作流中的『交互设计』有全新的认识。

众所周知，交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科，本质在于可交互，而可交互的前提，是可以被感知（这个我在app的视觉美成因分析那篇文章里面已经说到过了），那么被感知的方式，往往是和人的五感有关。

触觉，听觉，视觉，味觉，嗅觉。只要能被人的五感所感知到，不论是和空间，和机器，和生活中的物件还是和人，只要发生五感的共情，我们就说是可以被交互的。（注意，本文中不考虑复杂多感交互，并且只考虑交互的一方是正常生物人。）

在人的五感之中，本文依旧着重讨论视觉，因为科学研究表明，在人五感的感知信息中，视觉视觉占比达到了惊人的83%。（其中听觉11%，嗅觉、触觉、味觉机加起来占比6%），而不管是什么设计，如果可视性不佳，都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关，这五中基本概念分别是：示能（Affordance）、意符（Signifiers）、映射（Mapping）、反馈（Feedback）和概念模型（Conceptual Models）。

i.示能（Affordance）

示能的概念和内涵来源于吉普森（J. J. Gibson）。此外，关于有形物品如何传达出人们与它们互动的重要信息，这个特性被吉普森命名为"示能"。

"示能"这个词，狭义的理解一下，是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现，由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。

还是举那个诺曼最经典的例子，如下图所示：

从视觉上看这张图，我们从以往的生活经验联想一种方形的，带纹路的黄色物质，再配合长期的视觉线索，我们会知道这张图上是一个木块，那从我们的视觉线索上，知道这个木板很细，（应该）能够轻易被折断；而且很轻，（应该）可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能"，而明确的我们和图上这个木材的交互关系。

FEVTE编注：更多AI教程讨论及AI作品提交请到飞特网AI实例教程栏目:https://www.fevte.com/plan/ai/aisljc/

那再看这张图：

我们通过生活经验的联想可以知道这是一个木门，为什么会区别这是木门而不是上面的木材呢？主要原因是因为这上面有个『把手』。在人的视觉中，有时候观测物体的某项"示能"是清晰可见的，比如上图那个木材可以被轻易搬动，而有很多物品的"示能"是不可轻易被感知的，比如上面那张木材的图，我们就不能感知到这个木材是可以被『轴转动』的。

而这张门的图上，大家想象自己是一个什么都不知道的野人，看到上面这个图，只有一块特别显眼的『把手』，你作为高智慧生物，是不是应该去触摸一下，并且企图能够与『把手』进行互动？

所以总结一下，如果这个门上没有把手，作为我们人类的认知而言，可能会认为这个门不能从外面被打开，但是如果这就是一个能从外面被打开的门，但是忘记设计外面的把手，那就意味着，这个物体"示能"的视觉通道被堵塞。（视觉通道被堵塞的"示能"可以被认为是一种"反示能"），"反示能"对交互作用是起到抵制作用的。也就是说，如果这个门是可以从外面被打开，但是我为了不让大家从外面打开，我在设计之初不加从外面打开的把手，一定程度上就可以抑制大家从外面打开的这种行为。

大家明白了么？

所以为了更有效的展现某些物体的视觉可交互，示能和反示能都必须被揭示出来，即可被觉察到。如果示能和反示能不能够被觉察到，就需要人为的把它们都标识出来，我们听过一些有效的手段就可以做到，比如在直立的木头一侧加上一个『把手』，这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索，你只需要旋转把手，稍加用力即可发现这个"示能"。

所以，我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』

ii.意符（Signifiers）

划重点：示能决定可能进行哪些操作。意符则点名操作的位置。

用户界面上的意义符号，简而言之，就是一切用户感知中可以点击产生反馈的功能集合。

但是这是在以屏幕为介质的用户界面中我个人下的定义，但是在实际生活中，人们寻找蛛丝马迹，寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索，就是意符。

这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因，他在视觉上示能和意符都及其突出，一块屏幕和一个按钮，屏幕用户点击滑动交互，按钮用于点击交互，学习成本很低。大家试想一下之前的塞班系统，左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射，虽然也很易于理解，但是当大家看到苹果这么简单的手机的时候，相信所有人都是惊讶的：

△.示能和意符的关系

示能揭示了世界上作为主体的人（这里只考虑人），如何与其他东西进行互动的可能性。

一些示能是可视觉感知的，一些则是需要视觉之后联想感知（即不可直接感知）的。

意符指示能操作的位置。

一些意符是生活中的符号、标签和图样，如门上用符号标记的"推"、"拉"或"出口"，或指示所要采取行动的箭头和图示，或是朝向某个方向的手势，或其他的说明。一些意符仅仅是预设用途，譬如门的把手，或某个开关的物理结构。

划重点：在设计中，（尤其是UI设计中）意符比示能更重要。

示能和意符是本文中最重要的，下文会说到在app中的意符设计。

后面的映射，反馈和概念模型内容我简略说：

iii.映射（Mapping）

有一些自然映射是生物本能的或者是文化赋予的，比如如按照通常的习惯向上移动手势意思是增加，向下移动意味着减少，。当一系列可能的操作是可见的，当控制和显示契合自然映射时，设备就会容易使用。（具体参考我写的交互闲谈丨01里面那个视频手势的例子）

iv.反馈（Feedback）

反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候，内心的预期是需要获得反馈的，如果在一个该获得反馈的地方没有获得反馈，人就会很疑惑，比如如果一个app的按钮点击之后没有跳转或者没有新的变化，那么人就会呆滞，如果反馈不及时，人还有可能会放弃。（比如网络不好导致的跳出率，比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的 = =）

过多的反馈可能比过少的反馈更恼人。设计拙劣的反馈可能是旨在降低成本，最糟糕的是不恰当的无法解释的反馈。指手画脚的人通常是正确的，但他们的评论和意见如此之多，唠叨不停，会令人分心，而不是给予帮助。我记得很多年前（大概是2010年左右），还曾经见到过一款应用，用户但凡点击无效位置就会弹出一个Error的模态框，简直是令我绝望。 = =

v.概念模型（Conceptual Models）

概念模型通常是高度简化的使用说明，告诉你事物是如何工作的。概念模型只要有用就行，不必完整或准确。概念模型通常可以从设备本身推断出来，一些模型通过人与人相授，还有一些来自手册。（比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种，手游中一开始的新手指引也是。）