基于情感化設計的加載頁面設計研究

劉學 李萌

摘要：研究情感化設計的分析方法，探索該方法在加載頁面設計中的應用。只有抓住用戶在互聯網產品體驗中的痛點并尋求方法進行解決，才能為用戶創造更好的體驗感。從情感化設計出發，探索情感化三個水平層次對用戶的影響，通過對一些優質的加載頁面設計細節的總結，得出加載頁面設計中所需注意的要點。基于用戶情感體驗的三個階段，梳理得出頁面設計可遵循的設計原則。合理運用情感化設計方法，可規避設計中可能出現的問題，同時激發設計師在創作中的靈感，為加載頁面的設計提供參考。

關鍵詞：情感化設計 加載頁面 用戶體驗 互動設計 設計方法

中圖分類號：TB47

文獻標識碼：A

文章編號：1003-0069 （2020） 07-0030-03

引言

在互聯網技術高速發展的時代，大眾享受著越來越快的網絡速度，加之網絡提速普及而頻繁，人們通常對于網頁或是APP中的加載過程幾乎無感。但當軟件需要加載大量的內容時，用戶就需要等待頁面完成加載，而不完善的設計可能導致用戶直接退出。互聯網產品在滿足功能性需求的同時，也亟待重視用戶的感性需求，因此用戶體驗設計越來越注重細節，向著情感化和人性化方面發展。目前的加載頁面還存在著一些設計痛點，導致等待中的用戶產生焦灼心理，因而降低了對產品交互的滿意度。本文通過對加載頁面情感層次的分析研究，歸納出加載頁面設計中可參考的設計原則，以提供設計參考。

一、加載頁面概述

1993年的《計算機—一人機界面百分比進度指標的重要性》—文中就提到“如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋”。在用戶對互聯網產品進行操作時，產品需要為用提供操作反饋，并及時展示此時自身的運作狀態，以使用戶清晰地了解自己處于哪一階段、所執行的操作會獲得哪種結果，獲得對下一步操作的引導。

加載頁面也稱為Loading頁面，發揮著反饋用戶操作信息的作用。若前后頁面之間要進行切換，則加載頁面可提示用戶系統需要一定時間完成加載過程。在系統處理頁面轉換時，用戶此前的操作過程和注意力會被打斷，而加載頁面則可利用各類視覺形式緩解用戶在等待時的焦慮情緒，實現友好的界面交互。

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

二、加載頁面的設計分類

由于不同產品的屬性不同，因此在加載狀態下所處的流程、加載的數據內容和需要等待的時間也是不同的。加載頁面的基本功能是提醒用戶數據正在加載，為了強化用戶的體驗，還可在頁面中提供加載內容、加載進度、等待時常等信息，讓用戶心中有數，保持對產品的掌控感。加載頁面的形式多樣，以視覺表現形式為主，可從文字和圖形兩個方面來歸納。

（一）文字類：在互聯網產品中，文字是闡述產品內容的基礎工具，也是頁面設計的基礎單位，能夠直觀、準確地傳遞信息，充分表達設計思想。文字層面的設計包含文字的字號、字體、色彩等元素，在頁面排版中有時還會輔以線條，底圖和小型圖標共同構建信息。加載頁面的文字信息通常以顯示“正在加載”之類表達網頁狀態的提示為主，文字大小、位置視具體情況而定。

（二）圖形類：圖形在互聯網產品的頁面中承擔著輔導文字、強化理解和增加可讀性等任務，相較文字而言，圖形更富活力。加載頁面中所使用的圖形又包含了不同類別，如簡潔圖標、插畫、矢量動效圖形等，使用圖形既可輔佐文字表達，豐富視覺效果，還可單獨使用，展現多元化的設計風格，提升頁面的質感。

（三）其他感官類：文字與圖形均屬視覺類表現方式，是最常用的提示工具。但也有一些互聯網產品在其他感官上進行了嘗試。如用于下載文件的迅雷軟件，在加載完成時會發出“叮”的聲音，提示人們查看結果;一些游戲在加載頁面結束時，會將信號傳送到游戲手柄中，以手柄的震動做出提示。隨著技術的發展，多感官的頁面交互將更普遍地應用到設計中來。

三、加載頁面的情感化設計

認知心理學家唐納德·諾曼（Donald Norman）提出產品的情感化設計理念。情感化設計即滿足人們對產品的內在精神需求，它能夠賦予產品以性格，充分考慮用戶在使用過程中可能會出現的痛點，使用戶在使用產品的過程中獲得積極的體驗，強化用戶和產品的聯系，從感性的角度優化產品以獲得用戶的認可與黏性，同時也是設計師通過產品傳達創意思維與產品情感的方式。唐納德·諾曼在《情感化設計》一書中，從心理學角度提出用三種水平層次來對產品進行評價：本能水平、行為水平和反思水平，三種水平又對應著本能、互動和反思三個設計階段，下面從這三個階段對加載頁面的設計進行分析。

（一）本能階段：對于用戶而言，設計發揮作用的第一步，就是形成對產品的初步印象。產品看上去如何，聽上去如何，這些感官刺激即用戶的初次情感反應。如果用戶沒有對加載頁面產生良好的第一印象，那便是感官刺激出了問題。一些低成本的加載頁面設計往往過于簡單，或使用了與產品調性不合的視覺元素，令用戶產生疲態。加載頁面是完整產品中的一個小環節，雖然并不屬于產品的重要功能頁，但其色彩、樣式等設計，都反映著產品的性格。加載頁面的本能階段設計，就是要讓用戶能夠對頁面的視覺元素產生良好的情感反應。

在本能階段，文字和圖形是人們在尋找產品提示時的首要注意對象之一，文字的大小、數量、位置在用戶理解內容之前就發揮了視覺引導作用。在沒有圖形甚至是國標的情況下，文字的內容也直接影響著用戶的情感體驗，只有站在等待者的角度進行文案設計，才能夠順利地減輕用戶地認知負載。

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

在用戶理解圖形前，色彩又占據了視覺體驗的第一位。色彩是人們對進入眼中的事物首要察覺要素，不同的色相、飽和度、明度會使人們產生不一樣的情感體驗。如暖色調使人感到溫暖、熱情，但過于鮮艷的色彩可能使用戶無形中產生焦慮;冷色調使人感到冷靜、沉穩，而過之又會使人沉悶，沒有生趣。搭配適當的色彩，不僅能夠吸引用戶的注意，還可以喚醒人們積極的情緒。此外，色彩的使用也要對應產品本身的主題色，維護其整體感。

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

（二）互動階段：“互動”一詞在中文釋義中本指人和人之間的作用，在技術發展之后，“互動”既可包含行動間的交互，也包含了精神層面的溝通。互動是交互設計的核心，一般而言，互動設計能夠提高產品的使用效率，關注用戶的使用感受。

用戶在等待信息加載時注意力均放在頁面上，若頁面表現是枯燥、蒼白的，便極易使人產生厭煩心理。在互聯網產品的實際開發中，要面對的可能是緩慢的網絡，未經優化的代碼，長時間的操作或過量的數據等待處理，因此，產品的運行速度可能沒有用戶預期的那么迅速。盡管早期用戶可能會給予新產品第二次機會，但大多數人會選擇直接退出頁面。情感化的互動階段就是在這種情況下，為產品創造留住用戶的機會。

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

除插畫之外，越來越多的加載頁面嘗試使用矢量動效圖形來填補頁面間的轉接。如圖4所示，加載頁面的動態圖形被設計為變化中的小球，球體的色彩和球與球之間的連線，構成了復雜的動效，然而似乎又有規律可循。不斷變化的動態矢量圖吸引著用戶的興趣，將他們從無趣的等待中吸引出來，轉而研究起圖形的運動規律。

由于加載頁面不需要用戶進行操控，所以就要采用其他方式使用戶與頁面發生互動。從簡潔的圖標到豐富的動效圖形，加載頁面視覺表達形式的變化與設計趨勢的發展同步進行。互聯網產品為動效設計提供了應用之地，使許多設計師著力研究新的展陳方式，不斷發展的動效又創造了更有趣的視覺互動，助力打造越來越舒適的用戶體驗。可見，加載頁面的設計還將不斷推陳出新，而無論運用了哪種元素，互動階段的情感化設計核心就是要盡可能抵消用戶等待時產生的負面心理，保持產品體驗中的流暢感。

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

然而，如果使用過量的信息元素堆疊到加載頁面上，使本來用于過渡的加載頁稱為用戶的視覺負擔時，會產生負面效果。恰到好處的頁面信息就要把控好用戶的視覺停留時間，同時借助趣味性的創意，深度契合產品的特性和觸發用戶需求，進而使用戶產生深刻的印象。

四、加載頁面的情感化設計原則

人們情感的復雜性決定了情感化設計的多層次、多階段。情感化設計能夠創造美觀而易用的產品，同時賦予產品一定的價值，通過對前文情感化設計三個階段的論述及對案例的分析，總結出加載頁面的情感化設計原則如下。

（一）本能階段：圖文并重，優化用戶即刻認知：在加載頁面設計的本能階段，設計要考慮產品的“外觀”，即給人的第一印象，以向用戶準確地傳遞情感信號。設計時可充分利用文字或圖形的指示性，快速而有效地吸引用戶的注意力，同時也要把控好文字數量和大小、色彩的對比、圖形的位置等要素，通過對形式美法則的應用增強頁面的美感，給用戶留下深刻印象。

如圖6所示，加載頁面采用藍色為主色調，以宇航員的跳躍和星球旋轉的動態表示頁面的加載狀態，給予用戶的第一視覺感受是精致且有趣的。宇航員上方的文字處于顯眼和易讀的位置，且清晰地告知用戶系統正在下載文件而非崩潰，因此“請勿退出”。星球下方的進度條及文字則提示加載進行到了什么階段以及剩余需要等待的時間。綜上，優質的畫面配以詳盡的信息提示，使用戶在產品情感化的本能階段即獲得了掌控感。

（二）互動階段：個性彰顯，打造用戶趣味互動：在加載頁面設計的互動階段，設計要注重加載頁面操作的流暢性，滿足用戶對產品的基本需求。產品的個性是情感化體現的平臺，產品的個性影響感知，因此可利用各類感官元素打造頁面的個性，強化用戶與頁面的互動，減少甚至避免用戶的不滿情緒，傳達出產品的趣味性和專業性。

如圖7所示，該頁面在不同的色塊間切換，同時各個主題色所對應的貼紙會彈出放大，并做出動態的表情變化。每一副貼紙都十分可愛且吸睛，使用戶的眼睛保持忙碌的狀態。根據頁面上的文字可知，加載的內容是可愛主題的貼紙，正與加載動畫中的圖片相符，也強化了產品的個性。一旦人們在等待的過程中發現了足夠吸引自己注意力的事物，如豐富的色彩搭配、有趣的故事情節等，都會感覺時間過得更快，便不急于獲得加載的結果了。

（三）反思階段：細節完善，推動用戶情感延伸：在加載頁面設計反思階段，設計要完善頁面的細節，使頁面的風格與結構、信息的傳遞方式、與整體環境的關系達到和諧統一，同時調查用戶在體驗頁面時的隱性需求，創造諸如驚喜一類的情感延伸體驗，提升用戶使用產品時的滿足感和愉悅感，從細小處塑造產品的完整性。

如圖8所示是BCG公司的車票應用加載頁面。頁面的背景細即看可發現是地圖，而中央的圖形在各種車頭的樣式間變化，兩種元素的結合便巧妙地將品牌的聲音融入到了加載動畫之中。設計師不僅使產品服務于用戶，也充分利用了用戶的等待時間，傳達該公司的品牌形象。

盡管加載頁面并非用戶的目標頁面，但作為互聯網產品的一個必要環節，它需要與整個產品氛圍融契合。現今，情感化設計是打造品牌核心競爭力的重要途徑，許多品牌開始追求以情感打動用戶，講述品牌故事、塑造品牌形象以滿足用戶的情感需求。如圖9是一款為酒類網站設計的加載頁面，設計師將酒類產品制作的過程用動畫的形式呈現出來，與品牌特色充分結合。可見，在加載頁面的設計中若結合產品、公司甚至是品牌特色，添加產品或相關事物的形象、產品制作流程，亦或是展示品牌文化，不僅能夠大概率地留住用戶，還能夠加深用戶對品牌的印象，將用戶情感延伸到產品的背后。

結語

加載頁面是互聯網產品的重要組成部分，良好的頁面設計能夠提升產品整體形象，優化用戶體驗。設計師們越來越關注用戶心理，使設計滿足其易用性、易讀性等要求，而當使用者已經體驗到優質的產品時，產品便更由細節贏得用戶的肯定和青睞。情感化設計為產品搭建了更富有人情味的交互框架，設計者若從本能、互動及反思三個階段去審視產品、打磨加載頁面，便可能使用戶和產品的溝通更加順暢、高效且令人愉悅，從而在兩者之間形成一種持久而積極的聯系。.

基金項目：201 8年度安徽省哲學社會科學規劃項目資助，項目批準號：AHSKY2018D73。

參考文獻

[1]唐納德.諾曼情感化設計[M]北京：電子工業出版社，2005

[2]謝傳偉.情感化設計在用戶體驗中的運用[J]設計' 2014 （02）：21-22

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

[4]李夢穎.情感化設計下交互設計方法探究[J]設計，2017 （23）：39-40

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

[6]陳晶，肖麗萍.產品中交互設計的用戶體驗研究綜述[J]設計， 2014 （06）：13-14