技術分享 | UI設計中插畫那些事

在互聯網產品剛剛興起的階段，app設計非常簡陋甚至直接就是網頁端的另一種打開方式，用戶對app的期望也不高，只需要看懂即可。但是隨著手機與人們生活聯繫日益緊密，如今我們清晨醒來，做的第一件事情就是打開手機，或是晚上讓手機伴我們入眠。手機不僅僅是工具，它開始變成了我們身體的一部分，或者說是身體的延伸。用戶對於app的要求也水漲船高起來，對於他們而言，app不僅僅是功能的集合，還要滿足他們的情感需求。網站也面臨同樣的挑戰。如何讓產品滿足用戶的情感需求進而與之建立聯繫開始成為了設計師們的一個共同的課題。插畫的合理應用或許可以幫助到我們。

人性化處理

用戶對於傳統互聯網產品一大吐槽就是過於「機械感」，對此設計師們對產品進行了人性化處理。拿谷歌日曆舉例，一般的日曆類應用界面可以做的很簡單，直接給用戶展示一個「日曆」就行了，用戶同樣可以看懂。但是谷歌日曆很聰明的使用了插畫，而且每一個月份都會更換，這可以很好的拉近用戶與產品之間的距離。

同樣的，我們可以看到寧波銀行直銷銀行，其圖標背後的插畫每個季度都會更換。定期更換的圖標／插畫打破了傳統的一成不變，不斷帶來新鮮感更能獲得用戶的好評。

谷歌日曆對於插畫的偏愛不止於此，我們發現在用戶的個人日程中，比如你添加了一項活動安排「晚上8點和同事Jimmy喝咖啡」，那麼這個活動背景就會配上很俏皮可愛的咖啡插畫。用戶的情緒能夠被調動起來，特別是對於低年齡段和女性用戶來說，她們很喜歡這種趣味性插畫。

高效的信息傳達

此外用戶對於具象元素（插畫，icon,圖像或攝影圖等）的感知能力遠比文字要強得多。所以同樣的一個日程安排，使用了插畫了以後，用戶可以在極短時間內明白，這個是和同事的咖啡約會，那個是要去牙醫那裡看病。

根據尼爾森的一項統計顯示，用戶平均只讀每頁文本內容的28%。這意味著，面對大段文字，用戶很少去讀，他們更多的是「掃描」。

以Intercom為例，該網站幾乎每個頁面都配有Quentin Vijoux的插畫。其不拘一格，異想天開的風格令人著迷。當然這裡插畫可不僅僅是好看，每幅插畫都是與其頁面內容緊密聯繫。用戶甚至不用看文字，通過插畫上所描繪的場景就可以知道該頁面的大致內容。換言之插畫在這裡替代了傳統意義上「標題」的作用，不過這種象形結合的「標題」更加高效。

Intercom中插畫的應用更可以幫助其品牌樹立形象。目前市場上有大量功能相近且設計相類似的產品，用戶最終選擇使用的是哪款產品可能就是因為他覺得有個頁面中那副長頸鹿插圖很好看。

增加產品趣味性

Know Lupus是一個旨在向人們科普狼瘡這種疾病的網站。眾所周知醫學知識晦澀難懂，並且學習過程漫長又枯燥乏味。為了改變這個窘境，設計師們將學習過程做成了一個卡片問答遊戲。寓教於樂，並且引入了插畫和動效，使整個學習過程充滿了趣味性。

插畫or圖像

具象元素不僅可以更好的完成信息的傳達，更能吸引用戶的注意力。那麼插畫能夠做的事情圖片（攝影圖）也能做到嗎？並不完全能。

這是一個大學生就業網站頁面，左側是一些重要的就業信息，右側為大學生討論時的照片。藍色的小點代表了用戶注意力所分佈的區域，研究表明在有更為重要內容的前提下或者圖像本身不具有任何意義，圖像僅作為一個裝飾物的存在很容易被用戶忽視。

當然這並不意味著，我們需要把頁面中所有的圖像全部給刪掉，圖像依舊是一個重要的設計元素，我們要學會的是如何正確的去使用。

在下面這個頁面中，用戶可以看到團隊中團員信息，我們發現用戶的注意力都會集中團員的頭像上。為什麼同樣是圖像，所獲得的待遇就差的那麼多呢？因為這裡的圖像（頭像）是有意義的，具有功能性，而不是一個裝飾物。用戶通過頭像可以迅速準確的獲知組員身份，這比一個個去看組員姓名要快得多，所以用戶會更多的將注意力放在圖像上。

在上面這個例子中，圖像成為了傳遞信息的載體，它們不再只是內容的裝飾物，它們本身就是內容。

此外，插畫比圖像應用更廣泛的一個原因是插畫在UI設計中更具有實際意義。因為無論是插畫還是圖像都是為了讓用戶更好的接受頁面中內容，而現在內容在頁面中正在變的越來越抽象，圖像很難直接來表現。

Dropbox Carousel是一個為Dropbox用戶管理照片和視頻的app。即使這款app管理的主要都是攝影圖，但是設計師在進行UI設計的時候還是摒棄了攝影圖。因為他們認為，用戶看到一張照片，只要主角不是本人，他們就很難產生關聯感。比如圖中的那個過生日場景，這裡採用插畫會給我們一種很溫馨的感覺。如果是真人出鏡這種感覺就會減弱，因為那個人不是我啊。相比於圖片，用戶對於插畫更具有代入感。

此外還有我之前上面說到的Konw Lupus網站採用插畫的原因之一就是，如果直接給用戶展示現實生活中狼瘡病人的照片可能會引起他們的不適。插畫可以對病人進行卡通化處理，這裡還特意省略了病人的面部表情。

總結

我們一直常說要給用戶好的體驗，但是究竟什麼才是好的體驗呢。我認為好的體驗應該超出用戶預期，並且讓用戶有所感知。我相信插畫的合理應用可以很好的幫助用戶了解你的產品，實現差異化設計。希望這篇文章可以給各位同行在未來的插畫設計中提供一些幫助。