大數據的設計師幫你快速搞定一個極簡風格網站

 　　如何快速做出一個極簡風格網站?國外某個網站統計分析了112個明顯帶有極簡風格的網站後，發布了這篇超級干貨。全程都是以數據來說話，從占比最大的設計要素開始說起，有案例有分析，把極簡風格的設計徹底發揮到了術的地步。

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

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

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

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

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

　　扁平化的材質

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

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

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

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

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

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

　　少量配色或單色方案

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

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

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

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

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

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

　　確保你的配色方案具有足夠的對比度，使內容具有最基本的可讀性，另外要考慮到色弱和色盲用戶。

　　關鍵色的使用要有明確的目的，例如突顯重要信息或交互元素，並注意維持全局的統一性，用途保持一致。

　　功能與界面元素的約束

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

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

　　導航菜單項

　　鏈接

　　圖片

　　圖形元素

　　分隔線

　　標題文案

　　材質紋理，包括高光、陰影、漸變等效果

　　顏色

　　字體

　　圖標

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

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

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

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

　　超大的留白比例

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

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

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

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

　　增加或減少留白之後，界面信息層級的展現方式是否會受到影響?

　　留白的使用是否會影響到界面上方信息的展示?雖然備受爭議，但“折線以上”的原則在很多界面環境中依然適用，用戶在進行交互行為之前最容易關注到的仍然是首屏區域當中的內容，不要讓留白對這裡的重要信息產生破壞作用。

　　留白的使用是否會影響到交互成本?用戶是否需要付出更高的成本才能獲取信息?

　　留白的比例是否需要根據不同的浏覽環境進行響應式的調整?

　　誇張的字體運用

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

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

　　對於定制化程度比較高的字體，使用圖片代替文本是一種常規做法，代價則是降低了界面的加載速度，並且需要考慮不同分辨率下的尺寸問題。使用在線字體(web font)也是一種方式，但同樣要考慮性能方面的問題。

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