扁平化設計

扁平化設計

扁平化概念的核心意義是:去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉了多餘的透視、紋理、漸變以及能做出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”。

基本信息

優缺點

優點

降低移動設備的硬體需求,延長待機時間;

可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生;

隨著網站和應用程式在許多平台涵蓋了越來越多不同的螢幕尺寸,創建多個螢幕尺寸和解析度的skeuomorphic設計既繁瑣又費時。設計正朝著更加扁平化的設計,你可以一次保證在所有的螢幕尺寸上它會很好看。扁平化設計更簡約,條理清晰,最重要的一點是,更好的適應性。

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效果的元素一概不用。所有的元素的邊界都乾淨俐落,沒有任何羽化、漸變或者陰影。尤其在手機上,因為螢幕的限制,使得這一風格在用戶體驗上更有優勢,更少的按鈕和選項使得界面乾淨整齊,使用起來格外簡單。

強調字型的使用

字型是排版中很重要的一部分,它需要和其他元素相輔相成,想想看,一款花體字在扁平化的界面里得有多突兀。上圖是一些扁平化網站使用無襯線字型的例子,無襯線字型家族龐大分支眾多,其中有些字型會在特殊得情景下會有意想不到得效果。但注意,過猶不及,不要使用那些極為生僻的字型,因為保不齊它就把你帶進坑裡了。

關注色彩

扁平化設計中,配色貌似是最重要的一環,扁平化設計通常採用比其他風格更明亮更炫麗的顏色。同時,扁平化設計中的配色還意味著更多的色調。比如,其他設計最多只包含兩三種主要顏色,但是扁平化設計中會平均使用六到八種顏色。另外還有一些顏色也挺受歡迎,如復古色淺橙、紫色、綠色、藍色等。

簡化的互動設計

設計師要儘量簡化自己的設計方案,避免不必要的元素出現在設計中。簡單的顏色和字型就足夠了,如果你還想添加點什麼,儘量選擇簡單的圖案。扁平化設計尤其對一些做零售的網站幫助巨大,它能很有效的把商品組織起來,以簡單但合理方式排列。

偽扁平化設計

不要以為扁平化只是把立體的設計效果壓扁,事實上,扁平化設計更是功能上的簡化與重組。比如,有些天氣方面的套用會使用溫度計的形式來展示氣溫,或者計算套用仍用計算器的二維形態表現。在套用軟體當中,溫度計的形象則純粹是裝飾性的,而計算器的計算方式也並不是最簡單直接的。相比於擬物化而言,扁平風格的一個優勢就在於它可以更加簡單直接的將信息和事物的工作方式展示出來。

相關詞條

相關搜尋

熱門詞條

聯絡我們