圖解WWDC 設(shè)計(jì)分會(huì)：基礎(chǔ)設(shè)計(jì)原理 - 可見(jiàn)性與一致性

@C7210?：繼續(xù)上期主題，即 2017 年 WWDC 之「基礎(chǔ)設(shè)計(jì)原理」設(shè)計(jì)分會(huì)，演講人是 Apple Evangelist 團(tuán)隊(duì)的 Mike Stern。在上期當(dāng)中，我們了解了導(dǎo)航與反饋，錯(cuò)過(guò)的朋友不妨回看。今天的話題聚焦于「可見(jiàn)性」與「一致性」。

往期回顧：

• 《圖解WWDC 設(shè)計(jì)分會(huì)：iOS 13 設(shè)計(jì)新特性（1）》
• 《圖解WWDC 設(shè)計(jì)分會(huì)：導(dǎo)航與反饋（2）》

可見(jiàn)性-Visibility

可見(jiàn)性與「反饋」有著密切的關(guān)聯(lián)。如果無(wú)法被人們所見(jiàn)，再好的反饋機(jī)制都是徒勞的。

清晰可見(jiàn)的內(nèi)容元素與界面控件可以極大地提升設(shè)計(jì)的易用性。

想想看，可見(jiàn)性對(duì)于汽車來(lái)說(shuō)有多么重要。儀表盤(pán)的信息密度極高，通過(guò)文字、數(shù)字、指針、指示燈、狀態(tài)標(biāo)識(shí)等形式，將當(dāng)前的狀態(tài)與警示信息一目了然地呈現(xiàn)在你的面前。

所有這些信息都是直接可見(jiàn)的?？v使在感知上有些密集，但對(duì)于駕車來(lái)說(shuō)卻非常必要，因?yàn)槟銦o(wú)需轉(zhuǎn)頭甚至是轉(zhuǎn)身去其他地方尋找這些信息，它們都一覽無(wú)余地呈現(xiàn)在你面前。如果為了簡(jiǎn)潔而將一部分信息默認(rèn)隱藏起來(lái)，或是置于其他位置，導(dǎo)致重要的信息被忽略，那么車輛的易用性和安全性都將遭受到損害。

對(duì)于 app 來(lái)說(shuō)也是同理。例如在「郵件」中，未讀徽標(biāo)提供了非常有用的狀態(tài)信息。

如果將這些徽標(biāo)隱藏起來(lái)，界面的復(fù)雜度會(huì)有所降低，看上去的確會(huì)整潔一些。然而這樣會(huì)極大地破壞易用性，因?yàn)槿藗儗⒉坏貌贿M(jìn)入一個(gè)個(gè)郵件詳情頁(yè)當(dāng)中進(jìn)行確認(rèn)，才能獲取到原本由徽標(biāo)提供的狀態(tài)信息，這樣的互動(dòng)非常低效且乏味。

因此，要將重要的狀態(tài)信息呈現(xiàn)在盡可能高的信息層級(jí)當(dāng)中，使人們無(wú)需付出額外成本即可一目了然地獲取。

再來(lái)看看時(shí)鐘 app 的 tab 欄。

如果將所有這些導(dǎo)航項(xiàng)隱藏到漢堡菜單當(dāng)中，那么人們將很難一目了然地發(fā)現(xiàn)時(shí)鐘 app 所提供的其他實(shí)用功能。

不過(guò)顯然，可見(jiàn)性當(dāng)中也存在著權(quán)衡的問(wèn)題，因?yàn)檫^(guò)高的信息密度及界面復(fù)雜度會(huì)降低人們獲取信息和制定決策的速度，特別是當(dāng)人們還不那么熟悉你產(chǎn)品的時(shí)候。因此，我們通常需要結(jié)合其他因素通盤(pán)考慮。

一致性-Consistency

舟車勞頓，我已經(jīng)等不及想要入住酒店了。不過(guò)趁大家都還在車上，我們還有一個(gè)極其重要的設(shè)計(jì)原理需要進(jìn)行討論，這就是一致性。

簡(jiǎn)而言之，一致性的主旨在于通過(guò)相似的設(shè)計(jì)方式滿足相似的設(shè)計(jì)需求。

如果你曾開(kāi)過(guò)車，那么你應(yīng)該會(huì)熟悉汽車內(nèi)部的各種通用的指示符號(hào)，例如門鎖、車窗、燃油、車燈、電池、機(jī)油等等。

同樣，你也會(huì)對(duì)一系列通用術(shù)語(yǔ)的定義了如指掌，例如駐車、前進(jìn)、倒檔等等。

汽車設(shè)計(jì)的一致性還體現(xiàn)在各種控件的布局當(dāng)中，例如剎車在左，油門在右。

一致性極大地提升了車輛的易用性。反之，破壞了這些通用規(guī)則的設(shè)計(jì)方式將嚴(yán)重?fù)p害駕乘體驗(yàn)。所有的汽車都應(yīng)遵守著同一套設(shè)計(jì)規(guī)則，包括標(biāo)識(shí)與術(shù)語(yǔ)定義，控件布局等等。受益于高度一致的設(shè)計(jì)，我們無(wú)需在每次駕駛不同車輛的時(shí)候都重新進(jìn)行學(xué)習(xí)。

一致性原理看上去顯而易見(jiàn)，然而實(shí)踐起來(lái)卻并非易事。你必須始終有意識(shí)地考慮到這一原則，并且理解應(yīng)該與怎樣的標(biāo)準(zhǔn)保持一致。你需要全面地考慮到當(dāng)人們打開(kāi)你的 app 時(shí)，他們的預(yù)期是怎樣的。這些預(yù)期，在很大程度上可能和他們以往使用其他 app 的經(jīng)驗(yàn)有關(guān)。

那么你該如何了解人們使用其他 app 的情況？這確實(shí)很難，人們可能使用過(guò)各種類型的 app，你無(wú)從知曉。但既然這些 app 同屬于相同的系統(tǒng)平臺(tái)，那么你也應(yīng)該關(guān)注于平臺(tái)本身的設(shè)計(jì)慣例，譬如圖標(biāo)與詞條的定義，導(dǎo)航系統(tǒng)的設(shè)計(jì)模式，包括典型的任務(wù)流程等等。

關(guān)于這個(gè)話題，我來(lái)為各位舉一個(gè)最典型的例子。在 iOS 當(dāng)中，我們使用下圖所示的圖標(biāo)來(lái)表達(dá)「行動(dòng)」的意思，而且在多數(shù)時(shí)候，「行動(dòng)」所指代的是「分享」功能。

但很多 app 會(huì)使用不同的圖標(biāo)來(lái)代表這一行為，如下圖所示。這個(gè)圖標(biāo)確實(shí)很常見(jiàn)，特別是在網(wǎng)頁(yè)或其他平臺(tái)當(dāng)中。

這是個(gè)很棒的圖標(biāo)，它本身的設(shè)計(jì)沒(méi)有任何問(wèn)題。問(wèn)題在于這個(gè)圖標(biāo)對(duì)于 iOS 平臺(tái)的用戶來(lái)說(shuō)并不符合認(rèn)知習(xí)慣。很多設(shè)計(jì)師為了保持多平臺(tái)的一致性而選擇在 iOS 當(dāng)中使用這個(gè)圖標(biāo)。初衷是好的，但對(duì)于 iOS 來(lái)說(shuō)卻并非正確的設(shè)計(jì)決策。

從目標(biāo)受眾的角度考慮問(wèn)題，采用他們最熟識(shí)的設(shè)計(jì)方式，這才是上策。長(zhǎng)此以往，你的 app 對(duì)于用戶來(lái)說(shuō)會(huì)變得越發(fā)友好與易用。

當(dāng)然，我們總會(huì)有沖動(dòng)去做一些打破規(guī)則的事情。而且坦誠(chéng)來(lái)講，這絕非壞事。我們總該去嘗試新的想法，否則何談創(chuàng)新。但對(duì)于圖標(biāo)、文本這類簡(jiǎn)單的設(shè)計(jì)元素而言，所謂的「創(chuàng)新」在更多的時(shí)候只會(huì)給人們?cè)斐刹槐匾穆闊?。因此，除非你有足夠?qiáng)大的理由，否則依照規(guī)則進(jìn)行設(shè)計(jì)，確保與平臺(tái)之間的一致性，才是上策。

關(guān)于一致性，我還有最后一點(diǎn)需要強(qiáng)調(diào)，即「內(nèi)部一致性」。你的 app 不僅需要與其所在的系統(tǒng)平臺(tái)保持設(shè)計(jì)一致性，同時(shí)在 app 內(nèi)部，視覺(jué)風(fēng)格及行為模式也需要保持統(tǒng)一，例如每個(gè)界面當(dāng)中同一種類的設(shè)計(jì)元素都應(yīng)該有著一致的外觀，app 全局所用到的字體及顏色也應(yīng)該有著明確的數(shù)量與規(guī)則。

內(nèi)部一致性可以提升 app 的整體性與內(nèi)聚性。當(dāng)所有元素都和諧有序地整合在一處，整體體驗(yàn)也將得到提升。

作為設(shè)計(jì)師，遵從一致性的設(shè)計(jì)原理需要我們具備良好的自我控制與約束能力。大大小小每一個(gè)設(shè)計(jì)決策都需要意圖明確。

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