人是視覺動(dòng)物，人類大腦處理或接收的信息幾乎有90％是視覺的。這就是為什么每個(gè)人都經(jīng)常說一張圖片勝過千言萬語。在許多情況下，圖像比復(fù)雜文本更快更容易傳達(dá)信息。網(wǎng)站上的設(shè)計(jì)師經(jīng)常使用圖像來擴(kuò)展網(wǎng)站的表現(xiàn)力，創(chuàng)建一個(gè)很棒的UI界面，并使訪問者之間的互動(dòng)更加接近。但是越來越多的設(shè)計(jì)師最近傾向于使用插圖，因?yàn)椴鍒D是所有圖片中最具表現(xiàn)力的。使用您網(wǎng)站上的插圖可以使枯燥的文字更有趣，并使UI界面更具視覺效果，激發(fā)游客的興趣。同時(shí)，網(wǎng)站信息內(nèi)容的精細(xì)化和傳播更加直觀，生動(dòng)，有利于提升用戶體驗(yàn)。因此，在今天的文章中，Xiaofei將向您介紹插圖以及如何應(yīng)用插圖來進(jìn)行UI界面設(shè)計(jì)?？靵砜纯窗?！

插圖

插圖實(shí)際上是插圖的通用名稱。原始圖片是指報(bào)紙，雜志和報(bào)紙中添加的圖片。它們已成為現(xiàn)代設(shè)計(jì)中重要的視覺傳達(dá)方法，在許多領(lǐng)域得到廣泛應(yīng)用。如商業(yè)活動(dòng)，網(wǎng)站設(shè)計(jì)，文化事業(yè)等。插圖是英文插圖，實(shí)際上源自拉丁文illustraio，意思是照亮，這意味著插圖可以使文字更清晰，更清晰。此外，它還可以增加文字的趣味性，讓文字給用戶留下更生動(dòng)的印象，增強(qiáng)藝術(shù)的吸引力。在網(wǎng)頁設(shè)計(jì)中，插圖正在成為一種功能元素。作為設(shè)計(jì)師與用戶溝通的工具，它通過視覺元素有效地體驗(yàn)和傳遞信息。如果文本可以告訴訪問者某種信息，插圖可以向訪問者顯示信息。但是，如果你想充分利用插圖的功能，我們在使用它們時(shí)必須遵循兩個(gè)標(biāo)準(zhǔn)：一個(gè)是插圖應(yīng)該易于識別;另一個(gè)是插圖可以由不同背景和文化的訪問者解釋而不含糊。

以下是小飛總結(jié)的網(wǎng)站插圖的不同使用場景，并分析了一些完成度較高的栗子。我希望每個(gè)人都可以向他們學(xué)習(xí)并獲得一些東西。

在主頁上使用插圖

良好的網(wǎng)頁設(shè)計(jì)通常需要給訪問者或潛在用戶留下深刻印象，因?yàn)槿藗兛偸歉鶕?jù)網(wǎng)站的質(zhì)量來判斷公司的質(zhì)量。這可能聽起來有點(diǎn)殘酷，但這是事實(shí)。主頁是網(wǎng)站的外觀，用于確定網(wǎng)站訪問者的第一印象，第一印象通常是可視的，因此許多用戶在主頁上使用插圖。使用網(wǎng)站主頁上的插圖可以為整個(gè)網(wǎng)站帶來更多的藝術(shù)美感，使主頁更加生動(dòng)。這些主頁插圖還喚起用戶的想象力并在用戶和網(wǎng)站之間建立連接。此外，獨(dú)特的插圖可以使您的網(wǎng)站與競爭對手區(qū)分開來，并創(chuàng)造更強(qiáng)大的品牌吸引力。

對講機(jī)是板栗。在其主頁上，如果“與客戶溝通不應(yīng)該這么難”和“與對講機(jī)一起使用，簡單，個(gè)性化，對每個(gè)人都有趣”這些詞語不能形成強(qiáng)烈反差，很難引起訪客的興趣。因此，Intercom使用插圖來模擬“您”與用戶之間的通信。舊方法和新方法之間的優(yōu)缺點(diǎn)清晰直觀，體現(xiàn)了產(chǎn)品的優(yōu)勢。這種親密的解釋更有利于吸引訪客并吸引訪客進(jìn)入用戶。

　在不同頁面上使用插圖如吉祥物

吉祥物是一種插圖，通常用作商品標(biāo)志和企業(yè)形象的代表。在網(wǎng)站上使用吉祥物可以帶來許多好處。憑借其強(qiáng)大的親和力和樂趣，吉祥物可以迅速贏得游客的信任，并在訪客和網(wǎng)站之間建立情感紐帶;它可以使交互過程更加生動(dòng)，保持用戶的注意力。此外，對于參觀者來說，這個(gè)圖形元素是絕對新鮮的，可以給他們留下深刻的印象。

Mailchimp是使用吉祥物來增強(qiáng)用戶體驗(yàn)的最著名的網(wǎng)站。在小飛面前，網(wǎng)站上還提到了優(yōu)秀的404頁面設(shè)計(jì)和CTA按鈕。 Mailchimp是一個(gè)提供電子郵件營銷服務(wù)的網(wǎng)站。它的吉祥物是一只叫Freddie的可愛猩猩。一方面，F(xiàn)reddie帶著斜挎包，承擔(dān)著傳統(tǒng)郵遞員的責(zé)任，突出了網(wǎng)站的主題，并與品牌形象相匹配。另一方面，F(xiàn)reddie的吉祥物可以大或小，可以出現(xiàn)在網(wǎng)站的不同頁面上，并扮演各種角色，例如引導(dǎo)訪問者到某個(gè)街區(qū)或只是招待訪客，使用戶體驗(yàn)更加愉快。

　在教程上使用插圖

插圖的一個(gè)重要特征是使枯燥的文本變得生動(dòng)，并用簡單的圖片解釋復(fù)雜的概念。這是網(wǎng)站上一些教程或說明手冊的福音。網(wǎng)站上的教程和說明書通常冗長乏味，添加插圖可以極大地解決這個(gè)問題，為訪問者提供更多的視覺信息，減輕閱讀負(fù)擔(dān)，讓他們更加渴望了解細(xì)節(jié)。用戶界面看起來也更令人愉悅。如果您沒有正確的插圖來解釋教程，動(dòng)畫效果是一個(gè)不錯(cuò)的選擇。

下圖是應(yīng)用程序的用戶界面。當(dāng)用戶登錄時(shí)，將對軟件安全信息提供一些指導(dǎo)，以便用戶可以更多地信任該軟件。您可以看到此信息不是純文本，而是與插圖結(jié)合使用。這些“信用卡，盾牌，賬單”的插圖使信息更加直觀和易懂，并吸引訪問者停止瀏覽。該應(yīng)用程序的用戶界面也采用卡式設(shè)計(jì)，整體設(shè)計(jì)布局整潔。由此我們還可以看到，當(dāng)插圖和最小用戶界面（如手機(jī)界面）結(jié)合優(yōu)勢時(shí)，插圖不僅可以傳輸某些視覺信息，還可以侵占其他元素所扮演的空間。

　在獎(jiǎng)勵(lì)界面使用插圖

獎(jiǎng)勵(lì)界面可能是游戲軟件中最常見的。幾乎所有游戲都有一定的水平。當(dāng)你通過一定數(shù)量的等級時(shí)，你可以獲得某種成就或獎(jiǎng)勵(lì)。許多設(shè)計(jì)師在獎(jiǎng)勵(lì)頁面上使用一些插圖來關(guān)注用戶的情感交互。例如，在下圖中，F(xiàn)oursquare在獎(jiǎng)勵(lì)頁面上使用了市長獎(jiǎng)?wù)?。這可以給用戶帶來很多鼓勵(lì)，同時(shí)創(chuàng)造一種感覺，他們覺得手機(jī)屏幕的末端不是機(jī)器，而是活人。此外，這樣的插圖可以帶來積極的情緒，當(dāng)訪客受到這種情緒的影響時(shí)，他們經(jīng)常會(huì)忽略網(wǎng)站上的一些缺點(diǎn)。

我們還可以使用插圖來鼓勵(lì)用戶訪問網(wǎng)站。例如，當(dāng)用戶完成注冊登錄時(shí)，他們可以獲得禮品包或其他獎(jiǎng)勵(lì)等，以幫助為用戶創(chuàng)建積極情緒，或者在用戶完成購買之后給出積分或抽獎(jiǎng)。許多商城網(wǎng)站已經(jīng)使用過它。技巧。

從上面的栗子中，我們可以看到插圖是一種強(qiáng)大的工具，可以增強(qiáng)用戶體驗(yàn)并使用戶界面更具吸引力。雖然在網(wǎng)站上使用插圖尚未形成完整的規(guī)則體系，但有一點(diǎn)是毋庸置疑的：插圖必須具有價(jià)值。使用網(wǎng)站的各種元素應(yīng)該有一定的目的和插圖。只有這樣，插圖才能在網(wǎng)站上利用自己的利益，并深入了解公司的產(chǎn)品或品牌。在您自己的網(wǎng)站上使用插圖！來到起飛頁自助網(wǎng)站（http://www.qifeiye.com/?t_wd=a5）并建立一個(gè)網(wǎng)站！

« 如何為江湖商業(yè)區(qū)的O2O系統(tǒng)社區(qū)模塊創(chuàng)建營銷爆炸點(diǎn)？ | 520懺悔？有一個(gè)互動(dòng)營銷干貨 »