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

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

2、驗(yàn)，產(chǎn)品的配色、音效、排版、設(shè)計(jì)元素、質(zhì)感、動(dòng)畫效果等都影響著界面的本能層體驗(yàn)。例如電商類APP主色一般都會(huì)使用明亮艷麗的暖色，如淘寶選用橙色；京東、天貓、拼多多、網(wǎng)易嚴(yán)選、小紅書選用紅色；閑魚選用黃色。暖色給人一種溫暖、熱烈、活躍、興奮的視覺(jué)感受，能夠刺激人們的購(gòu)物欲望。（二）行為層次的設(shè)計(jì)。如果說(shuō)視覺(jué)是敲門磚，那么行為水平的設(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ì)。反

3、思水平的設(shè)計(jì)與物品的意義有關(guān)，用戶在塑造產(chǎn)品的同時(shí)產(chǎn)品也成了用戶無(wú)聲的代言人，代表著用戶的形象。用戶和產(chǎn)品之間的互動(dòng)會(huì)影響用戶的自我形象，滿足感，記憶等，并形成對(duì)品牌的感知，影響著用戶對(duì)品牌的忠誠(chéng)度。但是，反思層受到環(huán)境、文化、身份，認(rèn)同等因素的影響，相較于其他兩個(gè)層次，它會(huì)相對(duì)較快地發(fā)生變化。 二、情感化設(shè)計(jì)的重要性 社會(huì)文明一直在進(jìn)步，在這過(guò)程中人們對(duì)精神上的追求也越來(lái)越高，從而產(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)品與用戶之間的情

4、感關(guān)系，從而讓用戶對(duì)產(chǎn)品產(chǎn)生情感上的依賴，讓用戶對(duì)產(chǎn)品短時(shí)間的喜愛(ài)和關(guān)注變?yōu)殚L(zhǎng)期的喜愛(ài)。 三、插畫在網(wǎng)頁(yè)情感化設(shè)計(jì)中的作用 （一）具有沖擊力的視覺(jué)效果。首先，插畫具有多種多樣的藝術(shù)風(fēng)格與藝術(shù)表現(xiàn)手法，能帶來(lái)多樣、富有美感的視覺(jué)體驗(yàn)，能夠很好地抓住用戶的目光。其次，插畫自由靈動(dòng)，畫家可以自由地將自己腦中的想象展現(xiàn)在插畫中，利用插畫這種靈活的特性還可以擺脫模板化呆板、冷漠的網(wǎng)格式布，創(chuàng)造更有新意的視覺(jué)體驗(yàn)。如外國(guó)設(shè)計(jì)團(tuán)隊(duì)MADWELL的網(wǎng)站首頁(yè)（圖1），畫面中小孩的腦中飄出來(lái)許多思想的“碎片”，每一個(gè)都充滿了奇思妙想，而導(dǎo)航欄與畫面有機(jī)地融合在一起，打破了中規(guī)中矩的界面結(jié)構(gòu)，將網(wǎng)頁(yè)導(dǎo)航欄散布在插畫

5、中，再加上獨(dú)具風(fēng)格的插畫很容易讓觀看者產(chǎn)生深刻的印象。（二）營(yíng)造氛圍、傳遞情感。隨著時(shí)代的發(fā)展人們對(duì)精神上的追求越來(lái)越高，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)融入情感要素，才能創(chuàng)造出更符合人們需求，能打動(dòng)人心的網(wǎng)站，而插畫就善于營(yíng)造氛圍、傳遞情感。創(chuàng)作者可以通過(guò)對(duì)比、夸張、象征等多種豐富的藝術(shù)表現(xiàn)手法，渲染出具有藝術(shù)情趣的意境，并通過(guò)豐富的視覺(jué)語(yǔ)言表現(xiàn)出來(lái)，喚起人們的記憶、本能、想象，從而引起人們的情緒。且插畫具有多種多樣的設(shè)計(jì)風(fēng)格，可以是時(shí)尚的、卡通的也可以是荒誕的，以滿足不同群體的精神追求和視覺(jué)偏好。因此，插畫可以在現(xiàn)在追求個(gè)性化的時(shí)代中達(dá)到與消費(fèi)者心靈共鳴的效果，讓用戶對(duì)產(chǎn)品產(chǎn)生喜愛(ài)與認(rèn)同，同時(shí)插畫還可以向觀看

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

7、）具有文化屬性。插畫在不同的地域和不同的時(shí)代有不同的表現(xiàn)方式，如中國(guó)就產(chǎn)生了眾多的藝術(shù)形式，如水墨畫、剪紙、皮影等，它們是文圖文化的結(jié)晶，是中國(guó)人的集體記憶。所以當(dāng)具有文化屬性的手繪插畫出現(xiàn)在網(wǎng)頁(yè)中時(shí)，其中所蘊(yùn)含文化內(nèi)涵將轉(zhuǎn)化為網(wǎng)站的文化屬性，如果消費(fèi)者認(rèn)同喜愛(ài)這種文化時(shí)，同樣也會(huì)對(duì)網(wǎng)站產(chǎn)生認(rèn)同與喜愛(ài)的情感。 四、插畫在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用原則 （一）以用戶為中心。一般的藝術(shù)作品中藝術(shù)家著重表現(xiàn)其個(gè)性和精神世界，而網(wǎng)頁(yè)的插畫創(chuàng)作具有目的性和制約性。具有目的性是因?yàn)檫@些應(yīng)用在網(wǎng)頁(yè)中的插畫本身是為網(wǎng)站服務(wù)的，而網(wǎng)站的建立都有著自己的目的，將插畫應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中就是為了幫助網(wǎng)站達(dá)到自身的目的，而網(wǎng)站的目

8、的往往又是指向顧客的，如電商網(wǎng)站的目的有吸引用戶購(gòu)物或讓用戶相信產(chǎn)品是可靠的，公益類網(wǎng)站的目的有引起觀看者對(duì)某個(gè)社會(huì)現(xiàn)象的關(guān)注等。所以網(wǎng)頁(yè)中插畫的訴求對(duì)象是社會(huì)大眾，又因?yàn)椴煌娜后w在視覺(jué)風(fēng)格偏好、情感需求等方面都有所不同，所以插畫的風(fēng)格一定要與根據(jù)目標(biāo)群體的需求、喜好為導(dǎo)向來(lái)進(jìn)行插畫的創(chuàng)作，用觀看者喜歡、能接受并且樂(lè)于接受的方式向觀看者傳遞網(wǎng)站的情感、價(jià)值觀。（二）整體性。保持插畫與整個(gè)網(wǎng)頁(yè)的視覺(jué)效果統(tǒng)一可以強(qiáng)化網(wǎng)站在用戶心中的印象，同時(shí)整體統(tǒng)一的網(wǎng)頁(yè)有規(guī)范，能讓網(wǎng)站更加具有說(shuō)服力和可靠的感覺(jué)，因此插畫需要有統(tǒng)一的視覺(jué)語(yǔ)言，并且這種視覺(jué)語(yǔ)言要與網(wǎng)站的視覺(jué)風(fēng)格保持一致。要讓插畫形成統(tǒng)一的視覺(jué)語(yǔ)

9、言可以利用這些方法：明度的近似、飽和度的近似、使用的顏色的統(tǒng)一、文字樣式的統(tǒng)一、傳達(dá)的情感價(jià)值觀的統(tǒng)一、繪畫表現(xiàn)方式統(tǒng)一。如jazzfm一個(gè)關(guān)于爵士音樂(lè)的網(wǎng)站中的插畫（如圖2、3），從色彩上來(lái)看，網(wǎng)頁(yè)中的插畫使用的顏色都是高飽和度顏色，插畫的顏色雖然豐富但是每幅插畫都有的同樣的黃色、藍(lán)色、紅色，這幾個(gè)顏色將這些插畫從視覺(jué)上串聯(lián)起來(lái)。從表現(xiàn)方式來(lái)看，插畫的質(zhì)感與表現(xiàn)方式也是統(tǒng)一的，都是由色塊組成，沒(méi)有線條描邊的矢量插畫。從傳遞的情感來(lái)看，插畫給人的感覺(jué)都是惡搞的、反叛的。（三）個(gè)性化。隨著世界人民的生活水平逐漸提升，對(duì)生活消費(fèi)的態(tài)度也發(fā)生了轉(zhuǎn)變，人們有了追求差異化和個(gè)性化的心理訴求，大眾化與個(gè)性

10、化之圖1MADWELL網(wǎng)站的首頁(yè)圖2網(wǎng)站jazzfm中的插畫圖3網(wǎng)站jazzfm中的插畫間的矛盾越來(lái)越突顯，所以個(gè)性化的插畫才能更好地獲得觀看者的認(rèn)同、引起與觀看者的共鳴。同時(shí)個(gè)性化和差異化還可以使網(wǎng)站在觀看者心中留下獨(dú)特的印象，找到存在感，如果網(wǎng)站的視覺(jué)表現(xiàn)和其他同類產(chǎn)品差別不大，就會(huì)很容易會(huì)被用戶遺忘，難達(dá)到從眾多網(wǎng)站中脫穎而出的效果。當(dāng)然差異化不是沒(méi)有根據(jù)的尋求差異，而是以網(wǎng)站的目標(biāo)以及目標(biāo)群的審美為依據(jù)，在相同中尋找不同。（四）易用性。如果網(wǎng)站上有大量的插畫、文字、動(dòng)效等元素會(huì)對(duì)用戶造成過(guò)度的刺激，爭(zhēng)搶觀看者的注意力，讓用戶無(wú)法高效舒適的閱讀網(wǎng)站內(nèi)容。在網(wǎng)頁(yè)中特別是一個(gè)網(wǎng)頁(yè)的每一屏中，

11、需要注意插畫使用不在多而在精，在將插畫與網(wǎng)頁(yè)融合的過(guò)程中要營(yíng)造頁(yè)面的主次關(guān)系和平衡和諧的視覺(jué)感受，做到簡(jiǎn)潔、精確、無(wú)可刪減。 五、插畫在網(wǎng)頁(yè)情感化設(shè)計(jì)中的實(shí)踐 （一）用戶需求調(diào)研?！吧鐖F(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ù)

12、時(shí)遇到的問(wèn)題，以此來(lái)完善網(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é)生日常生活的元素是偏向娛樂(lè)化，所以網(wǎng)站選用了愉悅、活力作為情感化關(guān)鍵詞，向用戶傳遞出社團(tuán)活動(dòng)與社團(tuán)生活是充滿歡樂(lè)、充滿活力的氛圍?！吧鐖F(tuán)小鎮(zhèn)”網(wǎng)站通過(guò)“我的社團(tuán)”功能將每個(gè)社團(tuán)的用戶聚集了起來(lái)，網(wǎng)站希望傳遞出社團(tuán)是一個(gè)溫暖的大家庭的氛圍因此選用了溫暖作為第三情感化關(guān)鍵詞。最

13、終選取了活力、溫暖、愉悅?cè)齻€(gè)關(guān)鍵次作為情感化關(guān)鍵詞后，網(wǎng)站進(jìn)行情感化設(shè)計(jì)將以這些關(guān)鍵詞為導(dǎo)向。（三）插畫的設(shè)計(jì)。1.本能層?！吧鐖F(tuán)小鎮(zhèn)”網(wǎng)站是圍繞大學(xué)社團(tuán)而建立的，主要使用人群是大學(xué)生。針對(duì)這些特點(diǎn)網(wǎng)站的視覺(jué)設(shè)計(jì)希望傳達(dá)出一種充滿活力與自由的視覺(jué)感受，在迎合年輕人審美的同時(shí)也營(yíng)造出社團(tuán)中充滿活力氛圍。因此界面的主色選用了水藍(lán)色，配合上網(wǎng)頁(yè)留白處大量的白色，可以營(yíng)造出一種陽(yáng)光、明快、年輕清新的氛圍，并使用了洋紅、玉米色、蘋果綠、琉璃綠作為點(diǎn)綴穿插在插畫中。2.行為層。在文字信息較多的頁(yè)面，插畫位置一般放在網(wǎng)頁(yè)的頭部保證網(wǎng)頁(yè)的信息閱讀不被干擾，如圖6社團(tuán)動(dòng)態(tài)頁(yè)面背景的頭部加入了小鎮(zhèn)風(fēng)景的插畫，插畫

14、中景色橫穿整個(gè)網(wǎng)頁(yè)好像還沒(méi)有展現(xiàn)出全貌，這樣能讓網(wǎng)頁(yè)的空間好像變得更加開闊，地面則與下方背景色彩用一種顏色，從而產(chǎn)生一種空間的延伸感讓插畫更自然的融入頁(yè)面，網(wǎng)頁(yè)的其他部分則保持簡(jiǎn)潔，主要使用白色或灰色?！吧鐖F(tuán)小鎮(zhèn)”網(wǎng)站的通過(guò)對(duì)頁(yè)面加入插畫的方式向用戶展示了一個(gè)虛擬的小鎮(zhèn)，虛擬小鎮(zhèn)以南宋風(fēng)格建筑為主，網(wǎng)站的“首頁(yè)”（圖7）的景色會(huì)隨著現(xiàn)實(shí)世界中時(shí)間的變化而變化，網(wǎng)站首頁(yè)的景色會(huì)產(chǎn)生由凌晨到白天到黃昏再到黑夜的變化，通過(guò)頁(yè)面的變化營(yíng)造一種真實(shí)小鎮(zhèn)的場(chǎng)景將用戶代入小鎮(zhèn)的情境中。每次進(jìn)入或刷新“社團(tuán)小鎮(zhèn)”首頁(yè)時(shí)，首頁(yè)里的人物都會(huì)變化好像他們?cè)诓煌５刈邉?dòng)，在不同的節(jié)日或發(fā)生大事件時(shí)小鎮(zhèn)的人們形象也會(huì)更換

15、，比如國(guó)慶節(jié)時(shí)小人們會(huì)拿上國(guó)旗，讓小鎮(zhèn)的形象更加的生動(dòng)，也讓網(wǎng)站更加充滿趣味與驚喜。3.反思層。網(wǎng)站利用各頁(yè)面的插畫構(gòu)成了一個(gè)小鎮(zhèn)的全貌，網(wǎng)站的“首頁(yè)”（圖7）是社團(tuán)小鎮(zhèn)的大門，首頁(yè)展示的場(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)”頁(yè)面（圖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é)語(yǔ)從用戶的層面來(lái)看，在物質(zhì)生活日益豐富的今天，用戶越來(lái)越看重情感上的體驗(yàn)，不再滿足于與冰冷的機(jī)械進(jìn)行互動(dòng)，而是更希望在使用產(chǎn)品時(shí)能夠獲得情感上的滿足。從產(chǎn)品的角度來(lái)看，情感化設(shè)計(jì)能增加用戶黏性，形成良好的品牌形象，促進(jìn)產(chǎn)品的自傳播，還可以提高用戶對(duì)產(chǎn)品的容忍度。在商業(yè)的層面來(lái)看，隨著產(chǎn)品的發(fā)展，同類產(chǎn)品的基礎(chǔ)功能大致都相同，而情感化設(shè)計(jì)就成了形成產(chǎn)品差異化的一個(gè)突破口。而插畫善于營(yíng)造氛圍、傳遞情感、具有視覺(jué)沖擊力等特點(diǎn)非常適合進(jìn)行情感化的設(shè)計(jì)，同時(shí)還可以彌補(bǔ)人文精神的欠缺，豐富人們的精神世界。 參考文獻(xiàn) 1（美）唐納德A諾曼，設(shè)計(jì)心理學(xué)3：情感化設(shè)計(jì)M.北京：中信