--------------------譯者寫在前邊----------------------------

 

一個良好的習慣和流程，能事半功倍，高效，方向感明確。

設計師初入行最忌諱不思考的行動。

不管是創意還是溝通。

 

這篇文章很好的明確了職場中設計師要用勁的地方。

1，明確需求點。2，分步驟，從發散到最后收緊、細化的設計思路。

 

如果我初入職場時早點有人點播我這些。

也不至于那時候像個傻子一樣熬夜也干不對點子！

 

 

 

大家好，我是Dwango的設計師砂肝（昵稱，因為愛吃。砂肝=雞胗）

我平時的工作主要是負責niconico綜合頁面和排行榜頁面的設計。

也會設計一些logo和矢量插畫，總之比較雜。

去年10月25日“二コナレ”這個網站更新了卡通形象。

以這個設計為例，向大家呈現一下整套“服務類網站卡通形象設計”的全過程。

 

很多準備從事插畫設計的設計師，應該很想了解在實際的工作中，

究竟是怎樣的制作流程以及設計過程中應該注意什么。

本文主要介紹的就是實際工作中，插畫形象設計的制作流程和需要注意點，應該對新老手都有些幫助。

 

 

首先了解下， 為什么服務行業類的網站也需要設計卡通插畫形象呢

 

在介紹具體的制作流程前，先給大家介紹下服務網站設計卡通形象的初衷。

在nikoniko動畫網站里有當家卡通形象“小電視”和“立體人設小妞”

 

·······························譯者注······································

看到這應該有人注意到了。

這個NICONICO網站就是中國鼎鼎有名的B站的濕~父~。

NICONICO網站誕生于2006年。彈幕發源地。

作者為之設計的"NICONARE"是NIKO旗下的一個PPT制作分享應用，有網站和APP客戶端。

這個應用可以制作PPT,可以給PPT錄制解說，可以彈幕評論等等功能。

············································································

 

為服務類網站設計卡通形象好處多多：

·用戶通過卡通形象，更容易記住網站曾經提供給自己的服務

·通過賦予卡通形象豐富內容，更生動的傳遞網站的服務宗旨

·上傳等待、加載中的畫面中有卡通形象的加入，也有益于用戶體驗。

 

如果僅用圓形、方形或者簡單人形構造等造型進行設計的話，

想要傳達上述的點，控制起來會比較困難。

因此，這個卡通形象本身應該豐富多變，這樣可以自如控制向用戶傳達的內容。

 

了解設計制作本身的初衷和源起是很重要的，

這個理念應該自始至終貫穿整個制作過程，作為指導方向。

所以在介紹流程前，大家應該先明確這一點。

 

制作流程的介紹

 

根據不同情況會有些出入，但基本上就是這么個流程。

1.明確卡通形象的設計需求

2.制作草案

3.根據草案定方向

4.正式設計制作

5.正式版本確定·完成

 

 

 

一、明確設計需求

···························這是本次的需求內容·····································

● 為了配合niconare的上線，需要制作攻略介紹海報和404頁面等

● 希望有一個專屬的卡通形象（能傳遞知識的，比如貓頭鷹的形象等等）

● 網站和APP的產品設計基本完成，需要定一個主題色。

····························································································

如果對需求有任何不明白的地方，應該和需求人不斷溝通直至明白。

防止“雖然完成了卻根本不是我想要的！重做！”這種杯具的發生。

 

首先，設計一下卡通專屬形象。

二、繪制草圖

根據需求，先腦洞大開多畫一些草案。

這里就是自由發揮的時刻啦，多多益善（稍稍玩過火些也沒關系！）

 

 

 

 

● 多多和需求人溝通各類草案方向，只要是個方向即可討論。
 

所有的草案都是在和設計成員包括需求人一起，不停討論決定方向。

如果草案未被通過，需要反復多次進行制作討論，這個過程不要糾結細節，優先速度。

 

···多設計幾個可以用來溝通討論的草案方向

···最基本的用色和形狀要成型，否則也不好討論決定

···要說出創意的思路

···不必糾結設計細節，速度第一。

 

 

 

● 要明白需求人的真正訴求點
 

比如說，需求內容中提到“希望有一個貓頭鷹的形象”，

但其實真正的訴求點是“有一個智慧象征的形象”

考慮到這個訴求點，即使不是貓頭鷹，也可以嘗試其他的動物形象了。

 

• 以下是按照貓頭鷹的思路設計的草案
 

 

• 從智慧這個思路的聯想

• 智慧之果·蘋果

如果沒有抓住真正的訴求點，要直接與需求人對話，重新收集情報。

 

 

● 也可以通過其他角度聯想，出出點子。

根據網站服務內容，名字的叫法上延伸出來的創意。

 

• 根據服務內容聯想出的：

 

• 發布會（發表、參觀、新品發布會？……）

• 名字發音的延伸創意（nare人 nare人類 幻~）

• 用戶可能喜歡的（對應女性客戶群）

 

三、討論草案定方向

把所有草案給需求人看，從中選出可以進一步設計的方案。

如果沒有一個相中，就要再重新構思畫草圖。

 

這次的草案中，紅色勾出的是被選中的方案

 

 

 

接下來進一步設計這些方案，并開始軟件設計

這次提案的“透特智慧之神”反響不錯，接下來以這個為例開始軟件設計

 

 

四、用設計軟件進一步設計

 

4-1根據網站和APP的風格，決定一下卡通形象的繪畫風格和繪制工具。

 

這次的情況：

1.網站整體是扁平風

2.目標客戶群沒有性別傾向

3.需要適用多種使用環境

基于以上理由，決定了以下的風格配色和繪制工具：

 

·減少渲染和立體效果，采用盡量扁平化的設計

·配合服務網站的基調，使用中性配色

·為了配合多種環境使用，在illustrator里進行矢量設計

 

4-2 設計

 

①掃描草圖，放入軟件

·草圖的線不用畫的特別準確。

如果用很細的線畫出準確路徑，在用鋼筆工具重新勾勒時，一旦沒有對實，

細節部分會看起來很奇怪，增加勾勒的壓力

·具體問題具體分析，就本次來說，能夠指導勾勒的方向路徑即可。

 

 

②根據草圖進行鋼筆勾勒

運用Illustrator的鋼筆工具重新勾勒草圖，制作矢量圖形

為了今后方便動作設計 把身體分割成多個組成部分

頭 身體 腿和腳 臉的內容等等

③上色

根據草圖的配色定主題色。

檢查是否符合服務類網站的用色，要時常保持這種意識。

 

④ 調整全體

 

 

4-3 附贈：名字和一些簡單的說明

 

4-4 其他幾個草案也按照同樣的過程依次制作出來

五、最終確定方案

從中意的草案進一步軟件設計成的幾個方案里 決定最終方案

這次很開心，NARE神被采用為主視覺卡通，其他方案可以靈活運用在其他地方。

很欣慰~！

Illustrator的卡通形象就算完成了！！

 

六、制作矢量海報圖

把設計好的卡通形象進行組合布局，設計海報

這里的過程和卡通形象設計過程一樣，先畫草圖，再制作。

盡量采用比較簡單可以多場合使用的設計元素，會非常便利！

 

● 導航教程圖

 

● 404頁面

 

● 其他……

 

總結

這就是全部制作過程了。

希望能給今后從事插畫設計的設計師有所幫助

 

制作過程中需要特別注意的點：

● 如果想給出自己有價值的提案，首先要好好理解需求。

● 決定運用哪個卡通形象時，多從各個角度來考慮下。

● 最開始不要太細化，或糾結細節，和需求人多討論共享，方向ok后再細化。

● 最好能設計可以支持多種設計環境使用的設計源文件。

 

就到這兒吧 謝謝大家 下期再見！

 

作者介紹

砂肝

Designer

擅長logo、插畫和平面類設計

喜歡的食物當然是砂肝（雞胗子）。