扁平化(huà)設計美(měi)學的(de)探討(tǎo)-行業新聞-秦皇島百圖網絡科技有限公司

“扁平化(huà)設計”的(de)使用(yòng)正逐漸成爲網頁和(hé)UI設計近期的(de)大(dà)趨勢，同時(shí)也(yě)是時(shí)下(xià)的(de)一個(gè)熱(rè)門話(huà)題，各種探討(tǎo)和(hé)學習(xí)研究紛至沓來(lái)
在本篇文章(zhāng)中，我将與大(dà)家探討(tǎo)什(shén)麽是扁平化(huà)設計，并審視其他(tā)設計師對(duì)扁平化(huà)設計的(de)看法，然後爲大(dà)家提供一些能用(yòng)于自己設計工作的(de)小建議(yì)。

什(shén)麽是扁平化(huà)設計？

從實踐角度說，扁平化(huà)設計就是指不采用(yòng)近幾年流行的(de)漸變、像素完美(měi)陰影(yǐng)和(hé)拟物(wù)化(huà)方法（在後面的(de)部分(fēn)會詳細介紹）實現“扁平化(huà)”的(de)界面。

Layervault的(de)Allen Grinshtein也(yě)許算(suàn)得(de)上是“扁平化(huà)設計”一詞的(de)始作俑者。他(tā)曾在HackerNews上大(dà)爲流行的(de)一篇文章(zhāng)中說道：
“Web端上廣受喜愛(ài)的(de)産品都有著(zhe)相似的(de)設計審美(měi)，它們的(de)斜面、插入陰影(yǐng)和(hé)投影(yǐng)都大(dà)緻相同。對(duì)于設計師，達到這(zhè)種讓人(rén)“垂涎”的(de)界面水(shuǐ)平也(yě)許值得(de)驕傲。但是對(duì)我們，以及作爲少數存在的(de)UI設計師來(lái)說，這(zhè)就大(dà)錯特錯了(le)。”
~ Allan Grinshtein (Layervault)
以Layervault爲例，其設計的(de)美(měi)妙之處在于簡約，并且摒棄了(le)我們作爲設計師拼命想達到的(de)很多(duō)額外的(de)設計細節。我們當下(xià)奉爲UI設計潮流，并廣爲使用(yòng)的(de)各種漸變和(hé)風格正在潛移默化(huà)的(de)發生著(zhe)改變，而對(duì)這(zhè)一潮流的(de)學習(xí)和(hé)研究将充滿著(zhe)趣味。

扁平化(huà)設計範例

在Squarespace的(de)新版本中，設計師選用(yòng)了(le)一套近乎完全扁平化(huà)的(de)界面。想來(lái)他(tā)們一定在線框圖和(hé)UI上花費了(le)大(dà)量的(de)時(shí)間，盡管設計過程如此複雜(zá)，但導航卻十分(fēn)簡單。

我自己雖然從來(lái)沒用(yòng)過LayerVault，但根據我的(de)觀察，其最新的(de)扁平化(huà)UI很簡單易用(yòng)。

抵制拟物(wù)化(huà)

正如20世紀建築界的(de)極簡主義運動強烈抵制先前幾個(gè)世紀的(de)建築裝飾主義一樣，扁平化(huà)設計審美(měi)也(yě)可(kě)能成爲對(duì)多(duō)年來(lái)網站和(hé)界面過度設計或過渡修飾的(de)抵制運動。其中最常見的(de)一個(gè)例子，就是Apple近年來(lái)飽受诟病的(de)過度使用(yòng)拟物(wù)化(huà)。

Apple因在日曆應用(yòng)中過度使用(yòng)皮革材質而備受設計師的(de)批評。

維基百科将拟物(wù)化(huà)定義爲：

對(duì)原産品設計中因功能性而存在的(de)設計要素進行模仿，并使之成爲新設計中裝飾性元素的(de)一種産品設計元素。
舉例來(lái)說，我們經常對(duì)用(yòng)做(zuò)按鈕的(de)元素應用(yòng)漸變和(hé)投影(yǐng)效果，因爲真實世界中的(de)按鈕就具有這(zhè)些屬性，但在計算(suàn)機用(yòng)戶界面環境中實際上這(zhè)些屬性并非必要。
在日曆應用(yòng)上使用(yòng)皮革材質是否真的(de)必要？同樣，對(duì)按鈕應用(yòng)漸變和(hé)3d邊緣是否真的(de)必要？難道不這(zhè)樣用(yòng)戶就不知道去點按鈕了(le)嗎？裝飾到什(shén)麽程度算(suàn)是必要？沒有裝飾就不行了(le)嗎？
因此，扁平化(huà)設計完全可(kě)以成爲對(duì)界面設計濫用(yòng)裝飾的(de)抵制，正如極簡主義抵制過去華而不實的(de)豪華建築風格。

功能決定形式，擁抱扁平化(huà)

20世紀建築界的(de)極簡主義運動還(hái)産生了(le)一些我們至今仍津津樂(yuè)道的(de)設計名言，例如“功能決定形式”、“少即是多(duō)”等等。同樣，雕塑家米開朗基羅在談到自己如何塑造其标志性的(de)大(dà)衛像時(shí)，也(yě)有一句名言讓我大(dà)愛(ài)：
“很簡單。隻要去掉看起來(lái)不像大(dà)衛的(de)石頭就行了(le)。”
~ Michaelangelo
具體運用(yòng)到用(yòng)戶界面設計中，這(zhè)通(tōng)常就是說要去掉讓界面貼近真實生活的(de)内容。37signals的(de)團隊因在其産品（如Basecamp）中運用(yòng)這(zhè)一原則而名聲大(dà)振（而且大(dà)獲成功）。在扁平化(huà)設計界，“少即是多(duō)”是絕對(duì)的(de)真理(lǐ)。爲了(le)表現出扁平化(huà)設計的(de)美(měi)感，設計師必須注重于對(duì)象的(de)功能，而不是外觀。這(zhè)是關鍵，也(yě)是線框圖對(duì)設計流程如此重要的(de)原因所在。

審美(měi)因人(rén)而異

在寫這(zhè)篇文章(zhāng)前的(de)調研過程中，我幾乎沒找到任何科學論斷來(lái)支持屏幕上的(de)按鈕越真實就越顯得(de)“可(kě)點”這(zhè)一說法。雖然有很多(duō)證據爲對(duì)比、顔色理(lǐ)論和(hé)層級理(lǐ)論提供支持，但我敢肯定的(de)說，一個(gè)扁平化(huà)的(de)橙色按鈕和(hé)一個(gè)斜面橙色按鈕放到恰當的(de)背景下(xià)效果完全不會有差别。下(xià)面是一些其他(tā)設計師的(de)看法：
“這(zhè)就跟T台的(de)流行趨勢一樣——流行起來(lái)大(dà)家就都跟風，但是作爲一名設計師，你恰恰需要避免這(zhè)個(gè)。”
~ Cemre Güngör (Branch)
“說拟物(wù)化(huà)設計差勁，就像說紫色很醜或者橢圓不适合web應用(yòng)一樣，完全沒意義的(de)話(huà)。”
~ Sacha Greif
“爲什(shén)麽要在沒有證據的(de)情況下(xià)大(dà)肆宣傳某個(gè)設計美(měi)學優于其他(tā)美(měi)學？難道說爲了(le)提高(gāo)美(měi)觀就可(kě)以降低使用(yòng)性嗎？”
~ Geoff Stearns (formerly YouTube)
好設計就是好設計，跟審美(měi)無關
那麽，如果斜面、漸變和(hé)陰影(yǐng)隻是因人(rén)而異的(de)東西，到底什(shén)麽才是一項好的(de)設計呢(ne)？不論你是否要用(yòng)扁平化(huà)的(de)審美(měi)，用(yòng)戶界面的(de)關鍵都在于規劃。我想扁平化(huà)的(de)設計能夠讓人(rén)更加輕松的(de)識别出一項好的(de)設計，因爲在設計與功能之間雜(zá)七雜(zá)八的(de)東西更少。

下(xià)面是一些不錯的(de)用(yòng)戶界面設計建議(yì)：

一緻性

使用(yòng)通(tōng)用(yòng)的(de)UI元素和(hé)樣式可(kě)以幫助用(yòng)戶減少對(duì)産品的(de)困惑，從而讓應用(yòng)的(de)使用(yòng)更加簡單。

對(duì)比

可(kě)點擊的(de)元素應該與不可(kě)點擊的(de)元素形成對(duì)比。例如可(kě)以使用(yòng)顔色、大(dà)小、位置和(hé)樣式等方法進行對(duì)比。

布局

使用(yòng)基于960g布局的(de)網格是爲你的(de)設計界定某些視覺指導原則的(de)好方法。你的(de)眼睛會自然地跟随内容所建立起的(de)線條和(hé)比率移動，因此，了(le)解和(hé)使用(yòng)網格是強化(huà)視覺平衡的(de)好方法。

層級

我更傾向于把這(zhè)一點看作是“用(yòng)戶操作”。關于這(zhè)一點我有一肚子話(huà)可(kě)說，總之，把最常見的(de)用(yòng)戶操作（有時(shí)也(yě)稱爲用(yòng)例）放在顯眼位置同時(shí)把不常見的(de)操作隐藏起來(lái)是簡化(huà)界面，讓産品更加易用(yòng)的(de)絕佳方法。重要的(de)東西要顯眼，這(zhè)是一條通(tōng)用(yòng)的(de)規則。
“根據我的(de)經驗，扁平化(huà)還(hái)是“現實化(huà)”并不重要。重要的(de)是讓用(yòng)戶一眼就能看明(míng)白應用(yòng)的(de)層級，并能夠輕松找到下(xià)一個(gè)可(kě)以操作的(de)對(duì)象。”
~ Caroline Keem (writer)

目标受衆

不同的(de)目标受衆會傾向于不同的(de)審美(měi)風格。例如，建築師、設計師和(hé)關注時(shí)尚的(de)受衆可(kě)能會簇擁扁平化(huà)設計，而孩子、小醜等其他(tā)人(rén)可(kě)能喜歡比較好玩的(de)材質和(hé)顔色。

反饋

在進行點擊時(shí)，快(kuài)速、明(míng)确的(de)反饋很重要。動畫(huà)通(tōng)常是提供視覺反饋的(de)好方法。例如，在點擊某個(gè)對(duì)象後旋轉加載圖标。有關于反饋我要說的(de)另外一點是，需要在恰當的(de)時(shí)機提供吸引人(rén)并且内容翔實的(de)幫助和(hé)狀态信息。

減少阻力

一般來(lái)說，減少用(yòng)戶實現某項目标期間的(de)操作步驟可(kě)以打造更加流暢的(de)體驗。任何打斷或額外的(de)步驟都會降低産品的(de)用(yòng)戶轉化(huà)率。

鼓勵探索

在用(yòng)戶結束對(duì)界面的(de)最基本使用(yòng)後，應該在他(tā)們進一步探索後給他(tā)們展現其預期的(de)效果作爲其自主探索的(de)獎勵。

線框圖

如果你想打造一套有效的(de)扁平化(huà)設計，那麽我還(hái)想再強調一次線框圖和(hé)規劃的(de)重要性。确定最常見的(de)用(yòng)例，寫下(xià)來(lái)，然後反複修改線框圖直到一切完美(měi)。我個(gè)人(rén)喜歡在紙上做(zuò)，但是現在也(yě)有很多(duō)不錯的(de)線框圖工具。
“扁平化(huà)設計有著(zhe)自己的(de)位置，但是也(yě)不要忘記其隻不過是衆多(duō)設計美(měi)學中的(de)一種。光(guāng)澤化(huà)設計、扁平化(huà)設計、啞光(guāng)設計、木(mù)質感設計等等，都隻是放置在優秀信息結構和(hé)交互設計之上的(de)樣式而已。

内容源于網絡，如有侵權或違規我們會盡快(kuài)整改