毫無疑問，扁平化是當(dāng)今設(shè)計界最火的設(shè)計趨勢。

　　表面上看，扁平化設(shè)計很簡單：

　　1、不要使用漸變、陰影和紋理。

　　2、使用簡單的形狀，大膽的色彩和清晰的排版。

　　我相信有一些優(yōu)秀的扁平化設(shè)計犧牲了可用性和一些更優(yōu)的設(shè)計方案，例如為了美感的呈現(xiàn)而犧牲了一致性——這就是我將要重點討論的內(nèi)容。但是首先，我想要在一定的歷史背景上討論扁平化設(shè)計。

1、扁平化設(shè)計的起源

　　“如果設(shè)計師認為他的設(shè)計很好，那并不是因為沒有什么可添加的，而是沒有什么可減少了?！?/p>

　　——Antoine de Saint-Exupery

　　擬物化設(shè)計(Skeuomorphic Design)

　　扁平化設(shè)計是相對于它的前輩——擬物化設(shè)計而提出的。

　　擬物化的用戶界面設(shè)計看起來就像是真實世界的反饋。

　　例如，下面的UI界面就反映出真實世界中音頻壓縮器的外觀和功能。

　　圖片來源：Klaus G?ttling

　　擬物化設(shè)計起始于20世紀80年代，其初衷是幫助用戶從真實世界向計算機界面平滑過渡。直到最近，作為擬物化設(shè)計最忠實的擁護者，蘋果公司，把這種設(shè)計理念運用在了公司所有用戶界面和界面設(shè)計指南中。

　　例如，老版的Apple Safari圖標(biāo)讓人一看就認出是指南針，相比較新版的扁平化圖標(biāo)而言，它由陰影、漸變和許多精致的美學(xué)設(shè)計細節(jié)組成。

扁平化設(shè)計的目的

　　作為一種設(shè)計方法，扁平化設(shè)計摒棄了所有美學(xué)上的修飾，僅留下(事物的)本質(zhì)特征。

　　在某種程度上，我視“扁平化設(shè)計”為另一種“現(xiàn)代派(modernism)”的稱謂，這種稱謂是那些隨著計算機發(fā)展而成長起來的一代UI設(shè)計師定義的，他們認為擬物化是不必要的。

　　沒有更多的漸變、投影和紋理，僅用漂亮的排版、簡單的圖標(biāo)和形狀、充滿活力的顏色來幫助構(gòu)建視覺層次，并且，最重要的是，更深入地關(guān)注于易用性上。

　　扁平化設(shè)計是由那些要求更高效、界面更友好的理念所推動的。

　　那就是扁平化設(shè)計田園詩歌般的目的，但當(dāng)前的現(xiàn)實與之相差甚遠。

2、扁平化設(shè)計的問題

　　扁平化設(shè)計喜憂參半，出色案例很多，失敗案例也不少。

iOS 7的UI矛盾

　　iOS 7初次登臺之前，謠言四起：隨著喬納森·伊夫(Jonathan Ive)帶領(lǐng)的新一屆領(lǐng)導(dǎo)班子上臺，iOS 7終將摒棄掉擬物化設(shè)計而走向扁平化。

　　它真的做到了。

　　下圖是iOS 7初次發(fā)布時兩種風(fēng)格的對比。

　　擬物化元素都不見了。沒有更多高仿真的圖標(biāo)和木質(zhì)裝飾。

iOS 7怎么了?

　　整體風(fēng)格前后)很矛盾啊。

　　這些圖標(biāo)看起來明顯格格不入，像是由兩個不同團隊設(shè)計出來的(可能正是如此)。

　　一些圖標(biāo)有漸變，另一些沒有。

　　對于那些有漸變的圖標(biāo)，有的漸變的方向是相反的。

　　線條的厚度也不統(tǒng)一。

　　一些圖標(biāo)的符號化特征過于簡單了，且有的是無意義的。例如“游戲中心(Game Center)”圖標(biāo)，是一組有顏色的，玻璃質(zhì)感的圓圈：

　　“游戲中心”圖標(biāo)代表什么意思?這怎么和游戲聯(lián)系起來?如果這個圖標(biāo)后面有它的符號化含義，那這種含義對大部分用戶就太晦澀了，導(dǎo)致其成為了一種“弱化的隱喻”。

　　其他圖標(biāo)的符號化特征又過于復(fù)雜了。例如“雜志(Newsstand)”圖標(biāo)，比起它臨近的圖標(biāo)，顯得太負責(zé)和突出細節(jié)了。

　　不論是否扁平，在創(chuàng)建一個用戶友好的設(shè)計時，一致性是至關(guān)重要的。

3、由于“太扁平”導(dǎo)致的可用性問題

　　好的，讓我們看看沒有漸變、沒有紋理、沒有投影怎么做。

　　讓設(shè)計保持一致性。

　　并且試著讓它看起來很有現(xiàn)代感。

　　就這樣么?小菜一碟啊。

　　但需要考慮的遠比這個多。

　　就像任何優(yōu)秀的UI設(shè)計一樣，好的扁平設(shè)計應(yīng)該把可用性排在首位。

　　扁平化設(shè)計的美感需要和可用性息息相關(guān)，并且如果我們必須要在“有美感”和“對用戶友好”之間二選一，后者應(yīng)該要優(yōu)于前者。

　　在一些采用扁平化設(shè)計的UI界面上，功能性一直被忽視。以Windows 8為例：

　　Windows 8的UI是徹底的扁平化。它大膽的配色和平鋪的“現(xiàn)代UI(Modern UI)”設(shè)計風(fēng)格為Windows品牌邁出新奇和積極的步伐。

　　但它的主要問題就在可用性上。

　　微軟想通過Windows 8為用戶在桌面上營造平板的體驗。

　　但這沒用。

　　Windows的扁平風(fēng)格“Modern UI”(正式稱呼為Metro UI)對那些使用鍵盤和鼠標(biāo)的人并不直觀。根據(jù)Soluto的月度觀察報告，44-60%的Windows 8用戶(包括桌面和平板)更傾向于以前的UI界面而不是“Modern UI”。

　　盡管人們期待扁平化設(shè)計能夠讓事情變得更簡單，許多人仍舊認為以前的UI界面對用戶更友好。

　　Jakob Nielsen對Windows 8進行了可用性測試，并列舉了很多它的UI設(shè)計問題。Nielsen發(fā)現(xiàn)主要問題是操作系統(tǒng)的扁平化設(shè)計讓用戶很難知道某個元素可不可點擊。

　　盡管新的Windows 8圖標(biāo)優(yōu)雅又整潔，他們的可操作性并不高。沒有漸變、投影或是一些讓它們有區(qū)分度的特點，就很難讓用戶知道什么可點什么不可點。

　　有些時候，扁平化設(shè)計會變得太“平”了以至于影響了可用性。

　　如果用戶界面“太平”了，可操作性的元素就會淹沒在一片看起來都一樣的扁平化元素之海中。

　　甚至對于 iOS 7的控制中心，很多人認為它“太平了”。

　　沒有任何良好的視覺提示的話，人們并不知道能和哪個對象交互。

4、解決方案：近平設(shè)計(Almost-Flat Design)?

　　你如何補救由扁平設(shè)計造成的問題?近平設(shè)計(Almost-flat design)。

　　作為一種設(shè)計方法，近平設(shè)計僅僅當(dāng)扁平化風(fēng)格能提升可用性時才采用它。它并不會武斷地認定或暗示漸變和投影是有害的。

　　近平設(shè)計允許利用細微的投影和漸變來營造空間感、距離感、視覺層次感、視覺線索和邊緣效果。

　　Gmail的近平設(shè)計

　　干凈且一致，Gmail近期的UI改版從視覺上看起來簡潔了。很明顯Google的設(shè)計師喜歡扁平化設(shè)計——他們近來一致偏向越來越平的風(fēng)格。

　　但是，但你移動鼠標(biāo)到按鈕上時，你會發(fā)現(xiàn)懸停狀態(tài)在顏色上有輕微的漸變變化并出現(xiàn)一個有用的工具提示。

　　這些微妙的“美學(xué)效果”給用戶一種視覺上的暗示，告訴他該對象很重要，且可操作。

　　用戶馬上意識到Gmail的按鈕可點擊或可輕敲，無需過多的擬物化裝飾。

　　方便地獲取關(guān)鍵界面元素。不需要一次性展示給用戶20個按鈕，因為Gmail的UI聰明地引進了“漸進展開”(progressive disclosure)功能：

扁平化設(shè)計的未來

　　Gmail的界面正是扁平化設(shè)計應(yīng)該有的：

　　對用戶友好

　　一致性

　　簡介干凈

　　iOS 7和Windows 8的扁平化設(shè)計風(fēng)格，經(jīng)常犧牲了可用性和針對扁平化確立的設(shè)計實踐。

　　不過說句公道話，蘋果和微軟都聽得進批評。

　　在iOS 7發(fā)布之前，蘋果收集了一些可用性問題，比如修改“滑動解鎖(slide to unlock)”功能，為其增加向右箭頭，從而為用戶提供更好的視覺線索，并且他們已經(jīng)調(diào)整了Safari和Mail圖標(biāo)的漸變方向，從而讓操作系統(tǒng)的APP圖標(biāo)更有凝聚力。

　　微軟剛剛發(fā)布的Windows 8.1允許用戶完全繞開Modern UI，直接進入桌面版。

　　總之，好的設(shè)計——無論其是否扁平——都應(yīng)該注重通過整潔的視覺交互、有效的設(shè)計和易用的體驗為用戶解決問題。

網(wǎng)站名稱：當(dāng)扁平化設(shè)計陷進了“扁平”的泥潭
文章來源：http://redsoil1982.com.cn/news9/167409.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、虛擬主機、靜態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)