什麼是扁平化設計

扁平化設計可以被看作極簡主義的表弟,不過這位表弟更加精致、復雜、多功能。他可以是很好看的極簡主義,也可以在此基礎上更加的復雜。扁平化設計擺脫瞭復雜的立體效果,從而凸顯瞭視覺元素銳利和清晰。扁平化的概念最核心的地方就是:去掉冗餘的裝飾效果,意思是去掉多餘的透視,紋理,漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。並且在設計元素上強調抽象、極簡、符號化。本質上,扁平化設計有兩個目標:

1、適應越來越多的屏幕尺寸和相應參數,而不是用一些技巧性的設計企圖掩飾。

2、以簡單作為出發點,簡化設計,使網站(包括其他互聯網產品)速度更快,擁有更多功能。

扁平化設計並不意味完全去掉立體效果。比如http://foundation.zurb.com/( 見上圖)這個網站,插圖清晰,有一定的透視 角度和立體效果,非常適合用來表達網站明確的觀點。不過,既然叫扁平化設計,總體的趨勢還是以簡單和最少化為主。比如左側的按鈕是扁扁的帶著小尖角的色塊,而不是明顯的陰影,斜面浮雕,或者是輕易就能看出來的漸變。

極簡的元素

扁平化設計追求的是一切極其的簡潔、簡單,反對使用復雜的、不明確的元素。在設計扁平化風格界面時,特別是在圖標的 設計時,應該遵循極簡原則。復雜的、含義模糊的元素將會造成使用者的困擾,這與扁平化設計風格直觀、簡潔的總原則是 相違背的。隻有采用足夠簡約的設計元素,才能達到最好的展示效果。

貼切的圖標 在設計圖標時,必須使用與所對應功能緊密關聯的圖標元素,並且這個元素應是通用的、廣為人知的,基本不受地域、種族文化、語言等因素影響。絕對禁止使用一些定義模糊,寓意不清的元素,或者某些行業特有的,某些領域專用的元素。比如在下面這張圖中,如果設計師要表達的是“分享”這一功能,那麼顯然右側的圖標更具有通用性:

更多的圓角

在產品設計中,設計師經常會采用圓角設計,以防止在產品使用過程中對使用者造成傷害,這種人性化的設計深受使用者的。

歡迎。同樣的道理,在用戶界面設計過程中,使用一些圓角圖案,不但會使設計更具親和力,也會讓使用者更容易接受設計者的設計意圖。這也符合大眾追求圓潤、圓滿的心理需求,下面的圖例就可以充分表明這一情況:

中性之美 在扁平化設計中,色彩的應用極為重要。由於拋棄瞭擬物化設計風格的漸變、高光等特效,隻能使用純色塊來進行設計,麼在色彩的搭配和選擇上就極有講究。為瞭能讓使用者舒適的閱讀、使用設計者的作品,不造成眼睛疲勞或者其它不適感, 設計師應盡量選擇中性的顏色。也就是說,要避免使用飽和度過高的純色,比如純紅、純綠、純藍等顏色,因為這些顏色在 展示的時候會非常刺眼,嚴重影響使用者的視覺體驗。同樣可以通過下面的圖片來對比兩者之間的差異:

鮮明的對比 在色彩的應用中,要註意顏色之間的對比,隻有通過鮮明的顏色對比,才能迅速抓住使用者的眼球,讓設計師的意圖表現更加明確。通常的技巧是,通過亮度、色溫、對比色、互補色等等手段來實現顏色的對比,應盡量避免使用參數相近的顏色, 這樣的顏色搭配會使閱讀困難,甚至會造成使用者的極度不適。可以通過下面的這張圖來體會其中的奧妙:

字體的選擇 在扁平化設計風格中,因為追求極致的簡潔,力求最快速、最直觀的表達設計者的意圖,所以在字體的選擇上,也是以簡潔清爽為標準。應采用通用的、筆劃清晰的字體,避免使用字跡不清的字體,比如草書,特殊字體等,也應該避免使用已經不再流通的字體,比如古代甲骨文、篆體字等等(特殊用途除外)。對於中文字體來說,諸如雅黑、幼圓或者細黑等字體都是 不錯的選擇。英文字體也是同樣的道理Helvetica NeUroe LT Pro ,如下圖所示:

善用灰色 黑色、白色和灰色在扁平化設計中至關重要,由於采用瞭大量的色塊,難免給用戶以眼花繚亂的感覺。所以在有的時候,設 計師為瞭突出重點,可減少色塊的使用,而轉由使用一種或者二種主要的顏色來突出主體,其它部門則通過灰色來表達。由於灰色與任何顏色都不沖突,所以在設計時,巧妙的使用灰色,將起到意想不到的效果。正確的使用灰色,將使主體更明確 和突出,更容易被使用者接受。

擬物設計的轉型 對於原有的擬物設計風格,如果要向扁平化設計轉型,那麼隻需要將原來設計風格逐一拋棄,分別去除描邊、陰影、漸變、高光等等特效,讓設計回歸本原,用最簡潔的幾何圖型和最清晰的顏色來表達設計者的靈感。當然扁平化設計雖然有許多的 優點,但也並不是萬能藥,並不是所有場合都適用扁平化設計,設計師要根據情況選擇正確的設計風格,從而達到最佳的設計效果。

註意事項

與任何平面藝術一樣,扁平化設計也非常註重留白的運用,要給使用者充分的呼吸空間。

扁平化設計中的排版設計同樣非常重要,整齊有序、條理清晰的排列將使設計事半功倍。

對擬物化的逆襲 正如20世紀建築界當中的極簡主義運動,扁平化設計風格的逐漸興起也可以被看作是對多年以來過度設計、過度雕琢的界面 風格的逆襲;尤其是最近一段時間,蘋果一直以來的擬物風格被詬病的蠻犀利的。什麼是擬物主義Skeuomorphism? 在設計中,Skeuomorphism(擬物主義) 是指將設計對象的外觀設計成另外一種物品。具體到用戶界面設計,就是模仿真 實世界的實物紋理、光線,質感等,也就是通俗的擬物化設計。當新的理念、工具、應用程序出現時,擬物化設計可以幫助 人們喚起熟悉感,減少使用的學習成本。模仿這一原則在我們身邊到處都有:比如一把看上去是木質的椅子,其實是用塑料 做的。

明顯的能看出來的:計算器,時鐘,日歷等都是真實物品在電子屏幕上的再現。 · 細節中的細節:投影,立體按鈕,帶肌理的背景,甚至秒針的微弱運動都被作為動畫呈現在界面上。 擬物主義的問題: 1、由於過於堅持對實物模仿,而忽視瞭界面交互的特點,擬物主義限制瞭功能和創造力。 2、擬物主義要求精致的立體效果,這會與其他維度較少的設計元素(點、線、面)產生不和諧的感覺。那些擬物化設計很多時候和界面任務沒有任何關系,從而缺少存在的邏輯意義。 3、擬物主義很好看,不過也經常占用界面上寶貴的面積。這些精致細節通常存為圖片,需要用戶不停的去loading,占據瞭大量的加載時間,而最關鍵的是,這些花瞭時間loading出來的效果對功能沒有任何影響,本質上沒有任何意義.4. 擬物主義有一定的排他性,跟其他風格的設計放在一起就覺得非常奇怪。這就限制設計的整體感覺,和元素混搭的組合可能性。

舉個例子,我們通常會為界面當中的按鈕添加漸變和投影效果,因為現實當中的按鈕就是具有這些視覺特征的,即使這些 效果對於界面元素的功能來說沒有任何實際意義。又譬如有些天氣方面的應用會使用溫度計的形式來展示氣溫;在現實世界中, 這種實體的存在是必需的,而在應用軟件當中,溫度計的形象則純粹是裝飾性的。

“在現實生活中,當按鈕被按下時,你可以清楚的感受到它的彈性,但在桌面設備或移動設備的顯示屏上,你無法感覺到 這種物理回饋。看上去是實體的東西卻無法讓人感受到實體本該具有的反饋效應,至少對我來說這是一種很蹩腳的、不符合 預期的體驗。”

形式服務於功能 20世紀建築界的極簡主義運動當中提出瞭一些著名的口號,包括“形式服務於功能(form follows function)”、“ 少即是多(less is more)”等等,直到今天我們依然會談到這些。此外,我個人非常喜歡米開朗基羅在被問到他是怎樣創作 大衛雕像時回答的: “很簡單。我隻要鑿去多餘的石頭,留下有用的。對於界面設計來說,也是同樣的道理;37signals的傢夥們在這方面的本事是有目共睹的。要在實際當中卓有成效的實現扁平 化風格的設計美學,作為設計師,我們本質上最需要關註的是產品功能如何運作,而不僅僅是考慮視覺呈現方面的問題。

赞(0)