怒贊!2013扁平化設計終極指南

2013可以說是扁平化設計的一年。
即便是擬物設計的引領者蘋果,也不得不轉變設計思路,在iOS 7上開始著手扁平化設計的探索。

你是否落伍了呢?想不想嘗試一下扁平化設計?但是又不知道該要怎么開始?沒關系,WebdesignerDepot將幫助你!我們精心收集了一些扁平化資源,從UI套件到調色工具,再到字體選擇和WP主題,從理論文章再到創意圖庫,我們將呈遞給您體系化的扁平化資源!

如果想要試水扁平化設計,或者想要更進一步,這篇文章都適合您,應有盡有。

推薦下載:
35套扁平化風格網頁設計UI組件和圖標

從天而降的扁平化設計

對于設計師來說,扁平化設計是一種實打實的設計風格,不要花招,不要粉飾。而扁平化時代之前,設計師的作品往往非常的寫實,非常的有立體感。從整體的角度來講,扁平化設計是一種極簡主義美學,附以明亮柔和的色彩,最后配上粗重醒目,而風格又復古的字體。扁平化設計簡化了諸如按鈕、圖標一類的界面元素。

扁平化設計要求盡量避免使用凹凸、陰影、斜角、漸變、材質等裝飾手段。
對于那些頁面不多或者用以推廣移動應用的簡單網站來說,扁平化設計非常符合他們的需求,因此廣泛流行。扁平化設計同時也遭到了一些非議,批評者認為這種全面簡化的風格無法更好的引導用戶,用戶界面太過簡單,可能一些用戶無法理解。

大圖片取代了動效。在極簡主義風格的設計中,設計師通常給予內容充足的空間以供傳達,這樣就能夠簡單、直接的講述內容。
從扁平化設計中又衍生出幾個不同的小流派:"似扁平化設計"和"長投影設計"就是最近被反復強調的兩個概念。

"似扁平化設計"(Almost Flat Design)是以扁平化設計為基礎,但是添加了一些簡單的效果,比如簡單的投影,基本的漸變。
"長投影設計"圖標設計中使用較多,一般是一道45度角的陰影從圖標中延伸而出,最近的圖標設計,大部分都采用"長投影設計"。

扁平化設計強調了極簡主義,提倡功能大于形式。提倡了一種少即是多,留白大于填充的美學。僅僅具有色彩、形狀、線條等基本元素。字體選擇上也務求簡單、基本。

UI kits

通過UI套件,我們可以初步了解扁平化設計。
套件非常的節省時間——可以自由選擇套件中的元素,然后進行自己的實驗。大多數UI套件的格式是PSD,非常易于編輯。下面推薦的UI套件種類不一,從簡單免費的到復雜收費的,扁平化的UI套件可真是越來越多了;這里我們提供了一個推薦列表。

在選擇UI套件時,不要對顏色太較真。大多數的套件都支持改變顏色主題,只需點擊幾下,就能全面修改,這樣就不用一個一個手動修改了。

Featherweight UI (free)

Featherweight UI簡約、支持視網膜(Retina),照片滾動箭頭、按鈕、簡單的圖標,什么都有。大小適中,顏色復古。

怒贊!2013扁平化設計終極指南

Polaris UI kit (free)

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

怒贊!2013扁平化設計終極指南

Erste UI kit (free)

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

怒贊!2013扁平化設計終極指南

FlatUI kit (free)

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

怒贊!2013扁平化設計終極指南

Flat UI (free)

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

怒贊!2013扁平化設計終極指南

Flat UI kit (free)

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

怒贊!2013扁平化設計終極指南

Metro UI kit (free)

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

怒贊!2013扁平化設計終極指南

Monotone flat UI kit (free)

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

怒贊!2013扁平化設計終極指南

Vertical Infinity (free)

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

怒贊!2013扁平化設計終極指南

Lil UI kit ($6)

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

怒贊!2013扁平化設計終極指南

Flat UI kit ($19)

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

怒贊!2013扁平化設計終極指南

Flat UI pro (from $39)

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

怒贊!2013扁平化設計終極指南

Flat UI PSD ($5)

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

怒贊!2013扁平化設計終極指南

Square UI (from $39)

Square UI 應用廣泛,種類齊全,用色非常規。可定制化。支持視網膜。

怒贊!2013扁平化設計終極指南

扁平化圖標

扁平化設計的圖標無處不在,資源也非常豐富。
跟UI套件一樣,大多數的圖標采用PSD格式,這樣可以根據個人情況進行修改。
很多圖標的設計非常的具有專業性,專門為某類應用而設計。這種圖標,用來做按鈕也很合適。
當選擇圖標下載時,記得尺寸大小選擇要合適。有的是矢量圖形,而有的放大時會損失質量。

40 social media flat icons (free)

40 social media flat icons (free) 用途廣泛,涵蓋了歐美幾乎所有流行的網站,并采用了長投影設計。通過用色和投影上的細微差別,達到了不同圖標之間的高辨識度。每種圖標有4種大小——32,64,128以及256。

怒贊!2013扁平化設計終極指南

Freebie PSD — flat icons (free)

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

怒贊!2013扁平化設計終極指南

12 flat SEO icons (free)

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

怒贊!2013扁平化設計終極指南

Free flat icon set (free)

This small icon set用色非常的樸素,對比也比較低的一套圖標。

怒贊!2013扁平化設計終極指南

Flat file icons (free)

This quad of icon 上傳、下載、設置、圖表。

怒贊!2013扁平化設計終極指南

Flat icons freebie (free)

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

怒贊!2013扁平化設計終極指南

Flat social media icons (free)

Designmodo's kit 35款社交媒體圖標。色彩選用明亮,且非常貼切。

怒贊!2013扁平化設計終極指南

PSD flat social icons (free)

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

怒贊!2013扁平化設計終極指南

IconShock flat icons (from $19)

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

怒贊!2013扁平化設計終極指南

FlatIcons (from $30)

FlatIcons 因其簡單而用途廣泛,定制度高。

怒贊!2013扁平化設計終極指南

其他類扁平化資源

Apple product templates (free)

想在蘋果的設備上展示一下設計作品嗎?試試Apple template from MediaLoot吧!

怒贊!2013扁平化設計終極指南

E-comerce flat web elements (free)

電商網站中,扁平化設計并不多,因此 this kit提供了一些簡單的元素,來填補這份空白。

怒贊!2013扁平化設計終極指南

Flat credit cards (free)

credit card icons 在設計的時候要考慮到一切細節,小小的信用卡,在網上支付時非常重要。

怒贊!2013扁平化設計終極指南

Friends list UI (free)

整潔有序的列表, this UI PSD,為iPhone界面設計,使用了常用的珊瑚色,以及無襯線字體。

怒贊!2013扁平化設計終極指南

Radial graph (free)

圖表和曲線圖大概是扁平化設計中最難以把握的元素了,讓 radial graph PSD教你吧。

怒贊!2013扁平化設計終極指南

Sign-up form (free)

sign up form適用于預啟動頁,用其五彩的配色給予用戶熱情的歡迎。

怒贊!2013扁平化設計終極指南

Flat browser frames ($5)

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

怒贊!2013扁平化設計終極指南

Flat design flyer template ($6)

Flat Design Flyer Template 能夠將你的網站包裝成適合打印的外觀,CMYK防溢色。

怒贊!2013扁平化設計終極指南

Flavor business card ($6)

Flavor business card template 打造與網站風格配套的名片,試試這個吧。

怒贊!2013扁平化設計終極指南

Pricing tables ($4)

set of monotone tables使用Twitter Bootstrap構建,用來為網站增添價目表。

怒贊!2013扁平化設計終極指南

WordPress主題

WordPress主題能夠幫助網站迅速的實現風格化,而為建站者節省了大量的時間。一般來說,好的主題都要付費,現在有很多設計師在從事WordPress主題設計,如果作品確實好,付費吧。
亂糟糟的頁面會讓用戶感覺你的內容低質。所以盡量保持頁面的清爽大方,切風格一致。付費主題不但好用,且能夠立即使用。建議購買前最好列出一個需求清單,這樣挑選就方便多了。
不過如果是新手,免費主題也是個不錯的選擇,使用免費主題建站很簡單,也很有意思。如果需求更進一步,對于選項、靈活度、支持要求更好,這時候可以考慮下付費版了。

Duena (free)

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

怒贊!2013扁平化設計終極指南

Fizz (free)

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

怒贊!2013扁平化設計終極指南

Current (free)

Current 各個方面都不錯,適合用來推廣新產品。

怒贊!2013扁平化設計終極指南

Attitude (free)

s simple and professional theme 似扁平化設計,相較其他免費主題,自由度更高。

怒贊!2013扁平化設計終極指南

Bloq (free)

Bloq 扁平化的設計,扁平化的用色。

怒贊!2013扁平化設計終極指南

Frontier (free)

This flat theme極簡主義風格的設計,可添加菜單和橫幅。

怒贊!2013扁平化設計終極指南

MetroBlog (free)

MetroBlog 區塊,明色——但也收啊少有一點漸變,因此我認為是似扁平化設計。

怒贊!2013扁平化設計終極指南

Viper (free)

Viper 適用于電商網站,清爽大氣。

怒贊!2013扁平化設計終極指南

SimpleCorp (free)

this theme 似扁平化設計

怒贊!2013扁平化設計終極指南

BirdFlat (free)

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

怒贊!2013扁平化設計終極指南

SympalPress (free)

This free theme簡單有形,似扁平化的圖標,精心選擇的字體。

怒贊!2013扁平化設計終極指南

Tetris (free)

Tetris區塊式、卡片式布局,完美呈現圖像的視覺效果。

怒贊!2013扁平化設計終極指南

Argo ($40)

Argo 小方塊布局,無論是個人還是商用,都不錯。線條清晰,按鈕簡約。

怒贊!2013扁平化設計終極指南

Business Essentials ($45)

This simple, yet classic theme 很適合商用

怒贊!2013扁平化設計終極指南

Illustrate ($45)

This theme 適用于個人作品展示。

怒贊!2013扁平化設計終極指南

Modern Metro ($40)

Modern Metro可定制,和Metro UI非常匹配,響應式。

怒贊!2013扁平化設計終極指南

Shift ($35)

Shift 可定制,色彩豐富,支持視網膜,響應式。

怒贊!2013扁平化設計終極指南

Salmon & Cream ($75)

This theme 線條分明。可定制,響應式,支持視網膜。

怒贊!2013扁平化設計終極指南

Candy ($35)

This fully-responsive theme 適用于個人作品展示。

怒贊!2013扁平化設計終極指南

Alfie ($40)

This theme 使用Bootstrap構建,代碼精簡,提供多種圖標、背景色、布局的選擇。

怒贊!2013扁平化設計終極指南

Biggie ($7)

this flat theme 用色是亮點,易于觸控。

怒贊!2013扁平化設計終極指南

Bonbon ($49)

Bonbon 色彩明亮,內含的圖標很棒,可定化。

怒贊!2013扁平化設計終極指南

Flat ($39)

Flat 柔和色色彩,而不是明亮,這使得這套主題很有個性。

怒贊!2013扁平化設計終極指南

News ($45)

news卡片式布局,照片+文字即可完成內容的傳遞,色彩鮮明,風格至簡。

怒贊!2013扁平化設計終極指南

Coffee & Cream ($40)

Coffee & Cream ($40)可選項豐富,提供兩個導航選項。完全響應式。

怒贊!2013扁平化設計終極指南

Flat Admin ($18)

this flat theme整合了多種表格、圖表,用來展示數據非常不錯,可定制。

怒贊!2013扁平化設計終極指南

Sketch ($40)

single-page theme 設計的充滿能量感,鼓勵滾動式瀏覽,可定制,內含社交網絡鏈接功能。似扁平化設計。

怒贊!2013扁平化設計終極指南

Showy ($35)

Showy(華麗的)一點也不華麗,反而非常簡單。

怒贊!2013扁平化設計終極指南

Evolux ($45)

Evolux ($45) 用來展示產品和設計非常棒。采用了超大圖、簡約的風格,和粗字體。

怒贊!2013扁平化設計終極指南

Jobify ($55)

Jobify 就業專用。扁平化風格設計。具有扁平化的字體、明亮的色彩、精準的網格線布局、響應式設計等特性,并可以和其它工作類套件整合。

怒贊!2013扁平化設計終極指南

MetroFolio ($40)

MetroFolio Metro化、卡片化布局,非常易用的用戶界面,可定制化,可以用來進行設計師個人作品展示。

怒贊!2013扁平化設計終極指南

FlatPack ($55)

FlatPack多種模板和選項可供選擇,主要是商用。

怒贊!2013扁平化設計終極指南

Metrolium ($45)

Metrolium ($45) 似扁平化設計,色彩塊的使用非常棒。可實時預覽,選項豐富。

怒贊!2013扁平化設計終極指南

Flat Portfolio ($35)

Flat Portfolio視網膜顯示下效果很棒。定制化主題,響應式設計,可使用Google Fonts。

怒贊!2013扁平化設計終極指南

Hypertext ($40)

Hypertext 提供更高級的管理選項,且完全響應式設計,定制化高。

怒贊!2013扁平化設計終極指南

Fuse ($45)

Fuse 以滑動圖片為設計核心,細節上采用扁平化設計。

怒贊!2013扁平化設計終極指南

Mineral ($45)

Mineral具備靈活的AJAX圖庫,響應式設計,多種外觀選擇。

怒贊!2013扁平化設計終極指南

Ink ($49)

Ink 巧妙了使用扁平化設計中圖片的布局和色彩的應用,懸停動效非常酷。

怒贊!2013扁平化設計終極指南

Amada ($40)

Amada 簡單線條,簡單顏色,簡單的字體,極簡主義理念由此而生。響應式,視網膜顯示支持,滾動會有額外的驚喜。

怒贊!2013扁平化設計終極指南

Glider ($45)

Glider 能幫你解決圖標問題。960套適量圖標,支持多語言。

怒贊!2013扁平化設計終極指南

Hexagonal ($40)

almost flat theme 似扁平化設計主題,極簡主義,看起來非常的專業。響應式設計,提供多種布局選擇。

怒贊!2013扁平化設計終極指南

Emerald ($40)

Emerald 簡單,令人印象深刻的滾動效果。

怒贊!2013扁平化設計終極指南

Kumaon ($40)

Kumaon 適合商用,包含300中扁平化圖標和多種多樣的表格。

怒贊!2013扁平化設計終極指南

Anubis ($40)

Anubis 極其有個性的字體選擇和創造性的色彩。

怒贊!2013扁平化設計終極指南

Red Star ($45)

. The theme 可關閉的響應式設計,模版頁很不錯。

怒贊!2013扁平化設計終極指南

Forest ($40)

Forest 該主題看起來很棒,代碼無懈可擊。

怒贊!2013扁平化設計終極指南

Panes ($40)

Panes, 使用了扁平化設計中很流行的兩種色彩——亮紫以及翡翠綠。單頁設計,整合了谷歌地圖,可自定義顏色和字體。卡片式滾動效果。

怒贊!2013扁平化設計終極指南

Nova ($45)

Nova 展示了如何在扁平化設計中使用新奇的字體。主題中所有的元素都使用較亮的色彩,簡單的線條.

怒贊!2013扁平化設計終極指南

Red Sky ($40)

Red Sky 是不像主題的主題。高度注重視覺效果的布局,響應式設計,濃郁的色彩。這個單頁主題采用了三欄式布局。

怒贊!2013扁平化設計終極指南

Lambo ($45)

Lambo 作為攝影主題,非常強調字體和色彩。簡單的字體和亮彩給予了一種扁平化風格的感覺。

怒贊!2013扁平化設計終極指南

Righter ($2)

This theme 適合博客和文字類網站。超級簡單,代碼清爽,毫無修飾。

怒贊!2013扁平化設計終極指南

DCJune ($29)

grid-style theme 網格線風格主題,區塊分割非常明顯,能給于圖片更多的展示空間。超級清爽的主題,響應式設計。

怒贊!2013扁平化設計終極指南

FlatCo ($45)

FlatCo theme 形式包裝的很到位,內含300個扁平化圖標,多種圖表元素。 形式包裝的很到位,內含300個扁平化圖標,多種圖表元素。

怒贊!2013扁平化設計終極指南

Renova ($40)

Renova 簡單、美麗,具備扁平化設計的真諦。圖標和形狀非常的基本,可定制,包含簡單的動效。

怒贊!2013扁平化設計終極指南

Octavus ($40)

Octavus外觀上很追隨潮流,使用了扁平化設計,但是瀏覽體驗卻并不"流行"。圖像和色彩塊的混合達到了一種易于使用的用戶體驗。響應式設計,支持視網膜顯示。

怒贊!2013扁平化設計終極指南

模板

扁平化設計模板同時也大舉進軍設計業,就連最新手的網頁設計師也能利用模板復制出簡單的流行風格。

Hosting template (free)

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

怒贊!2013扁平化設計終極指南

iPhone flat design UI template (free)

iPhone flat design UI template (free)有著多種多樣的扁平化風格iPhone模板,適用于應用界面設計。提供了你所需要的一切,包括:登錄界面、用戶個人資料、設置、滑動欄、活動窗口等。

怒贊!2013扁平化設計終極指南

Delta flat mobile template ($8)

Delta專門的扁平化風格手機模板,用色較單一,專供響應式設計。
怒贊!2013扁平化設計終極指南

Flappster flat landing page template ($20)

This landing page design 用來推廣預啟動的網站和預發售的應用。基于Twitter Bootstrap,這個引導頁模板采用了滾動式面板。內含有多種多樣的扁平化按鈕和圖標,定制化好。

怒贊!2013扁平化設計終極指南

iLevel Bootstrap template ($15)

iLevel Bootstrap template ($15) 關鍵詞:響應式設計,扁平化風格,長投影設計。框架基于Twitter Bootstrap,30多個頁面,4中可選擇的配色方案。包含了一些非常實用的扁平化圖標,插圖和媒體插件。

怒贊!2013扁平化設計終極指南

iOS7 app icon template ($4)

This icon kit 包含了iTunes,iPad ,iPhone的圖標標準格式。統一添加了網格線。
怒贊!2013扁平化設計終極指南

配色方案

顏色是扁平化設計的重中之重。顏色的明暗,色彩的醒目程度,配色方案是單調還是多彩,這都非常值得研究。扁平化設計一般綜合運用多種配色手法來創造一種優秀的視覺體驗。
醒目明亮的顏色能夠增加視覺元素的趣味性,看起來很有國際范兒。在色彩的飽和度、深淺、明暗上要下功夫。
"單調"的配色方案在扁平化設計中很流行。通常會選擇一些具有生氣的顏色,然后在色調上進行調整。
多彩風格是另外一種選擇。不同的頁面和面板使用不同的顏色,整體效果非常棒。呢個能達到整體的層次感和有序感。

Flat design color palette (free)

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

怒贊!2013扁平化設計終極指南

Flat UI colors (free)

Flat UI colors非常簡單的網站,展示了扁平化設計中最為流行的色調。用戶點擊便可以得到RGB和HEX色碼。

怒贊!2013扁平化設計終極指南

Adobe Kuler (free)

Adobe's Kuler 的調色生成工具可以打造出多種多樣的扁平化風格配色方案。

怒贊!2013扁平化設計終極指南

ColourLovers (free)

ColourLovers中的用戶已經打造出多種多樣的配色方案。用戶可以評論、投票,可以從中獲取設計的靈感,如果你不想使用比較陳舊的扁平化設計配色,那么來這里來看看吧。

怒贊!2013扁平化設計終極指南

Typography

整潔的字體是扁平化設計的重要組成。
因為扁平化設計注重簡約,字體的選擇也應該簡單、干凈。大多數設計師挑選簡單的無襯線字體,使用一到兩種字重。也有部分設計師嘗試使用一些比較新奇的字體。一般來說,一個設計項目中,使用的字體種類不會超過兩種。

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

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

Bellota (free)

Bellota是一款無襯線字體,但是稍微加上了一點花哨的襯線,易于閱讀,裝飾的也不是太過分。有一種柔性的氣質,因此需要對照鮮明的背景。
怒贊!2013扁平化設計終極指南

Caviar Dreams (free)

This super-round typeface現代感、簡約感兼具。字母辨識度高,可讀性好。筆劃很細,需要對照明顯的背景色的襯托才能方便閱讀。

怒贊!2013扁平化設計終極指南

Flex Display (free)

iOS7上,細字體的使用引起了不少了爭論,不可否認的是,某些情況下,細字體的效果很好。 Flex Display字體的筆劃很細,能和那些粗字體形成明顯的對比。

怒贊!2013扁平化設計終極指南

Lato (free)

Lato是一款非常簡單的字體,效果不錯,有著多種大小和字重可以選擇。很多設計師都用這款字體,如果你像與眾不動,那最好別用這款啦。

怒贊!2013扁平化設計終極指南

Telegrafico (free)

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

怒贊!2013扁平化設計終極指南

Proxima Nova (from $29)

Proxima Nova family 為設計師提供了多種多樣的選擇,簡單而又優雅,無襯線的字體,這使得這套字體非常的便于使用。簡單的幾何風格一直延續其中。

怒贊!2013扁平化設計終極指南

FF DIN (from $78 approx.)

簡單,扁平,幾何化, FF DIN按Geramn標準而來。在數字設計中非常實用。

怒贊!2013扁平化設計終極指南

Montserrat (free)

圓角加上幾何式的簡化,讓人有一種輕松的感覺,這使得 Monserrat 是個不錯的選擇。

怒贊!2013扁平化設計終極指南

Primary Sans (free)

扁平化設計優點便是簡潔,那么這款優秀的圓角字體Primary Sans (free)便具備了簡潔的優點。

怒贊!2013扁平化設計終極指南

Dense (free)

扁平化設計的核心特點就是簡單不復雜,在字體設計上,這意味著可以適當采用幾何結構,比如 Dense.

怒贊!2013扁平化設計終極指南

Riona Sans (from $25)

如果想要一款商用的、嚴肅的字體,然后風格還想要符合扁平化美學,那么請選擇 Riona Sans.

怒贊!2013扁平化設計終極指南

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.
怒贊!2013扁平化設計終極指南

Canter (free on request)

現代主義與扁平化結合,在字體中便可發現現代主義的痕跡,這是Canter

怒贊!2013扁平化設計終極指南

Deco Neue (free)

向現代主義致敬的作品, Deco Neue ,字體效果非常驚人。

怒贊!2013扁平化設計終極指南

Niveau (from $40)

對于扁平化設計來說,幾何式簡化是個不錯的選擇。 Niveau 就是個好榜樣。

怒贊!2013扁平化設計終極指南

教程

小小批判一下:盡管扁平化設計是一種風格,或者說是一種理念,而不是一種技術,但是有很多設計師僅僅從技術層面上理解這種設計。不是說學習技藝不好,而是重要的東西舍棄了,有點本末倒置。

How to create a long shadow (如何進行長投影設計)

需要掌握Adobe Illustrator的基本知識,然后根據This simple tutorial 一步一步的進行嘗試。

怒贊!2013扁平化設計終極指南

Make my design flat (將設計扁平化)

被稱為"網上最簡單的扁平化教程" Make My Design Flat提供異常簡單的代碼,能夠將按鈕轉換為扁平化風格,提供了一些案例,你也可以試試這些代碼。

怒贊!2013扁平化設計終極指南

扁平化設計類文章

關于扁平化設計,網絡上已經有廣泛的討論,不乏有想法的文章。如果你想從本質上了解這種設計風格,想要確定自己的設計風格,那么可以看看這些優秀的理論文章。

The Flat Design Era(扁平化設計時代)

怒贊!2013扁平化設計終極指南

Flat Design: Trend or Revolution?(扁平化設計:一時流行還是革命?

怒贊!2013扁平化設計終極指南

What is flat design?(何為扁平化設計?)

怒贊!2013扁平化設計終極指南

Principles of Flat Design(扁平化設計的準則)

怒贊!2013扁平化設計終極指南

Basic Principles of Flat Design – And Resources to Get You Started!(扁平化設計的基本原則以及起步所需的一些設計資源!)

怒贊!2013扁平化設計終極指南

Get Pumped Up Over Flat Design(扁平化設計給予的提升)

怒贊!2013扁平化設計終極指南

Flat Design: An In-Depth Look(扁平化設計:一種深度觀察)

怒贊!2013扁平化設計終極指南

Authentic Design(真正的設計)

怒贊!2013扁平化設計終極指南

A Look at Flat Design and Why It's Significant(為何扁平化意義重大?扁平化設計觀察)

怒贊!2013扁平化設計終極指南

How to Nail the Coveted Flat Design Look (9 Actionable Tips) (如何打造夢寐以求的扁平化外觀?)

怒贊!2013扁平化設計終極指南

扁平化設計靈感圖庫

如果談到扁平化設計,不給推薦一些有趣的圖庫,那就太不夠意思了。
很多新的流派、新的風格都是從這些網站中首先出現的,因此,要保持對這些網站的高度關注。

Awwwards flat design gallery

怒贊!2013扁平化設計終極指南

Behance flat design gallery

怒贊!2013扁平化設計終極指南

Dribbble flat design gallery

怒贊!2013扁平化設計終極指南

Flat design gallery

怒贊!2013扁平化設計終極指南

Flat design on Pinterest 怒贊!2013扁平化設計終極指南

FlatDSGN gallery

怒贊!2013扁平化設計終極指南

Flat UI Design

怒贊!2013扁平化設計終極指南

Flat trendz gallery

怒贊!2013扁平化設計終極指南

結論

如果僅僅從技術的角度來講,其實扁平化設計比你想的容易,而且現在有這么多的工具和資源。但是能做到不人云亦云,獨立的思考,這并不容易。模仿扁平化的手法,下手一定要快,流行來的快,去的也快。

在Google,Microsoft,Yahoo這種巨頭接連使用扁平化設計風格后,扁平化設計風格從一種設計流派迅速變成了主流的設計技法。連那么大規模的網站都能使用扁平化風格,這說明扁平化風格的適用范圍非常廣泛。但并不是說,扁平化風格對一切都適用,但無論如何要記住內容至上,扁平化傳達的設計思想是"簡約為美"

你做過扁平化風格的項目嗎?你覺得什么類的資源比較有用?我們來討論一下。

拓展閱讀:國內扁平化設計文章翻譯

向傳統進軍:將扁平化設計應用到紙媒中
扁平化設計的背后:更注重設計基礎
扁平化溯源:從未離開的瑞士設計(上)
扁平化溯源:從未離開的瑞士設計(下)
扁平設計是錯的
Louie Mantia談論擬真設計和扁平化設計
極簡主義的重要性

原文地址:www.webdesignerdepot.com
優設網地址:http://www.hx168888.com/the-ultimate-guide-to-flat-design
優設網翻譯:@MartinRGB (轉載請注明優設原文地址,謝謝)

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座:每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音(YY頻道:15335158)分享實戰經驗。
設計微博:擁有粉絲量47萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

怒贊!2013扁平化設計終極指南
 

收藏 3
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。