那些很熟悉但又叫不出名字的设计法则:功能可供性 - 优设网 - UISDC

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

2018/03/27 15081评论区

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

「设计法则系列好文」

功能可供性(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 与人们感官的预期相符合。
  • 在抽象的界面中,不论是视觉上还是功能上都要与我们实际生活中的认知相符合。

参考资料:

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

「设计法则系列好文」

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/affordance

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里