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

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

2、驗(yàn)，產(chǎn)品的配色、音效、排版、設(shè)計元素、質(zhì)感、動畫效果等都影響著界面的本能層體驗(yàn)。例如電商類APP主色一般都會使用明亮艷麗的暖色，如淘寶選用橙色；京東、天貓、拼多多、網(wǎng)易嚴(yán)選、小紅書選用紅色；閑魚選用黃色。暖色給人一種溫暖、熱烈、活躍、興奮的視覺感受，能夠刺激人們的購物欲望。（二）行為層次的設(shè)計。如果說視覺是敲門磚，那么行為水平的設(shè)計就決定了用戶是否愿意繼續(xù)使用產(chǎn)品，行為水平的設(shè)計需要關(guān)注4個方面，（1）功能：產(chǎn)品是否滿足了用戶的需求（2）易懂性：產(chǎn)品是否能給予用戶連續(xù)的反饋（3）可用性：產(chǎn)品的呈現(xiàn)模型是否與用戶的心理模型相匹配（4）性能：產(chǎn)品是否能很好地完成要實(shí)現(xiàn)的功能。（三）反思層次設(shè)計。反

3、思水平的設(shè)計與物品的意義有關(guān)，用戶在塑造產(chǎn)品的同時產(chǎn)品也成了用戶無聲的代言人，代表著用戶的形象。用戶和產(chǎn)品之間的互動會影響用戶的自我形象，滿足感，記憶等，并形成對品牌的感知，影響著用戶對品牌的忠誠度。但是，反思層受到環(huán)境、文化、身份，認(rèn)同等因素的影響，相較于其他兩個層次，它會相對較快地發(fā)生變化。 二、情感化設(shè)計的重要性 社會文明一直在進(jìn)步，在這過程中人們對精神上的追求也越來越高，從而產(chǎn)生了人們對于各種事物的情感的需求，所以情感化設(shè)計在現(xiàn)在社會環(huán)境下至關(guān)重要。在產(chǎn)品設(shè)計時融入情感要素，產(chǎn)品就會著蘊(yùn)含的豐富的情感，這樣的產(chǎn)品才能更打動人心。使產(chǎn)品與用戶有心靈與情感上的互動，建立起產(chǎn)品與用戶之間的情

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

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

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

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

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

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

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

11、需要注意插畫使用不在多而在精，在將插畫與網(wǎng)頁融合的過程中要營造頁面的主次關(guān)系和平衡和諧的視覺感受，做到簡潔、精確、無可刪減。 五、插畫在網(wǎng)頁情感化設(shè)計中的實(shí)踐 （一）用戶需求調(diào)研?！吧鐖F(tuán)小鎮(zhèn)”網(wǎng)站的使用角色主要分為三種：1.學(xué)校管理方：在校任職的老師和社團(tuán)聯(lián)合會，主要的工作有引導(dǎo)、管理、協(xié)調(diào)、服務(wù)、監(jiān)督和考核全校的學(xué)生社團(tuán)。2.社團(tuán)管理方：社團(tuán)主席團(tuán)以及各個部門的部長副部長等，負(fù)責(zé)運(yùn)營與管理自己所在的社團(tuán)。3.普通用戶：一般活動為在網(wǎng)站上尋找自己感興趣的活動、交流互動。項(xiàng)目小組采用了用戶訪談的形式分別對三類用戶進(jìn)行了調(diào)研，訪談的目標(biāo)主要是了解用戶的辦公流程，以及用戶在參與社團(tuán)活動或管理社團(tuán)事務(wù)

12、時遇到的問題，以此來完善網(wǎng)站功能、發(fā)掘用戶的需求（圖4）以及痛點(diǎn)?；谝陨险{(diào)研結(jié)果項(xiàng)目小組對網(wǎng)站的功能進(jìn)行了完善，圖5是基于用戶訪談完成的信息框架。（二）選取情感化關(guān)鍵詞。社團(tuán)小鎮(zhèn)的主要功能有三方面：1.針對于社團(tuán)的社團(tuán)活動、招新管理功能2.針對于個人用戶的社團(tuán)活動查詢、報名功能3.針對于校方的辦公中心。社團(tuán)活動作為豐富大學(xué)生日常生活的元素是偏向娛樂化，所以網(wǎng)站選用了愉悅、活力作為情感化關(guān)鍵詞，向用戶傳遞出社團(tuán)活動與社團(tuán)生活是充滿歡樂、充滿活力的氛圍?！吧鐖F(tuán)小鎮(zhèn)”網(wǎng)站通過“我的社團(tuán)”功能將每個社團(tuán)的用戶聚集了起來，網(wǎng)站希望傳遞出社團(tuán)是一個溫暖的大家庭的氛圍因此選用了溫暖作為第三情感化關(guān)鍵詞。最

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

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

15、，比如國慶節(jié)時小人們會拿上國旗，讓小鎮(zhèn)的形象更加的生動，也讓網(wǎng)站更加充滿趣味與驚喜。3.反思層。網(wǎng)站利用各頁面的插畫構(gòu)成了一個小鎮(zhèn)的全貌，網(wǎng)站的“首頁”（圖7）是社團(tuán)小鎮(zhèn)的大門，首頁展示的場景是社團(tuán)小鎮(zhèn)的日常生活場景，街道上人們在運(yùn)動、攝影、聊天，而建筑里各個社團(tuán)正在進(jìn)行活動。社團(tuán)動態(tài)（圖6）則展示了小鎮(zhèn)的遠(yuǎn)景，“所有社團(tuán)”頁面（圖8）展示的是俯瞰下的社團(tuán)小鎮(zhèn)，小鎮(zhèn)在湖中的島上，島上排列著建筑，每個建筑就是一個社團(tuán)，用戶每加入一個社團(tuán)，則進(jìn)入相應(yīng)的“社團(tuán)小鎮(zhèn)”的一個家庭（社團(tuán)），由“家”（社團(tuán)）組成整個“社團(tuán)小鎮(zhèn)”（學(xué)校），在這個虛擬社區(qū)中用戶進(jìn)入自己的社團(tuán)就是進(jìn)入了屬于自己的一個家，讓用戶聯(lián)想到家的溫暖。結(jié)語從用戶的層面來看，在物質(zhì)生活日益豐富的今天，用戶越來越看重情感上的體驗(yàn)，不再滿足于與冰冷的機(jī)械進(jìn)行互動，而是更希望在使用產(chǎn)品時能夠獲得情感上的滿足。從產(chǎn)品的角度來看，情感化設(shè)計能增加用戶黏性，形成良好的品牌形象，促進(jìn)產(chǎn)品的自傳播，還可以提高用戶對產(chǎn)品的容忍度。在商業(yè)的層面來看，隨著產(chǎn)品的發(fā)展，同類產(chǎn)品的基礎(chǔ)功能大致都相同，而情感化設(shè)計就成了形成產(chǎn)品差異化的一個突破口。而插畫善于營造氛圍、傳遞情感、具有視覺沖擊力等特點(diǎn)非常適合進(jìn)行情感化的設(shè)計，同時還可以彌補(bǔ)人文精神的欠缺，豐富人們的精神世界。 參考文獻(xiàn) 1（美）唐納德A諾曼，設(shè)計心理學(xué)3：情感化設(shè)計M.北京：中信