圖解WWDC 設計分會:映射與可供性

2019-9-4    資深UI設計者

映射-Mapping

在去餐廳用餐之前,我們還有些時間再了解一項基礎設計原理。讓我們回頭看看在「鄰近性」原理當中提到的燈光明暗控制開關。你能僅通過最左側這個開關的樣式看出它所控制的燈光明暗度嗎?

如下圖這樣又如何?

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

映射同樣體現(xiàn)在多個控件的布局當中,它們的次序應該能夠反映出多個被控對象之間的相對位置關系。

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

當映射關系不明確時,我們通常需要依靠文本標簽才能理解開關與燈之間的對應關系。這并非完美的解決方案,因為閱讀和理解文字需要花費時間和精力,同時人們也難以依靠記憶進行快速操作。

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

當然,最直接的映射才是最好的映射。為人們提供直接操作目標對象的能力是最為簡單、精準、符合直覺的解決方案。macOS 上的鼠標指針操作,或 iOS 當中的手勢操作,都可以為人們帶來直接操作的體驗。

可供性-Affordance

不知各位如何,我是很餓了,這就準備下樓去吃飯。我們在大堂見,然后一起去餐廳。

坐在餐桌前,你會看到面前擺放著一個空盤子。我們能用這個盤子做什么?顯然,放些食物在里面。除此之外呢?

盤子很光滑,可以旋轉或是滑來滑去。

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

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

可供性并非物體自身所具備的屬性,它更多是在代表行為主體與目標對象之間的互動關系。可供性會因行為主體的差異而有所不同。舉個極端些的例子,對我而言,飛盤可以用來抓住或扔出去,而對我的狗來說,飛盤就是單單用來叼的。不過另一方面,碟子對我和我的狗來說都是用來盛放食物的。

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

例如,我其實可以把碟子當作茶托,這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做,因此我會更樂于將碟子視為盛放食物的容器,而非將水杯放在里面。

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

椅子的造型暗示我們可以坐下,桌子的構造令我們明白可以將物品擺放在上面。

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

對于 app 界面設計而言也是同樣的道理?;瑝K控件由把手和滑軌構成,暗示著拖拽的特性。

旋鈕的樣式意味著可以旋轉。

按鈕則一目了然地傳達著可點擊的特征。

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

同理,滑塊把手周圍那細微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。

而且,僅有的這一點點視覺線索可能都不是必需的,對于很多人來說,一條直線上的一個實心圓足矣傳達滑動操作的可供性了。

有時候,可供性也可以通過動效進行傳達。在天氣 app 中點擊主體內(nèi)容,界面整體便會稍稍上升,暗示著可以通過滾屏來查看更多內(nèi)容。

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔