扁平化設計注意事項
發表日期:2015-06-09 文章編輯:南昌開優網絡 瀏覽次數:6164 標簽:網頁設計
網頁設計向UI設計轉型的設計師應該注意什么:扁平化設計。UI界面設計經常會提到扁平化設計,那么網頁設計和UI設計的扁平化設計共同點有哪些呢?扁平化設計的兩大特征:
1、不要使用漸變、陰影和紋理。
2、使用簡單的形狀,大膽的色彩和清晰的排版。
相信有一些優秀的扁平化設計犧牲了可用性和一些更優的設計方案,例如為了美感的呈現而犧牲了一致性——這就是我將要重點討論的內容。但是首先,我想要在一定的歷史背景上討論扁平化設計。
一、扁平化設計的起源
“如果設計師認為他的設計很完美,那并不是因為沒有什么可添加的,而是沒有什么可減少了?!薄狝ntoine de Saint-Exupery
扁平化設計是相對于它的前輩——擬物化設計(Skeuomorphic Design)而提出的。 擬物化的用戶界面設計看起來就像是真實世界的反饋。例如,UI界面就反映出真實世界中音頻壓縮器的外觀和功能。
擬物化設計起始于20世紀80年代,其初衷是幫助用戶從真實世界向計算機界面平滑過渡。直到最近,作為擬物化設計最忠實的擁護者,蘋果公司,把這種設計理念運用在了公司所有用戶界面和界面設計指南中。例如,老版的Apple Safari圖標讓人一看就認出是指南針,相比較新版的扁平化圖標而言,它由陰影、漸變和許多精致的美學設計細節組成。
二、扁平化設計的目的
作為一種設計方法,扁平化設計摒棄了所有美學上的修飾,僅留下(事物的)本質特征。在某種程度上,我視“扁平化設計”為另一種“現代派(modernism)”的稱謂,這種稱謂是那些隨著計算機發展而成長起來的一代UI設計師定義的,他們認為擬物化是不必要的。
沒有更多的漸變、投影和紋理,僅用漂亮的排版、簡單的圖標和形狀、充滿活力的顏色來幫助構建視覺層次,并且,最重要的是,更深入地關注于易用性上。扁平化設計是由那些要求更高效、界面更友好的理念所推動的。那就是扁平化設計田園詩歌般的目的,但當前的現實與之相差甚遠。
三、扁平化設計的問題
扁平化設計喜憂參半,出色案例很多,失敗案例也不少。
iOS 7的UI矛盾
iOS 7初次登臺之前,謠言四起:隨著喬納森·伊夫(Jonathan Ive)帶領的新一屆領導班子上臺,iOS 7終將摒棄掉擬物化設計而走向扁平化。
擬物化元素都不見了。沒有更多高仿真的圖標和木質裝飾。iOS 7怎么了?(整體風格前后)很矛盾啊。這些圖標看起來明顯格格不入,像是由兩個不同團隊設計出來的(可能正是如此)。一些圖標有漸變,另一些沒有。
對于那些有漸變的圖標,有的漸變的方向是相反的。
線條的厚度也不統一。一些圖標的符號化特征過于簡單了,且有的是無意義的。例如“游戲中心(Game Center)”圖標,是一組有顏色的,玻璃質感的圓圈:
“游戲中心”圖標代表什么意思?這怎么和游戲聯系起來?如果這個圖標后面有它的符號化含義,那這種含義對大部分用戶就太晦澀了,導致其成為了一種“弱化的隱喻”。
其他圖標的符號化特征又過于復雜了。例如“雜志(Newsstand)”圖標,比起它臨近的圖標,顯得太負責和突出細節了。
不論是否扁平,在創建一個用戶友好的設計時,一致性是至關重要的。
四、由于“太扁平”導致的可用性問題
讓我們看看沒有漸變、沒有紋理、沒有投影怎么做。讓設計保持一致性。并且試著讓它看起來很有現代感。就這樣么?小菜一碟啊。但需要考慮的遠比這個多。就像任何優秀的UI設計一樣,好的扁平設計應該把可用性排在首位。
扁平化設計的美感需要和可用性息息相關,并且如果我們必須要在“有美感”和“對用戶友好”之間二選一,后者應該要優于前者。在一些采用扁平化設計的UI界面上,功能性一直被忽視。
Windows 8的UI是徹底的扁平化。它大膽的配色和平鋪的“現代UI(Modern UI)”設計風格為Windows品牌邁出新奇和積極的步伐。但它的主要問題就在可用性上。微軟想通過Windows 8為用戶在桌面上營造平板的體驗,但這沒用。
Windows的扁平風格“Modern UI”(正式稱呼為Metro UI)對那些使用鍵盤和鼠標的人并不直觀。根據Soluto的月度觀察報告,44-60%的Windows 8用戶(包括桌面和平板)更傾向于以前的UI界面而不是“Modern UI”。盡管人們期待扁平化設計能夠讓事情變得更簡單,許多人仍舊認為以前的UI界面對用戶更友好。
Jakob Nielsen對Windows 8進行了可用性測試,并列舉了很多它的UI設計問題。Nielsen發現主要問題是操作系統的扁平化設計讓用戶很難知道某個元素可不可點擊。
盡管新的Windows 8圖標優雅又整潔,他們的可操作性并不高。沒有漸變、投影或是一些讓它們有區分度的特點,就很難讓用戶知道什么可點什么不可點。有些時候,扁平化設計會變得太“平”了以至于影響了可用性。如果用戶界面“太平”了,可操作性的元素就會淹沒在一片看起來都一樣的扁平化元素之海中。甚至對于 iOS 7的控制中心,很多人認為它“太平了”。
沒有任何良好的視覺提示的話,人們并不知道能和哪個對象交互。
五、解決方案:近平設計(Almost-Flat Design)?
你如何補救由扁平設計造成的問題?近平設計(Almost-flat design)。作為一種設計方法,近平設計僅僅當扁平化風格能提升可用性時才采用它。它并不會武斷地認定或暗示漸變和投影是有害的。近平設計允許利用細微的投影和漸變來營造空間感、距離感、視覺層次感、視覺線索和邊緣效果。
六、Gmail的近平設計
干凈且一致,Gmail近期的UI改版從視覺上看起來簡潔了。很明顯Google的設計師喜歡扁平化設計——他們近來一致偏向越來越平的風格。
但是,但你移動鼠標到按鈕上時,你會發現懸停狀態在顏色上有輕微的漸變變化并出現一個有用的工具提示。
這些微妙的“美學效果”給用戶一種視覺上的暗示,告訴他該對象很重要,且可操作。用戶馬上意識到Gmail的按鈕可點擊或可輕敲,無需過多的擬物化裝飾。方便地獲取關鍵界面元素。不需要一次性展示給用戶20個按鈕,因為Gmail的UI聰明地引進了“漸進展開”(progressive disclosure)功能:
七、扁平化設計的未來
Gmail的界面正是扁平化設計應該有的:
1、對用戶友好
2、一致性
3、簡介干凈
iOS 7和Windows 8的扁平化設計風格,經常犧牲了可用性和針對扁平化確立的設計最佳實踐。不過說句公道話,蘋果和微軟都聽得進批評。
在iOS 7發布之前,蘋果收集了一些可用性問題,比如修改“滑動解鎖(slide to unlock)”功能,為其增加向右箭頭,從而為用戶提供更好的視覺線索,并且他們已經調整了Safari和Mail圖標的漸變方向,從而讓操作系統的APP圖標更有凝聚力。微軟剛剛發布的Windows 8.1允許用戶完全繞開Modern UI,直接進入桌面版。
通過上述于扁平化設計的闡述,相信設計師們已經對其了解了很多。不論是扁平化設計師還是網頁設計師,都要重視設計上的視覺交互性、設計的有效性以及最重要的用戶體驗性,只有做好了這些,設計出好的作品就不是問題。