過(guò)去的幾年中,用戶界面中加入插圖一直是最受歡迎也最穩(wěn)固的設(shè)計(jì)趨勢(shì)之一。今天,摹客的小伙伴將帶領(lǐng)大家一起討論設(shè)計(jì)師在網(wǎng)頁(yè)或移動(dòng)APP的UI設(shè)計(jì),尤其是核心視覺(jué)元素中使用插圖的原因。
什么是插圖?
基本上,插圖是對(duì)特定概念,文本或過(guò)程的視覺(jué)解釋。這是一個(gè)旨在支持、澄清甚至擴(kuò)展人們從其他信息來(lái)源獲得的想法的圖像,通常以文本的形式給出。這個(gè)詞本身就意味著“為某些事物投光”,因此它的主要目的是幫助用戶理解或想象更好的東西。
多年來(lái),插圖已被整合到各種印刷品中,如書籍,雜志,報(bào)紙,海報(bào),傳單,教育材料。后來(lái),動(dòng)畫和視頻制作為插畫帶來(lái)了新的氣息。最近,新的技術(shù)和工具推動(dòng)了數(shù)字插畫時(shí)代的發(fā)展。
隨著網(wǎng)站和移動(dòng)應(yīng)用程序的不斷增長(zhǎng),插畫的需求和應(yīng)用也不斷飆升。由于其美觀性和創(chuàng)造性,插畫也是作為提高可用性、情感和視覺(jué)吸引力的界面之一。但是在UI設(shè)計(jì)中有哪些功能是可以通過(guò)插圖來(lái)說(shuō)明的呢?

界面設(shè)計(jì)中使用插圖的方法
和其他界面元素一樣,插畫的功能性多于裝飾性,可以使信息或交互變得更清晰明了,也更加時(shí)尚。所以,何樂(lè)而不為?以下是我總結(jié)的可以使用插圖的地方:
•主頁(yè)橫幅
•主題圖片
•吉祥物和人物
•博客文章圖片
•引導(dǎo)流程和工具提示
•獎(jiǎng)勵(lì)和其他游戲化圖形
•通知和系統(tǒng)消息
•貼紙(特別適用于Messenger應(yīng)用程序)
•講故事
•信息圖表
•營(yíng)銷材料和廣告橫幅
•內(nèi)容類別的可視標(biāo)記
•支持網(wǎng)站或應(yīng)用的社交網(wǎng)絡(luò)頁(yè)面。
以下是插圖在界面設(shè)計(jì)中深受歡迎的十大理由 – 也許你可以考慮在下一個(gè)設(shè)計(jì)項(xiàng)目中使用它們。

界面設(shè)計(jì)中使用插圖的十大理由
1. 自定義插圖為原創(chuàng)性和藝術(shù)和諧奠定了堅(jiān)實(shí)的基礎(chǔ)
圖形為界面、印刷品或品牌相關(guān)的東西增添了一絲風(fēng)格和創(chuàng)意。在競(jìng)爭(zhēng)激烈的世界中,脫穎而出至關(guān)重要。否則,人們甚至可能不會(huì)嘗試你的產(chǎn)品,更不用說(shuō)了解它的好處了。
順便說(shuō)一下,這就是為什么許多公司將插圖用作博客文章、評(píng)論和登陸頁(yè)面的主頁(yè)橫幅的原因。在這種情況下,設(shè)計(jì)師可以根據(jù)目標(biāo)受眾偏好對(duì)作品進(jìn)行微調(diào),并將其與特定項(xiàng)目或主題背后的業(yè)務(wù)目標(biāo)或想法進(jìn)行平衡。這樣可以找到充滿趣味的隱喻、配色方案、角色和環(huán)境,從而有效地吸引特定的讀者群或觀眾。

看看這副關(guān)于UI動(dòng)畫的文章的隱喻標(biāo)題插圖。智能手機(jī)扮演幕墻或屏幕的角色,就像在木偶劇院中使用的那種,設(shè)計(jì)師充當(dāng)演員,每個(gè)演員都展示了特定的動(dòng)作表現(xiàn)模型。
2. 插圖充當(dāng)可視觸發(fā)器,可快速傳輸必要的消息
絕大多數(shù)人對(duì)圖像的感知能力超過(guò)文字。這是一個(gè)無(wú)關(guān)好壞的事實(shí),只是設(shè)計(jì)師可以利用這一點(diǎn)來(lái)增加網(wǎng)頁(yè)或移動(dòng)布局的視覺(jué)效果。一般來(lái)說(shuō),人們具有非常廣泛的能力來(lái)感知視覺(jué)標(biāo)記,識(shí)別和處理數(shù)據(jù),甚至轉(zhuǎn)換為高級(jí)抽象的圖像。
事實(shí)例證:
•心理學(xué)家聲稱人們需要大約1/10秒來(lái)獲得視覺(jué)場(chǎng)景或元素的一般感知(文本項(xiàng)目的速度確實(shí)不可能)
•視覺(jué)效果能更快地傳遞到大腦。重要的信息通常被大腦固定為視覺(jué)圖像,即使它們是通過(guò)文本感知獲得的
•與背景和周圍元素相結(jié)合,圖像不易受到影響,而文本則高度依賴于可讀性
•圖像有助于保留長(zhǎng)期記憶。這意味著處理界面的用戶不需要處理和記住比實(shí)際需要更多的數(shù)據(jù),因此交互變得更快
•當(dāng)來(lái)自不同國(guó)家/地區(qū)的人使用應(yīng)用或網(wǎng)站時(shí),界面中的視覺(jué)效果可以使其更加通用
•圖片突出了具有文本識(shí)別自然問(wèn)題的用戶的感知極限,例如閱讀障礙或非閱讀學(xué)齡前兒童。
所有上述內(nèi)容構(gòu)成了與插圖建立強(qiáng)大而快速視覺(jué)聯(lián)想的堅(jiān)實(shí)理由:字符、顏色、構(gòu)圖、可識(shí)別的細(xì)節(jié)將快速通知用戶并支持文本形式中給出的消息。

這是一個(gè)數(shù)字代理商的登陸頁(yè)面,通過(guò)一個(gè)由籃球運(yùn)動(dòng)員代表的主頁(yè)橫幅形象迅速傳遞其準(zhǔn)備迎接最高的商業(yè)挑戰(zhàn)和目標(biāo)的信息。


還有一個(gè)例子是為L(zhǎng)unnScape創(chuàng)建的主題插圖。LunnScape是一家專門從事景觀設(shè)計(jì)和植物護(hù)理的公司。這些藝術(shù)品旨在用于營(yíng)銷活動(dòng),社交網(wǎng)絡(luò)和網(wǎng)站。經(jīng)過(guò)一系列的實(shí)驗(yàn),設(shè)計(jì)師想出了柔和色彩和筆觸輕盈的圖形。其中一個(gè)插圖的特點(diǎn)是人們忙于園藝,而第二個(gè)插圖反映了公共空間的風(fēng)景與景觀設(shè)計(jì)。你看,通過(guò)這樣的設(shè)計(jì),插圖立即與景觀主題建立了寶貴的聯(lián)系。
3.圖形為Web或移動(dòng)界面中應(yīng)用的副本提供有效支持
正如之前提到的,在許多情況下,圖片可以作為一種比復(fù)制更通用的通信工具。但是,也有一些陷阱需要仔細(xì)考慮。感知的速度并不是我們唯一需要的東西:人們可以超快地感知插圖,但如果他們傳輸?shù)男畔⒉磺逦蛘呖梢员浑p重閱讀,速度將無(wú)法帶來(lái)積極的用戶體驗(yàn)。
快速捕獲導(dǎo)致錯(cuò)誤理解的圖形不能被定義為識(shí)別,它只是被快速注意到。識(shí)別不僅意味著速度,還意味著應(yīng)該給你用戶指示正確的動(dòng)作或傳達(dá)正確的視覺(jué)元素信息。因此,請(qǐng)立即清除視覺(jué)隱喻以免造成誤解或錯(cuò)誤關(guān)聯(lián)。

這里是一個(gè)金融服務(wù)網(wǎng)站的例證,幫助養(yǎng)老金領(lǐng)取者有效地管理他們的錢并增加他們的儲(chǔ)蓄。藝術(shù)作品會(huì)立即傳送信息,使其與標(biāo)語(yǔ)保持一致。 這樣,當(dāng)布局中的所有元素協(xié)同工作時(shí),網(wǎng)頁(yè)看起來(lái)就很吸引人。
4. 插圖是一個(gè)很好的創(chuàng)造性故事的檢驗(yàn)工具
簡(jiǎn)而言之,講故事是將不同信息塊合并為一個(gè)故事的方法,使它們更讓人印象審核,并在各部分之間建立牢固的聯(lián)系。 這種方法在營(yíng)銷和用戶體驗(yàn)設(shè)計(jì)方面表現(xiàn)得非常有效。

這是為我們最近的佛羅倫薩項(xiàng)目設(shè)計(jì)的插圖集。它是一個(gè)可以讓自由護(hù)士在線尋找工作的平臺(tái)。設(shè)計(jì)師創(chuàng)造了原始角色,展示故事,設(shè)置氛圍,發(fā)送信息或以與平臺(tái)的情緒、語(yǔ)氣和聲音相對(duì)應(yīng)的方式呈現(xiàn)優(yōu)勢(shì)。

5. 插圖在設(shè)定情感訴求方面具有重要的力量
毫無(wú)疑問(wèn),我們都是情感動(dòng)物。談到情感設(shè)計(jì),AarronWalter說(shuō):“許多網(wǎng)站和應(yīng)用程序正在創(chuàng)造更好的體驗(yàn)。他們重新劃分需求的層次結(jié)構(gòu),包括一個(gè)帶有快樂(lè)和愉悅色彩的新頂層。如果界面可以幫助你完成一項(xiàng)關(guān)鍵任務(wù)并讓你感到非常愉悅,那是不是很棒?是的,的確是這樣!這將是你向朋友推薦的一種體驗(yàn); 這將是一個(gè)值得傳播的想法。”
這就是你可以利用插圖實(shí)現(xiàn)的一些有效的事情。你投入其中的一切 – 線條、形狀、顏色、面部表情、曲線動(dòng)態(tài) – 都會(huì)對(duì)點(diǎn)燃情緒產(chǎn)生重大影響。通過(guò)研究用戶行為和影響情感吸引力的因素,設(shè)計(jì)師可以將插圖作為一種強(qiáng)大的工具,將經(jīng)驗(yàn)與用戶情感從最初的互動(dòng)相互連接。

Kiddy的這個(gè)登錄頁(yè)面的設(shè)計(jì)概念讓保姆雇傭變得非常簡(jiǎn)單。可愛(ài)正面的元素在充滿趣味性的插圖中扮演關(guān)鍵角色,為用戶傳遞信息和情緒。在用戶開(kāi)始閱讀服務(wù)之前創(chuàng)造所需的氛圍,并為所有頁(yè)面提供獨(dú)特的外觀。
6. 定制圖形設(shè)計(jì)為美學(xué)滿意度奠定了基礎(chǔ),從而增加了項(xiàng)目的可取性
通過(guò)數(shù)百次關(guān)于“功能優(yōu)先”主題的討論和論證,人們對(duì)美麗和喜悅的自然渴望依然存在。當(dāng)然,實(shí)用性和可用性是任何界面的基礎(chǔ)。可取性是通過(guò)美觀可愛(ài)的外觀讓人們注意到你的產(chǎn)品,感受使用它的樂(lè)趣,并希望再次使用它。插圖則是一種經(jīng)過(guò)精心檢查的方式來(lái)實(shí)現(xiàn)這一目標(biāo),因?yàn)樗鼈兛梢蕴砑用栏?,風(fēng)格,優(yōu)雅或任何您想要添加到界面中的內(nèi)容。

這是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)概念,為旅客提供簡(jiǎn)單明亮的預(yù)訂服務(wù)。它在頁(yè)面左側(cè)使用大幅的3D插圖,而右側(cè)部分則突出搜索住宿的形式。
7. 插圖令人難忘且引人入勝。因此它們?cè)谔岣咂放浦群涂勺R(shí)別性方面有不錯(cuò)的表現(xiàn)
與文本相比,圖像在長(zhǎng)期記憶中具有更好的粘性。當(dāng)圖像提供信息時(shí),影響將會(huì)增長(zhǎng),與目標(biāo)受眾的期望一致的設(shè)計(jì)、布局使得有插圖的UI設(shè)計(jì)可以非常有效的增加網(wǎng)站或移動(dòng)應(yīng)用程序的品牌性。這就是插圖被廣泛用于引導(dǎo)流程的原因之一。

這些是Perfect Recipes應(yīng)用程序的流程引導(dǎo)圖。在交互開(kāi)始時(shí),用戶設(shè)定他們想要實(shí)現(xiàn)的目標(biāo),例如減輕或增加體重,保持健康的飲食等。此外,用戶可能會(huì)標(biāo)記他們不喜歡的成分,以便應(yīng)用程序不會(huì)顯示包含它們的食譜。插圖以明亮和原始的方式可視化目標(biāo)。

這是另一個(gè)使用流程引導(dǎo)的例子。有趣的人物和插圖成為app游戲化的關(guān)鍵元素。集成到UI中的原始吉祥物成為通信和交互的核心元素,在不同的狀態(tài)下,它向用戶傳遞不同的消息,使交互更加用戶友好和擬人化。
8. 數(shù)字插圖可有效創(chuàng)建動(dòng)畫短片和互動(dòng)元素,使交互生動(dòng)優(yōu)雅
越來(lái)越多的網(wǎng)站和應(yīng)用程序在用戶界面中應(yīng)用動(dòng)畫。通過(guò)這種方式,不僅可以增強(qiáng)可用性,還可以增強(qiáng)情感吸引力和UI外觀的優(yōu)雅。這也是為什么我們經(jīng)常看到動(dòng)畫徽標(biāo),圖標(biāo)甚至復(fù)雜的動(dòng)畫插圖。動(dòng)畫能為創(chuàng)意、消息和情緒帶來(lái)更多表現(xiàn)力。更重要的是,應(yīng)用動(dòng)畫視頻也是熱門且有效的趨勢(shì)之,插圖可以獲得更高水平的開(kāi)發(fā)和與用戶的溝通。

這是Whizzly動(dòng)畫徽標(biāo)的示例。Whizzly是年輕人展示人才和分享創(chuàng)意項(xiàng)目的社交網(wǎng)絡(luò)。應(yīng)用于徽標(biāo)及其動(dòng)畫版本的藝術(shù)手段使其看起來(lái)令人愉悅,令人難忘和情緒化。
9. 基于有趣視覺(jué)隱喻的插圖使設(shè)計(jì)獨(dú)特且引人入勝
與藝術(shù)一樣,在設(shè)計(jì)中,隱喻是吸引用戶并使他們考慮所提供的想法的有效方式。插圖使設(shè)計(jì)師能夠處理與特定目標(biāo)和用戶相對(duì)應(yīng)的獨(dú)特隱喻。

這是一個(gè)約會(huì)應(yīng)用程序的登陸頁(yè)面的概念,讓人們找到他們完美的一對(duì)。插圖展示了主題制作明亮的視覺(jué)觸發(fā)器,并有效地結(jié)合了人們聯(lián)合設(shè)備的形象。

平面設(shè)計(jì)師面臨的一個(gè)關(guān)鍵挑戰(zhàn)是尋找原始風(fēng)格 – 而這正是激發(fā)這件藝術(shù)品隱喻的原因。在平面插圖的文章中,平面設(shè)計(jì)師分享了如何抓住這條金魚的實(shí)用技巧,并在標(biāo)題插圖中應(yīng)用了相同的比喻。
10. 人們快速注意并解碼圖像,因此明智地使用插圖可以使交互更簡(jiǎn)單,更快捷
圖標(biāo)和插圖等自定義圖形可以成為界面清晰直觀導(dǎo)航的重大改進(jìn)。在許多情況下,用戶界面中的基本交互通常會(huì)花費(fèi)幾秒鐘,這點(diǎn)非常重要,并且這也是將具有視覺(jué)標(biāo)記的的內(nèi)容轉(zhuǎn)換為圖形的基本原因。但是,請(qǐng)記?。喝绻麍D像可能被錯(cuò)誤地解碼或根本沒(méi)有解碼,他們則需要額外的復(fù)制內(nèi)容支持。而用戶測(cè)試將有助于找出哪些元素絕對(duì)清晰,哪些元素需要用文本解釋。

以下是為移動(dòng)照片編輯器創(chuàng)建的原始圖標(biāo)Cuteen:支持文本提示的優(yōu)雅插圖可幫助用戶快速輕松地處理內(nèi)容。
要考慮的要點(diǎn)
當(dāng)然,現(xiàn)有的認(rèn)知方案不可能滿足用戶的任何要求,但在圖形設(shè)計(jì)方面有一些必須考慮的要點(diǎn):
•目標(biāo)受眾(身體能力,年齡,文化背景,總體發(fā)展和教育水平)
•典型的產(chǎn)品使用環(huán)境
•全球或本地產(chǎn)品差價(jià)水平
•所選圖形和隱喻的識(shí)別水平
•圖形提供的分心/集中程度
所有提到的要點(diǎn)都涉及人類認(rèn)知能力并影響視覺(jué)數(shù)據(jù)感知的質(zhì)量。對(duì)于設(shè)計(jì)師來(lái)說(shuō),重要的是要記住:僅僅讓用戶看到布局的元素是不夠的,讓他們認(rèn)識(shí)到這些圖形的意義并快速理解它們所傳遞的信息是至關(guān)重要的。
原文地址:Mockplus
作者:Grace
