什么是設(shè)計(jì)的可供性卧惜？

可供性是一個(gè)很值得玩味的專(zhuān)業(yè)詞匯厘灼。一方面，在中文語(yǔ)境下這個(gè)詞很難翻譯得準(zhǔn)確咽瓷，它包含太豐富的語(yǔ)義设凹。另一方面，這個(gè)詞匯又可以用在很多的設(shè)計(jì)語(yǔ)境中茅姜，任何一個(gè)不好的設(shè)計(jì)闪朱，你都可以說(shuō)它可供性不好，因?yàn)榭晒┬愿O(shè)計(jì)目標(biāo)幾乎是息息相關(guān)的钻洒。那么可供性究竟是怎么定義的监透？先看維基：

可供性（affordance），或稱(chēng)為直觀功能航唆、預(yù)設(shè)用途胀蛮、可操作暗示、支應(yīng)性糯钙、示能性等粪狼，指一件物品實(shí)際上用來(lái)做何用途，或被認(rèn)為有什么用途任岸。也就是說(shuō)在物品的某個(gè)方面再榄，具有讓人明顯知道該如何使用它的特性。例如門(mén)提供“打開(kāi)”的功能享潜，椅子提供“支撐”的功能困鸥。人們得知如何使用物品有一部分來(lái)自認(rèn)知心理學(xué)，另一部分來(lái)自物品的外形。

茶杯把手意味著可以茶杯可以「拿起來(lái)」

從維基的定義來(lái)看疾就，可供性是產(chǎn)品一種不言而喻的功能隱喻澜术，讓人一眼就能看出它具有什么功能，該如何操作它猬腰∧穹希《通用設(shè)計(jì)法則》這本書(shū)則把 affordance 翻譯為「功能可見(jiàn)性」，這樣翻譯似乎更通俗易懂點(diǎn)姑荷。書(shū)中舉了 Don Norman 這個(gè)經(jīng)典的案例來(lái)說(shuō)明 affordance 盒延，門(mén)把手的功能可見(jiàn)性是「拉」，但「推」的標(biāo)示卻跟門(mén)把手互相矛盾鼠冕，解決方案是右圖添寺，用平面金屬板代替把手，消除「拉」的功能可見(jiàn)性懈费。

門(mén)的「推」與「拉」

可供性的設(shè)計(jì)理念首先是從工業(yè)產(chǎn)品發(fā)端的计露。一件好的工業(yè)品，使用者可以不假思索地使用它楞捂。原研哉的書(shū)中經(jīng)常提到可供性這個(gè)概念，強(qiáng)調(diào)產(chǎn)品應(yīng)該融進(jìn)使用場(chǎng)景趋厉，其實(shí)就是產(chǎn)品可供性的外延寨闹。

原研哉《設(shè)計(jì)中的設(shè)計(jì)》中的設(shè)計(jì)案例

上圖的兩個(gè)案例，第一個(gè)下垂的拉繩提供強(qiáng)烈的下拉隱喻君账，一個(gè)不假思索的下拉動(dòng)作繁堡，音樂(lè)隨即響起。第二個(gè)案例中的雨傘乡数，設(shè)計(jì)者為了解決一手提袋子一手拿雨傘的窘境椭蹄，在雨傘把手上設(shè)計(jì)出了一個(gè)凹下去的凹痕，讓使用者不用思考就學(xué)會(huì)了把袋子掛把手的操作净赴。這兩個(gè)案例是對(duì)可供性這個(gè)概念的很好的詮釋绳矩。通俗點(diǎn)講，可供性就像是文章的上下文語(yǔ)境玖翅，工業(yè)產(chǎn)品通過(guò)造型和周邊環(huán)境的映襯翼馆，來(lái)給用戶(hù)足夠的操作和功能隱喻。

UI 中的可供性

為了不使討論過(guò)于泛化金度，我們可以把可供性在 UI 中可以理解為隱喻应媚，比如常見(jiàn)的圖標(biāo)、按鈕猜极、控件就是 UI 中的隱喻要素中姜。一個(gè)齒輪圖標(biāo)代表設(shè)置，一支筆的圖標(biāo)表示編輯功能跟伏。這種隱喻在 UI 設(shè)計(jì)中隨處可見(jiàn)丢胚。但 UI 是二維的翩瓜，它的功能可供性跟工業(yè)產(chǎn)品不一樣，工業(yè)品可以通過(guò)觸感嗜桌、嗅覺(jué)奥溺、光影等等去增強(qiáng)可供性，UI 只能通過(guò)平面的手段去尋找辦法骨宠。

比如谷歌的 material design 企圖通過(guò)模擬材料本身的特性來(lái)提供界面隱喻浮定。比如光影、質(zhì)感层亿、符合物理定律的運(yùn)動(dòng)等都是為了解決數(shù)字世界中的的交互隱喻桦卒，提供更有力的可供性。MD 的投影隱喻界面中的層次感匿又，并借鑒了傳統(tǒng)的印刷設(shè)計(jì)——排版方灾、網(wǎng)格、空間碌更、比例裕偿、配色，來(lái)構(gòu)建用戶(hù)熟悉的視覺(jué)世界痛单。而這一切都建立在谷歌的理論根據(jù)之上：人對(duì)材質(zhì)觸感有著天然的感知嘿棘，這是一切隱喻的基礎(chǔ)。

Material Design 的理念

與谷歌截然不同的另一套界面設(shè)計(jì)理念旭绒，蘋(píng)果在 iOS 7 之后提出的鸟妙，俗稱(chēng)毛玻璃效果，則從利用玻璃質(zhì)感來(lái)構(gòu)建 UI 的層級(jí)關(guān)系挥吵。正如 iOS 設(shè)計(jì)指南中寫(xiě)到：

半透明的 UI 元素底下的內(nèi)容隱約可見(jiàn)重父，這種界面的隱喻幫助用戶(hù)理解當(dāng)前界面的后面還隱藏著更多內(nèi)容，層級(jí)感一目了然忽匈。

毛玻璃的效果確實(shí)更接近真實(shí)世界的視覺(jué)經(jīng)驗(yàn)房午，距離 iOS 7 發(fā)布四年過(guò)去了，大眾早已習(xí)慣了毛玻璃丹允，眾多安卓廠商都在競(jìng)相模仿歪沃，Material Design 那一套為數(shù)字虛擬世界構(gòu)建的隱喻體系似乎打動(dòng)不了用戶(hù)，這說(shuō)明真實(shí)世界的映射映射是多么重要嫌松。

控制中心

圖形化隱喻增強(qiáng) UI 的可供性

在圖形化界面的初期沪曙，人們對(duì)界面的認(rèn)知是空白的，毫無(wú)經(jīng)驗(yàn)的萎羔，所以軟件圖標(biāo)基本都是擬物化的液走，設(shè)計(jì)者都希望用戶(hù)可以借用現(xiàn)實(shí)經(jīng)驗(yàn)來(lái)理解這些虛擬的數(shù)字化產(chǎn)品，所以容量圖標(biāo)畫(huà)個(gè)實(shí)體硬盤(pán)，主頁(yè)圖標(biāo)畫(huà)個(gè)房子缘眶，設(shè)置畫(huà)個(gè)齒輪等等嘱根，但隨著用戶(hù)對(duì)數(shù)字化產(chǎn)品的認(rèn)知逐漸加深，不再需要借用現(xiàn)實(shí)經(jīng)驗(yàn)來(lái)加強(qiáng)用戶(hù)認(rèn)知了巷懈，因?yàn)樗旧硪呀?jīng)自成體系该抒。

以 iOS 的桌面圖標(biāo)為例，從 iOS 6 到 iOS 11顶燕，圖標(biāo)原有擬物化的質(zhì)感被去掉凑保，代之以抽象的色塊、漸變涌攻、線條欧引、符號(hào)，圖標(biāo)的歷史使命恳谎，即幫助人們從真實(shí)世界跨向虛擬世界的認(rèn)知躍升已完成≈ゴ耍現(xiàn)在 UI 中的圖標(biāo)，已經(jīng)基本脫離現(xiàn)實(shí)的隱喻因痛，想想百度婚苹、淘寶、京東等主流應(yīng)用的圖標(biāo)吧鸵膏，完全是基于虛擬世界構(gòu)建的視覺(jué)認(rèn)知膊升。

iOS 圖標(biāo)扁平化的過(guò)程就是在逐漸減少現(xiàn)實(shí)隱喻

雖然界面中的圖形已經(jīng)逐漸脫離現(xiàn)實(shí)經(jīng)驗(yàn)的隱喻，但在一些跟實(shí)體有關(guān)聯(lián)的產(chǎn)品中较性，我們還能看到很多用現(xiàn)實(shí)經(jīng)驗(yàn)隱喻來(lái)增強(qiáng)界面的使用體驗(yàn)用僧。比如音樂(lè)播放界面用唱片機(jī)的樣子结胀，讀書(shū)產(chǎn)品的頁(yè)面跳轉(zhuǎn)模擬真實(shí)翻書(shū)的效果赞咙，共享單車(chē) APP 還是用單車(chē)的形象等。UI 利用現(xiàn)實(shí)隱喻來(lái)增強(qiáng)界面功能可供性的做法會(huì)一直存在糟港，只是隨著人們虛擬世界的經(jīng)驗(yàn)越來(lái)越豐富攀操，會(huì)越來(lái)越少而已。

提供豐富現(xiàn)實(shí)隱喻的應(yīng)用界面

最后

可供性在 UI 設(shè)計(jì)中的討論越來(lái)越少了秸抚，可能是因?yàn)楸馄交浆F(xiàn)在速和，很多界面越來(lái)越多的使用文字按鈕了，功能所見(jiàn)即所點(diǎn)剥汤，隱喻似乎沒(méi)有必要了颠放。在更有未來(lái)感的科幻片中，你也會(huì)發(fā)現(xiàn)所有的操作面板幾乎都是文字按鈕吭敢，這樣更直觀碰凶，符合人機(jī)交互的理想境界：忘記界面，自如操控。

參考資料

《Universal Principle of Design》by William Lidwell欲低、Kritina? Holden辕宏、Gil Butler

《The Design of Design》by 原研哉

《iOS Human Interface Guideline》by Apple

《Materila Design》by Google