您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

當(dāng)扁平化設(shè)計(jì)掉進(jìn)了“扁平”的泥潭

 

扁平化是當(dāng)今設(shè)計(jì)界最火的設(shè)計(jì)趨勢(shì)。

        表面上看,扁平化設(shè)計(jì)很簡(jiǎn)單:

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

        2、使用簡(jiǎn)單的形狀,大膽的色彩和清晰的排版。

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

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

        “如果設(shè)計(jì)師認(rèn)為他的設(shè)計(jì)很完美,那并不是因?yàn)闆]有什么可添加的,而是沒有什么可減少了。”

——Antoine de Saint-Exupery

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

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

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

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

圖片來(lái)源:Klaus Göttling

 

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

 

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

0385-11_skeumorphic_design_example

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

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

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

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

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

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

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

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

iOS 7的UI矛盾

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

它真的做到了。

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

          

圖片來(lái)源:designmodo.com

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

iOS 7怎么了?

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

這些圖標(biāo)看起來(lái)明顯格格不入,像是由兩個(gè)不同團(tuán)隊(duì)設(shè)計(jì)出來(lái)的(可能正是如此)。

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

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

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

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

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

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

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

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

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

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

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

就這樣么?小菜一碟啊。

但需要考慮的遠(yuǎn)比這個(gè)多。

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

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

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

圖片來(lái)源:obiletechworld.com

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

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

微軟想通過Windows 8為用戶在桌面上營(yíng)造平板的體驗(yàn)。

但這沒用。

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

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

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

圖片來(lái)源:ngroup.com

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

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

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

甚至對(duì)于 iOS 7的控制中心,很多人認(rèn)為它“太平了”。

沒有任何良好的視覺提示的話,人們并不知道能和哪個(gè)對(duì)象交互。

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

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

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

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

Gmail的近平設(shè)計(jì)

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

圖片來(lái)源:idownloadblog.com

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

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

用戶馬上意識(shí)到Gmail的按鈕可點(diǎn)擊或可輕敲,無(wú)需過多的擬物化裝飾。

方便地獲取關(guān)鍵界面元素。不需要一次性展示給用戶20個(gè)按鈕,因?yàn)镚mail的UI聰明地引進(jìn)了“漸進(jìn)展開”(progressive disclosure)功能:

扁平化設(shè)計(jì)的未來(lái)

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

  • 對(duì)用戶友好

  • 一致性

  • 簡(jiǎn)介干凈

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

不過說(shuō)句公道話,蘋果和微軟都聽得進(jìn)批評(píng)。

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

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

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

關(guān)聯(lián)內(nèi)容:

 

原文地址:When Flat Design Falls Flat


[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1767.html
網(wǎng)頁(yè)設(shè)計(jì)中視覺層級(jí)的建立
設(shè)計(jì)師們,請(qǐng)為多屏幕多用戶時(shí)代的設(shè)計(jì)做好準(zhǔn)備
圖趣網(wǎng)微信
建議反饋
×