Remove ads

扁平化設計是一種簡約的UI設計語言,現被廣泛套用於圖形化使用者介面上(例如網絡應用程式手機應用程式),在圖形材料,例如海報,藝術作品,指導文件,各類出版物等方面尤為常用。

Thumb
兩款扁平化互動介面示意圖:一台手提電腦與搭載iOS 7系統的平板電腦
Remove ads

定義和目的

扁平化作為一種互動介面的設計理念,強調對於三維效果圖像元素使用的最小化(其元素也包括陰影漸變紋理[1],亦專注於使用去除了冗餘資訊的圖像元素,排版及純色效果。現在的平面設計師可能更傾向於選擇扁平化的設計風格,這是因為此類設計可以使畫面看起來顯得更為流線型,更加平滑,資訊處理的效率也會更高。其次,這種設計也使人們一眼看上去就知道了介面所傳達的資訊,兼顧了視覺上的親和力和耐看性[2]。與此同時,在不同螢幕尺寸的電子裝置上,扁平化的介面能夠更好地實現畫面尺寸的轉化。正是因為扁平化僅僅使用了簡單的設計元素,所以使用這一設計的網頁會載入得更快,畫面大小的調整也更加輕鬆,在高解像度的螢幕上各種資訊和元素仍然十分醒目。作為一種設計理念,人們經常會將之與仿真設計和富含構思風格進行對比。 [3] [1]

Remove ads

歷史

扁平化設計起初是受到了國際印刷風格(又名:瑞士風格、國際主義平面設計風格[4])、文字用戶介面英語Text-based user interface現代主義,以及包豪斯(Bauhaus)新興風格的影響[1][5][6][7]。當中人們普遍認為國際印刷風格對扁平化設計理念的影響是最為深遠的,上世紀50、60年代的設計風格被認為是扁平化設計的開山鼻祖,但到後來的數碼時代卻又銷聲匿跡了。[8]

2002年,美國微軟公司發佈的Windows媒體中心(Windows Media Center)和2006年發佈的Zune MP3播放器都包含了扁平化設計的元素。Zune的介面設計風格顯得十分簡約,其介面出現了大號的小字型排版,剪影風格的LOGO和純色風格的字型顏色。之後在2010年發佈的Windows Phone 7里,微軟延續了Zune MP3這一設計理念,其中出現了大尺寸、清新明亮的風格、無襯線字型、扁平化的圖示,以及網格狀的清單。Windows Phone 7的介面設計大獲成功、廣受好評,因此微軟公司之後又發佈了基於Metro介面的作業系統Windows 8。這款系統也同樣擁有扁平化的介面。而在網頁互動介面的設計中,純色效果,簡約式的字型、長陰影、和「幽靈按鈕」都是至關重要的設計元素,而其主要的設計則包括網格狀清單,銳邊風格,明亮的色彩和清晰的排版。微軟公司目前已經將旗下的諸多產品轉移到了Metro介面中,包括Xbox 360Microsoft Office微軟公司的各類網站。[1]

2013年美國蘋果公司發佈了iOS 7,其介面首次採用扁平化的設計[9],一改之前舊版本的仿真設計風格。

Remove ads

運用範例

時下常見的扁平化設計的案例包括微軟的Metro介面[10],以及蘋果公司iOS 7的互動介面。

谷歌公司產品介面的質感設計(包括App網頁等)[11]雖然運用到了一些仿真設計的元素,如長陰影,但仍然可以視為一種扁平化的設計。[12][13]

Remove ads

爭議

尼爾森諾曼集團的研究發現,扁平化設計可能導致使用者的導航時間增加達22%[14]

Remove ads

參考資料

外部連結

Remove ads

Wikiwand in your browser!

Seamless Wikipedia browsing. On steroids.

Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.

Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.

Remove ads