神魂顛倒論壇logo

icon
首頁視覺設計應用區設計實務討論專區 → 怒讚!2013扁平化設計終極指南(4)

雷射溶脂 | 瘦小腹 | 植髮 | 眼袋 | 玻尿酸 | 電波拉皮 | Flash | 購物車 | Flash Player 11.2 | 豐胸 |

下一主題 上一主題


怒讚!2013扁平化設計終極指南(4)


怒讚!2013扁平化設計終極指南(4) 簡版






怒讚!2013扁平化設計終極指南(4) 

在新視窗檢視

怒讚!2013扁平化設計終極指南(1)
怒讚!2013扁平化設計終極指南(2)
怒讚!2013扁平化設計終極指南(3)
怒讚!2013扁平化設計終極指南(4)
怒讚!2013扁平化設計終極指南(5)

模板扁平化

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

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

iPhone flat design UI template (free)

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

Delta flat mobile template ($8)Delta專門的扁平化風格手機模板,用色較單一,專供響應式設計。在新視窗檢視

Flappster flat landing page template ($20)

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

iLevel Bootstrap template ($15)

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

iOS7 app icon template ($4)This icon kit包含了iTunes,iPad ,iPhone的圖標標準格式。統一添加了網格線。在新視窗檢視

配色方案

顏色是扁平化設計的重中之重。顏色的明暗,色彩的醒目程度,配色方案是單調還是多彩,這都非常值得研究。扁平化設計一般綜合運用多種配色手法來創造一種優秀的視覺體驗。

醒目明亮的顏色能夠增加視覺元素的趣味性,看起來很有國際範兒。在色彩的飽和度、深淺、明暗上要下功夫。

“單調”的配色方案在扁平化設計中很流行。通常會選擇一些具有生氣的顏色,然後在色調上進行調整。

多彩風格是另外一種選擇。不同的頁面和麵板使用不同的顏色,整體效果非常棒。呢個能達到整體的層次感和有序感。Flat design color palette (free)

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

Flat UI colors (free)

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

Adobe Kuler (free)

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

ColourLovers (free)

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

Typography

整潔的字體是扁平化設計的重要組成。

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

在扁平化設計的字體選擇上,最好能夠與背景形成鮮明的對照。

字體一般非黑即白,不帶裝飾和色彩。

除了 ???? 字體的使用之外,界面中的語言組織也應該盡量凝練,以方便閱讀,這樣才能符合極簡主義的意旨。

最終,要確保給予字體足夠的空間。字母之間,單詞之間都要留出足夠的空隙。如果挑選的字體比較細,那麼考慮放粗一點。比如像Helvetica Neue這種筆劃比較細的字體,可能無法與背景形成鮮明的對照,這樣讀起來就不清晰。Bellota (free)Bellota是一款無襯線字體,但是稍 ???? 微加上了一點花哨的襯線,易於閱讀,裝飾的也不是太過分。有一種柔性的氣質,因此需要對照鮮明的背景。在新視窗檢視

Caviar Dreams (free)

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

Flex Display (free)

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

Lato (free)

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

Telegrafico (free)

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

Proxima Nova (from $29)

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

FF DIN (from $78 approx.)

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

Montserrat (free)

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

Primary Sans (free)

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

Dense (free)

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

Riona Sans (from $25)

如果想要一款商用的、嚴肅的字體,然後風格還想要符合扁平化美學,那麼請選擇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)

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

Deco Neue (free)

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

Niveau (from $40)

對於扁平化設計來說,幾何式簡化是個不錯的選擇。Niveau就是個好榜樣。在新視窗檢視

教學

小小批判一下:儘管扁平化設計是一種風格,或者說是一種理念,而不是一種技術,但是有很多設計師僅僅從技術層面上理解這種設計。不是說學習技藝不好,而是重要的東西捨棄了,有點本末倒置。How to create a long shadow (如何進行長投影設計)

需要掌握Adobe Illustrator的基本知識,然後根據This simple tutorial一步一步的進行嘗試。在新視窗檢視

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

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





購物車 | 回到頂部
Icon
註冊時要填寫Flash懶人,但是打錯字為Flash爛人囧rz
下一主題 上一主題