10個理由告訴你,為什么插畫在UI設計中這么火

      作者:Tubik Stud
      分類: 觀點/經驗
      2018-10-26
      7732

      在過去幾年當中,插畫開始以一種堅挺的姿勢,站在設計趨勢的最前列。

      在過去幾年當中,插畫開始以一種堅挺的姿勢,站在設計趨勢的最前列。不止是原本身處各個領域的畫手和插畫師開始越來越受追捧,而且連網頁、UI和動效設計師都紛紛學習插畫設計。當然,更顯著的變化,是插畫在網頁和UI中的使用越來越多,越來越頻繁,甚至越來越多樣。

      多年來,插畫被廣泛地運用在雜志、圖書、報紙、海報、傳單等不同的傳統載體之上,新的工具和技術使得它更加輕松地植根于數字化媒體當中。

      作為設計中,最具有表現力的元素,一張插畫所傳遞的信息比文字更多更豐富。在UI和網頁中,使用插畫來輔助傳達信息,無疑更加直接到位。而插畫的可定制性之強,猶在圖片之上。

      1.jpg

      插畫在UI界面中的運用,可以說相當廣泛了,它更清晰,更時尚,也可以更加精準,甚至更有表現力,為什么不用呢?就適用范疇而言,我們可以觀察到,它可以運用到這些地方:

      頁面主題圖

      網頁首圖和Banner

      吉祥物和形象插畫

      博客文章配圖

      新用戶引導教程

      工具提示

      獎勵頁面和成就頁面

      游戲化設計的頁面

      通知和系統消息

      聊天表情

      講故事的輔助配圖

      信息圖

      營銷和廣告圖

      圖標和裝飾性內容

      社交媒體頁面

      支持性內容的頁面

      插畫的適用范圍之廣,這些總結出來的使用場景,并不是全部。插畫本身的屬性很有意思,它連接了設計,作為內容呈現,還帶著明顯的藝術化的屬性。今天的文章,我們總結一下在設計中使用插畫的10個理由和注意事項。

      2.png

      1. 插畫是設計的原創性和藝術性的基礎

      無論是印刷品、品牌設計還是UI界面,更加風格化的插畫能夠將不同的風格和創意加入其中,在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉化。

      3.jpg

      同樣的,在博客、新聞和Banner 中使用插畫,也是看準了插畫可以根據內容進行深度定制的優勢,這種微調能讓內容更加統一一致,更加符合產品目標,借助色彩、角色、環境甚至暗藏的隱喻,來吸引特定的用戶。

      2. 插畫是視覺觸發器,瞬間傳達大量信息

      我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強,看到圖片的一瞬間,也許還沒有來得及進行邏輯思考,但是大腦已經接收到大量的信息和內容。

      心理學研究表明,人類只需要大概1/10秒就可以感知到場景中絕大多數的元素和基本視覺信息。

      視覺信息可以更快傳遞到大腦,而重要的信息,人類也通常會被固化為視覺圖像,而非文本化的記憶。

      文本需要依托可讀性設計,而圖片和插畫則會被直接識別。

      圖片和插畫更容易打破文化和語言隔閡,傳遞內容含義。

      對于視障用戶、閱讀障礙用戶和兒童,圖片插畫更容易被理解。

      4.png

      5.png

      3. 插畫是標題和文本的重要支撐

      雖然圖片一瞬間傳遞的信息很多,但是圖片在很多時候是無法提供精準而詳細的內容。用戶依然需要文本來呈現清晰而可以被閱讀和記錄的內容,所以文本依然是不可或缺的。在另外一方面,文本和標題已經具備的情況下,經過定制的插畫能夠輔助用戶理解,更清晰的記憶。

      6.png

      在很多特定的領域,舉個例子比如說金融,插畫能夠借助色彩、圖形和形象來講述故事,讓用戶更清晰的理解復雜的金融功能,甚至強化信任感,而這是文本所不具備的。插畫能帶來強烈的情感連接。

      4. 插畫更適宜呈現故事

      故事是最令人難忘的內容,劇情的走向和起承轉合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來,無論是在網頁、UI設計還是內容和體驗上,都有著足夠突出的體現。

      7.png

      營造氛圍,渲染情緒,描摹環境,呈現角色,插畫讓故事更加鮮活、易于理解。在內容制造上,有著難以替代的作用。

      8.jpg

      5. 插畫獨有的情感吸引力

      人是情感動物,看似理性的皮囊之下,幾乎每個決定都是在情感和情緒的驅動下完成的。如果某個設計除了能夠幫你達成某個目標,還能讓你感到愉悅,會心一笑,那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設計因素當中,插畫在撬動用戶情緒這一點上,有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效,都在竭盡全力地為你闡述故事,營造氛圍,將你拉到故事和場景當中去。

      9.gif

      6. 插畫賦予設計以美學價值,更容易被接受

      即使所有人都在分析和爭論產品的可用性和易用性,大家在對美的追求上,始終保持著一致的態度。一個設計是否具備可取性,是否能夠通過甲方、客戶和實際用戶,是每個設計人都需要面對,都力求做到最好的事情。精心設計的插畫在美學和風格上更加扎實,風格化的設計不弱于現成設計素材所提供的價值。

      10.png

      7. 插畫能讓品牌識別度更高

      和文本相比,插畫的視覺化屬性無疑是更強的。圖片插畫所提供的定制化內容能夠從各個方面來貼合品牌的需求,更加到位地表達品牌所需呈現的信息。這也使得插畫不僅僅在品牌宣傳的時候,運用在廣告、海報等顯而易見的地方,而且也成了品牌 APP 中新用戶引導和教程中必不可少的元素。

      11.gif

      就像 Perfect Recipes 這個應用的新用戶引導屏中,就借助插畫來呈現。而 Toonie 這個可愛的鬧鐘應用當中,甚至借助游戲化的設計,集成了大量有趣的表情和貼紙,當然,它們都是使用定制化的插畫來呈現的。

      12.jpg

      8. 數字插畫還能強化交互,應用在短視頻中

      數字化的好處就在這里,通過不同的數字軟件,合理的處理之后,不僅能夠變成動態的,運用于視頻當中,還能夠作為微交互,強化產品的整體體驗。

      一旦涉及到的動效和短視頻,整個數字插畫就開始具備更多的可能性了,不同的動效能帶來截然不同的感覺和體驗,更不用說這種玩法正貼合時下的流行趨勢。

      13.gif

      Whizzly 這個動態圖標就是基于插畫,給一個創意分享社區所準備的。

      9. 插畫的獨特性來自于其中的隱喻和引人入勝的視覺

      和藝術一樣,設計中同樣需要借助隱喻來傳達一些相對更有趣、更深刻、更有意思的信息。插畫的獨特性也是借此來構成,包含的隱喻使得其中的價值更加復合,值得反復咂摸,而不是一眼就可以完全看穿。

      14.png

      在這個約會應用的網頁當中,插畫無疑傳遞出了多重的信息,暗含的隱喻告知了用戶產品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創風格的文章所準備的,圖中的金魚指代的則是難以被抓住的靈感和風格。

      15.png

      10. 插畫讓用戶可以更快理解和操作

      無論是圖標還是大幅的插畫,都能幫助用戶理解,更加直觀地知道要看哪里,要做什么。面對如今的數字界面,用戶的注意力持續的時間越來越短,而插畫則讓用戶更快、更直接地獲取信息,并且決策下一步要做什么。如果插畫或者圖標內容不能被用戶一眼看出來,那么用戶就只能借助文本標簽來了解功能是什么。設計師可以通過測試來測試圖標和插畫的可用性和識別度。

      16.png

      值得思考的問題

      當然,插畫的設計是沒有門檻的,在設計的時候,要求也是比較高的。在使用和設計插畫的時候,需要考慮以下的幾個方面:

      目標受眾(身體能力,年齡,文化背景,教育水平等)

      產品的使用環境

      產品和內容的在全球范圍內和當地的傳播水平

      所選圖形的隱喻以及是否容易被識別

      插畫是否會讓人分心


      0
      1
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 亚洲国产av一区二区三区| 久久免费区一区二区三波多野| 波多野结衣的AV一区二区三区| 骚片AV蜜桃精品一区| 男人的天堂精品国产一区| 无码国产精品一区二区免费vr| 国产伦一区二区三区免费| 亚洲日韩AV一区二区三区中文| 风间由美性色一区二区三区| 久久亚洲色一区二区三区| 色欲AV无码一区二区三区| 亚洲欧美日韩一区二区三区| 人妻无码一区二区三区免费| 清纯唯美经典一区二区| 精品亚洲一区二区三区在线观看| 久久久国产一区二区三区| 国产伦精品一区二区三区在线观看| 亚洲午夜电影一区二区三区| 韩国精品一区二区三区无码视频 | 精品国产一区二区三区不卡| 好看的电影网站亚洲一区| 国产区精品一区二区不卡中文| 亚洲成在人天堂一区二区| 奇米精品一区二区三区在| 成人午夜视频精品一区| jazzjazz国产精品一区二区| 日韩av片无码一区二区三区不卡 | www一区二区三区| 无码8090精品久久一区| 99精品国产一区二区三区| 精品国产一区二区三区2021| 麻豆精品一区二区综合av| 国产高清一区二区三区四区| 天堂不卡一区二区视频在线观看 | 熟女大屁股白浆一区二区| 成人免费区一区二区三区| 久久国产免费一区二区三区| 亚洲无圣光一区二区| 日韩精品一区在线| chinese国产一区二区| 久久福利一区二区|