隨著電子設(shè)備界面設(shè)計(jì)趨勢(shì)越來(lái)越傾向于扁平化，這也是出于人性化瀏覽的考慮，相信大家都喜歡iOS里很多擬物擬真風(fēng)格的界面，最典型的包括語(yǔ)音備忘錄、iBooks、iPad里的日歷等等，它們的界面讓我們覺(jué)得親切自然，讓我們可以在冰冷的電子設(shè)備當(dāng)中找到現(xiàn)實(shí)生活的真實(shí)感。

下面這些截圖來(lái)自我平常自?shī)首詷?lè)時(shí)會(huì)用到的一些音樂(lè)方面的iOS或OS X應(yīng)用。它們的功能的確非常棒。

之前看到過(guò)一句話(huà)，大意是，Metro風(fēng)格讓人看到未來(lái)，而擬物化則讓人感覺(jué)像是回到家里一樣。說(shuō)的挺不錯(cuò)的；人不可能一直呆在家里，也無(wú)法始終飄逸灑脫的在外面尋求新鮮與未來(lái)感。我喜歡聽(tīng)真人使用真實(shí)樂(lè)器演奏的音樂(lè)，但這不妨礙我偶爾聽(tīng)聽(tīng)電子的東西。

如今，關(guān)于“扁平化”與“擬物化”孰優(yōu)孰劣的爭(zhēng)論在圈子里此起彼伏的。我們總是會(huì)被極簡(jiǎn)設(shè)計(jì)所吸引，所以扁平化的界面設(shè)計(jì)風(fēng)格確實(shí)是優(yōu)化了我們的瀏覽體驗(yàn)。

什么是扁平化設(shè)計(jì)
在青島網(wǎng)站建設(shè)中，“扁平化設(shè)計(jì)”一詞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果，從而打造出一種看上去更“平”的界面。

Layervault的設(shè)計(jì)師Allen Grinshtein曾經(jīng)在HackerNews的一篇文章當(dāng)中說(shuō)：

“長(zhǎng)久以來(lái)，網(wǎng)站的界面風(fēng)格似乎都在遵從著同一種設(shè)計(jì)美學(xué)，大家都在用斜面、漸變、陰影一類(lèi)的效果來(lái)突出界面元素的質(zhì)感。對(duì)于設(shè)計(jì)師們來(lái)說(shuō)，制作這類(lèi)‘可愛(ài)’的元素簡(jiǎn)直變成了行規(guī)甚至是榮譽(yù)。不過(guò)對(duì)于我們，以及為數(shù)不多的其他一些設(shè)計(jì)師來(lái)說(shuō)，這種慣用的方式并非一定正確。”

去Layervault看上幾眼，四處轉(zhuǎn)轉(zhuǎn)，你會(huì)發(fā)現(xiàn)他們所追求的這種于簡(jiǎn)約當(dāng)中體現(xiàn)出的視覺(jué)美感。看到我們一直以來(lái)習(xí)慣了的那些視覺(jué)風(fēng)格正在越來(lái)越多的網(wǎng)站和移動(dòng)應(yīng)用產(chǎn)品中被潛移默化的顛覆著，也是蠻有意思的事情。下面是其他一些例子：

Squarespace

新版的Squarespace幾乎完全采用了扁平化的視覺(jué)風(fēng)格，只在一些細(xì)節(jié)當(dāng)中使用了相對(duì)傳統(tǒng)的方式突出了重要的交互元素。試用一下你就會(huì)發(fā)現(xiàn)，其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復(fù)雜的，但這一切都隱含在簡(jiǎn)約直白的界面背后，你真的可以從中隱約感受到其設(shè)計(jì)團(tuán)隊(duì)付出的心血。

Rdio

Rdio最新版本的網(wǎng)站及產(chǎn)品界面中都采用了很徹底的最小化、扁平化的設(shè)計(jì)風(fēng)格，你很難找到使用了陰影、漸變等效果的界面元素。

Facebook

另外一個(gè)大家所熟悉的例子就是Facebook了。

“Facebook是扁平化界面設(shè)計(jì)的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著這樣的特色，至少我們可以說(shuō)這種設(shè)計(jì)風(fēng)格對(duì)于Facebook來(lái)說(shuō)是完全適用的。” - Ian Storm Taylor(Segment.io)

Nest

我曾經(jīng)作為前端工程師參與過(guò)Nest的網(wǎng)站開(kāi)發(fā)，現(xiàn)在依然記得他們的設(shè)計(jì)師對(duì)扁平風(fēng)格的熱情追求。在他們的網(wǎng)站中，實(shí)際的產(chǎn)品及相關(guān)的應(yīng)用環(huán)境照片作為“真實(shí)”元素融入到扁平風(fēng)格的媒介載體(網(wǎng)站本身)當(dāng)中，虛實(shí)結(jié)合，讓訪問(wèn)者可以很容易的將注意力聚焦在產(chǎn)品上，而不會(huì)被網(wǎng)站界面上的視覺(jué)元素所干擾。

Beforweb
本小站亂入...譯者C7210注

對(duì)擬物化的逆襲
正如20世紀(jì)建筑界當(dāng)中的極簡(jiǎn)主義運(yùn)動(dòng)，扁平化設(shè)計(jì)風(fēng)格的逐漸興起也可以被看作是對(duì)多年以來(lái)過(guò)度設(shè)計(jì)、過(guò)度雕琢的界面風(fēng)格的逆襲；尤其是最近一段時(shí)間，蘋(píng)果一直以來(lái)的擬物風(fēng)格被詬病的蠻犀利的。

Wikipedia對(duì)擬物化(“仿制品”、“Skeuomorph”)的定義是：

原有物件中某些必需的形式在新的設(shè)計(jì)中已不再必要，但新設(shè)計(jì)仍模仿舊有形式，以使新的外觀讓人感覺(jué)熟悉和親切。

舉個(gè)例子，我們通常會(huì)為界面當(dāng)中的按鈕添加漸變和投影效果，因?yàn)楝F(xiàn)實(shí)當(dāng)中的按鈕就是具有這些視覺(jué)特征的，即使這些效果對(duì)于界面元素的功能來(lái)說(shuō)沒(méi)有任何實(shí)際意義。又譬如有些天氣方面的應(yīng)用會(huì)使用溫度計(jì)的形式來(lái)展示氣溫；在現(xiàn)實(shí)世界中，這種實(shí)體的存在是必需的，而在應(yīng)用軟件當(dāng)中，溫度計(jì)的形象則純粹是裝飾性的。

日歷應(yīng)用當(dāng)中皮革質(zhì)地的設(shè)計(jì)元素是必需的嗎？如果按鈕上不使用3D質(zhì)感，用戶(hù)是否還知道它們可以被點(diǎn)擊？有多少裝飾性的元素是真正必要的？

“在現(xiàn)實(shí)生活中，當(dāng)按鈕被按下時(shí)，你可以清楚的感受到它的彈性，但在桌面設(shè)備或移動(dòng)設(shè)備的顯示屏上，你無(wú)法感覺(jué)到這種物理回饋。看上去是實(shí)體的東西卻無(wú)法讓人感受到實(shí)體本該具有的反饋效應(yīng)，至少對(duì)我來(lái)說(shuō)這是一種很蹩腳的、不符合預(yù)期的體驗(yàn)。” - Allan Yu (svpply / eBay)

扁平還是擬物？只是個(gè)選擇的問(wèn)題
至少我沒(méi)有見(jiàn)到任何研究報(bào)告表明擬物風(fēng)格的按鈕會(huì)帶來(lái)更多的點(diǎn)擊量。的確，有足夠多的理論和實(shí)踐結(jié)論可以證明在視覺(jué)上能產(chǎn)生更強(qiáng)對(duì)比效果的交互元素可以更好的引起用戶(hù)的注意，但我相信，在某些上下文環(huán)境中，一個(gè)扁平化的橘色按鈕所帶來(lái)的對(duì)比效應(yīng)會(huì)高于具有凸起質(zhì)感的按鈕。所以，上下文，也就是具體產(chǎn)品的具體界面環(huán)境，是這里的一個(gè)關(guān)鍵要素。我們來(lái)看看其他設(shè)計(jì)師的一些看法：

“這件事和時(shí)裝時(shí)尚有些類(lèi)似。當(dāng)某種風(fēng)格被全面普及之后，作為設(shè)計(jì)師，要想脫穎而出，你就得反其道而行之。” - Cemre Güngör (Branch)

“如果有人告訴你‘擬物化是不好的設(shè)計(jì)’，這就相當(dāng)于在說(shuō)‘紫色是丑陋的顏色’，沒(méi)有任何意義。” - Sacha Greif

“為什么要在沒(méi)有任何實(shí)際證據(jù)的情況下貶低某種設(shè)計(jì)風(fēng)格，同時(shí)抬高另外一種？忽略產(chǎn)品的實(shí)際功能與整體體驗(yàn)而單純追求某種設(shè)計(jì)風(fēng)格，這并不是一件令人興奮和愉悅的事。” - Geoff Steams (YouTube)

相關(guān)閱讀：從iOS到Metro - 重新設(shè)計(jì)應(yīng)用的交互模式

形式服務(wù)于功能
20世紀(jì)建筑界的極簡(jiǎn)主義運(yùn)動(dòng)當(dāng)中提出了一些著名的口號(hào)，包括“形式服務(wù)于功能(form follows function)”、“少即是多(less is more)”等等，直到今天我們依然會(huì)談到這些。此外，我個(gè)人非常喜歡米開(kāi)朗基羅在被問(wèn)到他是怎樣創(chuàng)作大衛(wèi)雕像時(shí)回答的：

“很簡(jiǎn)單。我只要鑿去多余的石頭，留下有用的。”

對(duì)于界面設(shè)計(jì)來(lái)說(shuō)，也是同樣的道理；37signals的家伙們?cè)谶@方面的本事是有目共睹的。要在實(shí)際當(dāng)中卓有成效的實(shí)現(xiàn)扁平化風(fēng)格的設(shè)計(jì)美學(xué)，作為設(shè)計(jì)師，我們本質(zhì)上最需要關(guān)注的是產(chǎn)品功能如何運(yùn)作，而不僅僅是考慮視覺(jué)呈現(xiàn)方面的問(wèn)題。

設(shè)計(jì)的好壞不是“美學(xué)”可以決定的
對(duì)設(shè)計(jì)風(fēng)格的選取最終還是要取決于具體產(chǎn)品的實(shí)際情況。在我個(gè)人看來(lái)，相比于擬物化而言，扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認(rèn)知障礙的產(chǎn)生。

無(wú)論采用怎樣的風(fēng)格，優(yōu)秀的界面設(shè)計(jì)都需要遵從一些共通的設(shè)計(jì)原則：

一致性
通過(guò)具有一致性的設(shè)計(jì)模式及視覺(jué)風(fēng)格，為用戶(hù)建立起完整一致的心智模型，使產(chǎn)品更加易用，提升整體體驗(yàn)。

對(duì)比
通過(guò)對(duì)配色、尺寸和布局的調(diào)整，使可點(diǎn)擊的界面元素在視覺(jué)上與其他元素形成鮮明的對(duì)比。

布局
可以嘗試使用960gs一類(lèi)的網(wǎng)格布局為界面設(shè)定視覺(jué)規(guī)范，使用戶(hù)的視線(xiàn)可以跟隨內(nèi)容本身所界定出的路徑自然的移動(dòng)，增強(qiáng)界面的視覺(jué)平衡。

層級(jí)化
最重要的東西要比相對(duì)次要的東西更容易被看到。關(guān)于這個(gè)話(huà)題我可以寫(xiě)一整篇文章出來(lái)，簡(jiǎn)單的說(shuō)，就是在界面設(shè)計(jì)中著重突出那些與核心功能與常見(jiàn)用例相關(guān)的交互元素，而將其他操作元素置于次要位置，這可以使界面得到最有針對(duì)性的優(yōu)化和簡(jiǎn)化。

鼓勵(lì)探索
了解目標(biāo)用戶(hù)有可能對(duì)產(chǎn)品進(jìn)行哪些方面的探索。一旦他們習(xí)慣了產(chǎn)品的界面與基礎(chǔ)功能，并開(kāi)始向“高級(jí)用戶(hù)”的階段進(jìn)發(fā)時(shí)，要為他們的探索和學(xué)習(xí)行為進(jìn)行必要的指引與“獎(jiǎng)勵(lì)”回饋。

原型
無(wú)論風(fēng)格如何，界面形式都取決于實(shí)際的功能。好的設(shè)計(jì)方案離不開(kāi)產(chǎn)品前期的規(guī)劃工作，特別是通過(guò)草圖或線(xiàn)框原型進(jìn)行的探索。識(shí)別出最核心的用例需求，使用原型不斷嘗試和驗(yàn)證，為接下來(lái)的界面設(shè)計(jì)工作打下堅(jiān)實(shí)的基礎(chǔ)。

“我個(gè)人的經(jīng)驗(yàn)是，無(wú)論扁平化還是擬物化都沒(méi)什么所謂，最重要的是界面能夠讓用戶(hù)在最短的時(shí)間內(nèi)清楚的識(shí)別出信息和功能的層級(jí)關(guān)系，并且很容易的知道接下來(lái)應(yīng)該做什么。” - Caroline Keem

目標(biāo)用戶(hù)
不同類(lèi)型的用戶(hù)所青睞的青島網(wǎng)站建設(shè)界面風(fēng)格也有所不同。建筑、設(shè)計(jì)、時(shí)尚等領(lǐng)域的用戶(hù)可以更好的擁抱扁平化風(fēng)格，而其他更加“普通”的用戶(hù)則更容易接受相對(duì)傳統(tǒng)的擬物化界面。

反饋
當(dāng)點(diǎn)擊行為發(fā)生時(shí)，要立刻向用戶(hù)提供清晰明確的視覺(jué)反饋。動(dòng)畫(huà)過(guò)渡效果就是一種比較常見(jiàn)的反饋方式，例如在用戶(hù)執(zhí)行操作后，使用旋轉(zhuǎn)圖標(biāo)提示用戶(hù)系統(tǒng)正在進(jìn)行響應(yīng)。

推薦閱讀：為用戶(hù)的成功操作提供正面反饋

降低“摩擦力”
無(wú)論采用怎樣的視覺(jué)風(fēng)格，都要使界面盡量簡(jiǎn)化，減少用戶(hù)完成目標(biāo)所需執(zhí)行的操作，打造更加流暢的交互體驗(yàn)。任何一點(diǎn)障礙或額外的步驟都會(huì)提高操作成本，增加功能的復(fù)雜度，進(jìn)而降低轉(zhuǎn)化率。