01 什么是 affordance

一. 關(guān)于詞匯

這個(gè)詞，國內(nèi)有很多翻譯版本——示能、功能可供性、承擔(dān)特質(zhì)、直觀功能、預(yù)設(shè)用途、可操作暗示、支應(yīng)性、示能性等...目前“功能可供性”使用較多。但無論通過哪個(gè)詞匯來講，可能都不會(huì)很清晰的傳達(dá)其含義。

二. 關(guān)于來源

美國心理學(xué)家詹姆斯·吉布森（James Jerome Gibson）于1977年最早提出 affordance 的概念，Affordance 認(rèn)為人知覺到的內(nèi)容是事物提供的行為可能，而事物提供的這種行為可能就被稱為可供性，簡(jiǎn)單來說，它就是指環(huán)境為人/動(dòng)物的行為提供的一種可能性。

1.舉個(gè)例子

我們的祖先會(huì)拿樹枝做武器，而樹枝上并未標(biāo)明自己可以做武器，而是因?yàn)闃渲Φ拇旨?xì)、硬度、鋒利度等物理屬性恰好為人提供了相應(yīng)的可供性。

2.再舉個(gè)例子

一個(gè)與膝同高的水平、平整、有一定延伸以及一定硬度的石頭，那么它可提供相對(duì)應(yīng)的人/動(dòng)物“坐下”。也就是說具有上述屬性的石頭能夠?yàn)閷?duì)應(yīng)的人/動(dòng)物“坐下行為”提供可供性。

3.最后一個(gè)例子

公司門口的停車柱子，與手同高、面積合理、平整、水平、堅(jiān)硬的物理屬性為“放瓶子”的動(dòng)作提供了可供性，即使它的建造出來的作用不是用來放瓶子。

我們生活中的的任何行動(dòng)、創(chuàng)新其實(shí)都是在發(fā)現(xiàn)環(huán)境中的這種可能性

三. Affordance 的特點(diǎn)

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

吉布森認(rèn)為一個(gè)物品的不同 affordance 是沒有差別的，不存在主次之分，好壞之分。比如同一塊石頭，它既可以提供坐下，也可以堆砌成墻，也可以拿來玩。

2.跨越主客觀的二分法

它既是物理也是心理，也什么都不是，它同時(shí)存在于人/動(dòng)物與環(huán)境之間。

a.它是客觀的，比如一個(gè)與膝同高的水平、平整、有一定延伸以及一定硬度的表面它是“可供坐下的”，那么存在這個(gè)屬性的物體一定可以坐下，不隨人的意志而改變。

b.它也是主觀的，如果沒有動(dòng)物的存在，“可供坐下”就會(huì)因?yàn)闆]有對(duì)象而失去存在的邏輯。

3.決定了環(huán)境的可供性的因素

a.環(huán)境的屬性

指環(huán)境的物理屬性，吉布森用自己的概念定義了環(huán)境的三種基本屬性 —— 介質(zhì)“MEDIUM”、實(shí)體“SUBSTANCES”、表面“SUFACES”

空氣和水是介質(zhì)，可以在其中移動(dòng)，它也為視覺提供了可供性；另外，實(shí)體是混合的，它不允許動(dòng)物在其中移動(dòng)；人類的活動(dòng)都是在表面上發(fā)生。

b.行為者的行動(dòng)能力

同時(shí)事物的可供性也受每個(gè)人/動(dòng)物能力的影響，比如和之前同樣屬性的石頭可以為一個(gè)成年人的坐下提供了相應(yīng)的可供性，但是對(duì)于一個(gè)嬰兒、昆蟲或大象來說就不見的會(huì)有同樣的結(jié)果。

四. 直接認(rèn)知論

Affordance 是吉布森的直接知覺論的核心內(nèi)容，直接知覺論是吉布森發(fā)展出的一種與當(dāng)時(shí)絕大多數(shù)認(rèn)知理論（間接知覺論）相沖突的知覺理，其中“視崖實(shí)驗(yàn)”較為經(jīng)典。

a.直接知覺論強(qiáng)調(diào)的是意義就在環(huán)境之中，感知者不需要做什么賦以意義的推論，只需要從環(huán)境中拾取信息，認(rèn)為感知不只是一種主觀行為。

b.間接知覺論認(rèn)為知覺是間接的，強(qiáng)調(diào)的是人對(duì)信息的加工，將視網(wǎng)膜接受到的內(nèi)容通過大腦加工轉(zhuǎn)變?yōu)殛P(guān)于環(huán)境的知覺。

所以，Affordance 是一種區(qū)別于當(dāng)時(shí)的間接認(rèn)知論的新的世界觀，同時(shí)這種新視角、新的認(rèn)知角度也為設(shè)計(jì)帶來了巨大的影響。

02 設(shè)計(jì)中的 affordance

一. 唐納德·諾曼

諾曼是第一個(gè)在設(shè)計(jì)中引入 affordance 概念的人，他在《Design of Everyday Things》（中文版名為《設(shè)計(jì)心理學(xué)》）中提及該概念并且由于這本書的流行，Affordance 隨之也被更多人接觸到，包括設(shè)計(jì)師以及用戶。

1.門

諾曼舉的一個(gè)經(jīng)典例子，該死的門總是不知道該怎么開它，有的是推、有的是拉、有的還會(huì)是日式推拉門，因?yàn)殚T為用戶提供了多種方式打開的可能性。而錯(cuò)誤的操作并不能打開每一扇門。

相較于吉布森，諾曼更強(qiáng)調(diào)一定情境下可以被知覺到的可供性（perceived affordance）的意義，在設(shè)計(jì)中，它不但與個(gè)人的實(shí)際能力有關(guān)，還將受到心理因素和文化或經(jīng)驗(yàn)等的影響。

2.產(chǎn)品設(shè)計(jì)中的心理學(xué)

英國鐵路局發(fā)現(xiàn)他們用強(qiáng)化玻璃做外板筑起的旅客候車棚經(jīng)常被人砸碎，而且破壞速度不亞于修復(fù)速度。后來，他們用三合板代替了強(qiáng)化玻璃，這種破壞公物的行為就很少再發(fā)生——盡管砸爛三合板和砸爛玻璃費(fèi)的力氣差不多。

因?yàn)樵诋?dāng)時(shí)人們的視角里，玻璃是透明的、能被砸碎。而木材通常堅(jiān)硬、不透明、可用于雕刻或涂畫。

所以，才會(huì)有史上最淡定的賊，掄錘五分鐘砸銀行防爆玻璃

事物的真實(shí)屬性與用戶的心智模型不匹配

在錘子哥的視角里，玻璃是透明的、可輕易被砸碎。但防爆玻璃的加工并非如此

這種現(xiàn)象在人機(jī)交互設(shè)計(jì)中更為明顯

每個(gè)人都會(huì)在產(chǎn)品使用中建立自己的心智模型，如果心智模型與產(chǎn)品設(shè)計(jì)不匹配，就會(huì)導(dǎo)致操作錯(cuò)誤，造成不良后果。

從較冷的外面進(jìn)到屋子，為了快速調(diào)整室內(nèi)溫度。通常人們會(huì)把溫度調(diào)到最高，等到溫度適合，再降低空調(diào)溫度。

但其實(shí)空調(diào)只有“全速運(yùn)轉(zhuǎn)”和“關(guān)閉”兩種狀態(tài)，所以上述操作不會(huì)快速讓空調(diào)溫度快速變高。

3.環(huán)境的限制因素

a.結(jié)構(gòu)限制

相機(jī)的電池為長(zhǎng)方體，但仍有多種可插入相機(jī)的可能，優(yōu)秀的設(shè)計(jì)運(yùn)用結(jié)構(gòu)的限制，讓只有一個(gè)角度可以插入電池槽

b.含義限制

內(nèi)容的含義，依靠我們對(duì)情景之外的世界的理解，這種知識(shí)可以提供有效的操作線索，比如帽子是用來遮陽的，那么他一定是帶在頭部。

c.文化限制

一些已經(jīng)被人接受的文化慣例也可以用來限制物品的操作方法，在熟悉的文化環(huán)境，即使沒遇見過的人我們也知道什么該說，什么不該說。當(dāng)置身于一種不熟悉的場(chǎng)景里，原有的文化標(biāo)準(zhǔn)不適用，就會(huì)感到反感

d.邏輯限制

物體間關(guān)系應(yīng)存在空間或功能上的邏輯，如果兩個(gè)開關(guān)控制兩盞燈，那么左邊的開關(guān)應(yīng)該控制左邊的燈。諾曼所說的其實(shí)并非全是真正意義上的 affordance，其實(shí)是感知上的 affordance。諾曼認(rèn)為 - 在設(shè)計(jì)中，我們更關(guān)心的是可以被感知的 affordance 。

4. Affordance 可嵌套父子層級(jí)

1991年，William. W. Gaver 將吉布森的 affordance 以不同于諾曼的認(rèn)識(shí)帶入到 HCI 領(lǐng)域， Gaver 引入了吉布森的 affordance 可嵌套的觀點(diǎn)，即一個(gè) affordance 可嵌套在另一個(gè)父級(jí) affordance 下也可以向下嵌套一個(gè)子級(jí) affordance，比如拉一個(gè)門把手的 affordance 是嵌套于打開門這個(gè) affordance 下的 。

二. 深澤直人

深澤直人也是通過諾曼和吉布森了解到的可供性。深澤直人說他是 1989 年左右聽到這個(gè)詞的，而諾曼那本書 1988年出版，當(dāng)時(shí)是叫做《The Psychology of Everyday Things》。深澤直人認(rèn)為 affordance 是一種認(rèn)知論，是人處理物品時(shí)判斷不致于出錯(cuò)的基準(zhǔn)

1.Without Thought / 無意識(shí)設(shè)計(jì)或直覺設(shè)計(jì)

人會(huì)在無意識(shí)情況下對(duì)“剛剛好”的環(huán)境作出相應(yīng)反應(yīng)，而“剛剛好”的環(huán)境會(huì)對(duì)一定場(chǎng)景下的人產(chǎn)生“吸引力”，“將無意識(shí)的行動(dòng)轉(zhuǎn)化為可見之物”是無意識(shí)設(shè)計(jì)的意義所在。

同樣還是上面那個(gè)屬性的石頭，它在一個(gè)疲憊人的眼前就會(huì)產(chǎn)生足夠的“吸引力”讓其坐下

很多設(shè)計(jì)師力圖否定約定俗成的設(shè)計(jì)，用自己的思想創(chuàng)造一種新的生活方式這樣就無形中加重了人們的“適應(yīng)負(fù)擔(dān)”

a.從小就不會(huì)連電腦線，每次都是碰運(yùn)氣安裝成功

b.每個(gè)打印機(jī)都有不同的工作方式、不同的紙張存放處、不同的功能，總是頭疼怎么使用

c.從小用到大電腦，但是還是不會(huì)設(shè)置網(wǎng)絡(luò)的強(qiáng)大系統(tǒng)

它可能沒有那么強(qiáng)大，但一定場(chǎng)景下“剛剛好”符合需求

當(dāng)一個(gè)人拿著傘走進(jìn)屋子，會(huì)自然的把傘的前端放在瓷磚之間的接縫中，這就是人從環(huán)境中拾取 affordance

深澤直人認(rèn)為 - 好的設(shè)計(jì)應(yīng)該會(huì)被人在毫不自覺的情況下拾取出其 affordance

03 如何運(yùn)用于用戶界面

在用戶界面中引入 affordance 我們先拋棄實(shí)體的干擾，比如不再去關(guān)注玻璃屏幕可供點(diǎn)擊、可供滑動(dòng)或可供觀看信息等，這樣可以避免思路太繞。

其實(shí)無論是心智模型還是限制因素的作用，其目的都是一定情境下能夠達(dá)成“剛剛好”的設(shè)計(jì)。

一. 心智模型

人們善于對(duì)現(xiàn)象進(jìn)行解釋，其解釋結(jié)果均會(huì)影響下一步操作，一定場(chǎng)景下，其解釋方式受行為者的后天經(jīng)驗(yàn)影響，比如“點(diǎn)擊入口”到“沒有反應(yīng)”就可能產(chǎn)生多種心智模型。

例：當(dāng)前移動(dòng)端登錄場(chǎng)景中，在未填寫內(nèi)容的基礎(chǔ)上，登錄按鈕沒有任何意義，唯一的作用就是告訴用戶“輸入完可以點(diǎn)我”，剩下的只有干擾用戶對(duì)其他信息的閱讀。登錄按鈕的實(shí)際作用其實(shí)是提供給用戶一個(gè)打開門的門把手的作用，其位置方便點(diǎn)擊、大小合適、示意明確即完成目的，無需過于強(qiáng)調(diào)、突出。

二. 限制因素

限制因素能幫助設(shè)計(jì)更佳融入當(dāng)下環(huán)境，其環(huán)境因素包括結(jié)構(gòu)、含義、文化、邏輯

1.結(jié)構(gòu)因素

間距處理不當(dāng)?shù)脑O(shè)計(jì)會(huì)提供給用戶歸類的多種可能性，如錯(cuò)誤案例中的第二排信息：它有可以被歸類為第二組，因?yàn)榫嚯x較近。但也可以被視為第一組，因?yàn)橄旅嫘畔膶儆谏厦娴男畔ⅲ瑑煞N心智模型都似乎合乎邏輯，用戶就會(huì)對(duì)其含義模糊不清。之前寫過一篇關(guān)于界面結(jié)構(gòu)的文章，里面有更多相似的細(xì)節(jié)內(nèi)容。

2.含義因素

btn是用來點(diǎn)的；tab可以點(diǎn)擊，也可以來回滑動(dòng)；banner是活動(dòng)內(nèi)容，點(diǎn)擊跳轉(zhuǎn)到另一個(gè)界面；進(jìn)度條為信息進(jìn)度，不可點(diǎn)擊；一頁沒看完的信息，可以滑動(dòng)查看剩余；正常文案可提供閱讀，不可點(diǎn)擊等...類似這些操作來說，用戶無需思考。

3.文化因素

一些已經(jīng)被人接受的文化慣例無法被破壞，例如阿拉伯的書寫或閱讀習(xí)慣為從右向左，而中國的閱讀順序?yàn)閺淖笙蛴?，由上而下，所以?nèi)容的優(yōu)先級(jí)也應(yīng)該符合其順序。

4.邏輯因素

在用戶界面場(chǎng)景中，邏輯因素限制非常的重要，合乎邏輯的交互更能清晰表達(dá)以及更符合使用預(yù)期，下面為微信的兩個(gè)交互場(chǎng)景

三. 界面內(nèi)容屬性

1.界面元素的屬性

用戶界面中，提供點(diǎn)擊的操作受內(nèi)容的位置、大小、狀態(tài)等影響。以移動(dòng)端為例，通常情況下，我們會(huì)認(rèn)為，屏幕偏下、大小合適、高亮的內(nèi)容最為方便點(diǎn)擊，因?yàn)槠湮恢谩⒋笮　皠倓偤谩边m合我們?nèi)c(diǎn)，不需要說明“點(diǎn)擊這里”

2.反饋的屬性

它一定程度上來自于外界因素，它可以說是多層嵌套下的 affordance ，也可以說不是，不過都不重要，重要的是它沒用解釋的基礎(chǔ)上，提供給用戶了可用或不可用的直觀感覺

四. 但仍有很多內(nèi)容存在欺騙性

我們?cè)谑褂卯a(chǎn)品中，好的體驗(yàn)可以讓用戶忽略設(shè)計(jì)并且享受其中

而不好的體驗(yàn)只會(huì)讓用戶不斷猜測(cè)其功能作用以及隨時(shí)提防其漏洞與風(fēng)險(xiǎn)

04 總結(jié)

affordance 作為是一種認(rèn)知論，是人處理物品時(shí)判斷不致于出錯(cuò)的基準(zhǔn)。但當(dāng)高一緯度的詞匯用在第一緯度內(nèi)容上，總會(huì)偏移、出錯(cuò)，比如“你的界面上缺少一個(gè) affordance ” ，這會(huì)被視為一種亂用。

所以我們從現(xiàn)在開始可以忘記不談這個(gè)詞匯，但它可以提供給我們一個(gè)看待問題的新的視角。

以上為本人的一些看法，有興趣的可以深入了解其相關(guān)內(nèi)容，有不同想法的伙伴歡迎交流。

本文由@雷三三原創(chuàng)于站酷，未經(jīng)許可，禁止轉(zhuǎn)載。

文章來自「微信公眾號(hào)：別叫我設(shè)計(jì)師」

感謝您的閱讀，下期見！

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。