圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

@C7210?:繼續上期主題,即 2017 年 WWDC 之「基礎設計原理」設計分會,演講人是 Apple Evangelist 團隊的 Mike Stern。在上期當中,我們了解了導航與反饋,錯過的朋友不妨回看。今天的話題聚焦于「可見性」與「一致性」。

往期回顧:

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

可見性-Visibility

可見性與「反饋」有著密切的關聯。如果無法被人們所見,再好的反饋機制都是徒勞的。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

清晰可見的內容元素與界面控件可以極大地提升設計的易用性。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

想想看,可見性對于汽車來說有多么重要。儀表盤的信息密度極高,通過文字、數字、指針、指示燈、狀態標識等形式,將當前的狀態與警示信息一目了然地呈現在你的面前。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

所有這些信息都是直接可見的。縱使在感知上有些密集,但對于駕車來說卻非常必要,因為你無需轉頭甚至是轉身去其他地方尋找這些信息,它們都一覽無余地呈現在你面前。如果為了簡潔而將一部分信息默認隱藏起來,或是置于其他位置,導致重要的信息被忽略,那么車輛的易用性和安全性都將遭受到損害。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

對于 app 來說也是同理。例如在「郵件」中,未讀徽標提供了非常有用的狀態信息。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

如果將這些徽標隱藏起來,界面的復雜度會有所降低,看上去的確會整潔一些。然而這樣會極大地破壞易用性,因為人們將不得不進入一個個郵件詳情頁當中進行確認,才能獲取到原本由徽標提供的狀態信息,這樣的互動非常低效且乏味。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

因此,要將重要的狀態信息呈現在盡可能高的信息層級當中,使人們無需付出額外成本即可一目了然地獲取。

再來看看時鐘 app 的 tab 欄。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

如果將所有這些導航項隱藏到漢堡菜單當中,那么人們將很難一目了然地發現時鐘 app 所提供的其他實用功能。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

不過顯然,可見性當中也存在著權衡的問題,因為過高的信息密度及界面復雜度會降低人們獲取信息和制定決策的速度,特別是當人們還不那么熟悉你產品的時候。因此,我們通常需要結合其他因素通盤考慮。

一致性-Consistency

舟車勞頓,我已經等不及想要入住酒店了。不過趁大家都還在車上,我們還有一個極其重要的設計原理需要進行討論,這就是一致性。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

簡而言之,一致性的主旨在于通過相似的設計方式滿足相似的設計需求。

如果你曾開過車,那么你應該會熟悉汽車內部的各種通用的指示符號,例如門鎖、車窗、燃油、車燈、電池、機油等等。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

同樣,你也會對一系列通用術語的定義了如指掌,例如駐車、前進、倒檔等等。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

汽車設計的一致性還體現在各種控件的布局當中,例如剎車在左,油門在右。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

一致性極大地提升了車輛的易用性。反之,破壞了這些通用規則的設計方式將嚴重損害駕乘體驗。所有的汽車都應遵守著同一套設計規則,包括標識與術語定義,控件布局等等。受益于高度一致的設計,我們無需在每次駕駛不同車輛的時候都重新進行學習。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

一致性原理看上去顯而易見,然而實踐起來卻并非易事。你必須始終有意識地考慮到這一原則,并且理解應該與怎樣的標準保持一致。你需要全面地考慮到當人們打開你的 app 時,他們的預期是怎樣的。這些預期,在很大程度上可能和他們以往使用其他 app 的經驗有關。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

那么你該如何了解人們使用其他 app 的情況?這確實很難,人們可能使用過各種類型的 app,你無從知曉。但既然這些 app 同屬于相同的系統平臺,那么你也應該關注于平臺本身的設計慣例,譬如圖標與詞條的定義,導航系統的設計模式,包括典型的任務流程等等。

關于這個話題,我來為各位舉一個最典型的例子。在 iOS 當中,我們使用下圖所示的圖標來表達「行動」的意思,而且在多數時候,「行動」所指代的是「分享」功能。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

但很多 app 會使用不同的圖標來代表這一行為,如下圖所示。這個圖標確實很常見,特別是在網頁或其他平臺當中。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

這是個很棒的圖標,它本身的設計沒有任何問題。問題在于這個圖標對于 iOS 平臺的用戶來說并不符合認知習慣。很多設計師為了保持多平臺的一致性而選擇在 iOS 當中使用這個圖標。初衷是好的,但對于 iOS 來說卻并非正確的設計決策。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

從目標受眾的角度考慮問題,采用他們最熟識的設計方式,這才是上策。長此以往,你的 app 對于用戶來說會變得越發友好與易用。

當然,我們總會有沖動去做一些打破規則的事情。而且坦誠來講,這絕非壞事。我們總該去嘗試新的想法,否則何談創新。但對于圖標、文本這類簡單的設計元素而言,所謂的「創新」在更多的時候只會給人們造成不必要的麻煩。因此,除非你有足夠強大的理由,否則依照規則進行設計,確保與平臺之間的一致性,才是上策。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

關于一致性,我還有最后一點需要強調,即「內部一致性」。你的 app 不僅需要與其所在的系統平臺保持設計一致性,同時在 app 內部,視覺風格及行為模式也需要保持統一,例如每個界面當中同一種類的設計元素都應該有著一致的外觀,app 全局所用到的字體及顏色也應該有著明確的數量與規則。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

內部一致性可以提升 app 的整體性與內聚性。當所有元素都和諧有序地整合在一處,整體體驗也將得到提升。

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

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

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

圖解WWDC 設計分會:基礎設計原理 - 可見性與一致性

收藏 23
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。