映射-Mapping

在去餐廳用餐之前，我們還有些時(shí)間再了解一項(xiàng)基礎(chǔ)設(shè)計(jì)原理。讓我們回頭看看在「鄰近性」原理當(dāng)中提到的燈光明暗控制開關(guān)。你能僅通過最左側(cè)這個(gè)開關(guān)的樣式看出它所控制的燈光明暗度嗎？

如下圖這樣又如何？

我們之所以能從后者當(dāng)中進(jìn)行判斷，所依據(jù)的就是映射關(guān)系。所謂「映射」，即是指，將被控對(duì)象的行為規(guī)律體現(xiàn)到控件自身的操作方式中，譬如開關(guān)把手的上升和下降，對(duì)應(yīng)著燈光亮度的升高和降低。

映射同樣體現(xiàn)在多個(gè)控件的布局當(dāng)中，它們的次序應(yīng)該能夠反映出多個(gè)被控對(duì)象之間的相對(duì)位置關(guān)系。

我們假設(shè)這三個(gè)開關(guān)用于控制臥室天花板上的三盞燈。依據(jù)映射關(guān)系而設(shè)計(jì)的開關(guān)位置應(yīng)該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設(shè)計(jì)師對(duì)控件的類型、位置和次序進(jìn)行決策。

當(dāng)映射關(guān)系不明確時(shí)，我們通常需要依靠文本標(biāo)簽才能理解開關(guān)與燈之間的對(duì)應(yīng)關(guān)系。這并非完美的解決方案，因?yàn)殚喿x和理解文字需要花費(fèi)時(shí)間和精力，同時(shí)人們也難以依靠記憶進(jìn)行快速操作。

在界面設(shè)計(jì)當(dāng)中，映射關(guān)系也體現(xiàn)在控件類型的選擇上。例如通過滑塊（slider）控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進(jìn)控件（stepper），旋鈕則更適于旋轉(zhuǎn)操作。

當(dāng)然，最直接的映射才是最好的映射。為人們提供直接操作目標(biāo)對(duì)象的能力是最為簡(jiǎn)單、精準(zhǔn)、符合直覺的解決方案。macOS 上的鼠標(biāo)指針操作，或 iOS 當(dāng)中的手勢(shì)操作，都可以為人們帶來直接操作的體驗(yàn)。

可供性-Affordance

不知各位如何，我是很餓了，這就準(zhǔn)備下樓去吃飯。我們?cè)诖筇靡?，然后一起去餐廳。

坐在餐桌前，你會(huì)看到面前擺放著一個(gè)空盤子。我們能用這個(gè)盤子做什么？顯然，放些食物在里面。除此之外呢？

盤子很光滑，可以旋轉(zhuǎn)或是滑來滑去。

盤子有一圈寬邊，可以抓著拎起來。

我們對(duì)于如何與這個(gè)盤子進(jìn)行互動(dòng)的觀點(diǎn)便是可供性的體現(xiàn)。換句話說，盤子的外形特征為我們提供了如何與之進(jìn)行互動(dòng)的視覺及觸覺線索，使我們意識(shí)到哪些交互行為可行，哪些不可行。我們會(huì)意識(shí)到要將食物放進(jìn)去，或是將它滑到其他地方。但我們通常不會(huì)想要倒水進(jìn)去，然后端起來喝。

可供性并非物體自身所具備的屬性，它更多是在代表行為主體與目標(biāo)對(duì)象之間的互動(dòng)關(guān)系?？晒┬詴?huì)因行為主體的差異而有所不同。舉個(gè)極端些的例子，對(duì)我而言，飛盤可以用來抓住或扔出去，而對(duì)我的狗來說，飛盤就是單單用來叼的。不過另一方面，碟子對(duì)我和我的狗來說都是用來盛放食物的。

由于可供性所具有的主觀特性，一個(gè)人能感知到的交互特性在另一個(gè)人看來則未必如此。當(dāng)可供性所傳達(dá)的交互特性與人們的常規(guī)行為有著高度關(guān)聯(lián)時(shí)，人們會(huì)更加容易感知到。

例如，我其實(shí)可以把碟子當(dāng)作茶托，這會(huì)是個(gè)不錯(cuò)的茶托。但我猜我們大家日常很少真的這樣去做，因此我會(huì)更樂于將碟子視為盛放食物的容器，而非將水杯放在里面。

我們能從我們所互動(dòng)過的任何環(huán)境及事物當(dāng)中感知到可達(dá)性。當(dāng)我們走進(jìn)餐廳時(shí)，門的大小及形狀可以傳達(dá)出供人穿過的特性，連續(xù)的地面使我們意識(shí)到可以在上面安穩(wěn)地行走。

椅子的造型暗示我們可以坐下，桌子的構(gòu)造令我們明白可以將物品擺放在上面。

人造物品當(dāng)中都包含有傳達(dá)可供性的視覺線索，使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進(jìn)行互動(dòng)。

對(duì)于 app 界面設(shè)計(jì)而言也是同樣的道理?；瑝K控件由把手和滑軌構(gòu)成，暗示著拖拽的特性。

旋鈕的樣式意味著可以旋轉(zhuǎn)。

按鈕則一目了然地傳達(dá)著可點(diǎn)擊的特征。

在以上每一個(gè)例子當(dāng)中，可供性的傳達(dá)效率都是極高的。事實(shí)上，隨著時(shí)間的推移，我們會(huì)越發(fā)適應(yīng)于抽象度不斷提升的可供性傳達(dá)形式。我們所熟悉的界面當(dāng)中的按鈕，無非是現(xiàn)實(shí)世界里真實(shí)按鈕的高度抽象化版本；那四個(gè)圓角足以將虛擬與現(xiàn)實(shí)兩個(gè)版本的同一種物體關(guān)聯(lián)起來。

同理，滑塊把手周圍那細(xì)微的投影效果也足以讓我們意識(shí)到其獨(dú)立于滑軌之上的操作特性。

而且，僅有的這一點(diǎn)點(diǎn)視覺線索可能都不是必需的，對(duì)于很多人來說，一條直線上的一個(gè)實(shí)心圓足矣傳達(dá)滑動(dòng)操作的可供性了。

有時(shí)候，可供性也可以通過動(dòng)效進(jìn)行傳達(dá)。在天氣 app 中點(diǎn)擊主體內(nèi)容，界面整體便會(huì)稍稍上升，暗示著可以通過滾屏來查看更多內(nèi)容。

無論你使用何種方法，都必須確保 app 界面能夠清晰準(zhǔn)確地傳達(dá)其自身的交互特性，否則，人們將困惑于如何與之互動(dòng)。他們很可能會(huì)以錯(cuò)誤的方式進(jìn)行操作，然后發(fā)現(xiàn)無果，進(jìn)而將控件理解成不可交互的元素，app 的可用性也會(huì)因此而受損。