扁平化設計
去除冗餘、厚重和繁雜的裝飾效果
扁平化概念的核心意義是:去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉了多餘的透視、紋理、漸變以及能做出3D效果的元素,這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上,則強調了抽象、極簡和符號化。
例如:Windows、Mac OS、iOS、ANDROID等操作系統的設計已經往“扁平化設計”發展。其設計語言主要有Material Design、Modern UI等。
扁平化的設計,尤其是手機的系統直接體現在:更少的按鈕和選項,這樣使得UI界面變得更加乾淨整齊,使用起來格外簡潔,從而帶給用戶更加良好的操作體驗。因為可以更加簡單直接地將信息和事物的工作方式展示出來,所以可以有效減少認知障礙的產生。
扁平化的設計,在移動系統上不僅界面美觀、簡潔,而且還能達到降低功耗、延長待機時間和提高運算速度的效果。例如,Android 5.0就採用了扁平化的效果,因此被稱為“最絢麗的安卓系統”。
“Flat Design”為“扁平化設計”的英文名,這個概念在2008年由google提出。但圍繞“Flat Design”這個名字則存在著諸多爭議,現在你所看到的這個名稱“Flat Design”也並未被大家所完全認可。
不同的公司團體都嘗試用過其他名稱,例如Minimal Design,Honest Design,而微軟公司甚至稱它作“Athentically Digital”。
降低移動設備的硬體需求,延長待機時間;
可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生;
1、降低移動設備的硬體需求,延長待機時間;
2、可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生;
3、隨著網站和應用程序在許多平台涵蓋了越來越多不同的屏幕尺寸,創建多個屏幕尺寸和解析度的skeuomorphic設計既繁瑣又費時。設計正朝著更加扁平化的設計,你可以一次保證在所有的屏幕尺寸上它會很好看。扁平化設計更簡約,條理清晰,最重要的一點是,更好的適應性。
扁平化反對者認為:
降低用戶體驗,在非移動設備上令人反感;
缺乏直觀,需要一定的學習成本;
傳達的感情不豐富,甚至過於冰冷。
1、降低用戶體驗,在非移動設備上令人反感;
2、缺乏直觀,需要一定的學習成本;
3、傳達的感情不豐富,甚至過於冰冷。
扁平化設計案例
扁平化設計與當下最為覺的擬物化設計形成鮮明對比,Android系統界面曾經均採用擬物化,蘋果iOS系統曾經也採用擬物化,但作為手機領域的風向標的蘋果手機最新推出的iOS使用了扁平化設計,是擬物化基礎上進行的扁平化改造,都有可取之處與詬病,總之都是非常棒的設計美學。而Android的扁平化設計能使得總體視覺與交互變得”溫暖“。
在扁平化設計目前最有力的典範是微軟的Windows以及Windows Phone和Windows RT的Metro界面,不得不說Microsoft不愧為扁平化用戶體驗開拓者,如此大膽的嘗試與實現,不得不讓人佩服。與扁平化設計相比,在目前也可以說之前最為流行的是skeuomorphic設計,最為典型的就是蘋果iOS系統中擬物化的設計,讓我們感覺到虛擬物與實物的接近程度,iOS、安卓也已在向扁平化改變。
我們發現在Win8 Metro界面中,使用了完全的扁平化設計;在蘋果產品及iOS系統中,看到了部分扁平化設計影子,在Google中,我們也同樣看到了准扁平化設計模式,並且在Google中我們體驗良好,而在Win8 metro中受到的評論並非這麼樂觀,所以不管是屬於什麼設計,設計的美在於是否適合,我不敢說扁平化設計就比誰好,這種非黑即白的理論並不適合。
越來越多的網站設計已在UI上走扁平式設計的路線。談到設計,無論是一個網站還是一個應用程序,扁平化和極簡的設計正在成為新的趨勢。人們正在原來一直很受歡迎的skeuomorphism設計(模仿實物紋理),蘋果推出iOS時許多設計師都採用它。
但隨著網站和應用程序在許多平台涵蓋了越來越多不同的屏幕尺寸,網站設計正朝著更加扁平化的設計,你可以一次保證在所有的屏幕尺寸上它會很好看。
對於設計師來說,如果你觀察微軟的Windows Phone的平台,你可能會發現一個特別的現象:那就是難看的應用不多,但令人印象深刻的應用也不多。應用很有統一感,但是很難張揚個性,以至於有的開發者感嘆,它們看起來都是一個樣子。設計師Johnny Holland將Metro語言比作是包豪斯風格,並且指出,“因為去除了裝飾,使得個性化的空間很小”,這可能給人以“缺乏生命力”的感覺,所以要想設計做出好的扁平化設計,也是非常需要技巧的。
簡單的設計元素
扁平化完全屬於二次元世界,一個簡單的形狀加沒有景深的平面,不叫扁平化都浪費這個詞了。這個概念最核心的地方就是放棄一切裝飾效果,諸如陰影、透視、紋理、漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都乾淨俐落,沒有任何羽化、漸變或者陰影。尤其在手機上,因為屏幕的限制,使得這一風格在用戶體驗上更有優勢,更少的按鈕和選項使得界面乾淨整齊,使用起來格外簡單。
強調字體的使用
字體是排版中很重要的一部分,它需要和其他元素相輔相成,想想看,一款花體字在扁平化的界面里得有多突兀。上圖是一些扁平化網站使用無襯線字體的例子,無襯線字體家族龐大分支眾多,其中有些字體會在特殊得情景下會有意想不到得效果。但注意,過猶不及,不要使用那些極為生僻的字體,因為保不齊它就把你帶進坑裡了。
關注色彩
扁平化設計中,配色貌似是最重要的一環,扁平化設計通常採用比其他風格更明亮更炫麗的顏色。同時,扁平化設計中的配色還意味著更多的色調。比如,其他設計最多只包含兩三種主要顏色,但是扁平化設計中會平均使用六到八種顏色。另外還有一些顏色也挺受歡迎,如復古色淺橙、紫色、綠色、藍色等。
簡化的交互設計
設計師要盡量簡化自己的設計方案,避免不必要的元素出現在設計中。簡單的顏色和字體就足夠了,如果你還想添加點什麼,盡量選擇簡單的圖案。扁平化設計尤其對一些做零售的網站幫助巨大,它能很有效的把商品組織起來,以簡單但合理方式排列。
偽扁平化設計