@C7210?：繼續(xù)上期主題，即 WWDC 之「基礎(chǔ)設(shè)計(jì)原理」設(shè)計(jì)分會(huì)，演講人是 Apple 設(shè)計(jì)布道者團(tuán)隊(duì)的 Mike Stern 老師。在上期當(dāng)中，我們了解了「映射」與「可供性」，錯(cuò)過(guò)的朋友不妨回看。今天的話題聚焦于「漸進(jìn)呈現(xiàn)」與「對(duì)稱性」。

往期回顧：

• 《圖解WWDC 設(shè)計(jì)分會(huì)：iOS 13 設(shè)計(jì)新特性（1）》
• 《圖解WWDC 設(shè)計(jì)分會(huì)：導(dǎo)航與反饋（2）》
• 《圖解WWDC 設(shè)計(jì)分會(huì)：基礎(chǔ)設(shè)計(jì)原理 – 可見(jiàn)性與一致性》
• 《圖解WWDC 設(shè)計(jì)分會(huì)：基礎(chǔ)設(shè)計(jì)原理 – 心智模型與鄰近性》
• 《圖解WWDC 設(shè)計(jì)分會(huì)：基礎(chǔ)設(shè)計(jì)原理 – 映射與可供性》

漸進(jìn)呈現(xiàn)-Progressive Disclosure

搞清楚了用什么東西盛放食物，我們接下來(lái)可以安心點(diǎn)餐了。我想點(diǎn)一個(gè)美味的芝士漢堡，于是叫來(lái)了服務(wù)生。

他問(wèn)我需要幾分熟，「五分」。他問(wèn)我需要哪種芝士，「切達(dá)奶酪」。

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

搭配沙拉、薯?xiàng)l還是炸洋蔥圈？「炸洋蔥圈」。

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

以上過(guò)程便體現(xiàn)了「漸進(jìn)呈現(xiàn)」的原理。

作為一種用于管理復(fù)雜度的方法，「漸進(jìn)呈現(xiàn)」幾乎可以說(shuō)是交互設(shè)計(jì)領(lǐng)域所獨(dú)有的，其基本概念是引導(dǎo)人們平緩地由簡(jiǎn)單狀態(tài)進(jìn)入到復(fù)雜狀態(tài)，例如將原本復(fù)雜的邏輯隱藏起來(lái)，通過(guò)更加易于認(rèn)知的界面形式幫助人們輕松完成最為基礎(chǔ)的任務(wù)。

如果你一上來(lái)就必須面對(duì)所有的配料選項(xiàng)，那么點(diǎn)餐也會(huì)成為復(fù)雜到令人畏懼的任務(wù)。反之，步步為營(yíng)則會(huì)令人感到輕松舒適。

此外，前期的輸入選擇也可能對(duì)后續(xù)的選項(xiàng)產(chǎn)生影響。例如，如果我選擇薯?xiàng)l，那么服務(wù)生就會(huì)繼續(xù)給到我「普通」、「松露」、「蒜香」三種口味選項(xiàng)；但是我沒(méi)有選薯?xiàng)l，所以我無(wú)需在意他們薯?xiàng)l的口味；如果服務(wù)生詢問(wèn)我關(guān)于薯?xiàng)l口味的問(wèn)題，那就是在浪費(fèi)我的時(shí)間，平白增加我的認(rèn)知負(fù)荷?；蛘撸⒎侨绱?？其實(shí)我很喜歡蒜香味的薯?xiàng)l，如果我知道他們有提供，那么一定會(huì)點(diǎn)一份。所以你看，這里就有問(wèn)題暴露出來(lái)了。

漸進(jìn)呈現(xiàn)可以有效地管理復(fù)雜，簡(jiǎn)化決策過(guò)程；但同時(shí)也會(huì)將信息與功能埋沒(méi)起來(lái)。所以我們?cè)撊绾问呛茫?/p>

關(guān)于如何正確運(yùn)用漸進(jìn)呈現(xiàn)的討論，最后通常都會(huì)歸結(jié)于「二八定律」。

如果你覺(jué)得這個(gè)概念有些陌生，那么可以大致理解為，一個(gè)系統(tǒng)所提供的全部效用當(dāng)中的 80%，來(lái)自于其 20% 的內(nèi)因。

對(duì)于 app 而言，這大約意味著其 80% 的價(jià)值來(lái)自于其 20% 的功能；或是 80% 的人只會(huì)用到其全部功能當(dāng)中的 20%。

當(dāng)然，實(shí)際情況當(dāng)中的具體百分比不會(huì)那么精確，但比例大致符合。產(chǎn)品所提供的信息與功能通常不會(huì)擁有相同的權(quán)重，總會(huì)有一些比另外一些更加重要和關(guān)鍵。

因此，為了降低復(fù)雜度，簡(jiǎn)化認(rèn)知與決策過(guò)程，我們通?？梢詫⒛切┫鄬?duì)次要的東西隱藏起來(lái)，以實(shí)現(xiàn)漸進(jìn)呈現(xiàn)。換句話說(shuō)，如果你的 app 非常復(fù)雜，那么完全可以嘗試將 80% 相對(duì)次要的信息或功能隱藏起來(lái)，以便使那最為重要的 20% 得以簡(jiǎn)潔而清晰地呈現(xiàn)。

一個(gè)最經(jīng)典的例子就是文件打印對(duì)話窗口。絕大多數(shù)時(shí)候，人們只關(guān)心那些最基本的設(shè)置，例如選擇哪臺(tái)打印機(jī)，紙張規(guī)格，打幾份等等。在打印機(jī)所提供的全部功能當(dāng)中，上述這些連 20% 的比例都遠(yuǎn)遠(yuǎn)達(dá)不到，但卻是人們?cè)?80% 的場(chǎng)景里所需用到的全部。

而當(dāng)人們需要更復(fù)雜的功能時(shí)，僅需點(diǎn)擊一下就可以訪問(wèn)到。

漸進(jìn)呈現(xiàn)不僅能降低視覺(jué)復(fù)雜度，使打印變得簡(jiǎn)單易行，同時(shí)也會(huì)降低人們產(chǎn)生困惑甚至是誤操作的可能性。

或許我們都經(jīng)歷過(guò)類(lèi)似的情景，例如爸媽或親人突然打電話給你，說(shuō)他們要崩潰了，因?yàn)殡娔X工作異常，可能是因?yàn)樗麄兣e(cuò)了什么東西，他們完全搞不懂。漸進(jìn)呈現(xiàn)的設(shè)計(jì)方式著實(shí)可以避免太多這類(lèi)情況的發(fā)生。

所以，試著保持默認(rèn)狀態(tài)的簡(jiǎn)單，讓多數(shù)初中級(jí)用戶可以順暢地使用產(chǎn)品，避免困惑與誤操作；同時(shí)，也要讓高級(jí)用戶可以快捷地訪問(wèn)到他們所需要的復(fù)雜功能。

對(duì)稱性-Symmetry

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

來(lái)到夏威夷的海灘，我們戴上護(hù)目鏡，穿上腳蹼，調(diào)整呼吸管，下水。

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

我們對(duì)于對(duì)稱性的概念都非常熟悉。每當(dāng)談到對(duì)稱，我們通常會(huì)想到「反射對(duì)稱」，或稱「鏡像對(duì)稱」。

但其實(shí)還有更多的相關(guān)概念，例如「輻射對(duì)稱」或「旋轉(zhuǎn)對(duì)稱」，以及「平移對(duì)稱」。這三類(lèi)對(duì)稱在自然界中非常常見(jiàn)。

對(duì)稱是一種有效的形式，我們通常會(huì)將其與「健康」、「穩(wěn)定」、「平衡」、「有序」等概念關(guān)聯(lián)在一起。同時(shí)，對(duì)稱還極具視覺(jué)美觀性。

具有對(duì)稱性的元素即便在物理上沒(méi)有彼此連接，人們也會(huì)傾向于將它們認(rèn)知為整體。譬如當(dāng)看到一對(duì)互為對(duì)稱的括號(hào)時(shí)，我們?cè)谡J(rèn)知當(dāng)中會(huì)無(wú)意識(shí)地將它們整合為連貫的整體。

潛在水下時(shí)，你會(huì)發(fā)現(xiàn)到處都是鏡像對(duì)稱、旋轉(zhuǎn)對(duì)稱和平移對(duì)稱。實(shí)際上，無(wú)論是在陸地、天空還是海洋，幾乎所有類(lèi)型的動(dòng)植物身上都體現(xiàn)著一種或多種對(duì)稱性。

而人造物品也是同樣。燈的開(kāi)關(guān)具有對(duì)稱性，水龍頭也是如此。

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

但對(duì)稱性同樣蘊(yùn)含著美學(xué)價(jià)值。經(jīng)過(guò)精心設(shè)計(jì)的界面通常能夠同時(shí)體現(xiàn)出鏡像對(duì)稱與平移對(duì)稱的特性。

在天氣 app 中，鏡像對(duì)稱帶來(lái)了良好的視覺(jué)平衡感。所有的關(guān)鍵元素都以界面中線為基準(zhǔn)保持著居中對(duì)齊，同時(shí)其他所有元素都在兩端維持著平衡。

同樣的對(duì)稱模式也體現(xiàn)在相機(jī)、時(shí)鐘、電話等眾多 app 當(dāng)中。

在平移對(duì)稱當(dāng)中，元素的重復(fù)性為我們帶來(lái)了結(jié)構(gòu)與次序的感知。你可以在時(shí)鐘 app 的地區(qū)時(shí)間列表，或是天氣 app 的城市天氣列表中感受到平移對(duì)稱的結(jié)構(gòu)特性。

在設(shè)計(jì)界面時(shí)，盡可能有意識(shí)地通過(guò)對(duì)稱性原理來(lái)構(gòu)建平衡與秩序的感知。

歡迎關(guān)注作者的微信公眾號(hào)：「Beforweb」