簡約之道 – 最小化介面設計的組成要素及可用性分析

發表於2015-08-16

最小化設計的目標是移除介面當中不必要的元素或內容,減少干擾,使介面最大程度的支援使用者的任務流程。

要將介面以恰當的方式簡化到只保留必要元素的程度,設計師需要對一系列與最小化策略高度相關的設計模式有所瞭解。介面設計,就像人類的語言一樣,最終是由人們的使用方式所定義的。如今,雖然“最小化”和“極簡”的概念時常被人們丟擲,但我們還是無法精確的、量化的去定義具體是哪些功能特性構成了最小化介面。為了更加清晰的對概念進行解構,我們對112個帶有明顯最小化風格的網站進行了分析。

需要記住的是,設計風格的流行不代表它適用於任何型別的產品及其目標使用者,更不意味著它能推動提潤或其他業務目標的提升。在這次研究當中,我們的分析物件是那些明顯採用了最小化設計策略的介面,而非因為最小化設計風格而實現商業目標的產品。後文中也會講到,雖然最小化設計策略當中的一些要素對業務本身是有推動作用的,但同時也有很多會起到反作用。

最小化設計的典型組成要素

對於我們所研究的112個最小化風格的網站,如果某個特徵出現在超過75%的樣本當中,我們就將其定義為最小化介面設計的基本組成要素。

扁平化的材質

使用在96%的樣本介面當中(很多樣本的運用方式並不得當)。

過去幾年間,介面設計領域當中最為巨大的變化當屬擬物化風格向不帶有任何實物隱喻的數字化表現形式的轉變。扁平化風格通常不使用任何高光、陰影、漸變和材質來使介面元素帶有三維質感效果。

有些設計師相信扁平化風格正是最小化介面設計理念的直接體現:移除了各種不必要的、裝飾性的視覺效果,使介面最大程度的支援內容本身的呈現。

雖然這兩種概念具有很強的相關性,但它們並不等同於彼此。我們通常所說的扁平化設計泛指一種介面元素的視覺風格,而最小化設計則涉及到內容和功能層面。一個採用了扁平化視覺風格的介面未必是最小化的:

正如我們在曾經一篇文章當中所講,扁平化介面時常難以讓使用者一目瞭然的瞭解哪些元素是可點選的。我們相信,相比於盲目的扁平化處理方式,一種介於扁平化和擬物化之間的折衷風格會更為實用 – 以扁平化為基礎,同時在互動元素上使用更具實物隱喻性的樣式,使使用者可以快速識別可點選元素。

總體上講,扁平化風格非常容易被誤用,而且很可能對產品體驗造成負面影響。如今扁平化極度流行的設計趨勢使其幾乎成為最小化設計的代名詞,這並不是一個好現象。

少量配色或單色方案

使用在95%的樣本介面當中。

在多數的最小化風格介面中,極簡的配色方案都是策略性的被用來在不增加額外元素的情況下建立視覺吸引。介面當中的視覺干擾較少,色彩更容易被注意到,對內容和功能的影響力更強。

極簡的配色方案可以說是針對2000年前後混亂聒噪的網頁設計風格的回敬。極度剋制的配色方案最大程度的避免了介面本身對內容的干擾,不過在內容圖片的使用方面,色彩通常會更豔麗。我們在進行評估時,考量的元素包括背景色、logo、導航選單、圖示和字色,而不包括內容圖片。

很多極簡主義的介面設計師會採用單色方案,最多再為介面中的重要元素另取一種顏色。所謂重要元素,通常是指比較重要的互動元素。

在我們的樣本當中,49%使用了單色方案,46%使用了兩到三種色彩。使用著單色方案的那些介面,絕大多數是黑白及各種灰度的搭配。

相比於十多年前的混亂,如今極簡的配色策略可以說是一種進步,但在使用時仍有一些重要的問題需要考慮:

  • 確保你的配色方案具有足夠的對比度,使內容具有最基本的可讀性,另外要考慮到色弱和色盲使用者。
  • 關鍵色的使用要有明確的目的,例如突顯重要資訊或互動元素,並注意維持全域性的統一性,用途保持一致。

功能與介面元素的約束

使用在87%的樣本介面當中。

準備嘗試最小化策略的設計師必須對介面當中的每一個元素進行分析,然後移除那些對核心功能或資訊沒有直接支援作用的元素。所謂“元素”,包括(但不限於):

  • 導航選單項
  • 連結
  • 圖片
  • 圖形元素
  • 分隔線
  • 標題文案
  • 材質紋理,包括高光、陰影、漸變等效果
  • 顏色
  • 字型
  • 圖示

實際上,我們很難對介面當中是否還包含“不必要”的元素進行準確的評估,除非直接向設計師本人詢問,並瞭解他們的產品特性及目標使用者群體。為了使這一特徵更易考量,我們重點關注介面當中是否存在不具任何實質目的性的視覺元素。在我們的樣本中,有87%的介面明顯移除了所有的不必要元素。

介面中的元素越多,使用者頭腦中需要處理的資訊就越多。極簡主義設計師們時常唸叨的一句話就是“持續減法,直到無可再減”,意思就是除非缺失某樣東西會導致問題的出現,否則就幹掉它。

不過,設計師們往往容易過分追求簡約、現代、最小化的視覺外觀,致使有實際用途的元素被錯誤的移除。反之,嚴格堅持實用主義路線,將在一定程度上幫助你更準確的識別出介面中的干擾元素,打造出更高效的互動流程。最根本的一點,確保不要將使用者完成核心任務所真正需要的東西移除,否則這樣的簡化只能提升操作複雜度。

元素混亂、資訊過載的介面固然難以理解,但過分簡化以至於缺失必要資訊的產品則更容易讓人茫然無措。

超大的留白比例

使用在84%的樣本介面當中。

有意識的將介面當中的干擾元素移除,勢必會導致負空間比例的增大。

留白(負空間)曾被認為是最小化介面的同義詞,很多設計師將留白作為一種引導使用者關注重要內容的手段,幫助他們更好的理解資訊結構。

留白並非空無一物,比例得當的負空間除了可以為介面賦予呼吸感以外,確實還能起到有效的引導作用。在考慮留白的使用時,要關注以下幾方面的問題:

  • 增加或減少留白之後,介面資訊層級的展現方式是否會受到影響?
  • 留白的使用是否會影響到介面上方資訊的展示?雖然備受爭議,但“折線以上”的原則在很多介面環境中依然適用,使用者在進行互動行為之前最容易關注到的仍然是首屏區域當中的內容,不要讓留白對這裡的重要資訊產生破壞作用。
  • 留白的使用是否會影響到互動成本?使用者是否需要付出更高的成本才能獲取資訊?
  • 留白的比例是否需要根據不同的瀏覽環境進行響應式的調整?

誇張的字型運用

使用在75%的樣本介面當中。

和字色相仿,當介面裡僅有為數不多的元素時,加粗加大的字型也能成為溝通重要資訊的手段。恰當有效的字型運用不但可以使最小化風格的介面更具視覺吸引力,而且可以彌補其他型別元素的匱乏所導致的視覺失衡問題。字號、粗細、字形風格等等的變化搭配對於幫助使用者在最小化介面中理解資訊層次也起著重要的作用。在我們研究的112個樣本當中,75%的介面通過誇張的字型運用方式來傳達資訊,製造視覺張力。

對於定製化程度比較高的字型,使用圖片代替文字是一種常規做法,代價則是降低了介面的載入速度,並且需要考慮不同解析度下的尺寸問題。使用線上字型(web font)也是一種方式,但同樣要考慮效能方面的問題。

必須記住,只有在能夠傳達特定資訊的情況下,誇張的字型運用方式才有意義,不要單純為了視覺效果而使用。過度風格化的字型有很大的風險性,根據我們過去的研究,使用者很容易忽略掉那些看上去過於花裡胡哨的文字,因為太像廣告了。你的字型運用方式能否準確的體現設計意圖?最終結果是否反而造成了混亂和干擾?優秀的設計師應該有能力在這兩者之間找到恰當的平衡點。如果你無法確定,儘量向最安全最穩妥的一邊靠攏。

其他組成要素

以下這些設計要素也是很多設計師樂於運用的。不過由於它們在樣本當中的使用比例相對較低,所以我們不會將其定義為最小化介面設計的基本組成要素。

全屏背景圖片或視訊

使用在57%的樣本介面當中。

理論上講,全屏背景圖片與最小化設計理念當中“移除一切不相關要素,只保留必要資訊”的原則是相沖突的,不過在實際當中,這種設計模式的主流化程度還是有目共睹的;在我們的研究樣本當中,採用了這種模式的介面約佔57%。

全屏背景圖片/視訊是否有利於使用者對品牌產生正確認知,這一點還取決於具體的產品環境以及設計師的設計意圖。要策略性的選擇背景圖片或視訊,而不是盲目的模仿或隨意使用素材;在此基礎上,遵循最小化設計的理念,防止多餘的介面元素與大背景所傳達的資訊產生衝突。不過在實際當中,有很多設計師的思路卻是通過巨大而誇張的背景元素來彌補過於簡化的風格所帶來的枯燥與單調。

在使用全屏背景圖片或視訊時,考慮以下幾點:

  • 確保你所選用的圖片或視訊是有實際意義的,例如幫助使用者一目瞭然的對產品產生直觀認知。如果做不到這一點,它們只會成為介面當中體型巨大的干擾元素。
  • 確保背景之上的文字內容可讀、易讀。可讀是指至少保證使用者能夠辨識字母、單詞、語句;易讀是指輕鬆順暢的辨識和處理這些內容。如果你使用視訊做背景,那麼要在所有典型解析度下測試每一幀影像對文字內容的可讀、易讀性是否產生了嚴重的負面影響。
  • 考量大幅背景素材對於介面效能的影響。要採用必要的自適應技術,確保介面在移動裝置上載入時不需要使用桌面尺寸和精度的超大素材。
  • 對於自動播放要謹慎。很多使用者非常厭惡自動播放的視訊,尤其是同時帶有音訊的。
  • 不要將背景視訊當作哈利波特電影那樣去製作,動來動去的炫目的內容只會干擾使用者的注意力。

網格佈局

使用在43%的樣本介面當中。

43%的比例可以代表一定的流行程度,但也可以說明這種設計方式不是很典型的最小化設計組成要素。

在最小化介面當中,網格佈局的使用通常出於兩方面的原因:

  1. 無需額外的視覺元素進行輔助,網格佈局能夠很好的將介面當中一系列同質內容組織起來。
  2. 網格佈局對於響應式設計的實現很有幫助。

圓形的圖形元素

使用在16%的樣本介面當中。

很多設計師認為圓形元素是一種典型的最小化介面設計組成要素,不過在我們的研究當中,只有16%的樣本有用到。

預設隱藏的全域性導航

使用在13%的樣本介面當中。

如今很多網站會預設隱藏全域性導航,即便是在桌面裝置上瀏覽的時候;漢堡包圖示也越來越多的出現在網頁當中。實際上,這可以說是對“移動優先”設計思路理解不全面或是貫徹不全面所導致的直接結果 – 設計師認同了在移動裝置小螢幕上隱藏導航換取顯示空間的合理性,但是忽略了在平板或桌面裝置充裕的顯示環境當中一目瞭然的向使用者呈現導航結構的重要性 – 換個角度說,這也是典型的過度簡化設計。

退一步說,在某些情況下,隱藏一些非高頻功能入口或許符合你的簡化目標,但必須確保那些對於使用者完成核心任務起到關鍵作用的資訊或功能預設呈現出來。

最小化設計要素歸納

在對112個網站介面進行研究之後,我們總結出瞭如前文所述的若干最小化設計組成要素,其中包括5個典型組成要素:

  • 扁平化的材質
  • 少量配色或單色方案
  • 功能與介面元素的約束
  • 超大的留白比例
  • 誇張的字型運用

其中某些要素出現在了幾乎所有的研究樣本當中;使用頻率最低的也超過了75%。此外,我們還總結出了一些使用頻率相對較低,但仍與最小化風格高度相關的設計方式:

  • 全屏背景圖片或視訊
  • 網格佈局
  • 圓形的圖形元素
  • 預設隱藏的全域性導航

小結

2000年前後的介面設計領域由混亂與聒噪所統治。多年來,我們逐漸學會了與之進行對抗。臃腫的功能和無意義的內容對於使用者及產品自身都是極大的傷害。

理論上講,最小化設計思想可以幫助我們遠離曾經的混亂局面,打造出更加平滑自然的人機互動流程。不過現實當中的情況並非那麼理想,很多設計師僅從形式上拷貝著各種流行的最小化設計要素,卻忽略了特定的產品目標以及不恰當的設計方式所導致的各種可用性陷阱。

從形式上看,扁平化設計是對擬物風格的反擊,最小化設計是對過度設計的反擊。無論如何,我們都強烈建議各位設計師避免非此即彼、非黑即白的思維模式,真正去了解每種設計思想的特性,根據產品的實際情況尋求恰當的平衡點。只有在真正符合產品目標及使用者需求的情況下,特定的設計思想才能真正成為有利的設計武器 – 為了最小化而最小化,對產品和使用者都無益。

相關文章