基于情感化設(shè)計(jì)的加載頁(yè)面設(shè)計(jì)研究

劉學(xué) 李萌

摘要：研究情感化設(shè)計(jì)的分析方法，探索該方法在加載頁(yè)面設(shè)計(jì)中的應(yīng)用。只有抓住用戶(hù)在互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)中的痛點(diǎn)并尋求方法進(jìn)行解決，才能為用戶(hù)創(chuàng)造更好的體驗(yàn)感。從情感化設(shè)計(jì)出發(fā)，探索情感化三個(gè)水平層次對(duì)用戶(hù)的影響，通過(guò)對(duì)一些優(yōu)質(zhì)的加載頁(yè)面設(shè)計(jì)細(xì)節(jié)的總結(jié)，得出加載頁(yè)面設(shè)計(jì)中所需注意的要點(diǎn)。基于用戶(hù)情感體驗(yàn)的三個(gè)階段，梳理得出頁(yè)面設(shè)計(jì)可遵循的設(shè)計(jì)原則。合理運(yùn)用情感化設(shè)計(jì)方法，可規(guī)避設(shè)計(jì)中可能出現(xiàn)的問(wèn)題，同時(shí)激發(fā)設(shè)計(jì)師在創(chuàng)作中的靈感，為加載頁(yè)面的設(shè)計(jì)提供參考。

關(guān)鍵詞：情感化設(shè)計(jì) 加載頁(yè)面 用戶(hù)體驗(yàn) 互動(dòng)設(shè)計(jì) 設(shè)計(jì)方法

中圖分類(lèi)號(hào)：TB47

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

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

引言

在互聯(lián)網(wǎng)技術(shù)高速發(fā)展的時(shí)代，大眾享受著越來(lái)越快的網(wǎng)絡(luò)速度，加之網(wǎng)絡(luò)提速普及而頻繁，人們通常對(duì)于網(wǎng)頁(yè)或是APP中的加載過(guò)程幾乎無(wú)感。但當(dāng)軟件需要加載大量的內(nèi)容時(shí)，用戶(hù)就需要等待頁(yè)面完成加載，而不完善的設(shè)計(jì)可能導(dǎo)致用戶(hù)直接退出?；ヂ?lián)網(wǎng)產(chǎn)品在滿足功能性需求的同時(shí)，也亟待重視用戶(hù)的感性需求，因此用戶(hù)體驗(yàn)設(shè)計(jì)越來(lái)越注重細(xì)節(jié)，向著情感化和人性化方面發(fā)展。目前的加載頁(yè)面還存在著一些設(shè)計(jì)痛點(diǎn)，導(dǎo)致等待中的用戶(hù)產(chǎn)生焦灼心理，因而降低了對(duì)產(chǎn)品交互的滿意度。本文通過(guò)對(duì)加載頁(yè)面情感層次的分析研究，歸納出加載頁(yè)面設(shè)計(jì)中可參考的設(shè)計(jì)原則，以提供設(shè)計(jì)參考。

一、加載頁(yè)面概述

1993年的《計(jì)算機(jī)—一人機(jī)界面百分比進(jìn)度指標(biāo)的重要性》—文中就提到“如果計(jì)算機(jī)無(wú)法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶(hù)提供持續(xù)反饋”。在用戶(hù)對(duì)互聯(lián)網(wǎng)產(chǎn)品進(jìn)行操作時(shí)，產(chǎn)品需要為用提供操作反饋，并及時(shí)展示此時(shí)自身的運(yùn)作狀態(tài)，以使用戶(hù)清晰地了解自己處于哪一階段、所執(zhí)行的操作會(huì)獲得哪種結(jié)果，獲得對(duì)下一步操作的引導(dǎo)。

加載頁(yè)面也稱(chēng)為L(zhǎng)oading頁(yè)面，發(fā)揮著反饋用戶(hù)操作信息的作用。若前后頁(yè)面之間要進(jìn)行切換，則加載頁(yè)面可提示用戶(hù)系統(tǒng)需要一定時(shí)間完成加載過(guò)程。在系統(tǒng)處理頁(yè)面轉(zhuǎn)換時(shí)，用戶(hù)此前的操作過(guò)程和注意力會(huì)被打斷，而加載頁(yè)面則可利用各類(lèi)視覺(jué)形式緩解用戶(hù)在等待時(shí)的焦慮情緒，實(shí)現(xiàn)友好的界面交互。

自Web1.0開(kāi)始，幾乎每一個(gè)網(wǎng)站都包含了加載頁(yè)，到2007年左右，用戶(hù)就可以看到當(dāng)頁(yè)面處于loading狀態(tài)時(shí)一些小型國(guó)標(biāo)閃爍于其中，而這些效果通常使用Flash、Fireworks-類(lèi)的軟件制作完成。到了2010年，隨著CSS3的快速發(fā)展，使用CS53以及Photoshop軟件制作加載動(dòng)畫(huà)流行起來(lái)，使之變得更加普及。設(shè)計(jì)的風(fēng)格不斷發(fā)生著變化，當(dāng)設(shè)計(jì)師不再滿足于簡(jiǎn)單的小圖標(biāo)和進(jìn)度條樣式時(shí)，加載頁(yè)面的風(fēng)格也開(kāi)始進(jìn)化，2015年左右時(shí)網(wǎng)絡(luò)上已經(jīng)形成了良好的共享氛圍，許多免費(fèi)設(shè)計(jì)教程、插件、項(xiàng)目的推廣使越來(lái)越多的設(shè)計(jì)者關(guān)注起加載頁(yè)面的設(shè)計(jì)來(lái)，并且隨著之后設(shè)計(jì)方法和趨勢(shì)的更替而變化著。除了視覺(jué)表達(dá)之外，向用戶(hù)提供有效的反饋，打造良好的用戶(hù)體驗(yàn)也是恒久的準(zhǔn)則，這也是設(shè)計(jì)者們研究和探索著的。

二、加載頁(yè)面的設(shè)計(jì)分類(lèi)

由于不同產(chǎn)品的屬性不同，因此在加載狀態(tài)下所處的流程、加載的數(shù)據(jù)內(nèi)容和需要等待的時(shí)間也是不同的。加載頁(yè)面的基本功能是提醒用戶(hù)數(shù)據(jù)正在加載，為了強(qiáng)化用戶(hù)的體驗(yàn)，還可在頁(yè)面中提供加載內(nèi)容、加載進(jìn)度、等待時(shí)常等信息，讓用戶(hù)心中有數(shù)，保持對(duì)產(chǎn)品的掌控感。加載頁(yè)面的形式多樣，以視覺(jué)表現(xiàn)形式為主，可從文字和圖形兩個(gè)方面來(lái)歸納。

（一）文字類(lèi)：在互聯(lián)網(wǎng)產(chǎn)品中，文字是闡述產(chǎn)品內(nèi)容的基礎(chǔ)工具，也是頁(yè)面設(shè)計(jì)的基礎(chǔ)單位，能夠直觀、準(zhǔn)確地傳遞信息，充分表達(dá)設(shè)計(jì)思想。文字層面的設(shè)計(jì)包含文字的字號(hào)、字體、色彩等元素，在頁(yè)面排版中有時(shí)還會(huì)輔以線條，底圖和小型圖標(biāo)共同構(gòu)建信息。加載頁(yè)面的文字信息通常以顯示“正在加載”之類(lèi)表達(dá)網(wǎng)頁(yè)狀態(tài)的提示為主，文字大小、位置視具體情況而定。

（二）圖形類(lèi)：圖形在互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面中承擔(dān)著輔導(dǎo)文字、強(qiáng)化理解和增加可讀性等任務(wù)，相較文字而言，圖形更富活力。加載頁(yè)面中所使用的圖形又包含了不同類(lèi)別，如簡(jiǎn)潔圖標(biāo)、插畫(huà)、矢量動(dòng)效圖形等，使用圖形既可輔佐文字表達(dá)，豐富視覺(jué)效果，還可單獨(dú)使用，展現(xiàn)多元化的設(shè)計(jì)風(fēng)格，提升頁(yè)面的質(zhì)感。

（三）其他感官類(lèi)：文字與圖形均屬視覺(jué)類(lèi)表現(xiàn)方式，是最常用的提示工具。但也有一些互聯(lián)網(wǎng)產(chǎn)品在其他感官上進(jìn)行了嘗試。如用于下載文件的迅雷軟件，在加載完成時(shí)會(huì)發(fā)出“叮”的聲音，提示人們查看結(jié)果;一些游戲在加載頁(yè)面結(jié)束時(shí)，會(huì)將信號(hào)傳送到游戲手柄中，以手柄的震動(dòng)做出提示。隨著技術(shù)的發(fā)展，多感官的頁(yè)面交互將更普遍地應(yīng)用到設(shè)計(jì)中來(lái)。

三、加載頁(yè)面的情感化設(shè)計(jì)

認(rèn)知心理學(xué)家唐納德·諾曼（Donald Norman）提出產(chǎn)品的情感化設(shè)計(jì)理念。情感化設(shè)計(jì)即滿足人們對(duì)產(chǎn)品的內(nèi)在精神需求，它能夠賦予產(chǎn)品以性格，充分考慮用戶(hù)在使用過(guò)程中可能會(huì)出現(xiàn)的痛點(diǎn)，使用戶(hù)在使用產(chǎn)品的過(guò)程中獲得積極的體驗(yàn)，強(qiáng)化用戶(hù)和產(chǎn)品的聯(lián)系，從感性的角度優(yōu)化產(chǎn)品以獲得用戶(hù)的認(rèn)可與黏性，同時(shí)也是設(shè)計(jì)師通過(guò)產(chǎn)品傳達(dá)創(chuàng)意思維與產(chǎn)品情感的方式。唐納德·諾曼在《情感化設(shè)計(jì)》一書(shū)中，從心理學(xué)角度提出用三種水平層次來(lái)對(duì)產(chǎn)品進(jìn)行評(píng)價(jià)：本能水平、行為水平和反思水平，三種水平又對(duì)應(yīng)著本能、互動(dòng)和反思三個(gè)設(shè)計(jì)階段，下面從這三個(gè)階段對(duì)加載頁(yè)面的設(shè)計(jì)進(jìn)行分析。

（一）本能階段：對(duì)于用戶(hù)而言，設(shè)計(jì)發(fā)揮作用的第一步，就是形成對(duì)產(chǎn)品的初步印象。產(chǎn)品看上去如何，聽(tīng)上去如何，這些感官刺激即用戶(hù)的初次情感反應(yīng)。如果用戶(hù)沒(méi)有對(duì)加載頁(yè)面產(chǎn)生良好的第一印象，那便是感官刺激出了問(wèn)題。一些低成本的加載頁(yè)面設(shè)計(jì)往往過(guò)于簡(jiǎn)單，或使用了與產(chǎn)品調(diào)性不合的視覺(jué)元素，令用戶(hù)產(chǎn)生疲態(tài)。加載頁(yè)面是完整產(chǎn)品中的一個(gè)小環(huán)節(jié)，雖然并不屬于產(chǎn)品的重要功能頁(yè)，但其色彩、樣式等設(shè)計(jì)，都反映著產(chǎn)品的性格。加載頁(yè)面的本能階段設(shè)計(jì)，就是要讓用戶(hù)能夠?qū)?yè)面的視覺(jué)元素產(chǎn)生良好的情感反應(yīng)。

在本能階段，文字和圖形是人們?cè)趯ふ耶a(chǎn)品提示時(shí)的首要注意對(duì)象之一，文字的大小、數(shù)量、位置在用戶(hù)理解內(nèi)容之前就發(fā)揮了視覺(jué)引導(dǎo)作用。在沒(méi)有圖形甚至是國(guó)標(biāo)的情況下，文字的內(nèi)容也直接影響著用戶(hù)的情感體驗(yàn)，只有站在等待者的角度進(jìn)行文案設(shè)計(jì)，才能夠順利地減輕用戶(hù)地認(rèn)知負(fù)載。

合適的文字屬性能夠滿足用戶(hù)的審美需求，由于加載頁(yè)面的文字量較少，文字本身不需要進(jìn)行層級(jí)劃分，但文字和當(dāng)頁(yè)其他原本的內(nèi)容就要考慮層次性。如圖1中第一個(gè)實(shí)例，加載的文字信息所處的位置是標(biāo)題欄，這和用戶(hù)為了刷新頁(yè)面的下滑行為指令是一致的，且不與該頁(yè)面的其他信息沖突。而當(dāng)頁(yè)面進(jìn)行跳轉(zhuǎn)時(shí)，頁(yè)面可呈現(xiàn)空白而在中間位置放置加載文字信息，在醒目的同時(shí)也使頁(yè)面的視覺(jué)達(dá)到了平衡。此外，恰當(dāng)?shù)恼Z(yǔ)調(diào)能夠塑造親和的體驗(yàn)氛圍。某些網(wǎng)頁(yè)或是APP在加載數(shù)據(jù)時(shí)會(huì)用到“正在拼命加載中”或是“感謝您的耐心”這類(lèi)字眼，仿佛用戶(hù)面對(duì)的是一個(gè)有著感情的頁(yè)面，因此會(huì)萌生出理解和包容。

在用戶(hù)理解圖形前，色彩又占據(jù)了視覺(jué)體驗(yàn)的第一位。色彩是人們對(duì)進(jìn)入眼中的事物首要察覺(jué)要素，不同的色相、飽和度、明度會(huì)使人們產(chǎn)生不一樣的情感體驗(yàn)。如暖色調(diào)使人感到溫暖、熱情，但過(guò)于鮮艷的色彩可能使用戶(hù)無(wú)形中產(chǎn)生焦慮;冷色調(diào)使人感到冷靜、沉穩(wěn)，而過(guò)之又會(huì)使人沉悶，沒(méi)有生趣。搭配適當(dāng)?shù)纳?，不僅能夠吸引用戶(hù)的注意，還可以喚醒人們積極的情緒。此外，色彩的使用也要對(duì)應(yīng)產(chǎn)品本身的主題色，維護(hù)其整體感。

加載頁(yè)面最常用的視覺(jué)元素就是國(guó)標(biāo)，形式簡(jiǎn)明的圖標(biāo)不易與頁(yè)面中其他要素發(fā)生視覺(jué)沖突。目前較為常見(jiàn)簡(jiǎn)潔國(guó)標(biāo)有環(huán)狀與條狀國(guó)標(biāo)，如圖2所示。由于多種版本的運(yùn)用和傳播，類(lèi)似花形的環(huán)狀國(guó)標(biāo)在用戶(hù)心中形成了約定俗成的“加載”含義，國(guó)標(biāo)的明度變化或是大小的變化即可反映出加載狀態(tài)，且因其空間占用率低，便于根據(jù)實(shí)際情況進(jìn)行擺放。同樣運(yùn)用較廣的條狀國(guó)標(biāo)具有可讀性，用戶(hù)可通過(guò)讀條的數(shù)據(jù)了解加載進(jìn)程及加載所需時(shí)間，保證了產(chǎn)品的可控性。在本能階段，優(yōu)秀的設(shè)計(jì)使用戶(hù)無(wú)需思考即可了解自己所處的狀態(tài)，同時(shí)通過(guò)對(duì)頁(yè)面細(xì)節(jié)的把控，為用戶(hù)留下良好的第一印象。

（二）互動(dòng)階段：“互動(dòng)”一詞在中文釋義中本指人和人之間的作用，在技術(shù)發(fā)展之后，“互動(dòng)”既可包含行動(dòng)間的交互，也包含了精神層面的溝通?；?dòng)是交互設(shè)計(jì)的核心，一般而言，互動(dòng)設(shè)計(jì)能夠提高產(chǎn)品的使用效率，關(guān)注用戶(hù)的使用感受。

用戶(hù)在等待信息加載時(shí)注意力均放在頁(yè)面上，若頁(yè)面表現(xiàn)是枯燥、蒼白的，便極易使人產(chǎn)生厭煩心理。在互聯(lián)網(wǎng)產(chǎn)品的實(shí)際開(kāi)發(fā)中，要面對(duì)的可能是緩慢的網(wǎng)絡(luò)，未經(jīng)優(yōu)化的代碼，長(zhǎng)時(shí)間的操作或過(guò)量的數(shù)據(jù)等待處理，因此，產(chǎn)品的運(yùn)行速度可能沒(méi)有用戶(hù)預(yù)期的那么迅速。盡管早期用戶(hù)可能會(huì)給予新產(chǎn)品第二次機(jī)會(huì)，但大多數(shù)人會(huì)選擇直接退出頁(yè)面。情感化的互動(dòng)階段就是在這種情況下，為產(chǎn)品創(chuàng)造留住用戶(hù)的機(jī)會(huì)。

圖形的使用為設(shè)計(jì)師提供了發(fā)揮創(chuàng)意的平臺(tái)，多元化的創(chuàng)作也豐富了用戶(hù)的視覺(jué)感受，將傳統(tǒng)網(wǎng)絡(luò)信息的單項(xiàng)線性傳播方式轉(zhuǎn)變成雙向互動(dòng)體驗(yàn)。因此要為用戶(hù)建立積極的情感化互動(dòng)，首先可從加載頁(yè)面的圖形設(shè)計(jì)著力。如圖3所示，左側(cè)的實(shí)例是對(duì)條狀圖標(biāo)進(jìn)行了改造，繪制了工作者和死神的形象。當(dāng)死神隨著進(jìn)度條一步步逼近背對(duì)著他的人時(shí)，用戶(hù)不禁想知道，當(dāng)加載完成時(shí)，死神會(huì)和他的“獵物”發(fā)生什么樣的反應(yīng)，便可能耐心地、甚至懷有期待地等待下去。如圖3右側(cè)加載頁(yè)面的插畫(huà)便是被擬人化了的飲料杯，看它邁著小腳輕快地跑步，人們的注意力會(huì)被吸引到插畫(huà)的細(xì)節(jié)部分，觀察飲料杯的跑步姿勢(shì)，心情也會(huì)隨之變得輕快。有趣的設(shè)計(jì)可以喚醒人們的情感反應(yīng)，在初步刺激用戶(hù)的感官之后，獲取其更久的視覺(jué)停留。

除插畫(huà)之外，越來(lái)越多的加載頁(yè)面嘗試使用矢量動(dòng)效圖形來(lái)填補(bǔ)頁(yè)面間的轉(zhuǎn)接。如圖4所示，加載頁(yè)面的動(dòng)態(tài)圖形被設(shè)計(jì)為變化中的小球，球體的色彩和球與球之間的連線，構(gòu)成了復(fù)雜的動(dòng)效，然而似乎又有規(guī)律可循。不斷變化的動(dòng)態(tài)矢量圖吸引著用戶(hù)的興趣，將他們從無(wú)趣的等待中吸引出來(lái)，轉(zhuǎn)而研究起圖形的運(yùn)動(dòng)規(guī)律。

由于加載頁(yè)面不需要用戶(hù)進(jìn)行操控，所以就要采用其他方式使用戶(hù)與頁(yè)面發(fā)生互動(dòng)。從簡(jiǎn)潔的圖標(biāo)到豐富的動(dòng)效圖形，加載頁(yè)面視覺(jué)表達(dá)形式的變化與設(shè)計(jì)趨勢(shì)的發(fā)展同步進(jìn)行?；ヂ?lián)網(wǎng)產(chǎn)品為動(dòng)效設(shè)計(jì)提供了應(yīng)用之地，使許多設(shè)計(jì)師著力研究新的展陳方式，不斷發(fā)展的動(dòng)效又創(chuàng)造了更有趣的視覺(jué)互動(dòng)，助力打造越來(lái)越舒適的用戶(hù)體驗(yàn)。可見(jiàn)，加載頁(yè)面的設(shè)計(jì)還將不斷推陳出新，而無(wú)論運(yùn)用了哪種元素，互動(dòng)階段的情感化設(shè)計(jì)核心就是要盡可能抵消用戶(hù)等待時(shí)產(chǎn)生的負(fù)面心理，保持產(chǎn)品體驗(yàn)中的流暢感。

（三）反思階段：反思階段建立在本能和互動(dòng)階段的基礎(chǔ)之上，一旦頁(yè)面的設(shè)計(jì)達(dá)到了基本的要求，就要考慮對(duì)本能和互動(dòng)層次進(jìn)行進(jìn)一步優(yōu)化。反思階段旨在使用戶(hù)獲得更進(jìn)一步的情感體驗(yàn)，甚至為產(chǎn)品增加附加價(jià)值，制造意外的驚喜。如在設(shè)計(jì)加載頁(yè)面時(shí)，形式與加載的內(nèi)容需匹配，若加載容量大且所需時(shí)間長(zhǎng)，此時(shí)使用小型圖標(biāo)作加載提示可能會(huì)導(dǎo)致用戶(hù)的厭倦情緒，反之添加一些用于過(guò)渡的動(dòng)效圖形、文字信息或是廣告、視頻，則更符合用戶(hù)的心理預(yù)期，例如某款游戲在更新版本時(shí)，會(huì)播放出精致的版本動(dòng)畫(huà)，既為游戲的版本內(nèi)容做了預(yù)告，又使用戶(hù)樂(lè)意去等待。如圖5所示，若Chrome瀏覽器在遇到如斷網(wǎng)的情況而加載失敗，頁(yè)面上會(huì)出現(xiàn)一只像素風(fēng)格的小恐龍彩蛋，用戶(hù)只要按住空格鍵就可以操控小恐龍?jiān)跀嗑W(wǎng)界面玩一個(gè)橫版小游戲，用來(lái)打發(fā)無(wú)聊的斷網(wǎng)時(shí)光。人們往往能夠記住使自己感到驚喜的事物，如像素恐龍這樣超出預(yù)期的正向行為，就能夠使用戶(hù)對(duì)產(chǎn)品做出積極的評(píng)價(jià)。

然而，如果使用過(guò)量的信息元素堆疊到加載頁(yè)面上，使本來(lái)用于過(guò)渡的加載頁(yè)稱(chēng)為用戶(hù)的視覺(jué)負(fù)擔(dān)時(shí)，會(huì)產(chǎn)生負(fù)面效果。恰到好處的頁(yè)面信息就要把控好用戶(hù)的視覺(jué)停留時(shí)間，同時(shí)借助趣味性的創(chuàng)意，深度契合產(chǎn)品的特性和觸發(fā)用戶(hù)需求，進(jìn)而使用戶(hù)產(chǎn)生深刻的印象。

四、加載頁(yè)面的情感化設(shè)計(jì)原則

人們情感的復(fù)雜性決定了情感化設(shè)計(jì)的多層次、多階段。情感化設(shè)計(jì)能夠創(chuàng)造美觀而易用的產(chǎn)品，同時(shí)賦予產(chǎn)品一定的價(jià)值，通過(guò)對(duì)前文情感化設(shè)計(jì)三個(gè)階段的論述及對(duì)案例的分析，總結(jié)出加載頁(yè)面的情感化設(shè)計(jì)原則如下。

（一）本能階段：圖文并重，優(yōu)化用戶(hù)即刻認(rèn)知：在加載頁(yè)面設(shè)計(jì)的本能階段，設(shè)計(jì)要考慮產(chǎn)品的“外觀”，即給人的第一印象，以向用戶(hù)準(zhǔn)確地傳遞情感信號(hào)。設(shè)計(jì)時(shí)可充分利用文字或圖形的指示性，快速而有效地吸引用戶(hù)的注意力，同時(shí)也要把控好文字?jǐn)?shù)量和大小、色彩的對(duì)比、圖形的位置等要素，通過(guò)對(duì)形式美法則的應(yīng)用增強(qiáng)頁(yè)面的美感，給用戶(hù)留下深刻印象。

如圖6所示，加載頁(yè)面采用藍(lán)色為主色調(diào)，以宇航員的跳躍和星球旋轉(zhuǎn)的動(dòng)態(tài)表示頁(yè)面的加載狀態(tài)，給予用戶(hù)的第一視覺(jué)感受是精致且有趣的。宇航員上方的文字處于顯眼和易讀的位置，且清晰地告知用戶(hù)系統(tǒng)正在下載文件而非崩潰，因此“請(qǐng)勿退出”。星球下方的進(jìn)度條及文字則提示加載進(jìn)行到了什么階段以及剩余需要等待的時(shí)間。綜上，優(yōu)質(zhì)的畫(huà)面配以詳盡的信息提示，使用戶(hù)在產(chǎn)品情感化的本能階段即獲得了掌控感。

（二）互動(dòng)階段：個(gè)性彰顯，打造用戶(hù)趣味互動(dòng)：在加載頁(yè)面設(shè)計(jì)的互動(dòng)階段，設(shè)計(jì)要注重加載頁(yè)面操作的流暢性，滿足用戶(hù)對(duì)產(chǎn)品的基本需求。產(chǎn)品的個(gè)性是情感化體現(xiàn)的平臺(tái)，產(chǎn)品的個(gè)性影響感知，因此可利用各類(lèi)感官元素打造頁(yè)面的個(gè)性，強(qiáng)化用戶(hù)與頁(yè)面的互動(dòng)，減少甚至避免用戶(hù)的不滿情緒，傳達(dá)出產(chǎn)品的趣味性和專(zhuān)業(yè)性。

如圖7所示，該頁(yè)面在不同的色塊間切換，同時(shí)各個(gè)主題色所對(duì)應(yīng)的貼紙會(huì)彈出放大，并做出動(dòng)態(tài)的表情變化。每一副貼紙都十分可愛(ài)且吸睛，使用戶(hù)的眼睛保持忙碌的狀態(tài)。根據(jù)頁(yè)面上的文字可知，加載的內(nèi)容是可愛(ài)主題的貼紙，正與加載動(dòng)畫(huà)中的圖片相符，也強(qiáng)化了產(chǎn)品的個(gè)性。一旦人們?cè)诘却倪^(guò)程中發(fā)現(xiàn)了足夠吸引自己注意力的事物，如豐富的色彩搭配、有趣的故事情節(jié)等，都會(huì)感覺(jué)時(shí)間過(guò)得更快，便不急于獲得加載的結(jié)果了。

（三）反思階段：細(xì)節(jié)完善，推動(dòng)用戶(hù)情感延伸：在加載頁(yè)面設(shè)計(jì)反思階段，設(shè)計(jì)要完善頁(yè)面的細(xì)節(jié)，使頁(yè)面的風(fēng)格與結(jié)構(gòu)、信息的傳遞方式、與整體環(huán)境的關(guān)系達(dá)到和諧統(tǒng)一，同時(shí)調(diào)查用戶(hù)在體驗(yàn)頁(yè)面時(shí)的隱性需求，創(chuàng)造諸如驚喜一類(lèi)的情感延伸體驗(yàn)，提升用戶(hù)使用產(chǎn)品時(shí)的滿足感和愉悅感，從細(xì)小處塑造產(chǎn)品的完整性。

如圖8所示是BCG公司的車(chē)票應(yīng)用加載頁(yè)面。頁(yè)面的背景細(xì)即看可發(fā)現(xiàn)是地圖，而中央的圖形在各種車(chē)頭的樣式間變化，兩種元素的結(jié)合便巧妙地將品牌的聲音融入到了加載動(dòng)畫(huà)之中。設(shè)計(jì)師不僅使產(chǎn)品服務(wù)于用戶(hù)，也充分利用了用戶(hù)的等待時(shí)間，傳達(dá)該公司的品牌形象。

盡管加載頁(yè)面并非用戶(hù)的目標(biāo)頁(yè)面，但作為互聯(lián)網(wǎng)產(chǎn)品的一個(gè)必要環(huán)節(jié)，它需要與整個(gè)產(chǎn)品氛圍融契合?，F(xiàn)今，情感化設(shè)計(jì)是打造品牌核心競(jìng)爭(zhēng)力的重要途徑，許多品牌開(kāi)始追求以情感打動(dòng)用戶(hù)，講述品牌故事、塑造品牌形象以滿足用戶(hù)的情感需求。如圖9是一款為酒類(lèi)網(wǎng)站設(shè)計(jì)的加載頁(yè)面，設(shè)計(jì)師將酒類(lèi)產(chǎn)品制作的過(guò)程用動(dòng)畫(huà)的形式呈現(xiàn)出來(lái)，與品牌特色充分結(jié)合?？梢?jiàn)，在加載頁(yè)面的設(shè)計(jì)中若結(jié)合產(chǎn)品、公司甚至是品牌特色，添加產(chǎn)品或相關(guān)事物的形象、產(chǎn)品制作流程，亦或是展示品牌文化，不僅能夠大概率地留住用戶(hù)，還能夠加深用戶(hù)對(duì)品牌的印象，將用戶(hù)情感延伸到產(chǎn)品的背后。

結(jié)語(yǔ)

加載頁(yè)面是互聯(lián)網(wǎng)產(chǎn)品的重要組成部分，良好的頁(yè)面設(shè)計(jì)能夠提升產(chǎn)品整體形象，優(yōu)化用戶(hù)體驗(yàn)。設(shè)計(jì)師們?cè)絹?lái)越關(guān)注用戶(hù)心理，使設(shè)計(jì)滿足其易用性、易讀性等要求，而當(dāng)使用者已經(jīng)體驗(yàn)到優(yōu)質(zhì)的產(chǎn)品時(shí)，產(chǎn)品便更由細(xì)節(jié)贏得用戶(hù)的肯定和青睞。情感化設(shè)計(jì)為產(chǎn)品搭建了更富有人情味的交互框架，設(shè)計(jì)者若從本能、互動(dòng)及反思三個(gè)階段去審視產(chǎn)品、打磨加載頁(yè)面，便可能使用戶(hù)和產(chǎn)品的溝通更加順暢、高效且令人愉悅，從而在兩者之間形成一種持久而積極的聯(lián)系。.

基金項(xiàng)目：201 8年度安徽省哲學(xué)社會(huì)科學(xué)規(guī)劃項(xiàng)目資助，項(xiàng)目批準(zhǔn)號(hào)：AHSKY2018D73。

參考文獻(xiàn)

[1]唐納德.諾曼情感化設(shè)計(jì)[M]北京：電子工業(yè)出版社，2005

[2]謝傳偉.情感化設(shè)計(jì)在用戶(hù)體驗(yàn)中的運(yùn)用[J]設(shè)計(jì)' 2014 （02）：21-22

[3]張校君，張宇紅.Loading頁(yè)面設(shè)計(jì)中反饋機(jī)制的研究[J]設(shè)計(jì)， 2017 （05）：20—22

[4]李夢(mèng)穎.情感化設(shè)計(jì)下交互設(shè)計(jì)方法探究[J]設(shè)計(jì)，2017 （23）：39-40

[5]安德森.《怦然心動(dòng)—情感化交互設(shè)計(jì)指南》[M]北京：人民郵電出版社，2012

[6]陳晶，肖麗萍.產(chǎn)品中交互設(shè)計(jì)的用戶(hù)體驗(yàn)研究綜述[J]設(shè)計(jì)， 2014 （06）：13-14