網(wǎng)站建設(shè)中的插圖改善UX的6種方式

俗話說“一張圖片值得一千個單詞”仍然與今天的經(jīng)歷有關(guān)。人們被視覺吸引的速度比文字吸引的速度快，照片和插圖的這種自然屬性使其對于視覺設(shè)計非常有用。

在現(xiàn)代用戶界面中，照片和插圖與文本和交互元素一起成為功能元素。插圖是創(chuàng)建獨特設(shè)計的一種通用方法。從手繪的英雄風格插圖到小圖標，關(guān)于素描圖像的一切感覺都像藝術(shù)品。在本文中，我想從現(xiàn)代UI設(shè)計的角度回顧一些插圖的功能。

插圖如何幫助改善用戶體驗

與其他視覺元素類似，插圖可以是功能強大的交流工具。精心制作的插圖具有以下優(yōu)點：

• 可以吸引用戶的注意力，并以易于理解的視覺格式提供最關(guān)鍵的信息。
• 可以使一個復(fù)雜的想法更加清晰。如果您可以使用視覺效果提供此信息，則無需使用任何文字。
• 可以吸引用戶。精美的插圖不僅吸引了用戶的注意力，還使用戶對產(chǎn)品本身產(chǎn)生了興趣。
• 可以發(fā)揮用戶的想象力。通過使用插圖可以融合現(xiàn)實和想象力。

插圖改善UX的6種方式

在很多情況下，插圖可以改善產(chǎn)品的用戶體驗。這是其中的6個：

1.更快地交付要點

如前所述，插圖具有很好的解釋和說明潛力。在網(wǎng)站和移動應(yīng)用程序的上下文中，從第一個屏幕開始，就有十二種使用插圖的方法來改善UX。例如，可以通過使用教程屏幕上的插圖來使入門過程更加有趣。這種方法為移動應(yīng)用程序帶來了額外的好處，即有助于避免屏幕上顯示過多文本。

圖片來源：Divan Raj

使用插圖，可以顯示產(chǎn)品計劃之間的差異。

插圖說明了服務(wù)計劃之間的區(qū)別。圖片來源：Dribbble

最后但并非最不重要的一點是，當用戶遇到問題時，可以使用插圖添加一點幽默感來使問題變得人性化。

Google航班中的錯誤頁面。圖片來源：Dribbble

2.創(chuàng)造更難忘的經(jīng)歷

作為用戶，我們會定期使用很多產(chǎn)品，但是只有其中一部分會帶來真正令人難忘的體驗。

作為設(shè)計師，如果我們想創(chuàng)造令人難忘的體驗，就需要學習人腦的工作方式。芭芭拉·弗雷德里克森（Barbara Fredrickson）和丹尼爾·卡尼曼（Daniel Kahneman）提出了一種心理啟發(fā)式方法，稱為峰末規(guī)則，該規(guī)則決定了我們的大腦處理信息的方式。最高峰規(guī)則規(guī)定，人們在很大程度上根據(jù)他們在最高峰（即最強烈的點）和最高峰時的感受來判斷一種體驗，而不是根據(jù)體驗的每一刻的總和或平均值。無論體驗是令人愉快還是不愉快，都會發(fā)生效果。

換句話說，當我們記住經(jīng)歷時，我們往往不記得全部經(jīng)歷，而只回憶發(fā)生的關(guān)鍵事件。令人愉快的插圖是成為此類關(guān)鍵事件并提高品牌知名度的機會。  

在用戶界面中使用吉祥物是在設(shè)計中應(yīng)用插圖技術(shù)以創(chuàng)造更令人難忘的體驗的流行方式。吉祥物等品牌元素成為用戶與產(chǎn)品之間的身份和相互聯(lián)系的元素。

Silverback是Mac上的一款應(yīng)用，可簡化游擊手可用性測試，并使用圖示大猩猩作為吉祥物。

3.創(chuàng)建與用戶直接交流的錯覺

每個用戶與產(chǎn)品的交互都是一個旅程。每次旅程的背后都是用戶想要通過使用產(chǎn)品來實現(xiàn)的目標。對于某些體驗，可以將旅程轉(zhuǎn)換為故事，其中用戶將成為角色，目標將成為最終目的地。通過使用戶參與體驗，插圖可以充當用戶和應(yīng)用之間的代理。

一個很好的例子是Omono。該應(yīng)用程序使用貓頭鷹來引導用戶瀏覽界面，并增強應(yīng)用程序的用戶友好性。

插圖可以使用戶對自己的任務(wù)充滿信心，并受到啟發(fā)繼續(xù)前進。

4.加強現(xiàn)有的文體概念

可以在用戶界面中應(yīng)用插圖，以提供對應(yīng)用程序或網(wǎng)站的一般樣式概念的視覺支持。插圖與其他品牌元素（例如徽標，字體，配色方案）一起對產(chǎn)品樣式產(chǎn)生重大影響。根據(jù)樣式創(chuàng)建插圖時，它會給產(chǎn)品（和整個品牌）帶來更自然和和諧的感覺。但是要做到這一點，插圖應(yīng)該感覺一致，就像它們來自同一來源一樣，即使它們是由不同的人創(chuàng)建的。  

圖片來源：Zurb Foundation

5.加強互動過程

網(wǎng)站設(shè)計制程序和網(wǎng)站時，很少將它們視為鏈接在一起的靜態(tài)頁面。交互的概念要求我們添加動畫效果和過渡效果，以使體驗的外觀和感覺更加自然。與設(shè)計的任何其他部分一樣，插圖可以通過動畫來豐富。插圖與動畫相結(jié)合不僅可以提供真正令人難忘的體驗，而且還可以使體驗更具動態(tài)感。  

例如，Readme.io（一項向世界提供精美文檔的服務(wù)）使用戶每次輸入密碼時都會微笑。人們喜歡這種微小的接觸，因為它們使體驗更加人性化。

6.將游戲化元素添加到UX

游戲化是產(chǎn)品設(shè)計師用來提高用戶參與度的一種流行技術(shù)。當應(yīng)為用戶的某些成就而給予獎勵時，設(shè)計人員可以考慮在界面中使用插圖。