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

(淘寶心選插畫帆布包)

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

(書籍配圖的應用)

（手機壁紙的應用）

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

手機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，方便用戶在下載前能直接查看皮膚設計的效果。

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

主題的封面展示

主題的頁面展示

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!