隨著插畫進入設計板塊里，越來越多的企業和品牌開始采用這種更親民活潑的元素，也使得用戶的體驗感大大增加。

(淘寶心選插畫帆布包)

而區別于一般的插畫師，商業插畫師則是更為專業的存在，如果說一般的插畫是以個人審美為主，那么商業插畫則是為服務商家和大眾而存在的，以達到吸引用戶、引導轉化和促進消費的目的。

(書籍配圖的應用)

（手機壁紙的應用）

此外，在商業項目的插畫設計上，也有著明顯的區別，今天，數藝君就以一個精彩的案例，帶大家領略一下它的風采。

手機QQ皮膚設計案例：《萌小兔》

《萌小兔》手機QQ皮膚是筆者2014年在騰訊手機QQ皮膚設計比賽中的獲獎作品，從這個作品中我們可以看到插畫在手機App皮膚設計中的應用效果。

《萌小兔》效果圖

設計分析

在開始設計之前，需要對設計背景和界面進行分析。深入的分析有助于將插畫元素與實際應用更準確地結合起來，從而設計出好看又實用的皮膚。

設計背景

由于是參加皮膚設計的比賽，因此需要從比賽要求、目標用戶群和設計內容這幾大方面展開分析。

騰訊手機QQ皮膚設計大賽的要求：風格不限，在不影響界面信息閱讀的情況下自由發揮。手機QQ的多數用戶相對年輕化。在了解了設計要求后，接下來要對界面進行分析。

界面分析

這個比賽需要設計的是手機QQ最主要的3個界面，即抽屜頁、聊天頁和消息頁。通過觀察可知，需要進行插畫設計的地方包括界面內的圖標、導航欄、操作欄、對話氣泡和頁面背景。

手機QQ的抽屜頁、聊天頁和消息頁

圖標

需要設計的圖標有消息、聯系人、動態、設置、搜索、表情和語音等。

導航欄/操作欄

導航欄用于指示當前頁面的內容，承載了頁面的標題和操作按鈕等信息，需要設計的內容包括背景和分割線等。操作欄則是用戶操作功能的區域，承載了操作按鈕和信息輸入框等信息，需要設計的內容同樣包括背景和分割線等。

需要設計的圖標

需要設計的導航欄/操作欄

對話氣泡

對話氣泡是信息交流的載體，承載了重要的對話信息。為了不影響其識別性，只需設計對話氣泡的邊框等內容。

界面背景

界面背景是指各個界面的背景。抽屜頁的背景比較空，有大面積的區域，可以進行復雜化的主題設計；聊天頁的背景也比較空，但需要通過這里閱讀收發的信息，不適合做復雜化的主題設計；消息頁是消息列表頁，也不適合進行復雜化的主題設計。

分析和確定好需要設計的區域和設計的重點后，接下來就可以開始構思主題了。

提示：設計皮膚的界面時，需要先對界面進行分析，選擇合做創意設計的地方。

主題構思與設計

在確定主題前，要先確定主題的風格，然后根據主題的風格設計主形象和輔助元素。完成主形象與輔助元素的設計后，就可以將其直接應用到界面的設計中。

確定主題和風格

由于這次比賽對作品風格沒有限制，因此筆者結合自身的喜好將這次設計的風格設定為活潑可愛風。可愛風格的設計受眾比較廣泛，可接受度高。確定主題的風格后，考慮用可愛的動物來表現本次主題的形象，因此選擇將兔子作為主形象，并采用描邊、勾線和上色塊的方式進行表現。

設計萌小兔的形象

確定使用兔子的形象來表達活潑可愛風格的主題后，接下來需要設計兔子的形象。先提取兔子的真實形象特征，然后進行草圖設計，再繪制線稿，最后進行上色，直到完成整個畫面。

萌小兔形象設計的過程

提取兔子的形象特征

從真實的兔子照片中可以總結出兔子的特點：長長的耳朵、小小的嘴巴、圓圓的身體、短短的手腳和尾巴。

提取兔子的形象特征

繪制草圖

對兔子的特征進行簡化和卡通化處理，在紙上畫一些造型，將兔子的頭身比例進行夸張表現，讓它的頭更大，身體更小，以凸顯兔子可愛的特征。

繪制草圖

刻畫細節

01 繪制線稿。新建文檔，因為設計的形象是應用到手機QQ軟件中的，只要確保該形象在主流手機上能清晰顯示即可，因此將尺寸設置為750像素×1334像素，將分辨率設置為72dpi。

考慮到在其他設備上應用的可能性，可以再新建一個1600像素×1600像素的文檔。把確定的草圖導入Photoshop，然后使用“鋼筆工具” 刻畫兔子的造型，之后再進行細節刻畫。

a. 繪制頭部，使用“鋼筆工具” 畫出圓形的頭部。

b. 繪制耳朵，耳朵分為左側的和右側的，先畫好一側的效果，再將畫好的這一側耳朵進行鏡像處理即可。

c. 畫出小小的眼睛和嘴巴。

d. 畫出兔子的腮紅。

e. 畫出兔子耳朵的細節。

f. 畫出蝴蝶結。

g. 畫出身體和腳，先畫好一邊的效果，再將畫好的這一邊進行鏡像處理即可。

h. 畫出手，先畫好一邊的效果，再將畫好的這一邊進行鏡像處理即可。

繪制線稿

02 上色處理。將線稿繪制好后，繼續為畫面上色。這里選擇將紅色作為萌小兔的主色，使用淺白色填充身體部分，然后使用紅褐色描邊，再使用紅色填充耳朵內的顏色，最后為萌小兔畫上腮紅，讓萌小兔這一形象更加生動。

上色處理

03 繪制多角度視圖。將萌小兔的正面畫好之后，接著把萌小兔的側面和背面也畫出來。對形象進行多角度的設計，這樣有助于我們在使用這一形象時，讓形象保持統一。

畫出萌小兔的多角度視圖

設計道具

只有兔子的形象似乎有些單調，所以再添加一些與兔子相關的道具，如胡蘿卜、水果、緞帶和心形等。

道具的設計要與兔子的形象相匹配，從真實照片提取圖形，然后繪制草圖、畫出線稿，最后進行上色。

繪制胡蘿卜

給道具配色時，同樣要考慮可愛的風格特點，這里使用了綠色、藍色和紅色作為道具的點綴色。

道具配色

至此，主形象和輔助道具就設計好了。下面需要將主題形象與界面進行結合。

提示：確定設計風格、選擇與設計主題形象是皮膚設計的關鍵步驟。

形象與界面的結合

將主題形象萌小兔放到手機QQ界面中進行設計。萌小兔的顏色為粉色，手機QQ界面的顏色為藍色，因此要先將界面的顏色統一設置為粉色，然后將藍色作為點綴色。

手機界面大色塊配色

對界面中需要設計的內容添加顏色，然后將這些內容組合在一起，再整體進行調整。

設計圖標

萌小兔的形象比較可愛，所以圖標的設計風格也要與萌小兔的風格相匹配。將“信息”“聯系人”和“動態”的圖標分為一組，將“表情”和“語音”的圖標分為一組，再將“返回”和“更多”的圖標分為一組。

圖標分組

01 繪制“信息”圖標。將信封圖形作為“信息”的圖標，收到消息就像收到了書信。

a. 搜集真實的信封圖片，觀察其結構。

b. 畫出信封的草圖。

c. 畫一個矩形。

d. 添加白色的封口效果和紅色的結構線。

e. 添加心形。

f. 添加裝飾性的短線。

g. 將信封圖形進行旋轉。

a

02 繪制“聯系人”圖標。直接用萌小兔的頭像表示“聯系人”的圖標即可。

“聯系人”圖標設計

03 繪制“動態”圖標。將“動態”理解為來自遠方朋友們的信息，從遠處飄來的漂流瓶便是傳遞這些信息的工具，所以這里選擇了漂流瓶來表示“動態”的圖標。

a. 搜集真實的漂流瓶圖片，分析其結構，包括瓶身、瓶塞和瓶里的液體。

b. 畫出漂流瓶的草圖，矩形的瓶身會使圖標的視覺大小不一致，因此改為圓形的瓶身。瓶內有一卷紙，讓整個圖形看起來有一些復雜，于是去掉這一卷紙，改為心形。

c. 先畫出圓形的瓶身、瓶口和瓶塞，然后畫出藍色的水，再添加一個心形。

d. 畫出瓶口的飄帶和水里的氣泡。

e. 在瓶身、瓶塞和水中加上裝飾性的短線條，豐富圖標效果。

f. 將漂流瓶圖標旋轉至傾斜的角度。

“動態”圖標設計

04 繪制“語音”圖標。這里將話筒的圖形作為語音的圖標。

a. 搜集真實的話筒圖片，分析其結構，包括拾音器、網頭、手持管體、音頻輸出端口和話筒線等。

b. 畫出話筒的草圖，真實的話筒比較細長，但為了使它更符合設定的卡通風格，將草圖畫得偏圓潤、可愛一些。

c. 畫出圓形的拾音器和三角形的手持管體。

d. 在圓形的拾音器上添加一個橫條作為裝飾元素。

e. 在手持管體尾部增加兩個橫條。

f. 在圓形的拾音器上面畫出網頭。

g. 給拾音器、網頭、手持管體加上裝飾的短線條，以進一步豐富圖標的效果。

“語音”圖標設計

05 所有圖標設計完成后，將它們放到界面中查看應用后的效果，從圖標的圖形特征及配色兩個方面看是否與界面協調。

如果界面使用了粉色和藍色，圖標的配色也應該以粉色和藍色為主。此時，雖然界面的圖形還沒有進一步設計，但是圖標的整體特征還是比較符合可愛的卡通風格定位的。

圖標設計效果

圖標的應用效果

設計導航欄和操作欄

導航欄和操作欄需要承載的信息比較多，包括狀態欄信息、頭像、Tab欄、搜索框、返回、聯系人信息和輸入框等。

導航欄和操作欄

01 由于導航欄和操作欄承載的信息比較多，因此在設計界面的時候要盡量簡潔一些。將多個不同大小的圓形放在不同的位置，形成豐富和有變化的邊緣效果，然后添加心形的圖案作為背景中的裝飾紋樣，這樣可以豐富導航欄的效果。

設計區域

導航欄和操作欄的設計

02 導航欄和操作欄設計完成后，需要把它們放到界面中查看應用后的效果，看是否與界面及已完成的圖標相匹配。導航欄和操作欄的顏色都是粉色的，形狀都是圓形的，且淺粉色的心形也符合萌小兔可愛的特征。

導航欄和操作欄的應用效果

設計對話氣泡

對話氣泡是信息交流的載體，承載了重要的對話信息。為了不影響對話內容的識別性，只需要設計對話氣泡的邊框即可。

01 畫出圓角矩形，將其作為氣泡的底板，然后添加細節裝飾效果。把畫好的兔子頭部和胡蘿卜作為點綴元素加在圓角矩形上，再添加文字查看應用后的效果。

氣泡設計步驟

02 分別用粉色和藍色作為兩個對話氣泡的顏色。

顏色搭配

氣泡分析

03 氣泡設計完成后，需要把它們放到界面中查看應用后的效果，看是否與界面及已完成的圖標、導航欄和操作欄相匹配。整個界面的元素都使用了粉色和藍色來表現，結合圓潤的圖形，看起來是比較協調的。

氣泡應用效果

設計界面背景

抽屜頁的背景比較空，所以將其作為展示萌小兔的主要頁面。

01 這里設計了一個萌小兔跳起來撒胡蘿卜的樣子，來表現兔子對胡蘿卜的喜愛，這樣更能活躍氣氛。

a. 設計動作時，可以自己擺出這個動作作為參考，也可以找一些其他的參考圖。

b. 繪制草圖，畫出能構思的元素。

c. 繪制萌小兔的線稿。

d. 為萌小兔上色。

畫出萌小兔的動作

02 萌小兔的主要形象在這個頁面中有兩種擺放方式：一是展示在頁面的側面，二是展示在頁面的底部。底部的面積比較大，放在底部顯得比較中規中矩；側面的面積雖然有限，但能表現出萌小兔活潑和有趣的形象，最后選擇了側面的擺放方式。

抽屜頁的設計效果

03 聊天頁的背景有很大的設計空間，可以設計一個完整的萌小兔形象，但考慮到聊天頁需要閱讀和收發信息，設計得簡潔一些更為合適。

因此，降低萌小兔的不透明度，既能保證形象的完整性，又不干擾信息的閱讀。在設計的過程中，將不透明度從10%調整到了60%，最終結合功能性與識別性，選擇了30%的不透明度設計。

聊天頁背景不同透明度嘗試

04 消息頁是展示消息列表的頁面，不宜設計得太復雜。因此只改變了文字、 背景色和分割線的顏色。

消息頁設計

整體的組合與調整

將各部分內容設計好之后，把它們結合到一起，再進行細節的調整。讓導航欄和操作欄上的心形元素避開文字和圖標，將操作欄的消息、聯系人和動態圖標調整至合適的大小。至此，主要界面的設計就完成了。

完成圖

提示：將需要設計的內容進行拆分，然后逐一設計，這樣可以降低設計的難度。雖然本案例是個性化的皮膚設計，但也要具備一定的識別性和可操作性。

相關內容的設計

主要的界面設計完成后，補充主題封面和Banner，方便用戶在下載前能直接查看皮膚設計的效果。

主題封面的信息包括皮膚名字和皮膚的內容，最好使用與皮膚色調風格接近的圖形表示。

主題的封面展示

主題的頁面展示

本文為企業推廣，本網站不做任何建議，僅提供參考，作為信息展示！

推薦閱讀：重慶熱線