潘卓 章晨利 湯程心

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

關(guān)鍵詞：情感化設(shè)計 社團 網(wǎng)頁設(shè)計 插畫

中圖分類號：TP393.092

文獻標識碼：A

文章編號：1003-0069 （2020） 08-0128-03

一、情感化設(shè)計

（一）本能層次的設(shè)計

決定用戶本能層體驗的是用戶在使用產(chǎn)品過程中的視覺感受、觸覺感受、聽覺體驗、嗅覺體驗等感官體驗，用戶第—次使用產(chǎn)品最先感受到的就是本能層的體驗，產(chǎn)品的配色、音效、排版、設(shè)計元素、質(zhì)感、動畫效果等都影響著界面的本能層體驗。例如電商類APP主色一般都會使用明亮艷麗的暖色，如淘寶選用橙色;京東、天貓、拼多多、網(wǎng)易嚴選、小紅書選用紅色;閑魚選用黃色。暖色給人一種溫暖、熱烈、活躍、興奮的視覺感受，能夠刺激人們的購物欲望。

（二）行為層次的設(shè)計

如果說視覺是敲門磚，那么行為水平的設(shè)計就決定了用戶是否愿意繼續(xù)使用產(chǎn)品，行為水平的設(shè)計需要關(guān)注4個方面，（1）功能：產(chǎn)品是否滿足了用戶的需求（2）易懂性：產(chǎn)品是否能給予用戶連續(xù)的反饋（3）可用性：產(chǎn)品的呈現(xiàn)模型是否與用戶的心理模型相匹配（4）性能：產(chǎn)品是否能很好地完成要實現(xiàn)的功能。

（三）反思層次設(shè)計

反思水平的設(shè)計與物品的意義有關(guān)，用戶在塑造產(chǎn)品的同時產(chǎn)品也成了用戶無聲的代言人，代表著用戶的形象。用戶和產(chǎn)品之間的互動會影響用戶的自我形象，滿足感，記憶等，并形成對品牌的感知，影響著用戶對品牌的忠誠度。但是，反思層受到環(huán)境、文化、身份，認同等因素的影響，相較于其他兩個層次，它會相對較快地發(fā)生變化。

二、情感化設(shè)計的重要性

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

三、插畫在網(wǎng)頁情感化設(shè)計中的作用

（一）具有沖擊力的視覺效果

首先，插畫具有多種多樣的藝術(shù)風格與藝術(shù)表現(xiàn)手法，能帶來多樣、富有美感的視覺體驗，能夠很好地抓住用戶的目光。其次，插畫自由靈動，畫家可以自由地將自己腦中的想象展現(xiàn)在插畫中，利用插畫這種靈活的特性還可以擺脫模板化呆板、冷漠的網(wǎng)格式布，創(chuàng)造更有新意的視覺體驗。如外國設(shè)計團隊MADWELL的網(wǎng)站首頁（圖1），畫面中小孩的腦中飄出來許多思想的“碎片”，每一個都充滿了奇思妙想，而導航欄與畫面有機地融合在一起，打破了中規(guī)中矩的界面結(jié)構(gòu)，將網(wǎng)頁導航欄散布在插畫中，再加上獨具風格的插畫很容易讓觀看者產(chǎn)生深刻的印象。

（二）營造氛圍、傳遞情感

隨著時代的發(fā)展人們對精神上的追求越來越高，在網(wǎng)頁設(shè)計時融入隋感要素，才能創(chuàng)造出更符合人們需求，能打動人心的網(wǎng)站，而插畫就善于營造氛圍、傳遞情感。

創(chuàng)作者可以通過對比、夸張、象征等多種豐富的藝術(shù)表現(xiàn)手法，渲染出具有藝術(shù)情趣的意境，并通過豐富的視覺語言表現(xiàn)出來，喚起人們的記憶、本能、想象，從而引起人們的情緒。且插畫具有多種多樣的設(shè)計風格，可以是時尚的、卡通的也可以是荒誕的，以滿足不同群體的精神追求和視覺偏好。因此，插畫可以在現(xiàn)在追求個性化的時代中達到與消費者心靈共鳴的效果，讓用戶對產(chǎn)品產(chǎn)生喜愛與認同，同時插畫還可以向觀看者傳達網(wǎng)站的價值觀，起到建立品牌形象的作用，是一種雙贏的設(shè)計要素。

（三）方便理解

文字是一種抽象的符號，人們要理解文字必須接受相關(guān)教育，在理解文字時還需要進行思考和闡述，而圖像是具象的、直觀的，是一種文盲也能讀懂的天生的感官本能，利用圖像網(wǎng)頁可以更充分地展現(xiàn)信息，使用戶的理解更為流暢。此外快節(jié)奏的現(xiàn)代生活導致人們的空余時間有限，文字閱讀要求人們用較大的心力進行長時間連貫的思維，而通過閱讀圖形獲得信息不僅更加的碎片化、輕松、快捷，所以在可以選擇的情況下，人們都更傾向于選擇以圖像為主的表達方式，而且圖像還可以添加動效、聲音、交互，進一步的優(yōu)化了信息傳遞的效果，而插畫就是—種基本的圖像表達方式。

（四）具有文化屬性

插畫在不同的地域和不同的時代有不同的表現(xiàn)方式，如中國就產(chǎn)生了眾多的藝術(shù)形式，如水墨畫、剪紙、皮影等，它們是文圖文化的結(jié)晶，是中國人的集體記憶。所以當具有文化屬性的手繪插畫出現(xiàn)在網(wǎng)頁中時，其中所蘊含文化內(nèi)涵將轉(zhuǎn)化為網(wǎng)站的文化屬性，如果消費者認同喜愛這種文化時，同樣也會對網(wǎng)站產(chǎn)生認同與喜愛的情感。

四、插畫在網(wǎng)頁設(shè)計中的應(yīng)用原則

（一）以用戶為中心

一般的藝術(shù)作品中藝術(shù)家著重表現(xiàn)其個性和精神世界，而網(wǎng)頁的插畫創(chuàng)作具有目的性和制約性。具有目的性是因為這些應(yīng)用在網(wǎng)頁中的插畫本身是為網(wǎng)站服務(wù)的，而網(wǎng)站的建立都有著自己的目的，將插畫應(yīng)用在網(wǎng)頁設(shè)計中就是為了幫助網(wǎng)站達到自身的目的，而網(wǎng)站的目的往往又是指向顧客的，如電商網(wǎng)站的目的有吸引用戶購物或讓用戶相信產(chǎn)品是可靠的，公益類網(wǎng)站的目的有引起觀看者對某個社會現(xiàn)象的關(guān)注等。所以網(wǎng)頁中插畫的訴求對象是社會大眾，又因為不同的群體在視覺風格偏好、情感需求等方面都有所不同，所以插畫的風格一定要與根據(jù)目標群體的需求、喜好為導向來進行插畫的創(chuàng)作，用觀看者喜歡、能接受并且樂于接受的方式向觀看者傳遞網(wǎng)站的情感、價值觀。

（二）整體性

保持插畫與整個網(wǎng)頁的視覺效果統(tǒng)一可以強化網(wǎng)站在用戶心中的印象，同時整體統(tǒng)一的網(wǎng)頁有規(guī)范，能讓網(wǎng)站更加具有說服力和可靠的感覺，因此插畫需要有統(tǒng)一的視覺語言，并且這種視覺語言要與網(wǎng)站的視覺風格保持一致。

要讓插畫形成統(tǒng)一的視覺語言可以利用這些方法：明度的近似、飽和度的近似、使用的顏色的統(tǒng)一、文字樣式的統(tǒng)一、傳達的情感價值觀的統(tǒng)一、繪畫表現(xiàn)方式統(tǒng)一。如jazzfm-個關(guān)于爵士音樂的網(wǎng)站中的插畫（如圖2、3），從色彩上來看，網(wǎng)頁中的插畫使用的顏色都是高飽和度顏色，插畫的顏色雖然豐富但是每幅插畫都有的同樣的黃色、藍色、紅色，這幾個顏色將這些插畫從視覺上串聯(lián)起來。從表現(xiàn)方式來看，插畫的質(zhì)感與表現(xiàn)方式也是統(tǒng)一的，都是由色塊組成，沒有線條描邊的矢量插畫。從傳遞的情感來看，插畫給人的感覺都是惡搞的、反叛的。

（三）個性化

隨著世界人民的生活水平逐漸提升，對生活消費的態(tài)度也發(fā)生了轉(zhuǎn)變，人們有了追求差異化和個性化的心理訴求，大眾化與個性化之間的矛盾越來越突顯，所以個性化的插畫才能更好地獲得觀看者的認同、引起與觀看者的共鳴。同時個性化和差異化還可以使網(wǎng)站在觀看者心中留下獨特的印象，找到存在感，如果網(wǎng)站的視覺表現(xiàn)和其他同類產(chǎn)品差別不大，就會很容易會被用戶遺忘，難達到從眾多網(wǎng)站中脫穎而出的效果。當然差異化不是沒有根據(jù)的尋求差異，而是以網(wǎng)站的目標以及目標群的審美為依據(jù)，在相同中尋找不同。

（四）易用性

如果網(wǎng)站上有大量的插畫、文字、動效等元素會對用戶造成過度的刺激，爭搶觀看者的注意力，讓用戶無法高效舒適的閱讀網(wǎng)站內(nèi)容。在網(wǎng)頁中特別是一個網(wǎng)頁的每一屏中，需要注意插畫使用不在多而在精，在將插畫與網(wǎng)頁融合的過程中要營造頁面的主次關(guān)系和平衡和諧的視覺感受，做到簡潔、精確、無可刪減。

五、插畫在網(wǎng)頁情感化設(shè)計中的實踐

（一）用戶需求調(diào)研

“社團小鎮(zhèn)”網(wǎng)站的使用角色主要分為三種：1.學校管理方：在校任職的老師和社團聯(lián)合會，主要的工作有引導、管理、協(xié)調(diào)、服務(wù)、監(jiān)督和考核全校的學生社團。2.社團管理方：社團主席團以及各個部門的部長副部長等，負責運營與管理自己所在的社團。3.普通用戶：一般活動為在網(wǎng)站上尋找自己感興趣的活動、交流互動。

項目小組采用了用戶訪談的形式分別對三類用戶進行了調(diào)研，訪談的目標主要是了解用戶的辦公流程，以及用戶在參與社團活動或管理社團事務(wù)時遇到的問題，以此來完善網(wǎng)站功能、發(fā)掘用戶的需求（圖4）以及痛點?；谝陨险{(diào)研結(jié)果項目小組對網(wǎng)站的功能進行了完善，圖5是基于用戶訪談完成的信息框架。

（二）選取情感化關(guān)鍵詞

社團小鎮(zhèn)的主要功能有三方面：1.針對于社團的社團活動、招新管理功能2.針對于個人用戶的社團活動查詢、報名功能3.針對于校方的辦公中心。社團活動作為豐富大學生日常生活的元素是偏向娛樂化，所以網(wǎng)站選用了愉悅、活力作為情感化關(guān)鍵詞，向用戶傳遞出社團活動與社團生活是充滿歡樂、充滿活力的氛圍?！吧鐖F小鎮(zhèn)”網(wǎng)站通過“我的社團”功能將每個社團的用戶聚集了起來，網(wǎng)站希望傳遞出社團是一個溫暖的大家庭的氛圍因此選用了溫暖作為第三情感化關(guān)鍵詞。最終選取了活力、溫暖、愉悅?cè)齻€關(guān)鍵次作為情感化關(guān)鍵詞后，網(wǎng)站進行情感化設(shè)計將以這些關(guān)鍵詞為導向。

（三）插畫的設(shè)計

1.本能層。

“社團小鎮(zhèn)”網(wǎng)站是圍繞大學社團而建立的，主要使用人群是大學生。針對這些特點網(wǎng)站的視覺設(shè)計希望傳達出一種充滿活力與自由的視覺感受，在迎合年輕人審美的同時也營造出社團中充滿活力氛圍。因此界面的主色選用了水藍色，配合上網(wǎng)頁留白處大量的白色，可以營造出一種陽光、明快、年輕清新的氛圍，并使用了洋紅、玉米色、蘋果綠、琉璃綠作為點綴穿插在插畫中。

2.行為層

在文字信息較多的頁面，插畫位置一般放在網(wǎng)頁的頭部保證網(wǎng)頁的信息閱讀不被干擾，如圖6社團動態(tài)頁面背景的頭部加入了小鎮(zhèn)風景的插畫，插畫中景色橫穿整個網(wǎng)頁好像還沒有展現(xiàn)出全貌，這樣能讓網(wǎng)頁的空間好像變得更加開闊，地面則與下方背景色彩用一種顏色，從而產(chǎn)生一種空間的延伸感讓插畫更自然的融入頁面，網(wǎng)頁的其他部分則保持簡潔，主要使用白色或灰色。

“社團小鎮(zhèn)”網(wǎng)站的通過對頁面加入插畫的方式向用戶展示了一個虛擬的小鎮(zhèn)，虛擬小鎮(zhèn)以南宋風格建筑為主，網(wǎng)站的“首頁”（圖7）的景色會隨著現(xiàn)實世界中時間的變化而變化，網(wǎng)站首頁的景色會產(chǎn)生由凌晨到白天到黃昏再到黑夜的變化，通過頁面的變化營造一種真實小鎮(zhèn)的場景將用戶代入小鎮(zhèn)的情境中。每次進入或刷新“社團小鎮(zhèn)”首頁時，首頁里的人物都會變化好像他們在不停地走動，在不同的節(jié)日或發(fā)生大事件時小鎮(zhèn)的人們形象也會更換，比如國慶節(jié)時小人們會拿上國旗，讓小鎮(zhèn)的形象更加的生動，也讓網(wǎng)站更加充滿趣味與驚喜。

3.反思層

網(wǎng)站利用各頁面的插畫構(gòu)成了一個小鎮(zhèn)的全貌，網(wǎng)站的“首頁”（圖7）是社團小鎮(zhèn)的大門，首頁展示的場景是社團小鎮(zhèn)的日常生活場景，街道上人們在運動、攝影、聊天，而建筑里各個社團正在進行活動。社團動態(tài)（圖6）則展示了小鎮(zhèn)的遠景，“所有社團”頁面（圖8）展示的是俯瞰下的社團小鎮(zhèn)，小鎮(zhèn)在湖中的島上，島上排列著建筑，每個建筑就是一個社團，用戶每加入_個社團，則進入相應(yīng)的“社團小鎮(zhèn)”的一個家庭（社團），由“家”（社團）組成整個“社團小鎮(zhèn)”（學校），在這個虛擬社區(qū)中用戶進入自己的社團就是進入了屬于自己的一個家，讓用戶聯(lián)想到家的溫暖。

結(jié)語

從用戶的層面來看，在物質(zhì)生活日益豐富的今天，用戶越來越看重情感上的體驗，不再滿足于與冰冷的機械進行互動，而是更希望在使用產(chǎn)品時能夠獲得情感上的滿足。從產(chǎn)品的角度來看，情感化設(shè)計能增加用戶黏性，形成良好的品牌形象，促進產(chǎn)品的自傳播，還可以提高用戶對產(chǎn)品的容忍度。在商業(yè)的層面來看，隨著產(chǎn)品的發(fā)展，同類產(chǎn)品的基礎(chǔ)功能大致都相同，而情感化設(shè)計就成了形成產(chǎn)品差異化的一個突破口。而插畫善于營造氛圍、傳遞情感、具有視覺沖擊力等特點非常適合進行情感化的設(shè)計，同時還可以彌補人文精神的欠缺，豐富人們的精神世界。.

本課題受浙江省新苗人才計劃項目資助，項目“‘社團小鎮(zhèn)創(chuàng)意互動平臺設(shè)計及開發(fā)”，項目號2018 R407042。

參考文獻

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

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

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

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

[5]李曼，插畫在網(wǎng)頁界面設(shè)計中的應(yīng)用價值研究[D]浙江：浙江理工大學，2016： 18-22

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