• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 那些很熟悉但又叫不出名字的设计法则:功能可供性

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

作者:二手设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含心理学,用户习惯,经验分享,设计方法,设计法则,设计法则专题等相关知识,二手设计希望在学习及工作中可以帮助到您

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..com

优设大课堂

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 超全面!体验设计中的「功能可供性」基础科普
  • 想用设计化腐朽为神奇,你得先想明白这10个问题
  • 如何做好 Banner设计?我总结了这4类基础知识
  • 那些很熟悉但又叫不出名字的设计法则:选择架构
  • 交互基础小课堂!如何利用 “峰终定律” 改善用户体验?
  • 超全面!设计师必须了解的美术基础
  • 这些价格设置小策略,说不定让你的销量翻一翻!
  • 超多实例!解析「接近法则」在设计中的应用

相关文章

  • 2017-08-06将rar文件隐藏在图片中的实现方法
  • 2018-08-23实例演示!聊聊品牌视觉设计的4个关键要素
  • 2018-08-23为什么你做的设计总是不耐看?
  • 2018-08-23「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡
  • 2018-08-23超全面!腾讯出品的交互微动效设计指南
  • 2017-08-06在FireFox中导入导出Cookies与收藏夹的解决办法
  • 2018-08-23专访三部曲!这两天刷屏的Teamlab艺术展创始人猪子寿之
  • 2018-08-23设计的中宫指什么?不懂这个谈字体结构和造型都白搭!
  • 2018-08-23腾讯99%的付费界面和流程,都是这个团队设计的!
  • 2018-08-23进阶必读!可能是最全面的组件化开发与设计指南

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 帮助新手熟悉产品的向导程序,遵循着怎样的设计模式?
    • 抓住这7个关键,创造让人欲罢不能的长滚动页面
    • 网站设计经验 建设网站常犯错误汇总
    • 大开眼界!视觉误差对UI设计的影响和解决方案(附案例)
    • 高手的平面课堂!用一个实战案例帮你学会平衡构图
    • 超实用!信息架构基础知识科普手册
    • Web前端开发者必知的9个实用CSS属性
    • C4D教程!教你创造酷炫的3D字体(附建模软件科普)
    • 中文版来了!超实用的苹果AR人机界面设计指南
    • 超实用!多色彩渐变插画的核心技巧总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有