MaryDesign?：現在APP的數量越來越多，制作也越來越精美，各種APP都想在設計上能夠與其他APP區別開來，從而更好的吸引用戶的注意，將插畫運用在APP當中，無疑是一種好的選擇，在iOS 11的App Store“Today”中就用了很多的插畫，給用戶帶來了全新的體驗。

最近一段時間一直在給公司的新產品設計插畫，在設計的過程中也有了一些思考，從而產生了這篇文章，文章當中主要探討了幾個問題：為什么要在APP當中使用插畫？目前流行的幾種插畫風格；APP中哪些地方適合配插畫？以及我在dribble上看到的一些好的插畫分享給大家，還有一些實際的例子。最后根據我的經驗，給大家在設計插畫時提了幾點小建議。

一. 什么要在APP當中使用插畫？

增加視覺沖擊感，總結為兩個字“驚艷”，例如“walk up”APP，當中的每一個頁面都運用了插畫，而且設計得極其精美。

增添趣味性，使頁面不顯得單調、乏味，一個明顯的例子就是APP當中的空頁面和錯誤頁面，例如淘寶在無網狀態下，顯示一幅可愛的插畫要比單純的顯示文字要給人的感覺好得多，也可以盡可能的減輕用戶的焦慮。

承載更多的信息量，更加的直觀，這一點在圖標上顯示的比較明顯了，例如百度糯米的分類圖標，采用了寫實的風格，給人的感覺就更加的直觀了。

滿足用戶的情感需求，情感化設計，這一點在keep當中得到了很好的體現，在剛剛過去的七夕節，keep把跑步路線變成了粉紅色，還配上了一條狗，七夕節還在跑步的人，很有可能是單身狗啊，意思不言而喻。

二. 目前比較流行的幾類插畫及其特點

• 扁平插畫
• 肌理插畫
• 手繪插畫
• MBE插畫（dribble一位大神創作了這種風格，因此被稱為MBE風格插畫）
• 漸變插畫（有時也稱微光插畫）
• 立體插畫（也叫2.5D插畫）
• 描邊插畫

下面分別對各種插畫進行舉例，所有例子均來自dribble。

扁平插畫：扁平插畫的特點是扁平，簡潔明了，扁平插畫是現在很流行、也是最常用的風格。

肌理插畫：我覺得肌理插畫也屬于扁平插畫的一種，但是在最后要增加顆粒感，肌理插畫最明顯的特點應該就是有質感，光影關系表現得比較好。

手繪插畫：我認為這是難度最高的一種，也是對設計師的美術功底要求最高的。手繪風格的應用比較廣，可以展現的東西很多。下面這位設計師的作品富有童趣，像夢境一樣美好。

MBE插畫：簡潔、圓潤、可愛。

漸變插畫：一種很唯美的風格，在顏色的運用上一般采取近似色，顏色的種類不要過多。

立體插畫：從名字就可以看出，這類插畫最大的特點就是立體了，能夠在二維的空間里表現出三維的事物。

描邊插畫：除了運用形狀，還要運用描邊，可以很好的對事物進行抽象化處理。

三. 各類插畫在實際APP中的運用

扁平插畫：得到、摩拜單車（用在banner、背景圖）

肌理插畫：百度外賣、淘寶、App Store（用在刷新、背景圖、專題）

手繪插畫：ofo、下廚房（用在banner、專題、彈框）

MBE插畫：下廚房當中的圖標，MBE風格很適合用來制作icon

漸變插畫和立體插畫：拉勾。把這兩種放到一起來講，是因為很多時候一幅插畫是包含這兩種風格的。（用在banner、專題）

描邊插畫：拼多多、網易云音樂（用在icon、啟動頁）

總結一下：插畫適合用在APP當中的啟動頁、banner、專題、刷新、icon、彈框、背景圖等等。

四. 關于APP插畫的幾點小建議

• 插畫的風格要和app的整體風格搭配，例如洋蔥數學的整體風格都是扁平的，如果在當中使用手繪風格的插畫就不合適。
• 插畫的內容要能夠體現出主題，要和文案配合好。
• 插畫要盡可能的有創意，雖然我知道這很難做到，但是也要體現出設計師的想法和心思在里面，最重要的是注意細節，細節決定成敗。

最后，放幾張我自己的肌理插畫吧。

「優設高質量插畫教程」

• 《插畫沒靈感？大咖靑爵教你創意大爆發！》
• 《用這個簡單實用的設計技巧，輕松做出有趣的插畫類設計》
• 《學會插畫的這四種玩法，能讓你的UI體驗更優異》
• 《學會這個教程，可以把任何一張人物照都變成插畫風格》

原文地址：UI

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com