功能可见性在用户界面中的使用

在获取专业知识和技能的道路上，设计师们**遇到各式各样的专业术语。之前我们已经介绍过一些核心术语的贴子，如可用性和网页设计、商务术语和缩略语、导航元素和色彩词汇等。这篇文章将继续和大家介绍心理学在用户体验设计中的应用，并**在用户体验设计词汇表中加入一个新词。今天我们讨论的是功能可见性（Affordances，又译作可供性），它用微妙的线索帮助用户与界面交互。

什么是功能可见性？

功能可见性是物体的一个属性或特征，它提示着我们可以对这个物体做什么。简而言之，功能可见性提示用户如何与某物互动，无论是它是真实物体或是数字界面。例如，当你看见一个门把手时，它就是一个你可以用它开门的提示。当你看到一个听筒图标，它就提示着你可以用它来打电话。功能可见性使我们的世界更加简单，在它的帮助下，我们可以成功的与物质世界和虚拟物体进行交互。

请看下面的洒水追踪器的界面。你瞬间就能明白所需执行的行动已经完成——因为有符号“√”的提示。标签栏中的图标给了你可以用这个app做些什么的线索：检查你的一套植物（这个标签是活跃的，因为它是有色的，而其他的不是）、添加一个新的植物或者查看你的账户信息。这些都是动作的功能可见性。

洒水追踪器

该术语的历史

“功能可见性”这个术语是由心理学家James Gibson首先提出的，他对视觉感知有着深入的研究。1966年，他首次在他的书《知觉系统之感觉》中使用这个词。1979年，他在《视觉感知的生态学方法》一书中阐明了功能可见性的定义：

“环境的功能可见性是指环境所给予动物的东西；环境提供或布置的、无论好坏的东西。我在词典中找到了动词afford，但名词affordance还没有。我创造了这个新词。它同时涉及环境和动物两者，这是一种此前已有的词汇所没有表达出来的关系，即动物和环境的互补性。”

根据吉普森的说法，人类倾向于去改变环境，希望它的功能可见性更适合他们，并使他们的生活更轻松。学习环境的功能可见性成为社**化的一个重要部分。

当被应用于设计时，功能可见性这个术语指的仅仅是用户得以察觉到的所有操作可能性。从这个角度来看，Donald Norman在《日常事物设计》1988册中探索了这一术语的进一步发展。根据专家的说法，术语“功能可见性”指的是事物被感知到的和实际的属性，主要是那些决定事物该如何被使用的基本属性。功能可见性对事物运作提供了强有力的线索。平板是用来推的。旋钮是用来转动的。插槽是用来插入东西的。球是用来投掷或弹跳的。当功能可见性被利用得当时，用户只需看一眼就知道该做什么：不再需要额外的图**、标签或指令。

随着各种用户界面的出现，功能可见性得到了一种新的发展方向。我们曾经用不同的动作、工具和东西做了数百种操作。现在我们仅仅点击鼠标或者点击屏幕就可以进行大量的操作。这使得设计师们需要思考新的呈现功能可见性的方式，来让人们把以往已在现实生活里习以为常的模式和知识转移并积累到与数字界面的互动中。这种经验与之前大不相同，所以设计方法也改变了。

用户界面中功能可见性的类型

UI中的功能可见性可以根据他们的表现和展示分类。不管怎样，主要目标就是利用人们已经有的知识和经验，来实现简化交互流程。

显性的和隐形的功能可见性

我们可以在用户界面中根据表现找到明显的和隐藏的提示。

明确的功能可见性是基于广为人知的和典型的提示，来引导用户进行特定的行动。例如，当你看到一个按钮被设计成一个明显的可点击的元素，在视觉上类似于物理世界中的按钮，你知道你可以点击它来进行交互。如果按钮中还有文本或图标，启示就变得更加清晰：它告诉你系统**如何进行反馈。

美食网站的网页：CTA（call to action）按钮作为一个可点击的元素是清晰的，并且文案也说明了这个按钮使用户能够做什么

隐性的启示并不那么明显。它们是隐藏的，只有在用户行为的特定流程中才能被揭示出来。当我们鼠标悬停在页面元素上时，得到的工具提示或解释就是这样的。另外一个例子是各种多层导航元素，比如下拉菜单或可扩展按钮，这些下级元素一开始没有被看到，但是在特定的操作之后显示出来。也许，汉堡包导航也许是最有争议的隐形导航之一了，它把可用的功能隐藏在了一个特殊的图标背后。

Slopes网站顶部的汉堡包按钮隐藏了扩展的网站菜单

图形的功能可见性

图形的功能可见性通过视觉应用展现在界面中，帮助用户浏览界面功能。相比文案，用户对各种各样的图形感知速度更快，记忆效果更好，故而图形的重要性不能被忽视，其中，我们提到一下几点：

（1）照**

主题照**，物品照**，头像或标题图**都是一种视觉辅助，从帮助用户感知在App或网页可以进行社么操作（如购买、沟通、展示、观看、学习、写作等）到体现某项具体的功能。举个例子，如果一个App能够让用户保存或共享菜谱，那么像下面图中那样配以和菜谱相关的食材照**就**很棒。

素食配方应用

（2）品牌标志

Logo、公司标志和应用在网站或app的颜色，立即展示出了用户界面与特定品牌的连接，这对忠实客户来说可能是个强有力的功能可见性。

珠宝电商app中，开屏及标题栏上的logo建立了品牌的连接

（3）插图

主题插图和吉祥物形象很有可能成为一个相当明确的用户提示。在下面的图尼闹钟中，你可以看到一个弹窗，用万圣节南瓜，一个众所周知的视觉提示，来通知用户关于万圣节贴纸的事情。

图尼闹钟

（4）图标

界面图标，也许是视觉的功能可见性中最多样化的。这些象形符号是高度象征性的，并且大多使用来自现实世界的提示，以便用户能够快速地理解它们。即使有些图标形象已经和它曾经代表的实际物体失去了关联性，但只要有大量用户已经记住了这个物体的功能，它的图标就依旧可以有效地展现其所指代的功能可见性。有个最好的例子：软**不再代表软**这个物体，而是代表了“保存”这个操作。一颗心或一颗星星**立刻让你把它和收藏夹联系起来，放大镜**提示它是一个搜索，而一个相机图标是用来拍照的，不**花费你太久的时间来理解。

学习汉语app

图标也被用作分类内容的有效提示：在适当的图形支持下，可以更快的区分类别和章节。

博客app

（5）按钮

作为核心交互元素，按钮已经成为界面上最易识别的元素。在GUI时代之前，按钮被用在各种物理事物中，从简单的计算器到复杂的仪表板。我们都知道怎么用按钮。重点是让它可见，并且明显地被视为用户界面中的按钮。形状、对比度、颜色和文案都对此有很大帮助。

洒水追踪器

（6）输入框

基本上，输入框是一个空白区域用来暗示用户可以在这里输入所需的数据信息。为了使它们有效，设计师也激活了功能可见性的能力：输入框应该看起来是交互式的，这样人们就可以立即理解他们可以在里面键入文本。下面的完美菜谱APP界面显示了搜索输入框：由于它的形状和对比度，很明显该输入框是一个交互式元素，并且还有搜索图标和提示文本的帮助。

完美菜谱app

（7）通知

有许多方法来提示用户，有一些错过的或值得注意的东西。看看下面界面中的购物车图标：上面一个**色的点，就快速的提示了购物车不是空的。

美味汉堡app

文案的功能可见性

虽然用户感知图像比单词快得多，但是文案在交互流程中的影响也有着不能忽视的位置。关键是图像有时需要借助文本进行解释，以避免误解。另一方面，不是一切都可以用图**来显示。最后，文案在传递信息、标记指令和调用动作、解释功能和支持自动布局的排版层次方面具有难以置信的多样性潜力。然而，我们应该合理平衡的使用文字，而不要让页面中文字过多。

与文案的交互对于日常生活中的人们来说是非常自然的，比图形用户界面存在的时间要长得多。文案线索和提示有助于帮助用户了解该做什么或期待什么，记住什么信息：我们从符号，广告，还有报纸，手册和书籍中读了很多文本。在数字用户界面中，文案的工作原理是一样的。这是一种直截了当的交流方式。例如，下面医疗保健app的日程界面的文案，显示了多样的功能可见性：除了关于患者的主要信息外，我们可以看到搜索框内的提示字段、按钮上的调用指令文字，还有日历的空旷字段中给出了文字线索，用户只需要点击一下这个区域，就可以添加一个日程。

健康保障app

模式的功能可见性

模式的功能可见性是基于习惯的力量，是提出有效的交互设计的巨大因素。它最大的优势是让用户不需要多想，而是在脑中回忆惯性操作。正如我们在一篇文章中提到的人类记忆机制对UX设计师的启示，短期记忆的能力是有限的。因此，用户习得的模式越多，导航对于他们来说就越清晰，对页面的新信息也更易理解。

这种类型有很多典型的功能可见性：例如，我们都习惯于点击网站顶部的logo可以打开网站的首页。我们知道下划线文案通常是可点击的链接，可以从一个页面到另一个页面。网站的联系人和隐私策略等信息通常可以在网站底部找到，还有在app中的三个点意味着显示更多的附加功能。保留这些模式可以让用户感觉他们是理解界面的。因此，如果有必要打破功能可见的模式，请三思而后行：创意应该是合理的并且是对用户明确的。

厨艺网站

动效的功能可见性

应用于用户界面的动画在物理和虚拟世界之间建立了强大的连接。在大多数情况下，它模仿与真实事物的交互：拉、推、擦、拖等。因此，界面动画既基本又复杂，呈现出一种强大的功能可见性。

下面的例子显示了Toonie报警app中的开关。当开关打开时，它**同时改变几个参数：标签的颜色、切换按钮的颜色还有太阳激活的动画。用这种方式立即通知用户，并为操作增加了情感吸引力。

Toonie Alarm的开关设计

另一个示例是家庭预算app，在交互流程中出现的通知，提醒用户关注特定的限制。它的动画特点是跳动，这种方式吸引了用户对重要警告的注意。

家庭预算app

这里还有一个案例—**新动画。它出现在屏幕上时，提示用户界面正在更新，并在等待的过程中添加了一些乐趣。

拉动**新动效

消极的功能可见性

无论听起来多么奇怪，消极的功能可见性在积极的用户体验中也起着很大的作用：它们根植于负面结果也是结果的事实。负面提示的目的是给用户一个提示，在当下一些元素或操作是不可用的。例如，下面给出的家居应用程序界面显示了“卧室”按钮是活跃的，而其他房间的按钮是不可用的，故而它们呈现负面的功能可见性。“安全级别”也表示第5级是完全不可用的。

家居app

这里还有一个例子：当前所在tab的图标是彩色的，而其他tab则用没有颜色的消极功能可见性来展现。

标签栏动画

错误的的功能可见性

从用户体验功能可见性的角度来看，错误和消极不应该被看作是同义词。没办法，错误的功能可见性是设计师应该避免的：这是指不恰当的错误暗示导致用户并没有做出应该做的操作，反而进行了误操作，或者让操作产生了和预期不符的后果。有时是故意而为之，但大多数情况下是错误的。例如，如果网页中的一段文本被划线了，用户**自然而然认为它是可点击的。因此，他们可能**很恼火地理解它不起作用了-这意味着他们被误导了。

上面的介绍让我们了解了功能可见性在用户体验设计中的重要作用。我们将在我们的下一篇文章中加入更多的洞察力、技巧和例子来继续这个主题，所以不要错过更新。

英文原文：UX Design Glossary: How to Use Affordances in User Interfaces

原文链接：https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

译者：冰璐一只，微信公众号：「微信ID：DR_DDC」

本文由 @冰璐一只 翻译发布于人人都是产品经理。未经许可，禁止转载。

题图由作者提供