2013可以說(shuō)是扁平化設(shè)計(jì)的一年。
即便是擬物設(shè)計(jì)的引領(lǐng)者蘋果，也不得不轉(zhuǎn)變?cè)O(shè)計(jì)思路，在iOS 7上開(kāi)始著手扁平化設(shè)計(jì)的探索。

你是否落伍了呢？想不想嘗試一下扁平化設(shè)計(jì)？但是又不知道該要怎么開(kāi)始？沒(méi)關(guān)系，WebdesignerDepot將幫助你！我們精心收集了一些扁平化資源，從UI套件到調(diào)色工具，再到字體選擇和WP主題，從理論文章再到創(chuàng)意圖庫(kù)，我們將呈遞給您體系化的扁平化資源！

如果想要試水扁平化設(shè)計(jì)，或者想要更進(jìn)一步，這篇文章都適合您，應(yīng)有盡有。

推薦下載：
35套扁平化風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)UI組件和圖標(biāo)

從天而降的扁平化設(shè)計(jì)

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，扁平化設(shè)計(jì)是一種實(shí)打?qū)嵉脑O(shè)計(jì)風(fēng)格，不要花招，不要粉飾。而扁平化時(shí)代之前，設(shè)計(jì)師的作品往往非常的寫實(shí)，非常的有立體感。從整體的角度來(lái)講，扁平化設(shè)計(jì)是一種極簡(jiǎn)主義美學(xué)，附以明亮柔和的色彩，最后配上粗重醒目，而風(fēng)格又復(fù)古的字體。扁平化設(shè)計(jì)簡(jiǎn)化了諸如按鈕、圖標(biāo)一類的界面元素。

扁平化設(shè)計(jì)要求盡量避免使用凹凸、陰影、斜角、漸變、材質(zhì)等裝飾手段。
對(duì)于那些頁(yè)面不多或者用以推廣移動(dòng)應(yīng)用的簡(jiǎn)單網(wǎng)站來(lái)說(shuō)，扁平化設(shè)計(jì)非常符合他們的需求，因此廣泛流行。扁平化設(shè)計(jì)同時(shí)也遭到了一些非議，批評(píng)者認(rèn)為這種全面簡(jiǎn)化的風(fēng)格無(wú)法更好的引導(dǎo)用戶，用戶界面太過(guò)簡(jiǎn)單，可能一些用戶無(wú)法理解。

大圖片取代了動(dòng)效。在極簡(jiǎn)主義風(fēng)格的設(shè)計(jì)中，設(shè)計(jì)師通常給予內(nèi)容充足的空間以供傳達(dá)，這樣就能夠簡(jiǎn)單、直接的講述內(nèi)容。
從扁平化設(shè)計(jì)中又衍生出幾個(gè)不同的小流派："似扁平化設(shè)計(jì)"和"長(zhǎng)投影設(shè)計(jì)"就是最近被反復(fù)強(qiáng)調(diào)的兩個(gè)概念。

"似扁平化設(shè)計(jì)"(Almost Flat Design)是以扁平化設(shè)計(jì)為基礎(chǔ)，但是添加了一些簡(jiǎn)單的效果，比如簡(jiǎn)單的投影，基本的漸變。
"長(zhǎng)投影設(shè)計(jì)"圖標(biāo)設(shè)計(jì)中使用較多，一般是一道45度角的陰影從圖標(biāo)中延伸而出，最近的圖標(biāo)設(shè)計(jì)，大部分都采用"長(zhǎng)投影設(shè)計(jì)"。

扁平化設(shè)計(jì)強(qiáng)調(diào)了極簡(jiǎn)主義，提倡功能大于形式。提倡了一種少即是多，留白大于填充的美學(xué)。僅僅具有色彩、形狀、線條等基本元素。字體選擇上也務(wù)求簡(jiǎn)單、基本。

UI kits

通過(guò)UI套件，我們可以初步了解扁平化設(shè)計(jì)。
套件非常的節(jié)省時(shí)間——可以自由選擇套件中的元素，然后進(jìn)行自己的實(shí)驗(yàn)。大多數(shù)UI套件的格式是PSD，非常易于編輯。下面推薦的UI套件種類不一，從簡(jiǎn)單免費(fèi)的到復(fù)雜收費(fèi)的，扁平化的UI套件可真是越來(lái)越多了；這里我們提供了一個(gè)推薦列表。

在選擇UI套件時(shí)，不要對(duì)顏色太較真。大多數(shù)的套件都支持改變顏色主題，只需點(diǎn)擊幾下，就能全面修改，這樣就不用一個(gè)一個(gè)手動(dòng)修改了。

Featherweight UI (free)

Featherweight UI簡(jiǎn)約、支持視網(wǎng)膜（Retina)，照片滾動(dòng)箭頭、按鈕、簡(jiǎn)單的圖標(biāo)，什么都有。大小適中，顏色復(fù)古。

Polaris UI kit (free)

Polaris UI kit (free)由Designmodo出品，黑暗風(fēng)格，包含了多種按鈕和面板，有點(diǎn)Win8的風(fēng)格。而且扁平之中帶點(diǎn)擬物風(fēng)格。

Erste UI kit (free)

This simple UI kit包含了一些非常實(shí)用的基本元素，比如社交網(wǎng)絡(luò)登錄按鈕，菜單、媒體播放器，配色非常扁平化。

FlatUI kit (free)

The kit designed by Freepik.com for WebdesignerDepot 包含了從下拉菜單到導(dǎo)航條再到社交分享工具在內(nèi)的大量元素。

Flat UI (free)

free kit from Designmodo 色彩明亮，按鈕，圖標(biāo)，菜單，什么都有點(diǎn)。

Flat UI kit (free)

flat user interface widgets饒有趣味的一款套件，圖標(biāo)、播放器，計(jì)算器，任務(wù)轉(zhuǎn)盤。這個(gè)套件做出了很好的榜樣，教會(huì)我們?nèi)绾螌⒈馄交O(shè)計(jì)與復(fù)雜的元素相結(jié)合。

Metro UI kit (free)

Metro UI kit多姿多彩，被WP使用，顏色和風(fēng)格與WP也有所聯(lián)系。多彩的區(qū)塊，簡(jiǎn)單的字體。這款套件包括日歷、狀態(tài)欄、圖標(biāo)、圖表、菜單和搜索欄等元素。

Monotone flat UI kit (free)

簡(jiǎn)約的配色也可以非常出眾。Monotone flat UI kit (free)，相比前面幾個(gè)，這款套件的用色算是一種進(jìn)步。

Vertical Infinity (free)

Vertical Infinity, 適用于視網(wǎng)膜的套件中，內(nèi)容最為豐富的一款。下拉菜單、窗口、表格、按鈕、社交網(wǎng)絡(luò)圖標(biāo)。什么都有點(diǎn)。正因?yàn)榛?，所以適用面廣。

Lil UI kit ($6)

Lil UI kit ($6) 18種元素。這款矢量套件定制化很高，可以用來(lái)進(jìn)行風(fēng)格簡(jiǎn)化、內(nèi)容一致的設(shè)計(jì)。

Flat UI kit ($19)

flat UI kit 圖標(biāo)，表格，按鈕。元素搭配完美，色彩明亮，適用于簡(jiǎn)約風(fēng)格的手機(jī)界面設(shè)計(jì)。

Flat UI pro (from $39)

Flat UI Pro is Designmodo出品，適用于Twitter Bootstrap，含有去全套的PSD文件以方便定制。完全響應(yīng)式設(shè)計(jì)。

Flat UI PSD ($5)

Flat UI PSD ($5) 有點(diǎn)"似扁平化設(shè)計(jì)"的味道，你看按鈕中文本下的陰影，提供了更多的對(duì)比感。

Square UI (from $39)

Square UI 應(yīng)用廣泛，種類齊全，用色非常規(guī)。可定制化。支持視網(wǎng)膜。

扁平化圖標(biāo)

扁平化設(shè)計(jì)的圖標(biāo)無(wú)處不在，資源也非常豐富。
跟UI套件一樣，大多數(shù)的圖標(biāo)采用PSD格式，這樣可以根據(jù)個(gè)人情況進(jìn)行修改。
很多圖標(biāo)的設(shè)計(jì)非常的具有專業(yè)性，專門為某類應(yīng)用而設(shè)計(jì)。這種圖標(biāo)，用來(lái)做按鈕也很合適。
當(dāng)選擇圖標(biāo)下載時(shí)，記得尺寸大小選擇要合適。有的是矢量圖形，而有的放大時(shí)會(huì)損失質(zhì)量。

40 social media flat icons (free)

40 social media flat icons (free) 用途廣泛，涵蓋了歐美幾乎所有流行的網(wǎng)站，并采用了長(zhǎng)投影設(shè)計(jì)。通過(guò)用色和投影上的細(xì)微差別，達(dá)到了不同圖標(biāo)之間的高辨識(shí)度。每種圖標(biāo)有4種大小——32,64,128以及256。

Freebie PSD — flat icons (free)

This simple download包含了一些圖形復(fù)雜的扁平化圖標(biāo)。比大多數(shù)的扁平化設(shè)計(jì)更具細(xì)節(jié)和風(fēng)格。但是僅支持PC下載。

12 flat SEO icons (free)

social media icons非常棒的作品，跟SEO相關(guān) 的一些圖標(biāo)，扁平化+長(zhǎng)投影，對(duì)于一些機(jī)構(gòu)來(lái)說(shuō)非常合適。

Free flat icon set (free)

This small icon set用色非常的樸素，對(duì)比也比較低的一套圖標(biāo)。

Flat file icons (free)

This quad of icon 上傳、下載、設(shè)置、圖表。

Flat icons freebie (free)

Flat icons freebie (free)這套圖標(biāo)出來(lái)之前，扁平化設(shè)計(jì)中很少采用圓角。

Flat social media icons (free)

Designmodo's kit 35款社交媒體圖標(biāo)。色彩選用明亮，且非常貼切。

PSD flat social icons (free)

This set of 16 social media icons 長(zhǎng)投影設(shè)計(jì)，圖標(biāo)設(shè)計(jì)不局限于方形，變化多種多樣。

IconShock flat icons (from $19)

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

FlatIcons (from $30)

FlatIcons 因其簡(jiǎn)單而用途廣泛，定制度高。

其他類扁平化資源

Apple product templates (free)

想在蘋果的設(shè)備上展示一下設(shè)計(jì)作品嗎？試試Apple template from MediaLoot吧！

E-comerce flat web elements (free)

電商網(wǎng)站中，扁平化設(shè)計(jì)并不多，因此 this kit提供了一些簡(jiǎn)單的元素，來(lái)填補(bǔ)這份空白。

Flat credit cards (free)

credit card icons 在設(shè)計(jì)的時(shí)候要考慮到一切細(xì)節(jié)，小小的信用卡，在網(wǎng)上支付時(shí)非常重要。

Friends list UI (free)

整潔有序的列表， this UI PSD,為iPhone界面設(shè)計(jì)，使用了常用的珊瑚色，以及無(wú)襯線字體。

Radial graph (free)

圖表和曲線圖大概是扁平化設(shè)計(jì)中最難以把握的元素了，讓 radial graph PSD教你吧。

Sign-up form (free)

sign up form適用于預(yù)啟動(dòng)頁(yè)，用其五彩的配色給予用戶熱情的歡迎。

Flat browser frames ($5)

扁平化瀏覽器窗口，This kit 非常適合在其中展示作品

Flat design flyer template ($6)

Flat Design Flyer Template 能夠?qū)⒛愕木W(wǎng)站包裝成適合打印的外觀，CMYK防溢色。

Flavor business card ($6)

Flavor business card template 打造與網(wǎng)站風(fēng)格配套的名片，試試這個(gè)吧。

Pricing tables ($4)

set of monotone tables使用Twitter Bootstrap構(gòu)建，用來(lái)為網(wǎng)站增添價(jià)目表。

WordPress主題

WordPress主題能夠幫助網(wǎng)站迅速的實(shí)現(xiàn)風(fēng)格化，而為建站者節(jié)省了大量的時(shí)間。一般來(lái)說(shuō)，好的主題都要付費(fèi)，現(xiàn)在有很多設(shè)計(jì)師在從事WordPress主題設(shè)計(jì)，如果作品確實(shí)好，付費(fèi)吧。
亂糟糟的頁(yè)面會(huì)讓用戶感覺(jué)你的內(nèi)容低質(zhì)。所以盡量保持頁(yè)面的清爽大方，切風(fēng)格一致。付費(fèi)主題不但好用，且能夠立即使用。建議購(gòu)買前最好列出一個(gè)需求清單，這樣挑選就方便多了。
不過(guò)如果是新手，免費(fèi)主題也是個(gè)不錯(cuò)的選擇，使用免費(fèi)主題建站很簡(jiǎn)單，也很有意思。如果需求更進(jìn)一步，對(duì)于選項(xiàng)、靈活度、支持要求更好，這時(shí)候可以考慮下付費(fèi)版了。

Duena (free)

this theme 明亮、冰激凌般的配色。

Fizz (free)

responsive flat-style theme干凈的線條，明亮的用色。清爽而又略帶材質(zhì)感的背景。

Current (free)

Current 各個(gè)方面都不錯(cuò)，適合用來(lái)推廣新產(chǎn)品。

Attitude (free)

s simple and professional theme 似扁平化設(shè)計(jì)，相較其他免費(fèi)主題，自由度更高。

Bloq (free)

Bloq 扁平化的設(shè)計(jì)，扁平化的用色。

Frontier (free)

This flat theme極簡(jiǎn)主義風(fēng)格的設(shè)計(jì)，可添加菜單和橫幅。

MetroBlog (free)

MetroBlog 區(qū)塊，明色——但也收啊少有一點(diǎn)漸變，因此我認(rèn)為是似扁平化設(shè)計(jì)。

Viper (free)

Viper 適用于電商網(wǎng)站，清爽大氣。

SimpleCorp (free)

this theme 似扁平化設(shè)計(jì)

BirdFlat (free)

flexible blog theme 非常靈活的一套主題。

SympalPress (free)

This free theme簡(jiǎn)單有形，似扁平化的圖標(biāo)，精心選擇的字體。

Tetris (free)

Tetris區(qū)塊式、卡片式布局，完美呈現(xiàn)圖像的視覺(jué)效果。

Argo ($40)

Argo 小方塊布局，無(wú)論是個(gè)人還是商用，都不錯(cuò)。線條清晰，按鈕簡(jiǎn)約。

Business Essentials ($45)

This simple, yet classic theme 很適合商用

Illustrate ($45)

This theme 適用于個(gè)人作品展示。

Modern Metro ($40)

Modern Metro可定制，和Metro UI非常匹配，響應(yīng)式。

Shift ($35)

Shift 可定制，色彩豐富，支持視網(wǎng)膜，響應(yīng)式。

Salmon & Cream ($75)

This theme 線條分明?？啥ㄖ?，響應(yīng)式，支持視網(wǎng)膜。

Candy ($35)

This fully-responsive theme 適用于個(gè)人作品展示。

Alfie ($40)

This theme 使用Bootstrap構(gòu)建，代碼精簡(jiǎn)，提供多種圖標(biāo)、背景色、布局的選擇。

Biggie ($7)

this flat theme 用色是亮點(diǎn)，易于觸控。

Bonbon ($49)

Bonbon 色彩明亮，內(nèi)含的圖標(biāo)很棒，可定化。

Flat ($39)

Flat 柔和色色彩，而不是明亮，這使得這套主題很有個(gè)性。

News ($45)

news卡片式布局，照片+文字即可完成內(nèi)容的傳遞，色彩鮮明，風(fēng)格至簡(jiǎn)。

Coffee & Cream ($40)

Coffee & Cream ($40)可選項(xiàng)豐富，提供兩個(gè)導(dǎo)航選項(xiàng)。完全響應(yīng)式。

Flat Admin ($18)

this flat theme整合了多種表格、圖表，用來(lái)展示數(shù)據(jù)非常不錯(cuò)，可定制。

Sketch ($40)

single-page theme 設(shè)計(jì)的充滿能量感，鼓勵(lì)滾動(dòng)式瀏覽，可定制，內(nèi)含社交網(wǎng)絡(luò)鏈接功能。似扁平化設(shè)計(jì)。

Showy ($35)

Showy（華麗的）一點(diǎn)也不華麗，反而非常簡(jiǎn)單。

Evolux ($45)

Evolux ($45) 用來(lái)展示產(chǎn)品和設(shè)計(jì)非常棒。采用了超大圖、簡(jiǎn)約的風(fēng)格，和粗字體。

Jobify ($55)

Jobify 就業(yè)專用。扁平化風(fēng)格設(shè)計(jì)。具有扁平化的字體、明亮的色彩、精準(zhǔn)的網(wǎng)格線布局、響應(yīng)式設(shè)計(jì)等特性，并可以和其它工作類套件整合。

MetroFolio ($40)

MetroFolio Metro化、卡片化布局，非常易用的用戶界面，可定制化，可以用來(lái)進(jìn)行設(shè)計(jì)師個(gè)人作品展示。

FlatPack ($55)

FlatPack多種模板和選項(xiàng)可供選擇，主要是商用。

Metrolium ($45)

Metrolium ($45) 似扁平化設(shè)計(jì)，色彩塊的使用非常棒?？蓪?shí)時(shí)預(yù)覽，選項(xiàng)豐富。

Flat Portfolio ($35)

Flat Portfolio視網(wǎng)膜顯示下效果很棒。定制化主題，響應(yīng)式設(shè)計(jì)，可使用Google Fonts。

Hypertext ($40)

Hypertext 提供更高級(jí)的管理選項(xiàng)，且完全響應(yīng)式設(shè)計(jì)，定制化高。

Fuse ($45)

Fuse 以滑動(dòng)圖片為設(shè)計(jì)核心，細(xì)節(jié)上采用扁平化設(shè)計(jì)。

Mineral ($45)

Mineral具備靈活的AJAX圖庫(kù)，響應(yīng)式設(shè)計(jì)，多種外觀選擇。

Ink ($49)

Ink 巧妙了使用扁平化設(shè)計(jì)中圖片的布局和色彩的應(yīng)用，懸停動(dòng)效非?？帷?/p>

Amada ($40)

Amada 簡(jiǎn)單線條，簡(jiǎn)單顏色，簡(jiǎn)單的字體，極簡(jiǎn)主義理念由此而生。響應(yīng)式，視網(wǎng)膜顯示支持，滾動(dòng)會(huì)有額外的驚喜。

Glider ($45)

Glider 能幫你解決圖標(biāo)問(wèn)題。960套適量圖標(biāo)，支持多語(yǔ)言。

Hexagonal ($40)

almost flat theme 似扁平化設(shè)計(jì)主題，極簡(jiǎn)主義，看起來(lái)非常的專業(yè)。響應(yīng)式設(shè)計(jì)，提供多種布局選擇。

Emerald ($40)

Emerald 簡(jiǎn)單，令人印象深刻的滾動(dòng)效果。

Kumaon ($40)

Kumaon 適合商用，包含300中扁平化圖標(biāo)和多種多樣的表格。

Anubis ($40)

Anubis 極其有個(gè)性的字體選擇和創(chuàng)造性的色彩。

Red Star ($45)

. The theme 可關(guān)閉的響應(yīng)式設(shè)計(jì)，模版頁(yè)很不錯(cuò)。

Forest ($40)

Forest 該主題看起來(lái)很棒，代碼無(wú)懈可擊。

Panes ($40)

Panes, 使用了扁平化設(shè)計(jì)中很流行的兩種色彩——亮紫以及翡翠綠。單頁(yè)設(shè)計(jì)，整合了谷歌地圖，可自定義顏色和字體?？ㄆ綕L動(dòng)效果。

Nova ($45)

Nova 展示了如何在扁平化設(shè)計(jì)中使用新奇的字體。主題中所有的元素都使用較亮的色彩，簡(jiǎn)單的線條.

Red Sky ($40)

Red Sky 是不像主題的主題。高度注重視覺(jué)效果的布局，響應(yīng)式設(shè)計(jì)，濃郁的色彩。這個(gè)單頁(yè)主題采用了三欄式布局。

Lambo ($45)

Lambo 作為攝影主題，非常強(qiáng)調(diào)字體和色彩。簡(jiǎn)單的字體和亮彩給予了一種扁平化風(fēng)格的感覺(jué)。

Righter ($2)

This theme 適合博客和文字類網(wǎng)站。超級(jí)簡(jiǎn)單，代碼清爽，毫無(wú)修飾。

DCJune ($29)

grid-style theme 網(wǎng)格線風(fēng)格主題，區(qū)塊分割非常明顯，能給于圖片更多的展示空間。超級(jí)清爽的主題，響應(yīng)式設(shè)計(jì)。

FlatCo ($45)

FlatCo theme 形式包裝的很到位，內(nèi)含300個(gè)扁平化圖標(biāo)，多種圖表元素。 形式包裝的很到位，內(nèi)含300個(gè)扁平化圖標(biāo)，多種圖表元素。

Renova ($40)

Renova 簡(jiǎn)單、美麗，具備扁平化設(shè)計(jì)的真諦。圖標(biāo)和形狀非常的基本，可定制，包含簡(jiǎn)單的動(dòng)效。

Octavus ($40)

Octavus外觀上很追隨潮流，使用了扁平化設(shè)計(jì)，但是瀏覽體驗(yàn)卻并不"流行"。圖像和色彩塊的混合達(dá)到了一種易于使用的用戶體驗(yàn)。響應(yīng)式設(shè)計(jì)，支持視網(wǎng)膜顯示。

模板

扁平化設(shè)計(jì)模板同時(shí)也大舉進(jìn)軍設(shè)計(jì)業(yè)，就連最新手的網(wǎng)頁(yè)設(shè)計(jì)師也能利用模板復(fù)制出簡(jiǎn)單的流行風(fēng)格。

Hosting template (free)

Hosting template (free) 可能需要你多花點(diǎn)功夫，但是包含了扁平化風(fēng)格網(wǎng)站的基本框架。采用了流行的元素和色彩，可PSD下載，因此只需要一些后端經(jīng)驗(yàn)就能將此轉(zhuǎn)換成上線的網(wǎng)站。

iPhone flat design UI template (free)

iPhone flat design UI template (free)有著多種多樣的扁平化風(fēng)格iPhone模板，適用于應(yīng)用界面設(shè)計(jì)。提供了你所需要的一切，包括：登錄界面、用戶個(gè)人資料、設(shè)置、滑動(dòng)欄、活動(dòng)窗口等。

Delta flat mobile template ($8)

Delta專門的扁平化風(fēng)格手機(jī)模板，用色較單一，專供響應(yīng)式設(shè)計(jì)。

Flappster flat landing page template ($20)

This landing page design 用來(lái)推廣預(yù)啟動(dòng)的網(wǎng)站和預(yù)發(fā)售的應(yīng)用。基于Twitter Bootstrap，這個(gè)引導(dǎo)頁(yè)模板采用了滾動(dòng)式面板。內(nèi)含有多種多樣的扁平化按鈕和圖標(biāo)，定制化好。

iLevel Bootstrap template ($15)

iLevel Bootstrap template ($15) 關(guān)鍵詞：響應(yīng)式設(shè)計(jì)，扁平化風(fēng)格，長(zhǎng)投影設(shè)計(jì)?？蚣芑赥witter Bootstrap，30多個(gè)頁(yè)面，4中可選擇的配色方案。包含了一些非常實(shí)用的扁平化圖標(biāo)，插圖和媒體插件。

iOS7 app icon template ($4)

This icon kit 包含了iTunes，iPad ,iPhone的圖標(biāo)標(biāo)準(zhǔn)格式。統(tǒng)一添加了網(wǎng)格線。

配色方案

顏色是扁平化設(shè)計(jì)的重中之重。顏色的明暗，色彩的醒目程度，配色方案是單調(diào)還是多彩，這都非常值得研究。扁平化設(shè)計(jì)一般綜合運(yùn)用多種配色手法來(lái)創(chuàng)造一種優(yōu)秀的視覺(jué)體驗(yàn)。
醒目明亮的顏色能夠增加視覺(jué)元素的趣味性，看起來(lái)很有國(guó)際范兒。在色彩的飽和度、深淺、明暗上要下功夫。
"單調(diào)"的配色方案在扁平化設(shè)計(jì)中很流行。通常會(huì)選擇一些具有生氣的顏色，然后在色調(diào)上進(jìn)行調(diào)整。
多彩風(fēng)格是另外一種選擇。不同的頁(yè)面和面板使用不同的顏色，整體效果非常棒。呢個(gè)能達(dá)到整體的層次感和有序感。

Flat design color palette (free)

pre-made code from Lucas Cobb.提供20種扁平化設(shè)計(jì)中常用的顏色。

Flat UI colors (free)

Flat UI colors非常簡(jiǎn)單的網(wǎng)站，展示了扁平化設(shè)計(jì)中最為流行的色調(diào)。用戶點(diǎn)擊便可以得到RGB和HEX色碼。

Adobe Kuler (free)

Adobe's Kuler 的調(diào)色生成工具可以打造出多種多樣的扁平化風(fēng)格配色方案。

ColourLovers (free)

ColourLovers中的用戶已經(jīng)打造出多種多樣的配色方案。用戶可以評(píng)論、投票，可以從中獲取設(shè)計(jì)的靈感，如果你不想使用比較陳舊的扁平化設(shè)計(jì)配色，那么來(lái)這里來(lái)看看吧。

Typography

整潔的字體是扁平化設(shè)計(jì)的重要組成。
因?yàn)楸馄交O(shè)計(jì)注重簡(jiǎn)約，字體的選擇也應(yīng)該簡(jiǎn)單、干凈。大多數(shù)設(shè)計(jì)師挑選簡(jiǎn)單的無(wú)襯線字體，使用一到兩種字重。也有部分設(shè)計(jì)師嘗試使用一些比較新奇的字體。一般來(lái)說(shuō)，一個(gè)設(shè)計(jì)項(xiàng)目中，使用的字體種類不會(huì)超過(guò)兩種。

在扁平化設(shè)計(jì)的字體選擇上，最好能夠與背景形成鮮明的對(duì)照。
字體一般非黑即白，不帶裝飾和色彩。
除了字體的使用之外，界面中的語(yǔ)言組織也應(yīng)該盡量凝練，以方便閱讀，這樣才能符合極簡(jiǎn)主義的意旨。

最終，要確保給予字體足夠的空間。字母之間，單詞之間都要留出足夠的空隙。如果挑選的字體比較細(xì)，那么考慮放粗一點(diǎn)。比如像Helvetica Neue這種筆劃比較細(xì)的字體，可能無(wú)法與背景形成鮮明的對(duì)照，這樣讀起來(lái)就不清晰。

Bellota (free)

Bellota是一款無(wú)襯線字體，但是稍微加上了一點(diǎn)花哨的襯線，易于閱讀，裝飾的也不是太過(guò)分。有一種柔性的氣質(zhì)，因此需要對(duì)照鮮明的背景。

Caviar Dreams (free)

This super-round typeface現(xiàn)代感、簡(jiǎn)約感兼具。字母辨識(shí)度高，可讀性好。筆劃很細(xì)，需要對(duì)照明顯的背景色的襯托才能方便閱讀。

Flex Display (free)

iOS7上，細(xì)字體的使用引起了不少了爭(zhēng)論，不可否認(rèn)的是，某些情況下，細(xì)字體的效果很好。 Flex Display字體的筆劃很細(xì)，能和那些粗字體形成明顯的對(duì)比。

Lato (free)

Lato是一款非常簡(jiǎn)單的字體，效果不錯(cuò)，有著多種大小和字重可以選擇。很多設(shè)計(jì)師都用這款字體，如果你像與眾不動(dòng)，那最好別用這款啦。

Telegrafico (free)

Telegrafico (free)，又一款全大寫字體，較寬的筆劃，當(dāng)空間充裕時(shí)，顯示效果極佳。尖銳的邊角和較寬的字體，讓整體有著一種現(xiàn)代感。

Proxima Nova (from $29)

Proxima Nova family 為設(shè)計(jì)師提供了多種多樣的選擇，簡(jiǎn)單而又優(yōu)雅，無(wú)襯線的字體，這使得這套字體非常的便于使用。簡(jiǎn)單的幾何風(fēng)格一直延續(xù)其中。

FF DIN (from $78 approx.)

簡(jiǎn)單，扁平，幾何化， FF DIN按Geramn標(biāo)準(zhǔn)而來(lái)。在數(shù)字設(shè)計(jì)中非常實(shí)用。

Montserrat (free)

圓角加上幾何式的簡(jiǎn)化，讓人有一種輕松的感覺(jué)，這使得 Monserrat 是個(gè)不錯(cuò)的選擇。

Primary Sans (free)

扁平化設(shè)計(jì)優(yōu)點(diǎn)便是簡(jiǎn)潔，那么這款優(yōu)秀的圓角字體Primary Sans (free)便具備了簡(jiǎn)潔的優(yōu)點(diǎn)。

Dense (free)

扁平化設(shè)計(jì)的核心特點(diǎn)就是簡(jiǎn)單不復(fù)雜，在字體設(shè)計(jì)上，這意味著可以適當(dāng)采用幾何結(jié)構(gòu)，比如 Dense.

Riona Sans (from $25)

如果想要一款商用的、嚴(yán)肅的字體，然后風(fēng)格還想要符合扁平化美學(xué)，那么請(qǐng)選擇 Riona Sans.

Bariol (free)

Bariol is another friendly face with very rounded terminals. A much better option that Arial Rounded, its geometry feels not unlike a stencil.

Canter (free on request)

現(xiàn)代主義與扁平化結(jié)合,在字體中便可發(fā)現(xiàn)現(xiàn)代主義的痕跡，這是Canter。

Deco Neue (free)

向現(xiàn)代主義致敬的作品, Deco Neue ，字體效果非常驚人。

Niveau (from $40)

對(duì)于扁平化設(shè)計(jì)來(lái)說(shuō)，幾何式簡(jiǎn)化是個(gè)不錯(cuò)的選擇。 Niveau 就是個(gè)好榜樣。

教程

小小批判一下：盡管扁平化設(shè)計(jì)是一種風(fēng)格，或者說(shuō)是一種理念，而不是一種技術(shù)，但是有很多設(shè)計(jì)師僅僅從技術(shù)層面上理解這種設(shè)計(jì)。不是說(shuō)學(xué)習(xí)技藝不好，而是重要的東西舍棄了，有點(diǎn)本末倒置。

How to create a long shadow (如何進(jìn)行長(zhǎng)投影設(shè)計(jì)）

需要掌握Adobe Illustrator的基本知識(shí)，然后根據(jù)This simple tutorial 一步一步的進(jìn)行嘗試。

Make my design flat (將設(shè)計(jì)扁平化)

被稱為"網(wǎng)上最簡(jiǎn)單的扁平化教程" Make My Design Flat提供異常簡(jiǎn)單的代碼，能夠?qū)粹o轉(zhuǎn)換為扁平化風(fēng)格，提供了一些案例，你也可以試試這些代碼。

扁平化設(shè)計(jì)類文章

關(guān)于扁平化設(shè)計(jì)，網(wǎng)絡(luò)上已經(jīng)有廣泛的討論，不乏有想法的文章。如果你想從本質(zhì)上了解這種設(shè)計(jì)風(fēng)格，想要確定自己的設(shè)計(jì)風(fēng)格，那么可以看看這些優(yōu)秀的理論文章。

The Flat Design Era（扁平化設(shè)計(jì)時(shí)代）

Flat Design: Trend or Revolution?（扁平化設(shè)計(jì)：一時(shí)流行還是革命？

What is flat design?（何為扁平化設(shè)計(jì)？）

Principles of Flat Design（扁平化設(shè)計(jì)的準(zhǔn)則）

Basic Principles of Flat Design – And Resources to Get You Started!（扁平化設(shè)計(jì)的基本原則以及起步所需的一些設(shè)計(jì)資源?。?/h3>

Get Pumped Up Over Flat Design（扁平化設(shè)計(jì)給予的提升）

Flat Design: An In-Depth Look（扁平化設(shè)計(jì)：一種深度觀察）

Authentic Design（真正的設(shè)計(jì)）

A Look at Flat Design and Why It's Significant(為何扁平化意義重大？扁平化設(shè)計(jì)觀察）

How to Nail the Coveted Flat Design Look (9 Actionable Tips) （如何打造夢(mèng)寐以求的扁平化外觀？）

扁平化設(shè)計(jì)靈感圖庫(kù)

如果談到扁平化設(shè)計(jì)，不給推薦一些有趣的圖庫(kù)，那就太不夠意思了。
很多新的流派、新的風(fēng)格都是從這些網(wǎng)站中首先出現(xiàn)的，因此，要保持對(duì)這些網(wǎng)站的高度關(guān)注。

Awwwards flat design gallery

Behance flat design gallery

Dribbble flat design gallery

Flat design gallery

Flat design on Pinterest

FlatDSGN gallery

Flat UI Design

Flat trendz gallery

結(jié)論

如果僅僅從技術(shù)的角度來(lái)講，其實(shí)扁平化設(shè)計(jì)比你想的容易，而且現(xiàn)在有這么多的工具和資源。但是能做到不人云亦云，獨(dú)立的思考，這并不容易。模仿扁平化的手法，下手一定要快，流行來(lái)的快，去的也快。

在Google,Microsoft,Yahoo這種巨頭接連使用扁平化設(shè)計(jì)風(fēng)格后，扁平化設(shè)計(jì)風(fēng)格從一種設(shè)計(jì)流派迅速變成了主流的設(shè)計(jì)技法。連那么大規(guī)模的網(wǎng)站都能使用扁平化風(fēng)格，這說(shuō)明扁平化風(fēng)格的適用范圍非常廣泛。但并不是說(shuō)，扁平化風(fēng)格對(duì)一切都適用，但無(wú)論如何要記住內(nèi)容至上，扁平化傳達(dá)的設(shè)計(jì)思想是"簡(jiǎn)約為美"

你做過(guò)扁平化風(fēng)格的項(xiàng)目嗎？你覺(jué)得什么類的資源比較有用？我們來(lái)討論一下。

拓展閱讀：國(guó)內(nèi)扁平化設(shè)計(jì)文章翻譯

向傳統(tǒng)進(jìn)軍：將扁平化設(shè)計(jì)應(yīng)用到紙媒中
扁平化設(shè)計(jì)的背后：更注重設(shè)計(jì)基礎(chǔ)
扁平化溯源：從未離開(kāi)的瑞士設(shè)計(jì)（上）
扁平化溯源：從未離開(kāi)的瑞士設(shè)計(jì)（下）
扁平設(shè)計(jì)是錯(cuò)的
Louie Mantia談?wù)摂M真設(shè)計(jì)和扁平化設(shè)計(jì)
極簡(jiǎn)主義的重要性

原文地址：www.webdesignerdepot.com
優(yōu)設(shè)網(wǎng)地址：http://76r.com.cn/the-ultimate-guide-to-flat-design
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB （轉(zhuǎn)載請(qǐng)注明優(yōu)設(shè)原文地址，謝謝）

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量47萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：