插畫在網(wǎng)頁情感化設(shè)計(jì)中的研究與實(shí)踐

潘卓 章晨利 湯程心

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

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

中圖分類號(hào)：TP393.092

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069 （2020） 08-0128-03

一、情感化設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

（二）營(yíng)造氛圍、傳遞情感

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

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

（三）方便理解

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

（四）具有文化屬性

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

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

（一）以用戶為中心

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

（二）整體性

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

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

（三）個(gè)性化

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

（四）易用性

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

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

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

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

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

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

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

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

1.本能層。

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

2.行為層

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

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

3.反思層

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

結(jié)語

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

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

參考文獻(xiàn)

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

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

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

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

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

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