隨著插畫風(fēng)的盛行，很多設(shè)計師為網(wǎng)站或app加入插畫時，多數(shù)從素材網(wǎng)站下載，但專業(yè)的團隊更推薦定制插畫設(shè)計。定制插畫設(shè)計有很多優(yōu)點，其中最重要的，就是定制插畫向用戶講述更清晰的故事，更接地氣。今天我們分享tubikstudio的一個案例：為醫(yī)療服務(wù)網(wǎng)站-FlorenceApp設(shè)計插畫。

項目

設(shè)計原創(chuàng)的插畫，展示連接護士和病人之間的醫(yī)療服務(wù)的功能和特點。

設(shè)計過程

Florence是一個在線服務(wù)網(wǎng)站，為自由職業(yè)的護士提供在線雇傭的平臺，沒有了代理機構(gòu)賺差價。護士可以直接與客戶聯(lián)系并選擇合適的工作時間。設(shè)計師的任務(wù)是設(shè)計定制化的插畫，插畫需要表達平臺的服務(wù)性質(zhì)及平臺為改善護士和患者生活帶來的好處。

任務(wù)的第一階段是創(chuàng)建一組護士的護理活動的草圖，老人享受生活的草圖。

在這個階段，屏幕設(shè)計師創(chuàng)作了6個非常精細的草圖方案，然后又增加了2個。對他們來說沒有太多的改變：護士的制服幾乎沒有變化，看上去更現(xiàn)代，另外還增加了男護士角色。

在與客戶討論完手繪草圖后，設(shè)計師將其中一個畫成了電腦矢量圖，并根據(jù)公司的企業(yè)標(biāo)準色（＃7158CD）和輔助色設(shè)計了兩套配色方案。四種對比色和類似色。最終選擇更和諧的第一種方案做延展。

下一階段，將所有的草圖數(shù)字化，填充顏色。

然后，設(shè)計師開始擴展設(shè)計，設(shè)計一個將多個獨立的草圖合并完一個組合的復(fù)雜插畫。藝術(shù)家將這個任務(wù)定義為：將獨立的場景和諧的結(jié)合在一起，傳遞關(guān)于平臺背后的核心理念：與關(guān)心老年人的的護理工作者的聯(lián)系。

在進行創(chuàng)意頭腦風(fēng)暴后，設(shè)計師有了一個不錯的創(chuàng)意：將角色放在各種小工具設(shè)備上，每一對老人都會聯(lián)系到一名護士。這樣可以傳達關(guān)鍵的信息：我們很近，只需要點擊一下，不用擔(dān)心，享受生活。

當(dāng)所有的草圖轉(zhuǎn)化為電腦矢量稿，而且細節(jié)優(yōu)化好后，設(shè)計師又做了兩種背景色方案：冷色和暖色?？蛻糇罱K選擇了暖色調(diào)。

冷色調(diào)背景

暖色調(diào)背景

正如2018年網(wǎng)頁和app的ui設(shè)計趨勢文章中所提到的，定制化的插畫設(shè)計趨勢讓界面設(shè)計中的講故事更加形象化。越來越多的網(wǎng)站和app轉(zhuǎn)而設(shè)計定制化的插畫，設(shè)計專門的角色。定制化的角色有助于使交互更有人性，與現(xiàn)實世界更緊密相連，更重要的是，定制化的構(gòu)圖和版面能夠讓頁面更活潑。

上圖是FlorenceApp的實際效果