圖文版 WWDC 設計分會：基礎設計原理 - 漸進呈現與對稱性

@C7210?：繼續上期主題，即 WWDC 之「基礎設計原理」設計分會，演講人是 Apple 設計布道者團隊的 Mike Stern 老師。在上期當中，我們了解了「映射」與「可供性」，錯過的朋友不妨回看。今天的話題聚焦于「漸進呈現」與「對稱性」。

往期回顧：

• 《圖解WWDC 設計分會：iOS 13 設計新特性（1）》
• 《圖解WWDC 設計分會：導航與反饋（2）》
• 《圖解WWDC 設計分會：基礎設計原理 – 可見性與一致性》
• 《圖解WWDC 設計分會：基礎設計原理 – 心智模型與鄰近性》
• 《圖解WWDC 設計分會：基礎設計原理 – 映射與可供性》

漸進呈現-Progressive Disclosure

搞清楚了用什么東西盛放食物，我們接下來可以安心點餐了。我想點一個美味的芝士漢堡，于是叫來了服務生。

他問我需要幾分熟，「五分」。他問我需要哪種芝士，「切達奶酪」。

是否需要加培根、雞蛋或牛油果？「不需要」。

搭配沙拉、薯條還是炸洋蔥圈？「炸洋蔥圈」。

他問我是否了解芝士漢堡配洋蔥圈的熱量極高，我回答：「騙人的」。

以上過程便體現了「漸進呈現」的原理。

作為一種用于管理復雜度的方法，「漸進呈現」幾乎可以說是交互設計領域所獨有的，其基本概念是引導人們平緩地由簡單狀態進入到復雜狀態，例如將原本復雜的邏輯隱藏起來，通過更加易于認知的界面形式幫助人們輕松完成最為基礎的任務。

如果你一上來就必須面對所有的配料選項，那么點餐也會成為復雜到令人畏懼的任務。反之，步步為營則會令人感到輕松舒適。

此外，前期的輸入選擇也可能對后續的選項產生影響。例如，如果我選擇薯條，那么服務生就會繼續給到我「普通」、「松露」、「蒜香」三種口味選項；但是我沒有選薯條，所以我無需在意他們薯條的口味；如果服務生詢問我關于薯條口味的問題，那就是在浪費我的時間，平白增加我的認知負荷。或者，并非如此？其實我很喜歡蒜香味的薯條，如果我知道他們有提供，那么一定會點一份。所以你看，這里就有問題暴露出來了。

漸進呈現可以有效地管理復雜，簡化決策過程；但同時也會將信息與功能埋沒起來。所以我們該如何是好？

關于如何正確運用漸進呈現的討論，最后通常都會歸結于「二八定律」。

如果你覺得這個概念有些陌生，那么可以大致理解為，一個系統所提供的全部效用當中的 80%，來自于其 20% 的內因。

對于 app 而言，這大約意味著其 80% 的價值來自于其 20% 的功能；或是 80% 的人只會用到其全部功能當中的 20%。

當然，實際情況當中的具體百分比不會那么精確，但比例大致符合。產品所提供的信息與功能通常不會擁有相同的權重，總會有一些比另外一些更加重要和關鍵。

因此，為了降低復雜度，簡化認知與決策過程，我們通常可以將那些相對次要的東西隱藏起來，以實現漸進呈現。換句話說，如果你的 app 非常復雜，那么完全可以嘗試將 80% 相對次要的信息或功能隱藏起來，以便使那最為重要的 20% 得以簡潔而清晰地呈現。

一個最經典的例子就是文件打印對話窗口。絕大多數時候，人們只關心那些最基本的設置，例如選擇哪臺打印機，紙張規格，打幾份等等。在打印機所提供的全部功能當中，上述這些連 20% 的比例都遠遠達不到，但卻是人們在 80% 的場景里所需用到的全部。

而當人們需要更復雜的功能時，僅需點擊一下就可以訪問到。

漸進呈現不僅能降低視覺復雜度，使打印變得簡單易行，同時也會降低人們產生困惑甚至是誤操作的可能性。

或許我們都經歷過類似的情景，例如爸媽或親人突然打電話給你，說他們要崩潰了，因為電腦工作異常，可能是因為他們弄錯了什么東西，他們完全搞不懂。漸進呈現的設計方式著實可以避免太多這類情況的發生。

所以，試著保持默認狀態的簡單，讓多數初中級用戶可以順暢地使用產品，避免困惑與誤操作；同時，也要讓高級用戶可以快捷地訪問到他們所需要的復雜功能。

對稱性-Symmetry

芝士漢堡和炸洋蔥圈都很美味。晚餐之后，大家早早休息，我們明天要去潛水。

來到夏威夷的海灘，我們戴上護目鏡，穿上腳蹼，調整呼吸管，下水。

水下有各式各樣的魚類。有河豚，金槍魚，巨型烏賊...魔幻一般的水下世界，為什么如此全然的美麗著？這里蘊涵著我們將要探討的最后一則設計原理，對稱性。

我們對于對稱性的概念都非常熟悉。每當談到對稱，我們通常會想到「反射對稱」，或稱「鏡像對稱」。

但其實還有更多的相關概念，例如「輻射對稱」或「旋轉對稱」，以及「平移對稱」。這三類對稱在自然界中非常常見。

對稱是一種有效的形式，我們通常會將其與「健康」、「穩定」、「平衡」、「有序」等概念關聯在一起。同時，對稱還極具視覺美觀性。

具有對稱性的元素即便在物理上沒有彼此連接，人們也會傾向于將它們認知為整體。譬如當看到一對互為對稱的括號時，我們在認知當中會無意識地將它們整合為連貫的整體。

潛在水下時，你會發現到處都是鏡像對稱、旋轉對稱和平移對稱。實際上，無論是在陸地、天空還是海洋，幾乎所有類型的動植物身上都體現著一種或多種對稱性。

而人造物品也是同樣。燈的開關具有對稱性，水龍頭也是如此。

汽車顯然也是同樣，而且汽車的對稱性更多是出于實際功能性的考慮；你一定不會希望駕駛這樣一輛汽車上路。

但對稱性同樣蘊含著美學價值。經過精心設計的界面通常能夠同時體現出鏡像對稱與平移對稱的特性。

在天氣 app 中，鏡像對稱帶來了良好的視覺平衡感。所有的關鍵元素都以界面中線為基準保持著居中對齊，同時其他所有元素都在兩端維持著平衡。

同樣的對稱模式也體現在相機、時鐘、電話等眾多 app 當中。

在平移對稱當中，元素的重復性為我們帶來了結構與次序的感知。你可以在時鐘 app 的地區時間列表，或是天氣 app 的城市天氣列表中感受到平移對稱的結構特性。

在設計界面時，盡可能有意識地通過對稱性原理來構建平衡與秩序的感知。

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