【干貨】app用戶插畫設(shè)計(jì)

插畫的合理應(yīng)用可以很好地幫助用戶了解你的產(chǎn)品，實(shí)現(xiàn)差異化設(shè)計(jì)。本文作者希望這篇文章可以給各位同行在未來(lái)的插畫設(shè)計(jì)中提供一些幫助。

在互聯(lián)網(wǎng)產(chǎn)品剛剛興起的階段，app對(duì)于用戶來(lái)說(shuō)更多意味著一種工具，界面設(shè)計(jì)講究“專業(yè)性”，用戶要求也不是太高，看懂能用就行。但是隨著手機(jī)與用戶之間的聯(lián)系變得越來(lái)越緊密，現(xiàn)在我們?cè)绯啃褋?lái)，做的第一件事情就是打開(kāi)手機(jī)，晚上也經(jīng)常是手機(jī)伴我們?nèi)朊?。手機(jī)不僅僅是工具，它開(kāi)始變成了我們身體的一部分，或者說(shuō)是身體的延伸。

用戶對(duì)于app的要求也水漲船高起來(lái)，對(duì)于新時(shí)期的用戶來(lái)說(shuō)，app不僅僅是功能的集合，還要滿足他們的情感需求。網(wǎng)站也面臨同樣的挑戰(zhàn)。如何讓產(chǎn)品滿足用戶的情感需求進(jìn)而與之建立聯(lián)系開(kāi)始成為了設(shè)計(jì)師們的一個(gè)共同的課題。插畫的合理應(yīng)用或許可以幫助到我們。

人性化處理

用戶對(duì)于傳統(tǒng)互聯(lián)網(wǎng)產(chǎn)品一大吐槽就是過(guò)于“機(jī)械感”，對(duì)此設(shè)計(jì)師們對(duì)產(chǎn)品進(jìn)行了人性化處理。拿谷歌日歷舉例，一般的日歷類應(yīng)用界面可以做的很簡(jiǎn)單，直接給用戶展示一個(gè)“日歷”就行了，用戶同樣可以看懂。但是谷歌日歷很聰明的使用了插畫，而且每一個(gè)月份都會(huì)更換，這可以很好的拉近用戶與產(chǎn)品之間的距離。

同樣的，我們可以看到寧波銀行直銷銀行，其圖標(biāo)每個(gè)季度都會(huì)更換。定期更換的圖標(biāo)/插畫打破了傳統(tǒng)的一成不變，更能獲得用戶的好感。

谷歌日歷對(duì)于插畫的偏愛(ài)不止于此，我們發(fā)現(xiàn)在用戶的個(gè)人日程中，比如你添加了一項(xiàng)活動(dòng)安排“晚上8點(diǎn)和同事Jimmy喝咖啡”，那么這個(gè)活動(dòng)背景就會(huì)配上很俏皮可愛(ài)的咖啡插畫。用戶的情緒能夠被調(diào)動(dòng)起來(lái)，特別是對(duì)于低年齡段和女性用戶來(lái)說(shuō)，她們很喜歡這種趣味性插畫。

高效的信息傳達(dá)

此外，用戶對(duì)于具象元素(插畫，icon,圖像或攝影圖等)的感知能力遠(yuǎn)比文字要強(qiáng)得多。所以同樣的一個(gè)日程安排，使用了插畫了以后，用戶可以在極短時(shí)間內(nèi)明白，這個(gè)是和同事的咖啡約會(huì)，那個(gè)是要去牙醫(yī)那里看病。

根據(jù)尼爾森的一項(xiàng)統(tǒng)計(jì)顯示，用戶平均只讀每頁(yè)文本內(nèi)容的28%。這意味著，面對(duì)大段文字，用戶很少去讀，他們更多的是“掃描”。

以Intercom為例，該網(wǎng)站的幾乎每個(gè)頁(yè)面都配有了Quentin Vijoux的插畫。其不拘一格，異想天開(kāi)的風(fēng)格令人著迷。當(dāng)然這里的插畫可不僅僅是為了好看，每幅插畫都是與其頁(yè)面內(nèi)容相關(guān)聯(lián)起來(lái)的。用戶甚至不用看文字，通過(guò)插畫上所描繪的場(chǎng)景就可以知道該頁(yè)面的大致內(nèi)容。插畫在這里可以說(shuō)替代了傳統(tǒng)意義上“標(biāo)題”的作用，不過(guò)這種“標(biāo)題”更加的高效。

Intercom中插畫的應(yīng)用更可以幫助其品牌樹(shù)立形象。目前市場(chǎng)上有大量功能相近且設(shè)計(jì)相類似的產(chǎn)品，用戶最終選擇使用的是哪款產(chǎn)品可能就是因?yàn)樗X(jué)得有個(gè)頁(yè)面中那副長(zhǎng)頸鹿插圖很好看。

增加產(chǎn)品趣味性

Know Lupus是一個(gè)旨在向人們科普狼瘡這種疾病的網(wǎng)站。我們都知道醫(yī)學(xué)知識(shí)都是比較晦澀難懂的，所以學(xué)習(xí)過(guò)程比較枯燥。為了改變這個(gè)窘境，設(shè)計(jì)師們將學(xué)習(xí)過(guò)程做成了一個(gè)卡片問(wèn)答游戲。寓教于樂(lè)，并且引入了插畫和動(dòng)效，使整個(gè)學(xué)習(xí)過(guò)程充滿了趣味性。

插畫or圖像

具象元素不僅可以更好的完成信息的傳達(dá)，更能吸引用戶的注意力。那么插畫能夠做的事情圖片(攝影圖)也能做到嗎?并不完全能。

這是一個(gè)大學(xué)生就業(yè)網(wǎng)站頁(yè)面，左邊是一些重要的就業(yè)信息，右邊是一張兩個(gè)大學(xué)生的配圖。藍(lán)色的小點(diǎn)代表了用戶注意力所分布的區(qū)域，研究表明在有更為重要內(nèi)容的前提下或者圖像本身不具有任何意義，圖像僅作為一個(gè)裝飾物的存在很容易被用戶忽視。

當(dāng)然這并不意味著，我們需要把頁(yè)面中所有的圖像全部給刪掉，圖像依舊是一個(gè)重要的設(shè)計(jì)元素，我們要學(xué)會(huì)的是如何正確的去使用。

在下面這個(gè)頁(yè)面中，用戶可以看到團(tuán)隊(duì)中團(tuán)員信息，我們發(fā)現(xiàn)用戶的注意力都會(huì)集中團(tuán)員的頭像上。為什么同樣是圖像，所獲得的待遇就差的那么多呢?因?yàn)檫@里的圖像(頭像)是有意義的，具有功能性，而不是一個(gè)裝飾物。用戶通過(guò)頭像可以迅速準(zhǔn)確的獲知組員身份，這比一個(gè)個(gè)去看組員姓名要快得多，所以用戶會(huì)更多的將注意力放在圖像上。

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

此外，插畫比圖像應(yīng)用更廣泛的一個(gè)原因是插畫在UI設(shè)計(jì)中更具有實(shí)際意義。因?yàn)闊o(wú)論是插畫還是圖像都是為了讓用戶更好的的接受頁(yè)面中內(nèi)容，而現(xiàn)在頁(yè)面中的內(nèi)容正在變的越來(lái)越抽象，圖像很難直接來(lái)表現(xiàn)。

Dropbox Carousel是一個(gè)為Dropbox用戶管理照片和視頻的app。即使這款app管理的主要都是攝影圖，但是設(shè)計(jì)師在進(jìn)行UI設(shè)計(jì)的時(shí)候還是摒棄了攝影圖。因?yàn)樗麄冋J(rèn)為，用戶看到一張照片，只要主角不是本人，他們就很難產(chǎn)生關(guān)聯(lián)感。比如圖中的那個(gè)過(guò)生日?qǐng)鼍?，這里采用插畫會(huì)給我們一種很溫馨的感覺(jué)。如果是真人出鏡這種感覺(jué)就會(huì)減弱，因?yàn)槟莻€(gè)人不是我啊。相比于圖片，用戶對(duì)于插畫更具有代入感。

此外，還有我之前上面說(shuō)到的Konw Lupus網(wǎng)站采用插畫的原因之一就是，如果直接給用戶展示現(xiàn)實(shí)生活中狼瘡病人的照片可能會(huì)引起他們的不適。插畫可以對(duì)病人進(jìn)行卡通化處理，這里還特意省略了病人的面部表情。

總結(jié)

我們一直常說(shuō)要給用戶好的體驗(yàn)，但是究竟什么才是好的體驗(yàn)?zāi)?我認(rèn)為好的體驗(yàn)應(yīng)該超出用戶預(yù)期，并且讓用戶有所感知。我相信插畫的合理應(yīng)用可以很好的幫助用戶了解你的產(chǎn)品，實(shí)現(xiàn)差異化設(shè)計(jì)。希望這篇文章可以給各位同行在未來(lái)的插畫設(shè)計(jì)中提供一些幫助。

分享文章：【干貨】app用戶插畫設(shè)計(jì)
本文網(wǎng)址：http://www.bm7419.com/news/172722.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、用戶體驗(yàn)、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、建站公司、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)