Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Flat Design
Design

有關創建扁平化設計圖形的10個頂級技巧

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Top Design Tips.
10 Tips for Designing High-Impact Magazines
10 Design Tips to Make a Professional Business Flyer

Chinese (Traditional) (中文(繁體)) translation by Shu Wu (you can also view the original English article)

這個文章裡面我們將講述扁平化設計。 可能你已經在好幾年前聽說過這個設計趨勢。 讓我們來探討一下這個是什麼,它是來自哪裡,以及你需要怎麼製作一個簡潔,生動和有響應的扁平化設計!

Envato Market上你可以找到很多精采的扁平化網站設計扁平化圖標模版。 你可以查看它們,讓妳對現代化扁平設計有一個全新的概念!

1.什麼是扁平化設計?

扁平化設計是簡約的現代風格的用戶界面和圖形設計,它使用最少的元素,並排除任何類型的複雜顏色,漸變,高光和其他光澤,紋理的陰影的效果。

flat movie icons
扁平化電影和電影圖標集合

扁平化設計和 skeuomorphism仿真設計和複雜設計相反。 但是,我不能不提及扁平化設計並像你看起來的那麼簡單。 它還可以包括一些紋理設計,我們稍後會談到。

skeumorphic movie icons
如何在Adobe Illustrator中創建迷人的電影海報的Skeuomorphic擬真電影圖標

總而言之,扁平化設​​計會更多地關注內容本身,而不會使觀眾分心到視覺效果上。 它強調元素的簡單性,同時使界面更加靈敏,快速,更易於使用。

2.一點歷史信息

眾所周知,在設計界,扁平化設計成為一個大趨勢之前就已經被使用了。 它被廣泛用於80年代,當時的科技並不能支持複雜的效果,紋理和形狀。 但是,就算在那個年代,設計傾向於獲得其第一印象和最簡單的skeuomorphic功能,試圖看起來更像真實的生活。

現在看來,扁平化設計在微軟發佈所謂的Metro風格的產品後開始流行起來。 Metro設計是微軟引入的一個UI設計的語言,著重於簡單,簡潔和現代感的設計。

在2010年,微軟發佈了 Windows Phone 7,應用了一個簡單的,邊緣清晰的扁平化設計界面,這也繼承了微軟之前的一個產品(Zune)。 接著,隨著巨大的成功,以同樣的Metro的扁平設計的概念,微軟發佈了 Windows 8 OS。

microsoft metro design
在 Windows 8 中微軟Metro設計實例

最後,扁平化設計在 013年達到頂峰,當蘋果發佈 iOS 7,展示其新的設計,完全改變了所有以前的UI元素,包括圖標和字體。 他們創建了UI和圖標設計的描述性指南

apple flat design
蘋果 iOS 7 扁平化樣式圖標

那之後,谷歌也將其網頁設計和應用程序的風格改為扁平化設計,命名為Material設計(材料設計語言)。 谷歌擁有一整套致力於材料設計語言的部分,包括其目標,原理以及創建材質圖標,UI,佈局等方面的良好指南。

material design google
谷歌的材料設計語言部分的幾個例子

那之後,扁平化設計成了設計優雅,簡潔和風格化的網頁,應用程式,設計元素的主流趨勢。

總而言之,現代媒體界提到的扁平化設計風格會有三個全球範例:

  • 微軟Metro design
  • 蘋果 iOS 7 設計
  • 谷歌的Material Design(材料設計)

3.保持簡單

扁平化設計顯然是因為它缺乏三維元素和效果,如漸變,紋理,高光,多色調和陰影而著稱的。 扁平化設計是對象可視化的二維風格。 除此之外,複雜的對象會被簡化和風格化。 有時我們僅需描繪實際對象可識別的輪廓或實際輪廓,而不需要具體細節。

simple flat icons
扁平化圖標

極簡主義是當今的全球趨勢,形式的簡單性和銳利邊緣的使用強調了整潔和吸引人的視覺設計。 簡單的形式更易於被理解和接受。 他們真的讓設計看起來簡約乾淨,避免了繁瑣的雜亂的外觀。

4.使它完美

當涉及到扁平化圖標和UI元素時,有必要使它們看起來像清晰,準確並擁有完美的像素。 這對於刪格化和矢量圖形都是至關重要的。

在這種情況下,在Adobe Photoshop裡一切都是清晰的 ,隨著它與點陣圖形,顯然是基於像素的。

flat icons in photoshop
如何在 Adobe Photoshop 中創建時尚的扁平化設計圖標

當涉及到Adobe Illustrator,這是一個矢量圖形的程序,它處理線和曲線,稱為矢量以數學的方式繪製。 有時候,Adobe Illustrator 並不是很方便來製作像素的完美圖形。 但是好消息是,最新版本的 Adobe Illustrator已成為設計人員處理完美像素圖形的好工具了。

除此之外,創建矢量圖形基本上意味著使用不同顏色和網格製作扁平,簡單的形狀。 Adobe Illustrator在設置上非常靈活,允許你更改單位值,根據需要調整參考線和網格, 有各種類型的組合來對齊對象。 所有這一切使得創建完美像素設計更加容易,使它們在任何顯示器上保持清晰和整潔。 如果你意在創建完美像素的圖形,請務必查看Adobe Illustrator中創建完美像素的藝術作品指南。

The pixel grid in Adobe Illustrator
如何使用Adobe Illustrator創建完美像素藝術

5顏色口味與趨勢

除形狀外,另一個扁平化設計的特點就是顏色的應用。 大多數用於扁平化設計風格元素的調色板由幾種基本顏色組成。 明亮、 大膽、 充滿活力、 飽和的顏色對扁平化設計來說具有重要意義。

扁平化設計中的配色方案不限於某些特定的顏色。 取決於你的勾勒,它包括各種淡色和陰影,和是否是璀璨的糖果圖標或是微妙的復古樣式物件。

flat retro funfair
扁平化復古遊樂場風光

如果你是一位經驗豐富的設計師,你可以感受到正確的色調,你可以使用Photoshop或Illustrator的“顏色”面板進行操作,只需通過猜測來挑選顏色。 然而,這一過程需要直覺、 實踐和良好的技巧。 還有一些工具,可以方便你建立一個適當的調色板。

其中有些適合各類設計和插圖,不僅適合扁平化設計。 就像是以前被稱為Kuler的Adobe Color CC這樣的服務。 現在,你可以直接從Adobe的產品或網站訪問它。 它是一個非常靈活的工具,它允許你組成自己的調色板或使用庫存中的各種用戶製作的調色板。

另一種簡單方便的調色板生成器是Coolors。 只需點擊空格鍵並更改調色板的顏色,即可進行調整和導出。

市面上還有一些類似的可以自定義色版的服務,這些第三方工具都很有用。 然而,還有一個,專為扁平化設計服務的。 由Design modo公司開發的FlatUIColors.com,一系列帶十六進制代碼的扁平化色版,使用起來非常方便。 它已成為深受設計師尋求完美像素顏色的要求的喜歡。 讓我們來探索吧!

你在谷歌的材料設計指南中也有各種各樣的顏色色板和調色板。

6.長長的影子

如上所述,扁平化設計往往簡單而有空間的 - 這就是為什麼它拒絕使用任何種類的效果。 但是,還是有一個由扁平化設計引伸的效果。。 它也成為扁平化設計的一種趨勢和顯著的特點之一。

現在我們來講講常常的陰影效果。 它有一些典型的特徵,使這種效果易於辨認。 那就是45度角和大尺寸陰影(陰影是物體的兩倍)。 因此,長陰影真正給扁平化設計帶來更多的深度。

using long shadows in flat design
擁有長長的陰影的扁平化圖標

這種效應,使得物體看上去更立體,但同時仍然保持一個扁平的外觀。

7.使用字體

字體設計是扁平化設計的重頭戲。 通常,文本成為組合的主要元素,而扁平元素不會分散觀眾的注意力。

簡單的字體通常用於扁平化設計,使得整個設計圖片看起來清晰可讀。 你可以在Adobe Typekit上找到大量的免費字體,如果你使用的是 Adobe 產品。 否則,Font Squirrel是適合任何口味的免費字體。 確認你讀了使用權限,如果你需要將你選擇的字體商用。

大多數扁平化設計的設計傾向於使用大寫字母和對比色,使文字看起來更清晰。

using fonts in flat design
簡單 & 優雅-多功能 HTML 主題

仔細挑選你的文字。 它應該和整個設計相匹配,而不是像一些主題之外的元素。 這並不意味著你不能使用Serif字體或一些複雜的手寫字體或其他元素。 只需堅持簡約的外觀,確認平衡性。 然而,最成功的扁平設計更經常地使用Sans Serif字體,因為它們更直觀和嚴謹,就像所有扁平化圖形一樣。

8.扁平化風格的優點與缺點

雖然扁平化設計由於其眾多優點而變得受歡迎,但它仍然具有一些缺點,設計師在使用這種風格會遇到這些侷限點。 讓我們總結一下扁平化設計的優點和缺點。

Flat Space Exploration Banners
扁平化空間探索的廣告橫幅

優點

趨勢

扁平化設計已經發展成為一種趨勢,吸引了設計師和網頁設計師的眼球,而且它似乎並沒有失去其立場。 相反,它被越來越多地傳播,並獲得一些新的形式和特徵,逐漸轉變成更具創意的東西。

簡潔

扁平化設計簡單,簡約,整潔。 當製作網站時,使用扁平化設計,你可以讓人專注在你的內容上而不是在視覺效果上讓人分心。 這也適用於移動應用界面:使用大的扁平的按鈕使其在移動設備趨於完美完美。

生動

顏色的使用也是扁平化設計的優勢所在。 明亮大膽的顏色看起來很吸引人,乾淨,無漸變使設計看起來更加現代化。 更重要的是,這種純淨的顏色使它看起來更積極向上並更有吸引力,可以創造出適當的心情特徵。

缺點

扁平化設計還有很多其他優點,但沒有任何設計是完美的,我們無法將其完全理想化。 我們還是必須提到的一些缺點︰

交互反應慢

有時,缺少額外的細節或視覺效果使得很難創建一個方便和用戶友好的界面,這使得整個設計難以引起共鳴。 不是所有用戶都覺得這個設計很悅目的。因為可能很難在網頁上找到可點擊的元素或需要點擊移動應用程序的元素,因為它們不具有交互性。

字體問題

正如我們上面提到的,不是所有的字體都適合這個扁平化設計。 有時一個大膽,有直邊字體的設計,會讓整個設計看起來平衡和時尚。 但是,如果選錯字體將有可能會毀掉你的設計。 你真的需要探索哪個字體適合扁平化設計哪些完全不能融入。 如果你的字體排版技能差的話可以真的很難選擇合適的字體。

弱的視覺效果

由於使用效果,顏色和字體的局限性,扁平化設計可能看起來太簡單和不友好。 它的極簡主義也可能成為其最大的缺點 - 就是所有這些設計最終看起來都是一樣的。 因為我們使用相同的簡化形狀,有限的色板和類似的字體,因此很難使你的圖標或網頁與其他人的設計不同。 這造成的結果就是扁平化設計會顯得很無聊。

9.扁平化設計未來趨勢

扁平化設計還沒有完全形成和被開發。 也許由於如上所述的缺點,它傾向於轉變和再創造,獲取新功能和視覺增強。

如果你仔細觀察扁平化設計的最新實例,你可能會注意到,除了嚴格的工具之外,實際上還需要採取一些措施,並開始添加微妙的效果,如漸變(非對比性),陰影,亮點和其他視覺效果。

complex flat design
野營的矢量扁平化橫幅集

這些裝飾實際上增加了設計的深度,而且細節不會看起來很瑣碎,但skeuomorphic(仿真設計)有時候會略顯累贅。 這些小的改進使得扁平化設計更加靈敏和方便,並帶來新鮮的外觀,使其更加多邊和多樣化。

因此,扁平化設計似乎沒有失去其特點;相反,它變得更有趣,更靈活 - 它真的變得更好了。

10.如何開始?

所以,你期待進入扁平化的設計的世界,而且對創建自己的扁平化設計躍躍欲試了! 我不得不同意,這個過程是令人興奮和具有挑戰性的,無論你是創建一個扁平化對像還是一個完整的扁平化場景。

Flat Business Concept Banners
扁平化商業概念橫幅廣告

如果你想嘗試製作扁平化插圖,我建議你先從一組圖標開始,而且這些圖標與同一主題相關聯。 當你對這個技術熟悉的時候你可以嘗試複雜的設計和其它領域的設計,將你學到的新的關於扁平化設計的知識用於創建網站或是廣告橫幅。

下面是一些有用的教程。

如果你使用的是Adobe Illustrator,查看如下的扁平化設計教程:

嘗試製作更多的細節,如漸變,高光和紋理,來增加景深和現實感:

嘗試描繪扁平化物體,以創建一個扁平化的場景:

挑戰自己來製作更詳細的城市景觀︰

也許你用過Affinity Designer? 這裡有一些有用的教程!從製作最簡單的圖標開始:

接著來創造一組圖標:

或你可以擴展,設計一張扁平化風格的海報 !

正如我所說,刪格化圖形是基於像素的,所以對於圖標設計也是非常好的。 如果你的Adobe Photoshop更加熟練,用它來做扁平化設計同樣很棒!

最後,如果妳想提升你的技能並增加細節效果到你的設計中,查看創建創建扁平化廣告的平面工作區元素的視頻課程,裡面有詳細的步驟教妳如何從頭到尾繪製扁平化設計。

Creating Flat Workspace Elements for Advertisements
為廣告創造平工作區元素

讓我們總結一下

我們來總結吧,我們也發現從平面設計史上的一些事實以及談顏色、 形狀和排版。 我們從不同角度研究了扁平化設計,討論了其優缺點,並列出了做好設計所必需的要點。

我希望你從這篇文章已經發現了一些新的資訊,或者至少發現它有趣和吸引人的地方。 如果你之前沒試過扁平化設計,你可以自己嘗試做一下。

總而言之,談到扁平化設計時還有什麼可以提及的?

如果你真的喜歡扁平化設計,你喜歡銳利的邊緣,生動的顏色,精準的字體,還有簡約乾淨的外觀設計,你就開始吧!

它是時尚的趨勢,但是,和其他任何形式的圖形風格一樣,你不應該將創意局限在同一種技術和視覺元素上。 現存的時尚趨勢並不意味著你不能為你的項目選擇任何其他的設計風格。 Sokuomorphism(仿生設計)雖然看起來很複雜,但我們並沒有理由為設計放棄繪製一些細節和紋理。 請記住,你的設計風格取決於每個具體項目,可以反應該項目的其感覺和外觀,保留它的可用性和功能。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.