插畫在網頁情感化設計中的研究與實踐

導語：插畫在網頁情感化設計中的研究與實踐一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

摘要：隨著消費需求的提高和日益激烈的市場競爭，人們不再滿足簡單的物質需求，而是朝著情感心理需求發展。在這種情況下，使產品易于使用的同時為用戶帶來良好的情感體驗就成了產品成功的關鍵之一。而插畫的特性非常適合作為網頁情感化設計的要素，本文將分析插畫在網頁情感化設計中的作用與原則，并以“社團小鎮”網站為例，介紹網站利用插畫在情感化設計方面的設計實踐。

關鍵詞：情感化設計;社團;網頁設計;插畫

一、情感化設計

（一）本能層次的設計。決定用戶本能層體驗的是用戶在使用產品過程中的視覺感受、觸覺感受、聽覺體驗、嗅覺體驗等感官體驗，用戶第一次使用產品最先感受到的就是本能層的體驗，產品的配色、音效、排版、設計元素、質感、動畫效果等都影響著界面的本能層體驗。例如電商類APP主色一般都會使用明亮艷麗的暖色，如淘寶選用橙色；京東、天貓、拼多多、網易嚴選、小紅書選用紅色；閑魚選用黃色。暖色給人一種溫暖、熱烈、活躍、興奮的視覺感受，能夠刺激人們的購物欲望。（二）行為層次的設計。如果說視覺是敲門磚，那么行為水平的設計就決定了用戶是否愿意繼續使用產品，行為水平的設計需要關注4個方面，（1）功能：產品是否滿足了用戶的需求（2）易懂性：產品是否能給予用戶連續的反饋（3）可用性：產品的呈現模型是否與用戶的心理模型相匹配（4）性能：產品是否能很好地完成要實現的功能。（三）反思層次設計。反思水平的設計與物品的意義有關，用戶在塑造產品的同時產品也成了用戶無聲的代言人，代表著用戶的形象。用戶和產品之間的互動會影響用戶的自我形象，滿足感，記憶等，并形成對品牌的感知，影響著用戶對品牌的忠誠度。但是，反思層受到環境、文化、身份，認同等因素的影響，相較于其他兩個層次，它會相對較快地發生變化。

二、情感化設計的重要性

社會文明一直在進步，在這過程中人們對精神上的追求也越來越高，從而產生了人們對于各種事物的情感的需求，所以情感化設計在現在社會環境下至關重要。在產品設計時融入情感要素，產品就會著蘊含的豐富的情感，這樣的產品才能更打動人心。使產品與用戶有心靈與情感上的互動，建立起產品與用戶之間的情感關系，從而讓用戶對產品產生情感上的依賴，讓用戶對產品短時間的喜愛和關注變為長期的喜愛。

三、插畫在網頁情感化設計中的作用

（一）具有沖擊力的視覺效果。首先，插畫具有多種多樣的藝術風格與藝術表現手法，能帶來多樣、富有美感的視覺體驗，能夠很好地抓住用戶的目光。其次，插畫自由靈動，畫家可以自由地將自己腦中的想象展現在插畫中，利用插畫這種靈活的特性還可以擺脫模板化呆板、冷漠的網格式布，創造更有新意的視覺體驗。如外國設計團隊MADWELL的網站首頁（圖1），畫面中小孩的腦中飄出來許多思想的“碎片”，每一個都充滿了奇思妙想，而導航欄與畫面有機地融合在一起，打破了中規中矩的界面結構，將網頁導航欄散布在插畫中，再加上獨具風格的插畫很容易讓觀看者產生深刻的印象。（二）營造氛圍、傳遞情感。隨著時代的發展人們對精神上的追求越來越高，在網頁設計時融入情感要素，才能創造出更符合人們需求，能打動人心的網站，而插畫就善于營造氛圍、傳遞情感。創作者可以通過對比、夸張、象征等多種豐富的藝術表現手法，渲染出具有藝術情趣的意境，并通過豐富的視覺語言表現出來，喚起人們的記憶、本能、想象，從而引起人們的情緒。且插畫具有多種多樣的設計風格，可以是時尚的、卡通的也可以是荒誕的，以滿足不同群體的精神追求和視覺偏好。因此，插畫可以在現在追求個性化的時代中達到與消費者心靈共鳴的效果，讓用戶對產品產生喜愛與認同，同時插畫還可以向觀看者傳達網站的價值觀，起到建立品牌形象的作用，是一種雙贏的設計要素。（三）方便理解。文字是一種抽象的符號，人們要理解文字必須接受相關教育，在理解文字時還需要進行思考和闡述，而圖像是具象的、直觀的，是一種文盲也能讀懂的天生的感官本能，利用圖像網頁可以更充分地展現信息，使用戶的理解更為流暢。此外快節奏的現代生活導致人們的空余時間有限，文字閱讀要求人們用較大的心力進行長時間連貫的思維，而通過閱讀圖形獲得信息不僅更加的碎片化、輕松、快捷，所以在可以選擇的情況下，人們都更傾向于選擇以圖像為主的表達方式，而且圖像還可以添加動效、聲音、交互，進一步的優化了信息傳遞的效果，而插畫就是一種基本的圖像表達方式。（四）具有文化屬性。插畫在不同的地域和不同的時代有不同的表現方式，如中國就產生了眾多的藝術形式，如水墨畫、剪紙、皮影等，它們是文圖文化的結晶，是中國人的集體記憶。所以當具有文化屬性的手繪插畫出現在網頁中時，其中所蘊含文化內涵將轉化為網站的文化屬性，如果消費者認同喜愛這種文化時，同樣也會對網站產生認同與喜愛的情感。

四、插畫在網頁設計中的應用原則

（一）以用戶為中心。一般的藝術作品中藝術家著重表現其個性和精神世界，而網頁的插畫創作具有目的性和制約性。具有目的性是因為這些應用在網頁中的插畫本身是為網站服務的，而網站的建立都有著自己的目的，將插畫應用在網頁設計中就是為了幫助網站達到自身的目的，而網站的目的往往又是指向顧客的，如電商網站的目的有吸引用戶購物或讓用戶相信產品是可靠的，公益類網站的目的有引起觀看者對某個社會現象的關注等。所以網頁中插畫的訴求對象是社會大眾，又因為不同的群體在視覺風格偏好、情感需求等方面都有所不同，所以插畫的風格一定要與根據目標群體的需求、喜好為導向來進行插畫的創作，用觀看者喜歡、能接受并且樂于接受的方式向觀看者傳遞網站的情感、價值觀。（二）整體性。保持插畫與整個網頁的視覺效果統一可以強化網站在用戶心中的印象，同時整體統一的網頁有規范，能讓網站更加具有說服力和可靠的感覺，因此插畫需要有統一的視覺語言，并且這種視覺語言要與網站的視覺風格保持一致。要讓插畫形成統一的視覺語言可以利用這些方法：明度的近似、飽和度的近似、使用的顏色的統一、文字樣式的統一、傳達的情感價值觀的統一、繪畫表現方式統一。如jazzfm一個關于爵士音樂的網站中的插畫（如圖2、3），從色彩上來看，網頁中的插畫使用的顏色都是高飽和度顏色，插畫的顏色雖然豐富但是每幅插畫都有的同樣的黃色、藍色、紅色，這幾個顏色將這些插畫從視覺上串聯起來。從表現方式來看，插畫的質感與表現方式也是統一的，都是由色塊組成，沒有線條描邊的矢量插畫。從傳遞的情感來看，插畫給人的感覺都是惡搞的、反叛的。（三）個性化。隨著世界人民的生活水平逐漸提升，對生活消費的態度也發生了轉變，人們有了追求差異化和個性化的心理訴求，大眾化與個性化之圖1MADWELL網站的首頁圖2網站jazzfm中的插畫圖3網站jazzfm中的插畫間的矛盾越來越突顯，所以個性化的插畫才能更好地獲得觀看者的認同、引起與觀看者的共鳴。同時個性化和差異化還可以使網站在觀看者心中留下獨特的印象，找到存在感，如果網站的視覺表現和其他同類產品差別不大，就會很容易會被用戶遺忘，難達到從眾多網站中脫穎而出的效果。當然差異化不是沒有根據的尋求差異，而是以網站的目標以及目標群的審美為依據，在相同中尋找不同。（四）易用性。如果網站上有大量的插畫、文字、動效等元素會對用戶造成過度的刺激，爭搶觀看者的注意力，讓用戶無法高效舒適的閱讀網站內容。在網頁中特別是一個網頁的每一屏中，需要注意插畫使用不在多而在精，在將插畫與網頁融合的過程中要營造頁面的主次關系和平衡和諧的視覺感受，做到簡潔、精確、無可刪減。

五、插畫在網頁情感化設計中的實踐

（一）用戶需求調研?！吧鐖F小鎮”網站的使用角色主要分為三種：1.學校管理方：在校任職的老師和社團聯合會，主要的工作有引導、管理、協調、服務、監督和考核全校的學生社團。2.社團管理方：社團主席團以及各個部門的部長副部長等，負責運營與管理自己所在的社團。3.普通用戶：一般活動為在網站上尋找自己感興趣的活動、交流互動。項目小組采用了用戶訪談的形式分別對三類用戶進行了調研，訪談的目標主要是了解用戶的辦公流程，以及用戶在參與社團活動或管理社團事務時遇到的問題，以此來完善網站功能、發掘用戶的需求（圖4）以及痛點?；谝陨险{研結果項目小組對網站的功能進行了完善，圖5是基于用戶訪談完成的信息框架。（二）選取情感化關鍵詞。社團小鎮的主要功能有三方面：1.針對于社團的社團活動、招新管理功能2.針對于個人用戶的社團活動查詢、報名功能3.針對于校方的辦公中心。社團活動作為豐富大學生日常生活的元素是偏向娛樂化，所以網站選用了愉悅、活力作為情感化關鍵詞，向用戶傳遞出社團活動與社團生活是充滿歡樂、充滿活力的氛圍。“社團小鎮”網站通過“我的社團”功能將每個社團的用戶聚集了起來，網站希望傳遞出社團是一個溫暖的大家庭的氛圍因此選用了溫暖作為第三情感化關鍵詞。最終選取了活力、溫暖、愉悅三個關鍵次作為情感化關鍵詞后，網站進行情感化設計將以這些關鍵詞為導向。（三）插畫的設計。1.本能層?！吧鐖F小鎮”網站是圍繞大學社團而建立的，主要使用人群是大學生。針對這些特點網站的視覺設計希望傳達出一種充滿活力與自由的視覺感受，在迎合年輕人審美的同時也營造出社團中充滿活力氛圍。因此界面的主色選用了水藍色，配合上網頁留白處大量的白色，可以營造出一種陽光、明快、年輕清新的氛圍，并使用了洋紅、玉米色、蘋果綠、琉璃綠作為點綴穿插在插畫中。2.行為層。在文字信息較多的頁面，插畫位置一般放在網頁的頭部保證網頁的信息閱讀不被干擾，如圖6社團動態頁面背景的頭部加入了小鎮風景的插畫，插畫中景色橫穿整個網頁好像還沒有展現出全貌，這樣能讓網頁的空間好像變得更加開闊，地面則與下方背景色彩用一種顏色，從而產生一種空間的延伸感讓插畫更自然的融入頁面，網頁的其他部分則保持簡潔，主要使用白色或灰色。“社團小鎮”網站的通過對頁面加入插畫的方式向用戶展示了一個虛擬的小鎮，虛擬小鎮以南宋風格建筑為主，網站的“首頁”（圖7）的景色會隨著現實世界中時間的變化而變化，網站首頁的景色會產生由凌晨到白天到黃昏再到黑夜的變化，通過頁面的變化營造一種真實小鎮的場景將用戶代入小鎮的情境中。每次進入或刷新“社團小鎮”首頁時，首頁里的人物都會變化好像他們在不停地走動，在不同的節日或發生大事件時小鎮的人們形象也會更換，比如國慶節時小人們會拿上國旗，讓小鎮的形象更加的生動，也讓網站更加充滿趣味與驚喜。3.反思層。網站利用各頁面的插畫構成了一個小鎮的全貌，網站的“首頁”（圖7）是社團小鎮的大門，首頁展示的場景是社團小鎮的日常生活場景，街道上人們在運動、攝影、聊天，而建筑里各個社團正在進行活動。社團動態（圖6）則展示了小鎮的遠景，“所有社團”頁面（圖8）展示的是俯瞰下的社團小鎮，小鎮在湖中的島上，島上排列著建筑，每個建筑就是一個社團，用戶每加入一個社團，則進入相應的“社團小鎮”的一個家庭（社團），由“家”（社團）組成整個“社團小鎮”（學校），在這個虛擬社區中用戶進入自己的社團就是進入了屬于自己的一個家，讓用戶聯想到家的溫暖。結語從用戶的層面來看，在物質生活日益豐富的今天，用戶越來越看重情感上的體驗，不再滿足于與冰冷的機械進行互動，而是更希望在使用產品時能夠獲得情感上的滿足。從產品的角度來看，情感化設計能增加用戶黏性，形成良好的品牌形象，促進產品的自傳播，還可以提高用戶對產品的容忍度。在商業的層面來看，隨著產品的發展，同類產品的基礎功能大致都相同，而情感化設計就成了形成產品差異化的一個突破口。而插畫善于營造氛圍、傳遞情感、具有視覺沖擊力等特點非常適合進行情感化的設計，同時還可以彌補人文精神的欠缺，豐富人們的精神世界。

參考文獻

[1]（美）唐納德·A·諾曼，設計心理學3：情感化設計[M].北京：中信出版社，2015.

[2]丁怡偉，李健，基于場景化設計思維的交互設計研究[J].設計，2019（08）：128-129.

[3]楚孔闖，認知心理學下的移動端產品中反饋設計的情感化研究[D].北京：北京交通大學，2017：35-40.

[4]郭彥彤，王佳，游戲化思維在包裝設計中的可實施性研究[J].設計，2019（08）：112-114.

[5]李曼，插畫在網頁界面設計中的應用價值研究[D].浙江：浙江理工大學，2016：18-22.

[6]周吉，商業插畫在APP用戶界面設計中的應用研究[D].浙江：浙江農林大學，2018：15-19.

作者:潘卓 章晨利 湯程心 單位:杭州電子科技大學數字媒體與藝術設計學院