圖解WWDC 設計分會：基礎設計原理 - 心智模型與鄰近性

@C7210?：繼續上期主題，即 WWDC 之「基礎設計原理」設計分會，演講人是 Apple 設計布道者團隊的 Mike Stern 老師。在上期當中，我們了解了「可見性」與「一致性」，錯過的朋友不妨回看。今天的話題聚焦于「心智模型」與「鄰近性」。

往期回顧：

• 《圖解WWDC 設計分會：iOS 13 設計新特性（1）》
• 《圖解WWDC 設計分會：導航與反饋（2）》
• 《圖解WWDC 設計分會：基礎設計原理 – 可見性與一致性》

心智模型-Mental Model

得益于車輛設計的一致性，我們得以安全抵達酒店。旅途疲勞，大家不妨先到房間放下行李洗個臉，精神一下再做打算。

你進入衛生間，擰開水龍頭上的把手，讓水流一陣子等著變熱。幾秒之后，你用手指試了試水溫，似乎還有些冷，于是你又把熱水開大了一些。很快，水溫變暖，你洗了洗臉，感到精神煥發，又來勁了。

相比于汽車而言，水龍頭自然簡單易用了很多。但在有些時候，我們仍然需要學習如何使用水龍頭，例如嘗試調整多個把手，觀察它們各自的作用。

我們如何得知哪個把手用于控制熱水？我們大體知道，因為多數時候熱水把手位于左側。

我們為什么會持續試探水溫？因為我們知道在調整把手之后，溫度變化通常會有延遲。水的外觀難以反饋溫度信息，我們需要親身嘗試。

顯然，我們不會在每次使用水龍頭時都思考所有這些問題，這些早已成為直覺。我們每個人的大腦當中都有一個小小的水龍頭模型，這個模型能將水龍頭體現為由一系列部件、功能和行為所組成的系統。這些部件按照特定的布局排列著，有著特定的行為規律。

這就是我們所說的「心智模型」。對于每一個與之進行過互動的事物，我們頭腦中都有著對應的心智模型。這些模型都是高度簡化的，不會完整地體現出事物內部的所有運作機制。

不過，我們與一個系統的互動越多，相對應的模型就會越發復雜。心智模型由個人的經驗發展而出，所反映的通常是個人視角中的事實形態，因此心智模型也是因人而異的。

心智模型可以分為兩種類型。

系統模型：關于系統如何運作的模型。例如我們會將水龍頭理解為冷、熱兩種水源組合而成的系統。該系統允許兩種水源進行混合，從而創造出一個溫度區間，然而水溫不會立刻發生變化，需要響應時間，特別是在剛剛打開熱水不久的時候。

互動模型：關于如何與系統進行互動的模型。例如我們知道需要通過水龍頭上的把手來控制水流的大小或是調整水溫。

了解過名詞和概念之后，你可能會好奇這些和我們的設計有什么關聯呢？簡單來說，如果一個系統，譬如水龍頭，符合我們已有的心智模型，那么它就是符合預期的。我們不會耗費精力去感知和理解，這個系統對我們而言是符合直覺的。相反，如果一個系統不符合我們的心智模型，那么我們的預期就會被打破，這個系統對我們而言就是不符合直覺的。

關于心智模型，我們還要再多聊一聊，因為這確實是非常重要的設計原理。我來給各位講一個小故事。有一位名叫 Mortimer 的水龍頭設計師，和我們一樣，他的頭腦當中也有著關于水龍頭的心智模型。當然對于 Mortimer 而言，這套模型更加精密、專業和復雜。

Mortimer 的工作就是創造無與倫比、令人喜愛的水龍頭。有一天，仿佛被靈感的閃電猛然擊中，他有了個絕妙的想法：與其讓兩個把手分別控制冷、熱水，不如讓一個把手控制溫度，而另一個控制水流大小。這樣就能避免人們在調節水流時不小心改變溫度了。

然而有個小問題：Mortimer 的設計完全不符合人們關于水龍頭的心智模型。使用這款水龍頭時，人們發現操作結果并不符合預期，難以依靠直覺進行控制。更糟的是，Mortimer 的設計在外觀上和普通水龍頭沒什么區別，但行為模式卻完全不同，人們想要打開熱水，卻發現并沒有水流出來。

預期與結果之間的錯位會造成嚴重的可用性問題?；蛟S可以建議 Mortimer 為每個把手添加可視化的說明？但這只是治標不治本的方案。諸如文本標簽一類的視覺線索很容易被人們忽視，尤其是當人們對于眼前系統的運作方式及操作方法有著根深蒂固的經驗時。

在 app 設計當中，這同樣是一個重要問題。試圖改變人們的心智模型是極具風險的。人們越熟悉你的 app，這種改變的風險就越大。人們通常很難適應一款老產品當中發生的變化，而無論這變化本身是否正確或必要。在進行這類設計決策之前，必須盡最大可能去確認你所做的改變可以為當前的使用者們帶來最為正面的結果，切忌為了改變而改變。

保持謹慎，勤于驗證，讓創新精神為產品設計帶來客觀意義上的改善。

鄰近性-Proximity

洗好臉，差不多也到了晚餐時間。你決定換上新買的夏威夷襯衫。于是你關上燈并離開衛生間，然后打開門廳里的燈，走進臥室，又打開了屋中的幾盞燈。

這一連串行為當中便體現著我們接下來要討論的設計原理，即「鄰近性」。

鄰近性所關注的是控件與被控對象之間的距離。兩者的距離越近，它們之間的關聯關系就越發明顯。衛生間墻壁上的開關自然是控制衛生間里的燈，門廳和臥室也是如此。

良好的鄰近性同樣體現著人體工學原理。通常，我們距離一個物體或興趣區域越近，越有可能與之進行互動。當人們走進衛生間時，會希望首先把燈打開。因此，我們通常會將開關安裝在門的附近，保持在一臂距離之內，使人們可以輕松地觸碰到。

鄰近性同樣適用于表達多個控件之間的位置關系。譬如，如果你看到墻上有一組開關，同時你還知道其中的某一個用于控制燈光，那么你就有理由假設其他幾個同樣是燈的開關。

如果其中某一個開關是用于控制明暗的，那么在設計時，最好將它與其他幾個開關分開放置，這樣人們將更容易區分它們各自的作用。

這里我們有必要指出，有一個名詞通常用于指代右側的布局模式。沒錯，「分組」。分組是設計原理當中的一個非?；A卻又極其重要的概念，它有助于人們理解不同元素之間的邏輯關系，是用于構建信息結構的關鍵元素。

分組的概念很容易理解，然而在界面設計中卻時常被忽視。接下來我們通過幾個簡單的例子來看看如何在界面當中使用鄰近性和分組的概念來體現元素之間的邏輯關系。

在 Keynote 中，工具欄里的功能控件與其所控制的目標對象或區域之間的位置關系都能體現出鄰近性的原理。例如「顯示」、「縮放」、「添加幻燈片」的位置緊鄰著幻燈片導航欄及畫布區域，這可以使人們意識到它們之間存在著控制與被控制的邏輯關聯。

同理，「表格」、「圖表」、「文本」等工具則位于畫布的正上方，與其控制區域的距離最近。

而「格式」、「動畫效果」與「文稿」的切換開關同樣位于其對應面板的正上方。

在 Sketch 當中也是如此。工具欄里的分組相關操作，變形與旋轉，合并操作，圖層排序等等，都與其所控制的目標對象或區域有著鄰近的位置對應關系。

誠然，以上兩個例子都是關于 macOS 的，但設計原理本身同樣適用于屏幕較小的設備，例如 iPhone、iPad 甚至是 Apple Watch。

歡迎關注作者的微信公眾號：「Beforweb」