插畫創(chuàng)造出的視覺(jué)語(yǔ)言，將概念簡(jiǎn)化為易于理解的圖像，讓信息變得清晰。

有些設(shè)計(jì)師在設(shè)計(jì)界面插圖時(shí)，常常設(shè)計(jì)出與界面感覺(jué)不符合，甚至是過(guò)于復(fù)雜的插圖。他們將視覺(jué)效果作為目標(biāo)，而過(guò)于復(fù)雜的視覺(jué)，超出了插圖的功能：將概念簡(jiǎn)化為可理解的圖像，幫助用戶理解信息。如果只專注于視覺(jué)效果，沒(méi)有考慮它所傳遞的信息，往往會(huì)造成反效果。

沒(méi)錯(cuò)！插圖的概念其實(shí)跟圖標(biāo)(icon)是極為相似的，他們有相似的概念及設(shè)計(jì)原則。

以下分享關(guān)于界面插圖的一些設(shè)計(jì)思路，并搭配自行設(shè)計(jì)的示意圖。

1. 傳達(dá)有意義的信息

在閱讀文字的同時(shí)，圖可以更快地傳達(dá)概念。針對(duì)不同的文字?jǐn)⑹龌蚋拍畋憩F(xiàn)，搭配適當(dāng)且易理解的插圖。

一開始列出你想傳達(dá)的信息有哪些？需要轉(zhuǎn)換為插圖的信息有哪些？并注意以下的幾點(diǎn)提醒。

┃文字或概念的聯(lián)想

以往經(jīng)驗(yàn)的累積可幫助用戶對(duì)圖案或文字意義的聯(lián)想，例如：

發(fā)現(xiàn)→望遠(yuǎn)鏡，具有探索或?qū)ふ椅粗暮x。

尋找→放大鏡，搜尋的意思。

雖然發(fā)現(xiàn)與尋找的插圖經(jīng)常使用相同的圖案，兩者概念也很接近，但它們之間還是有細(xì)微差異的。

探索vs 尋找

簡(jiǎn)單且容易理解的概念，有時(shí)候單用圖案就能表達(dá)。但是越復(fù)雜或尚未普及的概念就越難用圖表達(dá)，甚至必須搭配文字描述才能理解，這時(shí)候圖則是負(fù)責(zé)表現(xiàn)出抽象的概念。

例如：區(qū)塊鏈、加密貨幣等等（這些概念過(guò)不久也會(huì)變得不陌生，同時(shí)也會(huì)出現(xiàn)新的概念）

┃約定俗成的圖形

在日常生活中較常接觸的圖示，漸漸成為約定俗成的意象。所以在設(shè)計(jì)插圖的時(shí)候，可以使用大眾認(rèn)知明確的圖案來(lái)發(fā)揮，依據(jù)受眾來(lái)確保他們能夠識(shí)別并理解。

為諾蔓烘焙繪制的圖示

反之也要小心使用已有約定俗成的圖案，避免產(chǎn)生錯(cuò)誤的聯(lián)想。尤其是面對(duì)不同的世界文化，要避免令人反感的設(shè)計(jì)，某些圖案在不同的地區(qū)可能會(huì)有負(fù)面含義的聯(lián)想。

黑松品牌在1925~1947年以三兄弟聯(lián)手創(chuàng)業(yè)的圖案作為商標(biāo)，名為三手牌，市場(chǎng)上開始有消費(fèi)者以「賊仔汽水」稱呼。創(chuàng)辦人張文杞先生詢問(wèn)后才知道，原來(lái)三只手在中國(guó)的意思是小偷，品牌意義有些不妥。

張文杞先生在住家附近有些松樹，松樹有松柏長(zhǎng)青的意義，于是在1931年他將三手牌汽水正式更名為黑松汽水。

－黑松商標(biāo)沿革

2. 形狀與色彩搭配

除了形狀的一致性之外，色彩也是一大關(guān)鍵。在形狀及色彩搭配上更要注意比例。以同樣的形狀，將線條、色塊、背景互相搭配，可產(chǎn)生不同的感受。

上圖所示的顏色比例搭配，主色與次要色的比例為3比1。通常色系越接近的時(shí)候，他們的比例可接近至1比1的比重，若色系越不接近時(shí)，對(duì)比越顯眼的色彩比例會(huì)越少，建議色彩配色不要超過(guò)三種顏色。

當(dāng)然也有些插畫是反其道而行，進(jìn)而創(chuàng)造出獨(dú)特的風(fēng)格。

形狀的使用及插圖的聯(lián)想，可以將產(chǎn)品或界面的特色放大，依據(jù)情況搭配情境或傳達(dá)概念，也記得畫面不要太過(guò)復(fù)雜，不然會(huì)失去重點(diǎn)。

3. 用戶體驗(yàn)

除了考慮能帶給用戶的體驗(yàn)是什么之外，能讓用戶記住讓他們感覺(jué)「很棒」的產(chǎn)品？用插圖來(lái)傳達(dá)信息，引起用戶的共鳴。

比起復(fù)雜的插圖，淺顯易懂的插圖更能引起共鳴

考慮界面不同狀態(tài)的插圖，而不是只在幾個(gè)重點(diǎn)頁(yè)面才配置插圖。

成功、達(dá)成目標(biāo)、空狀態(tài)、出錯(cuò)、未連接、失去連接、尋求幫助、引導(dǎo)等等。有些狀態(tài)會(huì)引起用戶的不安，也有的狀態(tài)會(huì)讓用戶困惑「現(xiàn)在我該做什么？」、「下一步該進(jìn)行什么？」插圖能傳達(dá)信息，舒緩用戶的情緒，讓用戶知道我們是有考慮到這狀況的，并附上解決問(wèn)題的方法。

4. 與界面的風(fēng)格概念相呼應(yīng)

插圖調(diào)性也會(huì)反映界面品牌的風(fēng)格，不代表插圖只能用品牌現(xiàn)有的顏色或規(guī)范，而是以品牌為基礎(chǔ)去延伸或增加，多考慮插圖與品牌搭配時(shí)是否能被凸顯，并保持相對(duì)應(yīng)的調(diào)性。

依據(jù)界面品牌規(guī)范，延伸圖示、插圖等

5. 界面插圖規(guī)范

這是最常被忽略的部分，在前面幾個(gè)步驟好不容易建立一套屬于此界面的插圖，但最后卻沒(méi)有建立好規(guī)范，未來(lái)新增插圖時(shí)很容易忽略掉該注意的細(xì)節(jié)。更重要的是若由其他設(shè)計(jì)師接手設(shè)計(jì)新的插圖時(shí)，往往沒(méi)有依據(jù)或規(guī)范，導(dǎo)致制作出來(lái)的插圖風(fēng)格未能達(dá)到一致的水準(zhǔn)。

總結(jié)

保持不斷地嘗試，并學(xué)習(xí)掌握不同的插圖風(fēng)格。透過(guò)插圖，對(duì)用戶傳達(dá)信息，輔助文字上的抽象概念，讓用戶有更多的意愿了解。

本文轉(zhuǎn)載自Medium，作者：Nick Wei