当前位置:首页 >  站长 >  交互设计 >  正文

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

 2018-03-28 09:17  来源:优设网  我来投稿

  小程序创业扶持计划 实现月入10万创业梦

  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 与人们感官的预期相符合。

  在抽象的界面中,不论是视觉上还是功能上都要与我们实际生活中的认知相符合。

  参考资料:

  《通用设计法则》,威廉·立德威尔、克里蒂娜·霍顿、吉尔·巴特勒<著>,朱占星、薛江<译>,中央翻译出版社

  承担特质,维基百科

  功能可供性,百度百科

  《看图说话 iOS7与iOS6的各种区别对比》

  《Affordance》,李如一 <著>,好奇心研究所

  《Affordance(可供性)和设计》,hi-id.com

  《腾讯产品法》,李立<著>,浙江大学出版社

  《设计心理学》,唐纳德·A·诺曼<著>,中信出版社

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

责任编辑:西瓜

相关文章

  • 网站设计:从幽灵按钮到空心元素,如何用好这一设计趋势

    幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。

    标签:
    网站设计
  • 实例:如何设计下拉菜单技巧

    下拉菜单可以说是网页设计中令人又爱又恨的元素之一了。下拉菜单有许多优点:不占地方,不需要做输入验证,所有平台都支持,技术门槛低,用户都很熟悉其使用方法。然而与之同时,下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景和设计技巧。

  • 网站设计没有新意 有没有打赏功能

    滴滴打车有个打赏功能,而在今日头条发文同样有个打赏功能,打赏属于意外的收获,如果你的服务超过了用户的期待,用户会通过打赏格外给你一份奖励,而在网站设计中,很多用户通常有这样的感叹,千篇一律,没有新意,那么,有没有尝试做个打赏功能呢?

    标签:
    网站设计
  • 3个要点,教你设计好无限滚屏

    随着社交网络的流行,无限滚屏刷新feed流成为探索更多内容的一种必要的交互方式,如同Flickr、Facebook所做的。用户愿意浏览大量内容去寻找自己感兴趣的东西,用户会先关注内容再关注其他东西,而无限滚屏形式能让用户找到他们想要的内容。此外,无限滚屏的线性结构能让网页编辑容易操控。随着用户向下滚

  • 网页中背景纹理设计需要掌握的几点技巧

    优秀的网页纹理背景有利于提供网页整体的质感,并且纹理背景同时也是打造模糊效果的另外一种手段,善于观察的设计师应该都知道,合理的利用纹理图案不仅能够让页面更具质感,甚至妙趣横生。当然,最关键的还是提升网站的吸引力,毕竟大部分企业建站的目的都是为了赢得更多的客户,让企业的产品或服务被更多的人知晓,而今天

xm

热门排行

信息推荐

扫一扫关注最新创业资讯