那些很熟悉但又叫不出名字的设计法则：功能可供性

Affordance 这个设计概念至今没有统一的中文译法。二手翻阅了一些材料，《通用设计法则》将 Affordance 译成「功能可见性」；《设计心理学》将 Affordance 译成「示能」；百度百科将 Affordance 译成「功能可供性」；维基百科将 Affordance 译成「承担特质」。本期来聊聊 Affordance。

「设计法则系列好文」

《那些很熟悉但又叫不出名字的设计法则：冯·雷斯托夫效应》 《那些很熟悉但又叫不出名字的设计法则之「系列位置效应」》 《那些很熟悉但又叫不出名字的设计法则：希克定律》 《那些很熟悉但又叫不出名字的设计法则：形式服从功能》 《那些很熟悉但又不知怎么用的设计法则：80/20法则》 《那些很熟悉但又叫不出名字的设计法则：倒金字塔法则》

功能可供性（Affordance）：物品或环境的特质会影响其功能。

什么是Affordance？

Affordance 是 afford（提供、给予、承担）的名词形式，环境的 affordance 是指这个环境可提供给动物的属性，无论是好的还是坏的，根据《Affordance（可供性）和设计》二手认为「可供性」是一个合适的翻译。本文保留 Affordance，不做翻译。

△ 方形轮子自行车和圆形轮子自行车

Affordance 一词由知觉心理学家詹姆斯·J·吉普森（James J. Gibson）首创，用以解释我们对天下事物的知觉。吉普森对「Affordance」的定义是：动物或人对世界上某个物体可能实施的某种活动。唐纳德·A·诺曼在《设计心理学》中第一次将 affordance 用于设计上的实际问题。举个例子：方形的轮子和圆形的轮子（如上图），哪一个看起来可以跑得更快？

维基百科：环境赋使（Affordance），指一件物品实际上用来做何用途，或被认为有什么用途。也就是说在物品的某个方面，具有让人明显知道该如何使用它的特性。例如门提供「打开」的功能，椅子提供「支撑」的功能。人们得知如何使用物品有一部分来自认知心理学，另一部分来自物品的外形。

百度百科：功能可供性是知觉领域里的一个新概念，心理学意义的可供性（Affordance）认为人知觉到的内容是事物提供的行为可能，而不是事物的性质，而事物提供的这种行为可能就被称为可供性。

通用设计法则：一些物品或环境从视觉上会感到适合某些功能。

设计中怎样运用Affordance？

△ 图片摘于简书（https://www.jianshu.com/p/c5eb7261535c）

如果物品或环境的 Affordance 与人们感官的预期相符合，那么这种设计会有很高的接纳率和使用率，同时也会被认为容易操作。相反，如果物品或环境的 Affordance 与人们感官的预期相违背，那么这种设计不会有很高的接纳率和使用率，同时也会被认为难以操作。

△ iOS6和 iOS7 短信页面比较（图片摘于网络 http://apple.xdnice.com/content/applenews/2013/0614/142195.html）

举个例子：苹果操作系统从 iOS6 升级到 iOS7 的时候，Affordance 成为了大家热议的焦点，以短信页面为例，iOS6 中「Message」等其他按钮有边界，有凸起的感觉，按钮看起来具有「可以点击」的 affordance，但是在 iOS7 中，「Message」等其他按钮，没有任何修饰，单纯的呈现在白色界面上。刚升级到 iOS7 的时候，很多用户并不适应这种设计，反馈不知道哪里可以点击。对于老用户而言，经过了7年的用户习惯养成，用户已经形成了一定的使用习惯，iphone 从最初的拟物化到扁平化，用户早已对可点击区域了然于心。所以，即使看到「Message」一词，可点击的 Affordance 就已经浮现在用户的头脑中。对于新用户而言，从头开始学习，也并没有增加学习成本。

△ 弹幕功能

我们再来看 pc 端的弹幕功能，当用户打开视频的时候弹幕是自动播放的，但是很多时候弹幕多到丧心病狂，影响用户的观看。这时候用户会选择关闭弹幕，鼠标 hover 弹幕按钮时，按钮高亮，提示「隐藏弹幕」功能，但是同时上弹出一个功能集合弹框，用户的 Affordance 是关闭弹幕，但是其他功能又与用户感官相违背，所以会让用户难以操作。

生活中常见物品和环境的图像，可以明确产品的使用性和功能性。

△ 微信红包

举个例子：心理学上有个概念叫做 Familiarity bias（熟悉度偏见），说的是人们倾向于相信自己熟悉的东西。熟悉能产生信任，不熟悉产生疑虑。微信红包便是最成功的案例之一。微信红包不论是视觉上还是功能上都与我们实际生活中的认知相符合，于是这些图标可以提示用户，它们在抽象的界面中的对应功能。

小结

物品或环境的 Affordance 与人们感官的预期相符合。 在抽象的界面中，不论是视觉上还是功能上都要与我们实际生活中的认知相符合。

参考资料：

《通用设计法则》，威廉·立德威尔、克里蒂娜·霍顿、吉尔·巴特勒<著>，朱占星、薛江<译>，中央翻译出版社 承担特质，维基百科 功能可供性，百度百科 《看图说话 iOS7与iOS6的各种区别对比》 《Affordance》，李如一 <著>，好奇心研究所 《Affordance（可供性）和设计》，hi-id.com 《腾讯产品法》，李立<著>，浙江大学出版社 《设计心理学》，唐纳德·A·诺曼<著>，中信出版社

欢迎关注译者的微信公众号：「二手设计」

「设计法则系列好文」

《那些很熟悉但又叫不出名字的设计法则：冯·雷斯托夫效应》 《那些很熟悉但又叫不出名字的设计法则之「系列位置效应」》 《那些很熟悉但又叫不出名字的设计法则：希克定律》 《那些很熟悉但又叫不出名字的设计法则：形式服从功能》 《那些很熟悉但又不知怎么用的设计法则：80/20法则》 《那些很熟悉但又叫不出名字的设计法则：倒金字塔法则》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： http://hao.uisdc.com