蘋果iOS 7將扁平化設計風格推向了一個頂點。目前,扁平化設計是當下最流行的設計風格。不少設計師或許都想要嘗試一下扁平化設計,但卻不知道該要如何開始。這里,我們就為大家搜集了一些扁平化資源,從UI套件到調色工具,再到字體選擇和WP主題,從理論文章再到創意圖庫。我們將為大家呈現出體系化的扁平化資源,一起來看看:

不收藏都不好意思的扁平化設計終極指南
扁平化設計
對于設計師來說,扁平化設計是一種實打實的設計風格,不要花招,不要粉飾。從整體的角度來講,扁平化設計是一種極簡主義美學,附以明亮柔和的色彩,最后配上粗重醒目,而風格又復古的字體。扁平化設計簡化了諸如按鈕、圖標一類的界面元素。
扁平化設計要求盡量避免使用凹凸、陰影、斜角、漸變、材質等裝飾手段。對于那些頁面不多或者用以推廣移動應用的簡單網站來說,扁平化設計非常符合他們的需求,因此廣泛流行。扁平化設計同時也遭到了一些非議,批評者認為這種全面簡化的風格無法更好的引導用戶,用戶界面太過簡單,可能一些用戶無法理解。
大圖片取代了動效。在極簡主義風格的設計中,設計師通常給予內容充足的空間以供傳達,這樣就能夠簡單、直接的講述內容。從扁平化設計中又衍生出幾個不同的小流派:“似扁平化設計”和“長投影設計”就是最近被反復強調的兩個概念。
“似扁平化設計”(Almost Flat Design)是以扁平化設計為基礎,但是添加了一些簡單的效果,比如簡單的投影,基本的漸變。“長投影設計”圖標設計中使用較多,一般是一道45度角的陰影從圖標中延伸而出,最近的圖標設計,大部分都采用“長投影設計”。
扁平化設計強調了極簡主義,提倡功能大于形式。提倡了一種少即是多,留白大于填充的美學。僅僅具有色彩、形狀、線條等基本元素。字體選擇上也務求簡單、基本。
UI Kits
通過UI套件,我們可以初步了解扁平化設計。套件非常的節省時間——可以自由選擇套件中的元素,然后進行自己的實驗。大多數UI套件的格式是PSD,非常易于編輯。下面推薦的UI套件種類不一,從簡單免費的到復雜收費的,扁平化的UI套件可真是越來越多了;這里我們提供了一個推薦列表。
在選擇UI套件時,不要對顏色太較真。大多數的套件都支持改變顏色主題,只需點擊幾下,就能全面修改,這樣就不用一個一個手動修改了。
Featherweight UI (free)
Featherweight UI簡約、支持視網膜(Retina),照片滾動箭頭、按鈕、簡單的圖標,什么都有。大小適中,顏色復古。

圖01
Polaris UI kit (free)
Polaris UI kit (free)由Designmodo出品,黑暗風格,包含了多種按鈕和面板,有點Win8的風格。而且扁平之中帶點擬物風格。

圖02
Erste UI kit (free)
This simple UI kit包含了一些非常實用的基本元素,比如社交網絡登錄按鈕,菜單、媒體播放器,配色非常扁平化。

圖03
FlatUI kit (free)
The kit designed by Freepik.com for WebdesignerDepot 包含了從下拉菜單到導航條再到社交分享工具在內的大量元素。

圖04
Flat UI (free)
free kit from Designmodo 色彩明亮,按鈕,圖標,菜單,什么都有點。

圖05
Flat UI kit (free)
flat user interface widgets饒有趣味的一款套件,圖標、播放器,計算器,任務轉盤。這個套件做出了很好的榜樣,教會我們如何將扁平化設計與復雜的元素相結合。

圖06
Metro UI kit (free)
Metro UI kit多姿多彩,被WP使用,顏色和風格與WP也有所聯系。多彩的區塊,簡單的字體。這款套件包括日歷、狀態欄、圖標、圖表、菜單和搜索欄等元素。

圖07
Monotone flat UI kit (free)
簡約的配色也可以非常出眾。Monotone flat UI kit (free),相比前面幾個,這款套件的用色算是一種進步。

圖08
Vertical Infinity (free)
Vertical Infinity, 適用于視網膜的套件中,內容最為豐富的一款。下拉菜單、窗口、表格、按鈕、社交網絡圖標。什么都有點。正因為基本,所以適用面廣。

圖09
Lil UI kit ($6)
Lil UI kit ($6) 18種元素。這款矢量套件定制化很高,可以用來進行風格簡化、內容一致的設計。

圖10
Flat UI kit ($19)
flat UI kit 圖標,表格,按鈕。元素搭配完美,色彩明亮,適用于簡約風格的手機界面設計。

圖11
Flat UI pro (from $39)
Flat UI Pro is Designmodo出品,適用于Twitter Bootstrap,含有去全套的PSD文件以方便定制。完全響應式設計。

圖12
Flat UI PSD ($5)
Flat UI PSD ($5) 有點“似扁平化設計”的味道,你看按鈕中文本下的陰影,提供了更多的對比感

圖13
Square UI (from $39)
Square UI 應用廣泛,種類齊全,用色非常規。可定制化。支持視網膜。

圖14
扁平化圖標
扁平化設計的圖標無處不在,資源也非常豐富。跟UI套件一樣,大多數的圖標采用PSD格式,這樣可以根據個人情況進行修改。很多圖標的設計非常的具有專業性,專門為某類應用而設計。這種圖標,用來做按鈕也很合適。當選擇圖標下載時,記得尺寸大小選擇要合適。有的是矢量圖形,而有的放大時會損失質量。
40 social media flat icons (free)
40 social media flat icons (free) 用途廣泛,涵蓋了歐美幾乎所有流行的網站,并采用了長投影設計。通過用色和投影上的細微差別,達到了不同圖標之間的高辨識度。每種圖標有4種大小——32,64,128以及256。

圖15
Freebie PSD — flat icons (free)
This simple download包含了一些圖形復雜的扁平化圖標。比大多數的扁平化設計更具細節和風格。但是僅支持PC下載。

圖16
12 flat SEO icons (free)
social media icons非常棒的作品,跟SEO相關 的一些圖標,扁平化+長投影,對于一些機構來說非常合適。

圖17
Free flat icon set (free)
This small icon set用色非常的樸素,對比也比較低的一套圖標。

圖18
Flat file icons (free)
This quad of icon 上傳、下載、設置、圖表。

圖19
Flat icons freebie (free)
Flat icons freebie (free)這套圖標出來之前,扁平化設計中很少采用圓角。

圖20
Flat social media icons (free)
Designmodo's kit 35款社交媒體圖標。色彩選用明亮,且非常貼切。

圖21
PSD flat social icons (free)
This set of 16 social media icons 長投影設計,圖標設計不局限于方形,變化多種多樣。

圖22
IconShock flat icons (from $19)
IconShock flat icons (from $19)可能是最大的圖標系列,3600款圖標,每款3種大小選擇。

圖23
FlatIcons (from $30)
FlatIcons因其簡單而用途廣泛,定制度高。

圖24
其他類扁平化資源
Apple product templates (free)
想在蘋果的設備上展示一下設計作品嗎?試試Apple template from MediaLoot吧!

圖25