大數(shù)據(jù)的設(shè)計(jì)師幫你快速搞定一個(gè)極簡(jiǎn)風(fēng)格網(wǎng)站

如何快速做出一個(gè)極簡(jiǎn)風(fēng)格網(wǎng)站?國(guó)外某個(gè)網(wǎng)站統(tǒng)計(jì)分析了112個(gè)明顯帶有極簡(jiǎn)風(fēng)格的網(wǎng)站后，發(fā)布了這篇超級(jí)干貨。全程都是以數(shù)據(jù)來(lái)說(shuō)話，從占比最大的設(shè)計(jì)要素開始說(shuō)起，有案例有分析，把極簡(jiǎn)風(fēng)格的設(shè)計(jì)徹底發(fā)揮到了術(shù)的地步。

最小化設(shè)計(jì)的目標(biāo)是移除界面當(dāng)中不必要的元素或內(nèi)容，減少干擾，使界面最大程度的支持用戶的任務(wù)流程。

要將界面以恰當(dāng)?shù)姆绞胶?jiǎn)化到只保留必要元素的程度，設(shè)計(jì)師需要對(duì)一系列與最小化策略高度相關(guān)的設(shè)計(jì)模式有所了解。界面設(shè)計(jì)，就像人類的語(yǔ)言一樣，最終是由人們的使用方式所定義的。如今，雖然“最小化”和“極簡(jiǎn)”的概念時(shí)常被人們拋出，但我們還是無(wú)法精確的、量化的去定義具體是哪些功能特性構(gòu)成了最小化界面。為了更加清晰的對(duì)概念進(jìn)行解構(gòu)，我們對(duì)112個(gè)帶有明顯最小化風(fēng)格的網(wǎng)站進(jìn)行了分析。

需要記住的是，設(shè)計(jì)風(fēng)格的流行不代表它適用于任何類型的產(chǎn)品及其目標(biāo)用戶，更不意味著它能推動(dòng)提潤(rùn)或其他業(yè)務(wù)目標(biāo)的提升。在這次研究當(dāng)中，我們的分析對(duì)象是那些明顯采用了最小化設(shè)計(jì)策略的界面，而非因?yàn)樽钚』O(shè)計(jì)風(fēng)格而實(shí)現(xiàn)商業(yè)目標(biāo)的產(chǎn)品。后文中也會(huì)講到，雖然最小化設(shè)計(jì)策略當(dāng)中的一些要素對(duì)業(yè)務(wù)本身是有推動(dòng)作用的，但同時(shí)也有很多會(huì)起到反作用。

最小化設(shè)計(jì)的典型組成要素

對(duì)于我們所研究的112個(gè)最小化風(fēng)格的網(wǎng)站，如果某個(gè)特征出現(xiàn)在超過(guò)75%的樣本當(dāng)中，我們就將其定義為最小化界面設(shè)計(jì)的基本組成要素。

扁平化的材質(zhì)

使用在96%的樣本界面當(dāng)中(很多樣本的運(yùn)用方式并不得當(dāng))。

過(guò)去幾年間，界面設(shè)計(jì)領(lǐng)域當(dāng)中最為巨大的變化當(dāng)屬擬物化風(fēng)格向不帶有任何實(shí)物隱喻的數(shù)字化表現(xiàn)形式的轉(zhuǎn)變。扁平化風(fēng)格通常不使用任何高光、陰影、漸變和材質(zhì)來(lái)使界面元素帶有三維質(zhì)感效果。

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

雖然這兩種概念具有很強(qiáng)的相關(guān)性，但它們并不等同于彼此。我們通常所說(shuō)的扁平化設(shè)計(jì)泛指一種界面元素的視覺風(fēng)格，而最小化設(shè)計(jì)則涉及到內(nèi)容和功能層面。一個(gè)采用了扁平化視覺風(fēng)格的界面未必是最小化的：

正如我們?cè)谠?jīng)一篇文章當(dāng)中所講，扁平化界面時(shí)常難以讓用戶一目了然的了解哪些元素是可點(diǎn)擊的。我們相信，相比于盲目的扁平化處理方式，一種介于扁平化和擬物化之間的折衷風(fēng)格會(huì)更為實(shí)用 – 以扁平化為基礎(chǔ)，同時(shí)在交互元素上使用更具實(shí)物隱喻性的樣式，使用戶可以快速識(shí)別可點(diǎn)擊元素。

總體上講，扁平化風(fēng)格非常容易被誤用，而且很可能對(duì)產(chǎn)品體驗(yàn)造成負(fù)面影響。如今扁平化極度流行的設(shè)計(jì)趨勢(shì)使其幾乎成為最小化設(shè)計(jì)的代名詞，這并不是一個(gè)好現(xiàn)象。

少量配色或單色方案

使用在95%的樣本界面當(dāng)中。

在多數(shù)的最小化風(fēng)格界面中，極簡(jiǎn)的配色方案都是策略性的被用來(lái)在不增加額外元素的情況下創(chuàng)建視覺吸引。界面當(dāng)中的視覺干擾較少，色彩更容易被注意到，對(duì)內(nèi)容和功能的影響力更強(qiáng)。

極簡(jiǎn)的配色方案可以說(shuō)是針對(duì)2000年前后混亂聒噪的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的回敬。極度克制的配色方案最大程度的避免了界面本身對(duì)內(nèi)容的干擾，不過(guò)在內(nèi)容圖片的使用方面，色彩通常會(huì)更艷麗。我們?cè)谶M(jìn)行評(píng)估時(shí)，考量的元素包括背景色、logo、導(dǎo)航菜單、圖標(biāo)和字色，而不包括內(nèi)容圖片。

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

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

相比于十多年前的混亂，如今極簡(jiǎn)的配色策略可以說(shuō)是一種進(jìn)步，但在使用時(shí)仍有一些重要的問(wèn)題需要考慮：

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

關(guān)鍵色的使用要有明確的目的，例如突顯重要信息或交互元素，并注意維持全局的統(tǒng)一性，用途保持一致。

功能與界面元素的約束

使用在87%的樣本界面當(dāng)中。

準(zhǔn)備嘗試最小化策略的設(shè)計(jì)師必須對(duì)界面當(dāng)中的每一個(gè)元素進(jìn)行分析，然后移除那些對(duì)核心功能或信息沒有直接支持作用的元素。所謂“元素”，包括(但不限于)：

導(dǎo)航菜單項(xiàng)

鏈接

圖片

圖形元素

分隔線

標(biāo)題文案

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

顏色

字體

圖標(biāo)

實(shí)際上，我們很難對(duì)界面當(dāng)中是否還包含“不必要”的元素進(jìn)行準(zhǔn)確的評(píng)估，除非直接向設(shè)計(jì)師本人詢問(wèn)，并了解他們的產(chǎn)品特性及目標(biāo)用戶群體。為了使這一特征更易考量，我們重點(diǎn)關(guān)注界面當(dāng)中是否存在不具任何實(shí)質(zhì)目的性的視覺元素。在我們的樣本中，有87%的界面明顯移除了所有的不必要元素。

界面中的元素越多，用戶頭腦中需要處理的信息就越多。極簡(jiǎn)主義設(shè)計(jì)師們時(shí)常念叨的一句話就是“持續(xù)減法，直到無(wú)可再減”，意思就是除非缺失某樣?xùn)|西會(huì)導(dǎo)致問(wèn)題的出現(xiàn)，否則就干掉它。

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

元素混亂、信息過(guò)載的界面固然難以理解，但過(guò)分簡(jiǎn)化以至于缺失必要信息的產(chǎn)品則更容易讓人茫然無(wú)措。

超大的留白比例

使用在84%的樣本界面當(dāng)中。

有意識(shí)的將界面當(dāng)中的干擾元素移除，勢(shì)必會(huì)導(dǎo)致負(fù)空間比例的增大。

留白(負(fù)空間)曾被認(rèn)為是最小化界面的同義詞，很多設(shè)計(jì)師將留白作為一種引導(dǎo)用戶關(guān)注重要內(nèi)容的手段，幫助他們更好的理解信息結(jié)構(gòu)。

留白并非空無(wú)一物，比例得當(dāng)?shù)呢?fù)空間除了可以為界面賦予呼吸感以外，確實(shí)還能起到有效的引導(dǎo)作用。在考慮留白的使用時(shí)，要關(guān)注以下幾方面的問(wèn)題：

增加或減少留白之后，界面信息層級(jí)的展現(xiàn)方式是否會(huì)受到影響?

留白的使用是否會(huì)影響到界面上方信息的展示?雖然備受爭(zhēng)議，但“折線以上”的原則在很多界面環(huán)境中依然適用，用戶在進(jìn)行交互行為之前最容易關(guān)注到的仍然是首屏區(qū)域當(dāng)中的內(nèi)容，不要讓留白對(duì)這里的重要信息產(chǎn)生破壞作用。

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

留白的比例是否需要根據(jù)不同的瀏覽環(huán)境進(jìn)行響應(yīng)式的調(diào)整?

夸張的字體運(yùn)用

使用在75%的樣本界面當(dāng)中。

和字色相仿，當(dāng)界面里僅有為數(shù)不多的元素時(shí)，加粗加大的字體也能成為溝通重要信息的手段。恰當(dāng)有效的字體運(yùn)用不但可以使最小化風(fēng)格的界面更具視覺吸引力，而且可以彌補(bǔ)其他類型元素的匱乏所導(dǎo)致的視覺失衡問(wèn)題。字號(hào)、粗細(xì)、字形風(fēng)格等等的變化搭配對(duì)于幫助用戶在最小化界面中理解信息層次也起著重要的作用。在我們研究的112個(gè)樣本當(dāng)中，75%的界面通過(guò)夸張的字體運(yùn)用方式來(lái)傳達(dá)信息，制造視覺張力。

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

必須記住，只有在能夠傳達(dá)特定信息的情況下，夸張的字體運(yùn)用方式才有意義，不要單純?yōu)榱艘曈X效果而使用。過(guò)度風(fēng)格化的字體有很大的風(fēng)險(xiǎn)性，根據(jù)我們過(guò)去的研究，用戶很容易忽略掉那些看上去過(guò)于花里胡哨的文字，因?yàn)樘駨V告了。你的字體運(yùn)用方式能否準(zhǔn)確的體現(xiàn)設(shè)計(jì)意圖?最終結(jié)果是否反而造成了混亂和干擾?優(yōu)秀的設(shè)計(jì)師應(yīng)該有能力在這兩者之間找到恰當(dāng)?shù)钠胶恻c(diǎn)。如果你無(wú)法確定，盡量向最安全最穩(wěn)妥的一邊靠攏。

其他組成要素

以下這些設(shè)計(jì)要素也是很多設(shè)計(jì)師樂(lè)于運(yùn)用的。不過(guò)由于它們?cè)跇颖井?dāng)中的使用比例相對(duì)較低，所以我們不會(huì)將其定義為最小化界面設(shè)計(jì)的基本組成要素。

全屏背景圖片或視頻

使用在57%的樣本界面當(dāng)中。

理論上講，全屏背景圖片與最小化設(shè)計(jì)理念當(dāng)中“移除一切不相關(guān)要素，只保留必要信息”的原則是相沖突的，不過(guò)在實(shí)際當(dāng)中，這種設(shè)計(jì)模式的主流化程度還是有目共睹的;在我們的研究樣本當(dāng)中，采用了這種模式的界面約占57%。

全屏背景圖片/視頻是否有利于用戶對(duì)品牌產(chǎn)生正確認(rèn)知，這一點(diǎn)還取決于具體的產(chǎn)品環(huán)境以及設(shè)計(jì)師的設(shè)計(jì)意圖。要策略性的選擇背景圖片或視頻，而不是盲目的模仿或隨意使用素材;在此基礎(chǔ)上，遵循最小化設(shè)計(jì)的理念，防止多余的界面元素與大背景所傳達(dá)的信息產(chǎn)生沖突。不過(guò)在實(shí)際當(dāng)中，有很多設(shè)計(jì)師的思路卻是通過(guò)巨大而夸張的背景元素來(lái)彌補(bǔ)過(guò)于簡(jiǎn)化的風(fēng)格所帶來(lái)的枯燥與單調(diào)。

在使用全屏背景圖片或視頻時(shí)，考慮以下幾點(diǎn)：

確保你所選用的圖片或視頻是有實(shí)際意義的，例如幫助用戶一目了然的對(duì)產(chǎn)品產(chǎn)生直觀認(rèn)知。如果做不到這一點(diǎn)，它們只會(huì)成為界面當(dāng)中體型巨大的干擾元素。

確保背景之上的文字內(nèi)容可讀、易讀?？勺x是指至少保證用戶能夠辨識(shí)字母、單詞、語(yǔ)句;易讀是指輕松順暢的辨識(shí)和處理這些內(nèi)容。如果你使用視頻做背景，那么要在所有典型分辨率下測(cè)試每一幀圖像對(duì)文字內(nèi)容的可讀、易讀性是否產(chǎn)生了嚴(yán)重的負(fù)面影響。

考量大幅背景素材對(duì)于界面性能的影響。要采用必要的自適應(yīng)技術(shù)，確保界面在移動(dòng)設(shè)備上加載時(shí)不需要使用桌面尺寸和精度的超大素材。

對(duì)于自動(dòng)播放要謹(jǐn)慎。很多用戶非常厭惡自動(dòng)播放的視頻，尤其是同時(shí)帶有音頻的。

不要將背景視頻當(dāng)作哈利波特電影那樣去制作，動(dòng)來(lái)動(dòng)去的炫目的內(nèi)容只會(huì)干擾用戶的注意力。

網(wǎng)格布局

使用在43%的樣本界面當(dāng)中。

43%的比例可以代表一定的流行程度，但也可以說(shuō)明這種設(shè)計(jì)方式不是很典型的最小化設(shè)計(jì)組成要素。

在最小化界面當(dāng)中，網(wǎng)格布局的使用通常出于兩方面的原因：

無(wú)需額外的視覺元素進(jìn)行輔助，網(wǎng)格布局能夠很好的將界面當(dāng)中一系列同質(zhì)內(nèi)容組織起來(lái)。

網(wǎng)格布局對(duì)于響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)很有幫助。

圓形的圖形元素

使用在16%的樣本界面當(dāng)中。

很多設(shè)計(jì)師認(rèn)為圓形元素是一種典型的最小化界面設(shè)計(jì)組成要素，不過(guò)在我們的研究當(dāng)中，只有16%的樣本有用到。

默認(rèn)隱藏的全局導(dǎo)航

使用在13%的樣本界面當(dāng)中。

如今很多網(wǎng)站會(huì)默認(rèn)隱藏全局導(dǎo)航，即便是在桌面設(shè)備上瀏覽的時(shí)候;漢堡包圖標(biāo)也越來(lái)越多的出現(xiàn)在網(wǎng)頁(yè)當(dāng)中。實(shí)際上，這可以說(shuō)是對(duì)“移動(dòng)優(yōu)先”設(shè)計(jì)思路理解不全面或是貫徹不全面所導(dǎo)致的直接結(jié)果 – 設(shè)計(jì)師認(rèn)同了在移動(dòng)設(shè)備小屏幕上隱藏導(dǎo)航換取顯示空間的合理性，但是忽略了在平板或桌面設(shè)備充裕的顯示環(huán)境當(dāng)中一目了然的向用戶呈現(xiàn)導(dǎo)航結(jié)構(gòu)的重要性 – 換個(gè)角度說(shuō)，這也是典型的過(guò)度簡(jiǎn)化設(shè)計(jì)。

退一步說(shuō)，在某些情況下，隱藏一些非高頻功能入口或許符合你的簡(jiǎn)化目標(biāo)，但必須確保那些對(duì)于用戶完成核心任務(wù)起到關(guān)鍵作用的信息或功能默認(rèn)呈現(xiàn)出來(lái)。

最小化設(shè)計(jì)要素歸納

在對(duì)112個(gè)網(wǎng)站界面進(jìn)行研究之后，我們總結(jié)出了如前文所述的若干最小化設(shè)計(jì)組成要素，其中包括5個(gè)典型組成要素：

扁平化的材質(zhì)

少量配色或單色方案

功能與界面元素的約束

超大的留白比例

夸張的字體運(yùn)用

其中某些要素出現(xiàn)在了幾乎所有的研究樣本當(dāng)中;使用頻率最低的也超過(guò)了75%。此外，我們還總結(jié)出了一些使用頻率相對(duì)較低，但仍與最小化風(fēng)格高度相關(guān)的設(shè)計(jì)方式：

全屏背景圖片或視頻

網(wǎng)格布局

圓形的圖形元素

默認(rèn)隱藏的全局導(dǎo)航

小結(jié)

2000年前后的界面設(shè)計(jì)領(lǐng)域由混亂與聒噪所統(tǒng)治。多年來(lái)，我們逐漸學(xué)會(huì)了與之進(jìn)行對(duì)抗。臃腫的功能和無(wú)意義的內(nèi)容對(duì)于用戶及產(chǎn)品自身都是極大的傷害。

理論上講，最小化設(shè)計(jì)思想可以幫助我們遠(yuǎn)離曾經(jīng)的混亂局面，打造出更加平滑自然的人機(jī)互動(dòng)流程。不過(guò)現(xiàn)實(shí)當(dāng)中的情況并非那么理想，很多設(shè)計(jì)師僅從形式上拷貝著各種流行的最小化設(shè)計(jì)要素，卻忽略了特定的產(chǎn)品目標(biāo)以及不恰當(dāng)?shù)脑O(shè)計(jì)方式所導(dǎo)致的各種可用性陷阱。

從形式上看，扁平化設(shè)計(jì)是對(duì)擬物風(fēng)格的反擊，最小化設(shè)計(jì)是對(duì)過(guò)度設(shè)計(jì)的反擊。無(wú)論如何，我們都強(qiáng)烈建議各位設(shè)計(jì)師避免非此即彼、非黑即白的思維模式，真正去了解每種設(shè)計(jì)思想的特性，根據(jù)產(chǎn)品的實(shí)際情況尋求恰當(dāng)?shù)钠胶恻c(diǎn)。只有在真正符合產(chǎn)品目標(biāo)及用戶需求的情況下，特定的設(shè)計(jì)思想才能真正成為有利的設(shè)計(jì)武器 – 為了最小化而最小化，對(duì)產(chǎn)品和用戶都無(wú)益。