學會插畫的這四種玩法,能讓你的UI體驗更優異
人是高度視覺化的生物,能夠即時處理大量的視覺信息,據統計我們所獲取的90%的信息都是視覺化的。單一圖像比起大塊的文本對於用戶而言更容易消化吸收。
因此,在許多情況下,靜態的圖片能夠傳達出相當複雜多樣的想法,尤其是在進行大範圍展示的時候,它比文本的表現力要強的多。人的大腦對與圖像信息的處理速度要比識別文本要快得多。
長期以來,圖片都作為UI界面中最具有表現力的元素而存在,而最近幾年,插畫在UI中出現的比例越來越高,在許多地方都有替代圖片的趨勢。
其實原因並不複雜,插畫比起圖片可控性更強,更容易發揮創意,營造氛圍,傳遞信息。從內容到技術細節,插畫都在某種程度上超過現成的圖片。
在今天的文章當中,我們聊聊插畫在UI設計中的運用,探討一下它是怎麼提升用戶體驗的。
插畫的特點
實際上,現在我們所說的插畫(illustration)的詞根illustrate原本的含義是「澄清,說明」。
在現代平面設計中,插畫是頗為常用的展示性元素,是視覺傳達的重要工具。
插畫在設計作品中,常常用來引導、啟發和呈現信息,更有針對性地、視覺化地同用戶進行交流。
真正高效的插畫一定是有針對性的,易於識別的,並且能夠被不同的用戶輕鬆理解的。
想要讓插畫最大化地為用戶創造價值,你可以參考下面的四個範例:
首頁插畫
好的網頁設計對於潛在用戶的影響是巨大的。
許多用戶在判斷一個企業、團隊或者品牌的優劣的時候,他們的網站的優劣是一個重要的判據。這也是為什麼現如今網頁設計師們都在想盡一切辦法提升網頁的用戶體驗。
這一點,網頁和現實世界是一樣的,好的第一印象往往源自於優秀的視覺效果。
吸引用戶,激發想像力,這樣才能和用戶構建起緊密的關聯。獨特而傳神的插畫的價值就在這裡,尤其是當這些獨特的插畫呈現在打開率最高的網頁首頁上的時候。
和品牌氣質所匹配的插畫不僅能夠幫網站篩選用戶,而且能夠強化品牌屬性。
吉祥物
品牌所傳遞的感受、氣質最好的落腳點就是品牌代言人和品牌吉祥物。
吉祥物能夠讓虛擬的品牌調性更加真實,作為品牌的外化表現,吉祥物能夠讓品牌給人更加值得信賴的感覺,讓品牌更加富有吸引力。
吉祥物的呈現形式很多,在網頁上,它通常是以插畫的形式出現的。
吉祥物在UI界面中出現,能夠賦予界面交互以生命力,保持用戶持續的注意力,成為整個用戶體驗中無法忽略的重要元素,提升整體的參與度。
目前,電子郵件服務供應商Mailchimp可能是藉助吉祥物來提升用戶體驗最成功的案例。
Mailchimp 每個頁面上都有黑猩猩吉祥物Freddie扮演不同的角色,搞笑,甚至替代某個元素來強化互動,它的存在讓Mailchimp的體驗和用戶黏度都有了不小的提升。
優秀的吉祥物是積極用戶體驗的基礎。
新手教程和新用戶引導流程
插畫還有一個重要功能,就是提供視覺引導。插畫能夠將複雜的概念簡化為易於理解的視覺信息,圖片比文字的吶喊更加響亮,這也是為什麼插畫會常常運用到新手教程和新用戶引導流程中來。
新手教程和新用戶引導流程常常會介紹應用或網頁的主要功能、優點,插畫以圖形化的形式為用戶提供上下文環境,讓界面所要傳遞的信息更加明朗,幫助用戶明白如何執行當前步驟,怎麼進入下一步。
當頁面或者APP採用極簡設計的時候,界面搭配一幅簡單的插畫來傳遞關鍵性的信息,不需要太多的文本就可以了。
富有吸引力的插畫和強互動性的功能讓剛剛進入新用戶引導流程的用戶對APP產生興趣,從中感到快樂的用戶會更加渴望使用APP。
到了現在這個時間點,插畫和動效往往會搭配起來使用,達到最大化的效果。
使用插畫能將一個漫長無聊的教程變為一段有趣的旅程。相比於複雜的文本解釋,圖像、插畫和動效能讓用戶更輕鬆吸收和理解。即使你不會繪製複雜的插畫,簡單的漫畫也能夠達到類似的效果。
獎勵界面插畫
對於遊戲我們這代人應該有所接觸,甚至非常熟悉。幾乎每個遊戲在達成成就、闖過關卡之後,都會出現獎勵界面,「解鎖成就」這個詞就是由此而來的。
解鎖成就為什麼對於用戶這麼重要呢?一方面,緊張的遊戲過程帶來的成就感讓用戶感到快感,另一方面,解鎖成就的獎勵界面能夠給用戶一種屏幕背後有個真實的人在為他們慶賀。這是一種情感上的交互。
獎勵機制的核心在於,通過積極的情緒刺激來建立情感聯繫。這種積極的情緒激勵嚴格意義上算是情感化設計的範疇,情感上的引導會讓用戶關注到他們想看的內容,或者讓他們看的內容,部分應用的缺陷甚至可以被用戶所忽略。
成就徽章是成就系統中最常見的元素,一系列設計精巧的徽章圖標加上遊戲和用戶互動,能夠讓用戶逐步沉迷到這套體系當中。
精緻的插畫出現在成功狀態的頁面當中,能夠讓你的用戶感覺到被重視。
結語
插畫增強用戶體驗是客觀存在的,它是提高UI吸引力的強大工具。雖然插畫的運用並沒有太多硬性的規定,但是務必記住一點:
確保插畫的可用性。插畫最終是要應用到產品當中,成為產品和品牌的一部分。
文章來源:
點擊展開全文
※JavaScript初學者必看「箭頭函數」
※BootStrap基礎
※再談PHP錯誤與異常處理
※程序員為什麼會憂慮自己的未來?
※安卓之父再戰蘋果
TAG:優才學院 |
※用色風格很獨特的一組插畫作品!動漫插畫也能畫的很有藝術性哦!
※插畫丨動態gif小插畫的魅力就在於,你不知道下一幀它會帶給你怎樣的驚喜
※插畫丨他是魔性擼貓的插畫師,畫出一對時尚圈的喵和汪,簡直不能再酷了
※模玩控:一組可以做頭像的高達插畫作品,大家能認出它們都是什麼機體嗎?
※這樣的作品能做插畫師嘛?在線等,挺急的
※一支針管筆也能畫出這麼有味道的插畫?我得學學!
※一組很有意境的插畫!看這個畫師的作品有一種讓心情平靜的感覺
※奢侈品Gucci大玩藝術,這樣的插畫你怎麼看?
※插畫丨他的作品有「皮膚之鏡」的稱號,手下的物體雕塑,是你不能想像到的小精靈
※最特別的畫師,更有趣的插畫
※日本插畫師人物造型很可愛的一組插畫作品!這畫風可謂很精緻了
※這些腦洞大開的插畫,原來藝術可以這樣玩
※一組充滿活力的奇想插畫作品,你還在為你的造型不好找借口嗎?
※插畫丨他的作品有「皮膚之鏡」的稱號,手下的物體雕塑,是你不能想像到的小精靈。
※插畫丨動物沒人比他畫的更酷了,感覺要成精!將水彩和數字結合的神秘幻想
※她以一種奇妙的方式,將生活變成唯美的的插畫
※插畫丨自學成才的插畫師,一個不折不扣條紋控,炫酷的gif動效,像被拽著踏入魔幻的色彩迷宮
※看過嗎,藏式人物插畫竟可以這樣有型有魅力
※手作丨當插畫變成實體裝飾品,生活的每一個角落都有這些溫暖可愛的小物裝點
※看不慣身邊的小夥伴曬鞋,他畫了這麼一組有關穿鞋姿勢的插畫