体验设计中的 affordance

2018-7-12    分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


最初听到这个词是在前两年的一次分享上,当时就觉得这个内容很好。正好最近赶上公司内分享,自己也尝试总结了一下,分享给大家。


01 什么是 affordance


一. 关于词汇

这个词,国内有很多翻译版本——示能、功能可供性、承担特质、直观功能、预设用途、可操作暗示、支应性、示能性等...目前“功能可供性”使用较多。但无论通过哪个词汇来讲,可能都不会很清晰的传达其含义。


二. 关于来源

美国心理学家詹姆斯·吉布森(James Jerome Gibson)于1977年最早提出 affordance 的概念,Affordance 认为人知觉到的内容是事物提供的行为可能,而事物提供的这种行为可能就被称为可供性,简单来说,它就是指环境为人/动物的行为提供的一种可能性。


1.举个例子

我们的祖先会拿树枝做武器,而树枝上并未标明自己可以做武器,而是因为树枝的粗细、硬度、锋利度等物理属性恰好为人提供了相应的可供性。


2.再举个例子

一个与膝同高的水平、平整、有一定延伸以及一定硬度的石头,那么它可提供相对应的人/动物“坐下”。也就是说具有上述属性的石头能够为对应的人/动物“坐下行为”提供可供性。


3.最后一个例子

公司门口的停车柱子,与手同高、面积合理、平整、水平、坚硬的物理属性为“放瓶子”的动作提供了可供性,即使它的建造出来的作用不是用来放瓶子。

我们生活中的的任何行动、创新其实都是在发现环境中的这种可能性



三. Affordance 的特点



1.不同的可供性不分主次

吉布森认为一个物品的不同 affordance 是没有差别的,不存在主次之分,好坏之分。比如同一块石头,它既可以提供坐下,也可以堆砌成墙,也可以拿来玩。


2.跨越主客观的二分法

它既是物理也是心理,也什么都不是,它同时存在于人/动物与环境之间。


a.它是客观的,比如一个与膝同高的水平、平整、有一定延伸以及一定硬度的表面它是“可供坐下的”,那么存在这个属性的物体一定可以坐下,不随人的意志而改变。


b.它也是主观的,如果没有动物的存在,“可供坐下”就会因为没有对象而失去存在的逻辑。


3.决定了环境的可供性的因素


a.环境的属性

指环境的物理属性,吉布森用自己的概念定义了环境的三种基本属性 —— 介质“MEDIUM”、实体“SUBSTANCES”、表面“SUFACES”

空气和水是介质,可以在其中移动,它也为视觉提供了可供性;另外,实体是混合的,它不允许动物在其中移动;人类的活动都是在表面上发生。


b.行为者的行动能力

同时事物的可供性也受每个人/动物能力的影响,比如和之前同样属性的石头可以为一个成年人的坐下提供了相应的可供性,但是对于一个婴儿、昆虫或大象来说就不见的会有同样的结果。


四. 直接认知论

Affordance 是吉布森的直接知觉论的核心内容,直接知觉论是吉布森发展出的一种与当时绝大多数认知理论(间接知觉论)相冲突的知觉理,其中“视崖实验”较为经典。


a.直接知觉论强调的是意义就在环境之中,感知者不需要做什么赋以意义的推论,只需要从环境中拾取信息,认为感知不只是一种主观行为。


b.间接知觉论认为知觉是间接的,强调的是人对信息的加工,将视网膜接受到的内容通过大脑加工转变为关于环境的知觉。


所以,Affordance 是一种区别于当时的间接认知论的新的世界观,同时这种新视角、新的认知角度也为设计带来了巨大的影响。


02 设计中的 affordance


一. 唐纳德·诺曼

诺曼是第一个在设计中引入 affordance 概念的人,他在《Design of Everyday Things》(中文版名为《设计心理学》)中提及该概念并且由于这本书的流行,Affordance 随之也被更多人接触到,包括设计师以及用户。


1.门

诺曼举的一个经典例子,该死的门总是不知道该怎么开它,有的是推、有的是拉、有的还会是日式推拉门,因为门为用户提供了多种方式打开的可能性。而错误的操作并不能打开每一扇门。



相较于吉布森,诺曼更强调一定情境下可以被知觉到的可供性(perceived affordance)的意义,在设计中,它不但与个人的实际能力有关,还将受到心理因素和文化或经验等的影响。


2.产品设计中的心理学

英国铁路局发现他们用强化玻璃做外板筑起的旅客候车棚经常被人砸碎,而且破坏速度不亚于修复速度。后来,他们用三合板代替了强化玻璃,这种破坏公物的行为就很少再发生——尽管砸烂三合板和砸烂玻璃费的力气差不多。


因为在当时人们的视角里,玻璃是透明的、能被砸碎。而木材通常坚硬、不透明、可用于雕刻或涂画。


所以,才会有史上最淡定的贼,抡锤五分钟砸银行防爆玻璃



事物的真实属性与用户的心智模型不匹配

在锤子哥的视角里,玻璃是透明的、可轻易被砸碎。但防爆玻璃的加工并非如此




这种现象在人机交互设计中更为明显

每个人都会在产品使用中建立自己的心智模型,如果心智模型与产品设计不匹配,就会导致操作错误,造成不良后果。


从较冷的外面进到屋子,为了快速调整室内温度。通常人们会把温度调到最高,等到温度适合,再降低空调温度。

但其实空调只有“全速运转”和“关闭”两种状态,所以上述操作不会快速让空调温度快速变高。



3.环境的限制因素


a.结构限制

相机的电池为长方体,但仍有多种可插入相机的可能,优秀的设计运用结构的限制,让只有一个角度可以插入电池槽


b.含义限制

内容的含义,依靠我们对情景之外的世界的理解,这种知识可以提供有效的操作线索,比如帽子是用来遮阳的,那么他一定是带在头部。


c.文化限制

一些已经被人接受的文化惯例也可以用来限制物品的操作方法,在熟悉的文化环境,即使没遇见过的人我们也知道什么该说,什么不该说。当置身于一种不熟悉的场景里,原有的文化标准不适用,就会感到反感


d.逻辑限制

物体间关系应存在空间或功能上的逻辑,如果两个开关控制两盏灯,那么左边的开关应该控制左边的灯。诺曼所说的其实并非全是真正意义上的 affordance,其实是感知上的 affordance。诺曼认为 - 在设计中,我们更关心的是可以被感知的 affordance 。


4. Affordance 可嵌套父子层级

1991年,William. W. Gaver 将吉布森的 affordance 以不同于诺曼的认识带入到 HCI 领域, Gaver 引入了吉布森的 affordance 可嵌套的观点,即一个 affordance 可嵌套在另一个父级 affordance 下也可以向下嵌套一个子级 affordance,比如拉一个门把手的 affordance 是嵌套于打开门这个 affordance 下的 。


二. 深泽直人

深泽直人也是通过诺曼和吉布森了解到的可供性。深泽直人说他是 1989 年左右听到这个词的,而诺曼那本书 1988年出版,当时是叫做《The Psychology of Everyday Things》。深泽直人认为 affordance 是一种认知论,是人处理物品时判断不致于出错的基准


1.Without Thought / 无意识设计或直觉设计

人会在无意识情况下对“刚刚好”的环境作出相应反应,而“刚刚好”的环境会对一定场景下的人产生“吸引力”,“将无意识的行动转化为可见之物”是无意识设计的意义所在。


同样还是上面那个属性的石头,它在一个疲惫人的眼前就会产生足够的“吸引力”让其坐下


很多设计师力图否定约定俗成的设计,用自己的思想创造一种新的生活方式这样就无形中加重了人们的“适应负担”


a.从小就不会连电脑线,每次都是碰运气安装成功


b.每个打印机都有不同的工作方式、不同的纸张存放处、不同的功能,总是头疼怎么使用


c.从小用到大电脑,但是还是不会设置网络的强大系统



它可能没有那么强大,但一定场景下“刚刚好”符合需求


当一个人拿着伞走进屋子,会自然的把伞的前端放在瓷砖之间的接缝中,这就是人从环境中拾取 affordance


深泽直人认为 - 好的设计应该会被人在毫不自觉的情况下拾取出其 affordance


03 如何运用于用户界面

在用户界面中引入 affordance 我们先抛弃实体的干扰,比如不再去关注玻璃屏幕可供点击、可供滑动或可供观看信息等,这样可以避免思路太绕。


其实无论是心智模型还是限制因素的作用,其目的都是一定情境下能够达成“刚刚好”的设计。


一. 心智模型

人们善于对现象进行解释,其解释结果均会影响下一步操作,一定场景下,其解释方式受行为者的后天经验影响,比如“点击入口”到“没有反应”就可能产生多种心智模型。


例:当前移动端登录场景中,在未填写内容的基础上,登录按钮没有任何意义,唯一的作用就是告诉用户“输入完可以点我”,剩下的只有干扰用户对其他信息的阅读。登录按钮的实际作用其实是提供给用户一个打开门的门把手的作用,其位置方便点击、大小合适、示意明确即完成目的,无需过于强调、突出。



二. 限制因素

限制因素能帮助设计更佳融入当下环境,其环境因素包括结构、含义、文化、逻辑


1.结构因素

间距处理不当的设计会提供给用户归类的多种可能性,如错误案例中的第二排信息:它有可以被归类为第二组,因为距离较近。但也可以被视为第一组,因为下面信息从属于上面的信息,两种心智模型都似乎合乎逻辑,用户就会对其含义模糊不清。之前写过一篇关于界面结构的文章,里面有更多相似的细节内容。


2.含义因素

btn是用来点的;tab可以点击,也可以来回滑动;banner是活动内容,点击跳转到另一个界面;进度条为信息进度,不可点击;一页没看完的信息,可以滑动查看剩余;正常文案可提供阅读,不可点击等...类似这些操作来说,用户无需思考。


3.文化因素

一些已经被人接受的文化惯例无法被破坏,例如阿拉伯的书写或阅读习惯为从右向左,而中国的阅读顺序为从左向右,由上而下,所以内容的优先级也应该符合其顺序。


4.逻辑因素

在用户界面场景中,逻辑因素限制非常的重要,合乎逻辑的交互更能清晰表达以及更符合使用预期,下面为微信的两个交互场景


三. 界面内容属性


1.界面元素的属性

用户界面中,提供点击的操作受内容的位置、大小、状态等影响。以移动端为例,通常情况下,我们会认为,屏幕偏下、大小合适、高亮的内容最为方便点击,因为其位置、大小“刚刚好”适合我们去点,不需要说明“点击这里”


2.反馈的属性

它一定程度上来自于外界因素,它可以说是多层嵌套下的 affordance ,也可以说不是,不过都不重要,重要的是它没用解释的基础上,提供给用户了可用或不可用的直观感觉



四. 但仍有很多内容存在欺骗性


我们在使用产品中,好的体验可以让用户忽略设计并且享受其中

而不好的体验只会让用户不断猜测其功能作用以及随时提防其漏洞与风险



04 总结

affordance 作为是一种认知论,是人处理物品时判断不致于出错的基准。但当高一纬度的词汇用在第一纬度内容上,总会偏移、出错,比如“你的界面上缺少一个 affordance ” ,这会被视为一种乱用。


所以我们从现在开始可以忘记不谈这个词汇,但它可以提供给我们一个看待问题的新的视角。


以上为本人的一些看法,有兴趣的可以深入了解其相关内容,有不同想法的伙伴欢迎交流。


本文由@雷三三原创于站酷,未经许可,禁止转载。

文章来自「微信公众号:别叫我设计师」


感谢您的阅读,下期见!


蓝蓝设计 www.lanlanwork.com )是一家专注而深入的 界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、 BS界面设计   cs界面设计   ipad界面设计   包装设计   图标定制   用户体验 、交互设计、 网站建设 平面设计服务



分享本文至:
« 界面视觉设计 5 要素之字体篇 vue生命周期钩子函数(11个) »

分类

  • 图标设计文章及欣赏(108)
  • 大屏界面设计文章及欣赏(84)
  • 网站设计文章及欣赏(472)
  • B端界面设计文章及欣赏(423)
  • APP界面设计文章及欣赏(646)
  • 行业趋势(440)
  • 设计资源(934)
  • 交互设计及用户体验(861)
  • 前端及开发文章及欣赏(1031)
  • seo优化(146)
  • 平面设计(247)
  • 随笔的一些文章(59)
  • 设计思维(1896)
  • 用户研究(231)
  • 设计管理与成长(241)
  • cs界面设计文章及欣赏(56)

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档

  • 2024年5月(52)
  • 2024年4月(44)
  • 2024年3月(50)
  • 2024年2月(58)
  • 2024年1月(44)
  • 2023年12月(47)
  • 2023年11月(41)
  • 2023年10月(15)
  • 2023年9月(27)
  • 2023年8月(88)
  • 2023年7月(62)
  • 2023年6月(58)
  • 2023年5月(28)
  • 2023年4月(47)
  • 2023年3月(37)
  • 2023年2月(90)
  • 2023年1月(78)
  • 2022年12月(45)
  • 2022年11月(69)
  • 2022年10月(51)
  • 2022年9月(135)
  • 2022年8月(60)
  • 2022年7月(111)
  • 2022年6月(162)
  • 2022年5月(143)
  • 2022年4月(86)
  • 2022年3月(119)
  • 2022年2月(53)
  • 2022年1月(99)
  • 2021年12月(105)
  • 2021年11月(83)
  • 2021年10月(101)
  • 2021年9月(153)
  • 2021年8月(147)
  • 2021年7月(149)
  • 2021年6月(157)
  • 2021年5月(124)
  • 2021年4月(185)
  • 2021年3月(144)
  • 2021年2月(35)
  • 2021年1月(103)
  • 2020年12月(95)
  • 2020年11月(76)
  • 2020年10月(31)
  • 2020年9月(45)
  • 2020年8月(50)
  • 2020年7月(46)
  • 2020年6月(33)
  • 2020年5月(78)
  • 2020年4月(69)
  • 2020年3月(100)
  • 2020年2月(59)
  • 2020年1月(31)
  • 2019年12月(50)
  • 2019年11月(57)
  • 2019年10月(48)
  • 2019年9月(48)
  • 2019年8月(57)
  • 2019年7月(58)
  • 2019年6月(58)
  • 2019年5月(31)
  • 2019年4月(37)
  • 2019年3月(43)
  • 2019年2月(25)
  • 2019年1月(45)
  • 2018年12月(41)
  • 2018年11月(40)
  • 2018年10月(29)
  • 2018年9月(40)
  • 2018年8月(87)
  • 2018年7月(107)
  • 2018年6月(86)
  • 2018年5月(109)
  • 2018年4月(40)
  • 2018年3月(35)
  • 2017年8月(35)
  • 2017年7月(45)
  • 2017年6月(7)
  • 2017年5月(27)
  • 2017年4月(51)
  • 2017年3月(69)
  • 2017年2月(65)
  • 2017年1月(69)
  • 2016年12月(55)
  • 2016年11月(111)
  • 2016年10月(92)
  • 2016年9月(53)
  • 2016年8月(9)
  • 2016年7月(4)
  • 2016年6月(9)
  • 2016年3月(19)
  • 2016年2月(26)
  • 2016年1月(29)
  • 2015年12月(34)
  • 2015年11月(35)
  • 2015年10月(46)
  • 2015年9月(43)
  • 2015年8月(40)
  • 2015年7月(33)
  • 2015年6月(46)
  • 2015年5月(58)
  • 2015年4月(70)
  • 2015年3月(55)
  • 2015年2月(17)
  • 2015年1月(33)
  • 2014年12月(21)
  • 2014年11月(83)
  • 2014年10月(94)
  • 2014年9月(6)
  • 2014年8月(1)
  • 2014年7月(13)
  • 2014年6月(66)
  • 2014年5月(99)
  • 2014年4月(88)
  • 2014年3月(101)
  • 2014年2月(67)
  • 2014年1月(83)
  • 2013年12月(106)
  • 2013年11月(111)
  • 2013年10月(61)
  • 2013年9月(20)
  • 2013年7月(13)
  • 2013年6月(27)
  • 2013年5月(48)
  • 2013年4月(39)
  • 2013年3月(8)
  • 2013年2月(20)
  • 2013年1月(31)
  • 2012年12月(33)
  • 2012年11月(31)
  • 2012年10月(22)
  • 2012年9月(8)
  • 2012年7月(14)
  • 2012年6月(15)
  • 2012年5月(31)
  • 2012年4月(24)
  • 2012年2月(4)
  • 2012年1月(8)
  • 2011年12月(35)
  • 2011年11月(32)
  • 2011年10月(13)
  • 2011年8月(1)
  • 2011年6月(1)

聚圣源网上免费给小孩起名机械起名字大全招行手机银行转账邓伦为什么甩了金晨中药店铺起名借壳亲子入浴交尾中文字幕公路工程起名大全集给宾馆起名要注意什么陪你逐风飞翔小说白金卡奖品兑换给女孩子起什么名字好队伍英文男孩起名字五行qq空间留言图片适合起名字10划汉字推广公司起名给宝宝起水果小名电动牙刷起名起名字与诗词投资公司起名网免费取名公司小群聊起个啥名字好呢?英文 起名字xyp.163.com美菱太阳能热水器椰树要求应聘者抵押房产终身服务天字一号电视剧糖商标起名如何为公司起名玉姓男孩起名字淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化