圖解WWDC 設計分會：導航與反饋（2）

@C7210?：之前做過兩期 WWDC 設計分會全圖文，關于 iOS 13 設計特性，錯過的朋友不妨回看。今天翻出 2017 年的一場重要的分會，演講人依然是 Apple Evangelist 團隊的 Mike Stern，以一系列基礎而重要的設計原理為主題；我看了好多好多遍；里面有真智慧，不是說笑的。

往期回顧：《圖解WWDC 設計分會：iOS 13 設計新特性（1）》

基礎設計原理 - 導航與反饋

Essential Design Principles

在 Apple 的團隊中，我們通常使用「Human Interface」一詞來代替「User Interface」。這種說法的確并不常見，但對于 Apple 而言卻有著深厚的歷史淵源。

我們的設計指南文檔叫做「Human Interface Guidelines」，如各位在線上所見。

而這份文檔可以追溯到 1978 年，那可是我出生前的整整 15 年。開個玩笑，我很老了～

「user」一詞僅對人與界面的關系進行定義，顯得相對狹隘；而「human」則能更加細微地揭示出我們在為誰而設計。當我說自己只是個普普通通的人，言下之意就是我身上存在著各種不足，絕非完美。同時，「human」一詞也能體現出我們身上最為高尚的品質。當我們感受著彼此身上的人性時，我們所指的即是人類的善良、仁義、慷慨等美德。

界面設計工作的本質是服務于他人。其中最為根本的目標并非是打造「好看的」、「架構清晰的」、「簡約的」、「聚焦的」產品，縱使這些特質極為重要。真正的目標在于服務他人，在于以積極的方式影響著他人的生活與工作，在于能否滿足人們的實用需求或是情感需求。

我們需要安全性與確定性；我們需要理解，需要知識與明確的意義；我們需要完成任務，需要實現個人或職業上的目標；我們需要體驗美好和愉悅。相應的，經過良好設計的 app 應該為人們提供這些所需，即：

• 操作結果易于預知，使人們感到可靠可信。
• 信息清晰易懂，幫助人們有效制定決策。
• 流程精簡直白，幫助人們高效完成任務。
• 外觀美好，令人愉悅。

具備這些設計特質的 app 會使人感到愉悅而滿意，你可以感知到設計者周全地考慮到了你的實際所需，并投入了大量的時間精力去思考如何幫助你快速有效地完成任務。這樣的 app 能讓你感受到其設計者的人性。

關于設計原理

那么，我們該如何設計，才能使 app 具備這些特質呢？談到設計，我們總會聚焦于特定的技術或流程；這些固然極為重要，但優秀的設計來自于對「設計是什么」的更深層、更基礎、更人性化的認知與理解。這些正是我們能夠從設計原理當中所汲取到的。

設計原理詮釋了人們認知世界、處理信息、制定決策、完成溝通的本質原理。這些原理具有普遍性與恒久性，適用于所有類型的設計，包括平面設計、建筑設計、室內設計、零售設計、景觀設計、工業設計等等。

設計原理并不會直接告訴我們如何進行特定的設計，它讓我們了解的是為什么要如此設計。設計原理是優秀設計的根基。

今天，我將要和各位分享的就是這樣一些最為典型的設計原理。或許你會覺得這些原理看起來非常基礎或是顯而易見，但在很多時候，意義最為深遠的，往往正是那些看上去非常簡單的東西。

我個人已經做了二十多年的設計；這期間，我有幸和很多優秀的設計師進行過合作，無論是在 Apple 還是其他開發者社區。我和來自世界各地的開發者們針對大量 app 和游戲當中可能存在的各類交互設計問題進行過深入的探討；每一次的經歷都讓我一再意識到，將這些核心設計原理作為依據來評判設計方案，問題都會變得非常清晰而透徹。

鑒于這些設計原理的普遍性，我們不妨以現實生活中的體驗作為線索來進行探索。讓我們來一次小小的旅程，目的地是夏威夷，經費由我們的團隊報銷。

導航系統

Wayfinding System

夏威夷之旅的第一站是機場。

抵達機場后，我們會看到各種標識。這些標識會告訴我們如何到達航站樓，每個航站樓的詳細信息，登機口的方向，當前登機口的號碼，等等。如果我們找錯了地方，或是錯過了航班，我們還可以通過標識找到附近的其他登機口；如果發生了緊急狀況，我們還可以根據出口標識的指引離開機場。

由這樣一系列標識所組成的系統便是導航系統。導航系統可以幫助人們快速而準確地行進于復雜的環境當中，給人們帶來方向感與安全感。出于時差等原因，身處機場的人通常會很疲憊；機場的設計者們必須非常深入地思考如何為旅客提供安全而高效的導航系統。

好的導航系統會提供全面而易懂的目標位置列表，會提供足夠的信息來幫助人們對目標位置的內容產生明確的預期；好的導航系統是高度情境化的，會隨著導航層級的深入而不斷提升信息的具體化程度；好的導航系統會清晰地呈現出當前位置與目標地點之間的關系，幫助人們掌控方向；好的導航系統還會提供明確的出口，讓人們可以隨時退回到起點。

導航系統通過回答如下這些最基本的問題來為人們提供安全感與方向感：

• 我在哪？
• 我可以去哪？
• 那里有些什么？
• 附近有什么？
• 我如何離開？

我們的 app 界面正如一個龐大的導航系統。導航欄、內容區域、tab 欄...所有這些都在為 app 提供著導航能力。

導航欄的標題或是 tab 欄的選中項可以幫助人們了解他們在哪。

內容中的列表與 tab 欄中的其他選項讓人們知道可以去哪，以及那里有些什么。

返回按鈕為人們提供了離開當前界面的出口。

app 中的每一個界面都應該能夠為上述問題提供答案，否則人們勢必會在使用過程中失去方向感。不妨對 app 進行走查，評估每個界面能否快速、清晰、準確地回答上述問題；如果不能，那么你可能有些迭代工作要做。

反饋

Feedback

到達夏威夷后，我們可以租輛車開到酒店。

然而作為一坨兩噸重的、高速運行的金屬，汽車本是一種危險的存在，尤其是在人們疲憊地行駛在不熟悉的地方時。

由于駕車存在的危險性，汽車制造商們必須審慎設計其互動機制，以確保駕乘安全；從中，我們可以學到很多關于「反饋」的知識。

有效的反饋機制可以幫助我們更加安心安全地駕駛汽車，可以幫助我們預測可能出現的問題，避免車輛進入無法正常運作的狀態。歸納起來，汽車可以提供以下類型的反饋：

• 狀態反饋：讓我們了解汽車的運作狀況。
• 完成反饋：告訴我們操作行為是否成功。
• 警示反饋：讓我們了解潛在問題。
• 出錯反饋：讓我們了解錯誤的產生。

為了確保駕乘安全，汽車提供的反饋必須清晰、及時、易懂。接下來讓我們具體了解一下每個類型的反饋機制。

狀態反饋

打包上車，準備出發。通過變速桿，我們可以確認汽車當前處于駐車狀態。

關于當前車輛狀態的信息極其重要，因此汽車為我們提供了雙重確認機制：除了變速桿，儀表盤也可以為我們提供當前的車輛狀態反饋。

儀表盤中的信息還包括其他方面的狀態反饋，譬如我可以了解到當前油量，以便預估在下次加油之前我們可以開到哪里。

同樣，我還可以隨時獲知當前的速度，進而避免超速行駛。

同理，App 中的狀態反饋也需要清晰易懂、一目了然。以郵件 app 為例，未讀狀態標識可以幫助人們快速了解哪些郵件應該優先閱讀。

在日歷 app 中，狀態標識讓我們知道某些人無法參與會議，進而幫助我們判斷是否需要重新安排日程。

在相機 app 中，共有三個元素同時幫助人們了解視頻的拍攝狀態，包括紅點、時間及快門的樣式。

清晰、直白的狀態反饋可以有效地幫助人們節省時間，同時避免錯誤的發生。

完成反饋

一切就緒，我啟動汽車。我們可以聽到引擎的轟鳴，感受到它的震動；儀表盤也開始運行。毫無疑問，我們可以啟程了。

我將變速桿切到 D 檔，觸覺上的反饋感讓我知道變速箱里的狀態正在發生變化。

開離車位后，自動落鎖的音效讓我知道車門已經被安全地鎖好。對于這類自動化功能來說，明確的反饋更加重要。

所有這些反饋都能帶來安全感。這就像是汽車在用它的語言對我們說：「一切正常，我正在準確執行著你的命令」，這讓我可以安心地聚焦于更為重要的任務，例如安全地駛出停車場。

App 中的完成反饋所起到的作用也是如此，例如鎖定 iPhone 時的音效，標記未讀郵件或是刪除郵件時的動效，等等。這些反饋形式可以自然而優雅地吸引著你的注意力；它們代表著設備正在正常運作，為你帶來安心。

當然，完成反饋可以表現得更加突出，例如通過 Apple Pay 完成交易時的動效與音效就令你很難錯過。

App 應該為人們的每一個行為提供恰當的完成反饋作為確認。讓人們即刻意識到他們的操作是有效的，這絕對有必要。

警示反饋

警示反饋可以幫助人們了解潛在的問題或錯誤，例如油量偏低或剎車片磨損嚴重，等等。

警示反饋可以通過狀態標識、消息、儀表盤、內置顯示屏、音效等各種形式來進行。警示反饋可以保障我們的安全，防止車輛被損壞。

出錯反饋

出錯反饋無論對于汽車還是 app 都至關重要。在沒有汽油的情況下嘗試啟動汽車，你便會收到出錯信息。

錯誤自然會令人失望和沮喪。最好的處理方式是提前幫助人們避免錯誤的發生，而警示與完成反饋都是防錯的有效手段。

譬如，嵌入式的表單校驗可以為人們提供即時的驗證反饋，以便及時更正輸入，避免在提交表單時產生問題。

你也可以試著推測人們的真實意圖，思考人們在犯錯時的本意是什么，然后進行合理的響應。例如在 Things 3 中，如果你輸入了本不存在的 6 月 31 日，app 不會直接報錯；取而代之地，它會自動將日期更正為 7 月 1 日。這個細節相當精彩，同時也非常人性化。

如你所見，清晰、及時、易懂、有用的反饋對于人機互動有著非常重要的意義。

反饋回答了一系列重要的問題：

• 我能做什么？
• 剛剛發生了什么？
• 正在發生什么？
• 接下來會發生什么？

很多 app 在反饋機制上表現得差強人意。主要原因在于，當我們進行設計時，很容易陷入對靜態界面的思考，而忘記了互動體驗是由時間和狀態變化所驅動的，期間可能產生大量的情境轉換。

好的反饋機制會讓人們感到正在和 app 的設計者進行對話。作為設計師，我們可以通過反饋機制來回答人們可能提出的問題，為他們提供指引，或是幫助他們了解行動的結果。因此，在設計 app 時，不妨設想你正在和使用它的人進行面對面的交流；想想看，你會在哪些環節，以怎樣的方式說些什么？

說到這里，我有個非常簡單卻相當有效的技巧與各位分享：請一些從未用過你 app 的人來用用看，讓他們在使用過程中將想法講出來，特別是那些不明確的、令人困惑的地方。然后，你同樣通過語言向他們說明 app 的工作方式，為他們提供指引，解釋當前的狀況，包括有哪些信息需要特別關注，等等。最后，回顧整個對話過程，看看 app 本身的溝通能力與你的語言相比，存在著哪些問題和不足。

在我的經驗中，當設計者向我詮釋他們的設計意圖時，信息傳達的有效程度通常遠遠高于設計本身。在面對面進行語言交流時，我們的溝通能力會變得更強；試著捕捉整個對話過程中的有效信息，通過它們去填補當前設計方案中那些溝通能力不足的地方。

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