Affordance是设计心理学中的一个专业术语，中信出版社将它翻译为「示能」，从字面意思上来看依然不是很直观。在查阅了大量的中文资料后，我个人认为Liang Yicheng的翻译「可供性」更为贴切，具体的内容，请参考文章末尾Reference中提供的链接。这篇文章翻译自Tubik Studio，主要讨论Affordance在用户界面设计中的使用。
什么是Affordance？
Affordance是一个物理对象的属性或者功能，它揭示了与之交互的方式和可能性。简单来说，Affordance提示用户如何与一件物体进行交互，不论它是数字产品还是物理实体。
例如，当你看到门把手的时候，它会提示你可以通过它来开门。当你看到一个话筒的图标，就会知道你可以点击它来进行通话。Affordance通过提供与实体对象和虚拟产品的正确交互提示，让我们的生活更加方便简单。下方是一个提醒你给植物浇水的App，看到这个打了对勾的界面，你马上就会知道你已经完成了浇水任务。底部Tab bar中的icon显示了这个App所提供的功能，通过颜色对比用户可以知道当前显示的是哪一个界面，除了查看首页，你还可以增加一个新的植物，或者是浏览你的个人信息，这就是用户行为中的Affordance。
Watering Tracker
Affordance的历史进程 这个名词首先由心理学家James Gibson提出，他对人类的视觉感知进行了深入的研究。在1966年，他首次在他的书籍
>中使用了这个词汇，在1979年，他在>一书中阐释了它的定义：“环境的Affordance就是它为动物们所提供的东西，不论好坏。在字典中我们可以找到动词的Afford，代表「提供」的意思，但是却找不到它的名词形式，所以我创造了它，它可以在某种程度上描述环境和动物之间的互补关系。” 根据Gibson的调查研究，人类倾向于改造环境，让Affordance更好的为我们服务，让我们的生活更加美好，学习环境的Affordance是社会结构中的一个重要组成部分。将它应用于设计中时，一开始这个词仅仅指代用户意识到的物理动作，在此基础上，Donald Norman1988年在一书中，对它做了更进一步的研究。他在书中写道：
“Affordance一词指代的是事物的感知属性和实际属性，主要是哪些事物可以如何被使用的基本属性。Affordance为用户操作提供了强大的支持，例如面板可以被推动、旋钮可以被转动、插槽用于插入什么东西，球被用来投掷或者拍打。当Affordance起作用的时候，用户只需要看一下就可以快速理解如何使用一件物品，不需要额外的图片或者文字说明。“随着各种用户界面的出现，Affordance得到了进一步的发展。以前我们通过各种行为使用不同的工具、产品，现在我们只需要点击鼠标或者触摸屏幕就能进行大量的操作。它令交互设计师们有机会呈现新的Affordance，进而可以将人们在真实世界中习得的操作转换到数字产品中，这种体验截然不同，所以它需要新的交互方式。
UI设计中的Affordances类型用户界面中的Affordances可以根据它们表现和性能进行分类，它们的主要目的是利用用户已经掌握的知识和技能简化交互流程。
显性和隐性的Affordances 基于它们的性能，我们可以在UI中找到这些显而易见或者委婉隐晦的提示。显性Affordances是利用一种约定俗成的引导让用户进行某种特定操作。例如，当你看到元素设计的很像真实世界中的按钮时，很明显它是一个可点击元素，你就会知道可以通过点击来与之进行交互。如果有文本或者按钮辅助，那么Affordance就会更加清晰，它会告知你系统接下来的反馈是什么。
The Gourmet 网站：CTA按钮很清晰的表明它是一个可点击元素，同时上面的文案表明了它为用户提供了何种功能隐性Affordance并不是那么显而易见的，它们更加隐晦，并且只在用户进行某种特定操作的时候显示。当我们将鼠标悬停在某种元素上出现的提示或者说明元素就是一种隐性Affordance。另外还有其他的案例，诸如下拉菜单和可扩展按钮，它们并不是一开始就出现在屏幕上，只会在用户进行特定操作之后显示出来。或许最有代表性的就是汉堡菜单，它们将一些功能菜单入口隐藏在图标后面。
图形Affordances图形的Affordance与视觉效果一起被呈现在用户界面中，并且帮助用户理解产品的功能和特性。图形的感知力和记忆性比文字更好，所以它们的重要性是显而易见的，主要体现在以下几个方面：
图片(Photos) 主题图片、元素图片、头像照片和标题图片都为我们提供了视觉辅助，它让我们知道可以从App或者网站中获得什么信息，同时也表明了产品的某些特定功能，例如：购买、交流、展示、观看、学习或者编辑等。例如一个下方这样的App，提供准确直观的图片就显得很有必要了。
品牌标志(Branding signs)在网站或者App中展示Logo、图形标志或者品牌颜色，都有助于帮助用户建立与品牌之间的联系，这对于忠实用户来说是一个非常有力的Affordance。
插画(Illustration) 一些主题插画和吉祥物同样也可以为用户提供清晰的提示，下面是Toonie Alarm的弹窗，它通过非常有节日标志的南瓜头插画，向用户展示万圣节主题的贴纸。
Icon(图标) 界面图标可能是提供视觉Affordances最多的元素。这些图形具有很高的指向性，并且大多数是来源于现实世界中的概念抽象。更重要的是，在某些图形在失去与原有物体的连接之后，如果用户已经对它们十分熟悉，那么它们仍然是起作用的。例如软盘图标可以代表保存，心形或者星星代表喜欢，放大镜代表搜索，看到相机图标你就会自然而然地知道，可以点击它来拍照。
中文学习App
图标还可以有效的帮助我们将内容进行分类，使用正确的图形可以快速的帮助我们设置标签和类别。
按钮(Button) 作为核心的交互元素之一，按钮已经成为用户界面中不可或缺一个组件。在GUI时代之前，它被广泛的应用于实体物品中，从简单的计算器到各种复杂的仪表盘，我们都知道该如何使用按钮，关键问题是，要让它们在视觉上更加显眼，并且外观上像一个按钮，我们可以从形状、对比度、颜色和文案这几个方面入手。
输入框(Field) 输入框为用户提供可输入内容的区域，为了让它们更加有效，设计师们依然需要借助Affordance：输入框需要让用户立即理解，可以在这里打字。下面的Perfect Recipes App展示了一个搜索框，它的形状和对比度非常清晰的显示这是一个可交互元素，并且它还通过搜索图标和提示文字给予用户一定的指导。
Perfect Recipes App
通知(Notifications)有许多方法可以提示用户去注意某事，下面的案例中使用图标上方的数字提示用户，购物车不为空。
文案/语言(Copy/Language) 尽管用户对于图片有更快的感知力，但是文案在交互流程中依然有其重要作用。关键是有时候需要文字对图片作出解释，避免造成一些误读。而且某些时候单纯依靠图片并不能完全呈现出所有信息，文案可以很好的起到解释说明的作用。同时加入文案可以使整个版面的层级更加清晰，但是在编辑文案的时候也需要注意平衡，不要让画面过载。在日常生活中，人们与文案的交互更加自然，文字交互比图形界面存在的时间更长。文案为用户提供有帮助的信息，提示用户接下来的动作和操作预期。我们习惯于从标志、广告、报纸、手册和书本上读取信息，在数字产品中也是同样的道理，这是与用户沟通的直接方式。例如，HealthCare App的界面就很好的利用了文案Affordance，除了用户的基本信息外，我们还可以看到搜索框内的提示文字，CTA按钮上的文字，还有日历上的提示文案，告知用户只需要点击空白处就可以增加一条预约记录。
HealthCare App
思维模式(Pattern Affordances)思维模式是基于习惯的力量，它是交互设计中非常重要的一个因素。它最大的好处就是将很多的内容存储在我们的大脑中，帮助我们节省反复学习的时间和精力。正如我们在《交互设计 - 人类的记忆》文章中提到的那样，人脑的存储容量是有限的，所以用户习得的思维模式越多，他们的导航就越清晰，同时接受新事物的能力也就越好。在这一方面的Affordance中有许多典型的例子：例如，我们都已经习惯了点击网页左上角的logo跳转到主页；我们知道带下划线的文本是超链接，可以让你跳转到另一个网页；网页的底部通常会显示网站信息和版权声明；App中的三个点代表点击显示查看更多功能。存储这些思维模式可以帮助用户更好的理解界面，所以如果你的设计将要打破这些原有的思维模式，请三思而后行，要确保你创造的新思维模式应该是有据可循并且对于用户来说是清晰易懂的。
动效(Animate)用户界面中的动效为真实和虚拟世界建立了一种联系。在大多数的情况下，它模拟的是真实事物的交互规律，拉动、推动、滑动、拖动等等。所以不论是基础的还是复杂的，动效都为我们提供了一种强有力的Affordance。下面的案例展示了Toonie Alarm App中的开关，当开关打开的时候，有几个参数会同步更改：选项卡的背景颜色、开关的颜色、并且太阳动画这个时候也会被激活。它通过这种方式给予用户及时反馈，并且增加了情感化设计的吸引力。
Toonie Alarm的开关设计另一个动效的应用案例是Home Budge App，在用户进行某种操作的时候，通过动效告知其限制性。使用有规律的动画来吸引用户的注意力，进而起到重要的警示作用。还有一个案例就是下拉刷新动效，它告知用户信息正在刷新，让用户在等待的过程中增加更多的趣味性。
下拉刷新动画
不可用状态(Negative)不管它听上去多么奇怪，我必须要强调不可用状态Affordance在用户体验中的重要性。因为它们同样告知用户某种结果。不可用状态的目的是提示用户，当前某种元素或者操作正处于未激活状态。例如下方的Homey App通过图标状态告诉用户Bedroom已激活，而其他部分未激活，所以它们现在是不可用状态，安全等级使用相同的方式表示5是未激活状态。
Homey App
另外一个案例是，底部标签栏的图标显示为彩色，表示它被激活；而其他的图标则是不可用状态，代表未激活。
底部导航栏动效
错误(False)从用户体验Affordance角度来看，不应将错误和不可用状态混为一谈。错误的Affordance是设计师们应该尽力去避免的，他们是会对用户产生误导的提示，引领用户进行错误的操作，从而并未达到预期效果。有的时候是设计师故意为之，但是大多数情况下是不小心造成的错误。例如，如果在文字下面加下划线，用户通常会觉得它是可以点击的，所以当用户发现点击它之后没有任何效果的时候，就会感觉非常困惑，这意味着它为用户提供了一个错误的提示信息。希望通过以上这些简短的介绍，可以帮助让大家了解Affordance在交互设计中的重要性。同时也希望大家在自己的工作中可以熟练运用，创造出拥有良好用户体验的产品。关于作者
Tubik Studio 是一家专注于设计领域的工作室，致力于为用户打造出色的产品体验，为不同的客户提供出色的设计方案以及作品。主要的研究方向有：UI/UX设计、网站开发、App开发、动效设计、平面设计以及品牌设计。
官方网站：
https://tubikstudio.com/
Medium：
https://medium.com/@tubikstudio
原作者： Tubik Studio 编译： 视觉派Pie 原文链接： https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4 版权声明： 本文在不改变作者愿意的情况下，做了删减和编排，版权属原作者所有。本文仅为翻译，不代表本人观点。 References
[1] 设计心理学里的 Affordance 到底是什么意思？:
https://blog.ryouissei.com/post/428.html
[2] 设计心理学 作者: 唐纳德·A·诺曼 :
https://book.douban.com/subject/26742341/END
往期精选
用户模型之服务蓝图(Service Blueprint)
交互设计
23 October 2020
第三学期毕业设计思路整理
交互设计第四节：设计评估：启发式评估法
交互设计第三节：原型制作
老龄化的日本：机器人在未来老年护理中扮演的角色
游戏化设计-令人上瘾的用户体验
听说过GUI、VUI、DUI、FUI，各位设计狮知道TUI吗？
交互设计第二节：挖掘用户需求
交互设计第一节：以人为本的设计：概述
思辨设计(Speculative Design)：通往社会梦想的桥梁
Communication Design 第二学期回顾 - 一本书的诞生
你⌜ 在看 ⌟我吗？
如果喜欢请右下角给我一个古力
☟
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
