李 穎

安徽工程大學(xué)藝術(shù)學(xué)院，蕪湖，241000

基于需求模型的移動瀏覽器App用戶體驗(yàn)設(shè)計(jì)

李 穎

安徽工程大學(xué)藝術(shù)學(xué)院，蕪湖，241000

基于Norman的體驗(yàn)分層理論以及互聯(lián)網(wǎng)用戶行為,構(gòu)建了互聯(lián)網(wǎng)用戶體驗(yàn)的需求模型，并將此需求模型應(yīng)用于設(shè)計(jì)實(shí)踐展開對用戶視覺及心理體驗(yàn)的深入分析，結(jié)合產(chǎn)品設(shè)計(jì)過程中的界面設(shè)計(jì)、交互設(shè)計(jì)和用戶體驗(yàn)的內(nèi)容，探索用戶需求與產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的內(nèi)在關(guān)聯(lián)，進(jìn)而探尋符合用戶需求與習(xí)慣的移動瀏覽器App用戶體驗(yàn)設(shè)計(jì)方法——結(jié)合用戶感知、思維、情感、行為習(xí)慣、視覺習(xí)慣對產(chǎn)品界面、交互和體驗(yàn)效果進(jìn)行綜合設(shè)計(jì)。

移動終端；瀏覽器；需求模型；用戶體驗(yàn)設(shè)計(jì)

隨著媒介設(shè)備和網(wǎng)絡(luò)技術(shù)的發(fā)展，Web App[1]已廣泛應(yīng)用于移動終端設(shè)備。移動應(yīng)用程序開發(fā)從早期的WAP網(wǎng)站到目前流行的原生應(yīng)用，再到以HTML5為標(biāo)準(zhǔn)的Web App[2]，移動應(yīng)用程序從PC端到移動互聯(lián)網(wǎng)上的移植已成為一種趨勢。而移動瀏覽器作為Web App的載體和平臺，其推廣和普及要同時(shí)解決技術(shù)和用戶使用行為的問題，包括用戶對產(chǎn)品的認(rèn)知、接受情況和持續(xù)使用行為等[3]。在以用戶為中心的網(wǎng)絡(luò)產(chǎn)品市場，如何設(shè)計(jì)出讓用戶滿意且能持續(xù)吸引用戶的瀏覽器App成為其能否生存于網(wǎng)絡(luò)市場的關(guān)鍵。

研究移動瀏覽器產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的目的在于把握瀏覽器用戶的體驗(yàn)需求與習(xí)慣。對瀏覽器App使用過程中用戶體驗(yàn)感受的研究，以設(shè)計(jì)開發(fā)出符合用戶體驗(yàn)需求與習(xí)慣的Web產(chǎn)品。Web產(chǎn)品的用戶體驗(yàn)研究領(lǐng)域，國內(nèi)外學(xué)者較為關(guān)注用戶的使用感受與用戶體驗(yàn)。Hassenzahl等從用戶的使用行為、感知感受、心理體驗(yàn)等角度對人機(jī)交互時(shí)的用戶體驗(yàn)進(jìn)行了研究[4]。蓋文·艾林伍德研究了用戶動機(jī)、情感、記憶、直覺等對用戶體驗(yàn)設(shè)計(jì)的影響等[5]。李小青研究了基于用戶內(nèi)在感受的用戶體驗(yàn)內(nèi)涵等[6]763-767。本文在國內(nèi)外學(xué)者的理論和應(yīng)用研究基礎(chǔ)上，構(gòu)建互聯(lián)網(wǎng)用戶體驗(yàn)層次模型，結(jié)合設(shè)計(jì)實(shí)踐，探索綜合用戶感官、行為與心理體驗(yàn)諸因素對移動瀏覽器App進(jìn)行用戶體驗(yàn)設(shè)計(jì)的有效方法，以設(shè)計(jì)出符合互聯(lián)網(wǎng)用戶體驗(yàn)需求的行為習(xí)慣的移動瀏覽器產(chǎn)品。

1 移動瀏覽器概述

網(wǎng)絡(luò)信息時(shí)代，瀏覽器成為用戶進(jìn)入網(wǎng)絡(luò)世界的第一門戶，未來想要掌握用戶，就要掌握用戶的瀏覽器[7]。目前，瀏覽器市場上廣泛受到用戶認(rèn)可的主流瀏覽器有蘋果Safari、谷歌Chrome、火狐Firefox、Internet Explore、Opera、遨游、騰訊TT等，再加上一些新出的瀏覽器，可以說網(wǎng)頁瀏覽器市場已變得擁擠不堪。根據(jù)國外數(shù)據(jù)公司Gadget Lab發(fā)布的全球移動瀏覽器份額的數(shù)據(jù)，國內(nèi)市場上安卓類瀏覽器市場份額最大，流量占到37.63%；排第二的是蘋果Safari，份額35.82%；排第三和第四的分別是Chrome和Firefox，占有率分別為19.19%和4.41%。隨著移動設(shè)備和跨平臺網(wǎng)絡(luò)應(yīng)用技術(shù)的推廣，HTML5提供了一個(gè)普遍的Web標(biāo)準(zhǔn)，使得網(wǎng)絡(luò)應(yīng)用程序能夠廣泛運(yùn)行于不同的設(shè)備瀏覽器之上。相比于傳統(tǒng)桌面Web應(yīng)用，HTML5構(gòu)建的瀏覽器App能以傳統(tǒng)客戶端軟件的形式顯示在桌面上，同時(shí)能訪問磁盤、攝像頭等硬件設(shè)備，融合桌面軟件所擅長的領(lǐng)域[8]。移動Web App能夠?qū)崿F(xiàn)兼容電腦、手機(jī)、iPad等多種智能設(shè)備，以及谷歌的Chrome瀏覽器、微軟的 IE、蘋果的 Safari、Opera和火狐的Firefox等多款移動終端常用瀏覽器。

2 移動瀏覽器用戶需求模型

2.1 網(wǎng)絡(luò)用戶需求層次

與事物認(rèn)識的普遍過程相同，瀏覽器App使用過程中的用戶體驗(yàn)是由淺入深的。體驗(yàn)層次理論將人的普遍體驗(yàn)分為三個(gè)層次：本能層體驗(yàn)、行為層體驗(yàn)和反思層體驗(yàn)[9]。對應(yīng)于網(wǎng)絡(luò)產(chǎn)品的體驗(yàn)過程，本能層體驗(yàn)內(nèi)容為產(chǎn)品的直覺外觀；行為層的體驗(yàn)內(nèi)容為產(chǎn)品的使用效率和樂趣；反思層體驗(yàn)內(nèi)容為用戶精神層面的內(nèi)在認(rèn)知與感受，包括通過產(chǎn)品使用所獲得的自我形象、個(gè)人滿意、記憶等方面。普遍體驗(yàn)層次理論反映了人們認(rèn)識和感受普遍事物的本質(zhì)規(guī)律，也適用于Web產(chǎn)品的構(gòu)建[6]763-767。Web產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)同樣只有以自頂而下、層層遞進(jìn)符合用戶體驗(yàn)規(guī)律，盡可能地追求系統(tǒng)模型與用戶心理模型的統(tǒng)一，才能設(shè)計(jì)開發(fā)出真正符合用戶感知與情感需求的移動瀏覽器App產(chǎn)品。

2.2 移動瀏覽器用戶行為分析

瀏覽器的用戶常見操作主要有打開、關(guān)閉、前進(jìn)、后退、輸入鏈接、打開鏈接、收藏、瀏覽器設(shè)置、開發(fā)者工具運(yùn)用等。以一個(gè)簡單的標(biāo)簽頁關(guān)閉操作為例，蘋果Safari瀏覽器的標(biāo)簽頁關(guān)閉按鈕位于左側(cè)，每次點(diǎn)選標(biāo)簽頁關(guān)閉按鈕時(shí)，由于標(biāo)簽頁寬度的改變，Safari瀏覽器上關(guān)閉按鈕一直在移動，因此每關(guān)閉一個(gè)標(biāo)簽頁，用戶就要重新移動鼠標(biāo)位置。而Google Chrome 瀏覽器的標(biāo)簽頁關(guān)閉按鈕位于右邊，用戶可以在同一位置上連續(xù)點(diǎn)擊鼠標(biāo)，以實(shí)現(xiàn)多個(gè)標(biāo)簽頁的快速關(guān)閉。從右至左的關(guān)閉操作顯然更符合瀏覽器用戶的操作習(xí)慣。從界面上看，關(guān)閉標(biāo)簽在左或右都沒有問題，但從用戶操作習(xí)慣看，顯然Chrome瀏覽器更加體貼。

再結(jié)合移動設(shè)備終端的操作，電腦操作以鼠標(biāo)和鍵盤操作為主，觸屏操作有點(diǎn)觸、滑動、擰轉(zhuǎn)、捏合等。復(fù)雜觸屏操作都可以分解為touchstart(觸屏開始)、touchmove(觸屏移動)和touchend(觸屏結(jié)束)的組合。點(diǎn)觸和滑動屬于單點(diǎn)觸屏操作，捏合、滑動屬于兩點(diǎn)觸屏操作，還有多點(diǎn)觸屏操作，都是三種事件的組合，由基本事件觸發(fā)其他事件，形成用戶行為的動態(tài)連鎖反應(yīng)，而用戶行為折射出用戶的心理需求。這是瀏覽器 App用戶界面交互操作設(shè)計(jì)的基本依據(jù)。圖1展示了用戶觸屏操作的基本事件組合。

圖1 用戶觸屏操作行為組合

2.3 用戶需求模型

結(jié)合以上對Web用戶普遍體驗(yàn)層次的研究以及移動瀏覽器用戶行為分析，構(gòu)建移動瀏覽器用戶體驗(yàn)的需求模型(圖2)，將它應(yīng)用于產(chǎn)品設(shè)計(jì)中，形成用戶需求與產(chǎn)品設(shè)計(jì)環(huán)節(jié)的對應(yīng)關(guān)系，進(jìn)而為移動瀏覽器App產(chǎn)品設(shè)計(jì)提供用戶體驗(yàn)依據(jù)。

圖2 Web用戶需求模型與產(chǎn)品設(shè)計(jì)關(guān)系

3 移動瀏覽器App用戶體驗(yàn)設(shè)計(jì)

為了進(jìn)一步研究互聯(lián)網(wǎng)用戶體驗(yàn)及其在實(shí)際產(chǎn)品設(shè)計(jì)中的參考價(jià)值，以移動瀏覽器圖像App設(shè)計(jì)為例，如圖3所示。圖3(a)為圖片淡入淡出自動切換App，其界面效果和預(yù)設(shè)功能以淡入淡出方式自動切換圖片，且可以通過點(diǎn)觸左右箭頭和右下角的圖片序號來切換圖片。圖3(b)為手機(jī)點(diǎn)觸和拖拽滑動圖片App，其界面效果和預(yù)設(shè)功能以拖拽方式切換圖片，且可以通過點(diǎn)觸左右箭頭和右下角的圖片序號來切換圖片。無操作時(shí)，圖片也可以自動切換。圖3(c)為3D圖片切換特效App，其界面效果和預(yù)設(shè)功能以3D效果的形式切換圖片，且可以通過左側(cè)縮略圖選擇圖片，通過拖拽移動左側(cè)縮略圖系列的位置。

圖3 幾款移動瀏覽器圖像App

3.1 用戶視覺體驗(yàn)與產(chǎn)品界面設(shè)計(jì)

基于用戶視覺體驗(yàn)的用戶界面設(shè)計(jì)目標(biāo)是界面外觀、風(fēng)格、易操作感和變化等符合用戶視覺習(xí)慣。

3.1.1 界面外觀與風(fēng)格設(shè)計(jì)

產(chǎn)品界面外觀與風(fēng)格設(shè)計(jì)應(yīng)符合用戶本能層次的視覺體驗(yàn)需求，即界面外觀帶給用戶舒適美觀的視覺感受。界面設(shè)計(jì)(UI)包括界面風(fēng)格、界面元素、界面圖標(biāo)、界面布局等設(shè)計(jì)內(nèi)容。產(chǎn)品界面的設(shè)計(jì)需要圖形設(shè)計(jì)師和用戶體驗(yàn)設(shè)計(jì)師的協(xié)同合作，共同確定用戶界面、元素外觀、界面布局、打開不同層級界面時(shí)的轉(zhuǎn)化方式以及用戶操作行為發(fā)生時(shí)的界面反饋方式等[10]。首先要確定界面設(shè)計(jì)風(fēng)格，這主要由標(biāo)準(zhǔn)色和界面布局來表達(dá)。如圖3中的三個(gè)瀏覽器圖像App界面外觀(白色分割線、黑灰點(diǎn)狀背景、各個(gè)元素外觀)、界面元素(文字、圖片、超鏈接等)、界面圖標(biāo)(左、右箭頭，圖片序列切換按鈕等)以及界面布局(整體居中且響應(yīng)屏幕寬度)，都展現(xiàn)了界面的整體風(fēng)格為一種時(shí)尚、沉穩(wěn)、簡潔、大氣的設(shè)計(jì)風(fēng)格，帶給用戶簡潔、美觀、舒適的視覺感受。

3.1.2 界面的易操作感——可用性設(shè)計(jì)

然而用戶的視覺不僅僅停留于觀感，當(dāng)用戶操作界面時(shí)，一些看起來精美卻很難用的產(chǎn)品，使用的感受不那么友好，就是可用性設(shè)計(jì)做得不夠好。以圖3(c)中3D圖片切換特效Web App手機(jī)點(diǎn)觸滑動圖片Web App為例，功能設(shè)計(jì)做到了以3D效果的形式切換圖片，且可以通過左側(cè)縮略圖選擇圖片，可通過拖拽移動左側(cè)縮略圖系列的位置。可用性設(shè)計(jì)研究的范疇是：用戶視覺效果的完整性和舒適性，縮略圖點(diǎn)選的易操作性和無誤性，圖片3D切換效果的自然流暢性，縮略圖列表上下滾動的易操作性，用戶點(diǎn)選操作的多樣性等，以保證用戶界面操作的易用性和舒適性。

3.1.3 用戶界面的變化——跨平臺設(shè)計(jì)

用戶的視覺環(huán)境不是一成不變的，隨著應(yīng)用環(huán)境的改變，比如設(shè)備屏幕的改變等，用戶的視覺體驗(yàn)也可能發(fā)生變化，因此，UI設(shè)計(jì)還需要處理的一個(gè)問題是跨平臺應(yīng)用的問題，最典型的iOS和安卓系統(tǒng)平臺存在著一定差異，這是設(shè)計(jì)過程中需要考慮的問題。不同平臺的屏幕尺寸、分辨率、系統(tǒng)性能都是UI設(shè)計(jì)中需要考慮的因素，做好針對不同系統(tǒng)平臺的差異化設(shè)計(jì)，也是UI設(shè)計(jì)的一項(xiàng)重要內(nèi)容。設(shè)計(jì)人員需要考慮到其運(yùn)行于不同設(shè)備屏幕的布局形式和界面美感，讓不同的手持終端設(shè)備用戶都能獲得良好的視覺體驗(yàn)。

3.2 用戶互動體驗(yàn)與交互設(shè)計(jì)

移動瀏覽器App在跨平臺、跨設(shè)備運(yùn)行時(shí)，由于受到設(shè)備環(huán)境、用戶操作方式和使用場景等外在條件的限制，其交互設(shè)計(jì)上也存在很多的差異[11]。交互設(shè)計(jì)始終以滿足用戶的互動體驗(yàn)需求為目標(biāo)，其基礎(chǔ)是符合用戶行為習(xí)慣的交互操作設(shè)計(jì)和滿足用戶使用需求的交互功能設(shè)計(jì)。

3.2.1 基于用戶行為習(xí)慣的交互操作設(shè)計(jì)

基于前文對移動瀏覽器用戶行為的分析，交互操作設(shè)計(jì)需要符合用戶的行為習(xí)慣，才能帶給用戶良好的操作體驗(yàn)，仍然以圖3中的移動瀏覽器圖像App為例，用戶行為是多種操作的組合，圖3(a)圖片淡入淡出自動切換App主要是點(diǎn)觸操作，圖3(b)手機(jī)拖拽滑動圖片App的主要操作是點(diǎn)觸加拖拽，圖3(c)3D圖片切換特效App的主要操作是點(diǎn)觸加滑動(縮略圖序列的上下滑動)，設(shè)計(jì)中需要考慮的問題有用戶的點(diǎn)觸、拖拽、捏合、滑動操作是否靈活，選取、打開、縮放圖片的操作是否流暢便捷，用戶打開、瀏覽和退出查看模式的操作是否符合用戶使用習(xí)慣，能否為用戶帶來良好的操作體驗(yàn)等。

3.2.2 基于用戶使用需求的交互功能設(shè)計(jì)

產(chǎn)品的交互功能是指用戶通過交互操作實(shí)現(xiàn)的使用功能，交互功能設(shè)計(jì)可以理解為讓用戶通過操作得到的反饋和瞬間滿足預(yù)期的預(yù)先設(shè)計(jì)方案。移動瀏覽器App系統(tǒng)功能通過響應(yīng)用戶的交互操作得以實(shí)現(xiàn)，但響應(yīng)的過程是否快捷，操作體驗(yàn)是否舒適，人機(jī)交互是否親切自然，都是評判交互設(shè)計(jì)是否符合用戶互動體驗(yàn)需求的實(shí)際參考。以圖3(b)手機(jī)點(diǎn)觸和拖拽滑動圖像App為例，在作交互設(shè)計(jì)時(shí)應(yīng)盡量解決的問題是：用戶的點(diǎn)觸、拖拽以及滑動圖像的操作能得到瞬間的反饋，且這種反饋帶給用戶使用的滿足感，實(shí)現(xiàn)用戶以不同方式查看圖片的短暫預(yù)期等，這些都是交互功能設(shè)計(jì)的內(nèi)容，也是衡量用戶互動體驗(yàn)?zāi)芊竦靡詽M足的重要標(biāo)準(zhǔn)。

3.3 用戶心理情感需求與用戶體驗(yàn)內(nèi)涵

用戶的心理和情感需求是否得到滿足，取決于產(chǎn)品使用的整體感受，這也是用戶體驗(yàn)關(guān)注的內(nèi)容。用戶體驗(yàn)(UE)是用戶在一款產(chǎn)品或系統(tǒng)的使用過程中的整體感受，既包括用戶的感官和內(nèi)在體驗(yàn)，又受到系統(tǒng)、用戶和使用環(huán)境的影響。Wikipedia對用戶體驗(yàn)的描述為用戶在產(chǎn)品或系統(tǒng)使用過程中所獲得的全部體驗(yàn)和滿意度。國外相關(guān)研究將用戶體驗(yàn)描述為用戶與產(chǎn)品發(fā)生交互時(shí)，用戶的內(nèi)在狀態(tài)、產(chǎn)品的系統(tǒng)特征與特定情境發(fā)生相互作用的產(chǎn)物。用戶體驗(yàn)涉及用戶行為、感知、思維、情感、心理等多方面的因素。

用戶的心理情感需求得以滿足取決于：對產(chǎn)品使用過程的滿足、產(chǎn)品使用過程帶來的愉悅以及對產(chǎn)品的認(rèn)同感。這三個(gè)層次的效果是由淺入深、層層遞進(jìn)的，最終建立用戶與產(chǎn)品之間的信任和依賴。

3.4 設(shè)計(jì)方法

基于以上研究，將符合互聯(lián)網(wǎng)用戶需求模型的移動瀏覽器App設(shè)計(jì)方法作一歸納,如圖4所示。對應(yīng)于互聯(lián)網(wǎng)用戶體驗(yàn)層次的內(nèi)容，將用戶需求與產(chǎn)品用戶體驗(yàn)的關(guān)系描述為：良好的用戶情感體驗(yàn)以良好的視覺體驗(yàn)和互動體驗(yàn)為前提，也就是用戶在產(chǎn)品使用過程中先是達(dá)到滿足，而后產(chǎn)生認(rèn)同，這也是從本能層到反思層的升華過程。用戶體驗(yàn)設(shè)計(jì)過程需要符合用戶的心理情感需求和行為習(xí)慣，才能設(shè)計(jì)出符合人性化體驗(yàn)需求的移動瀏覽器App。

圖4 移動瀏覽器App用戶體驗(yàn)設(shè)計(jì)

4 結(jié) 語

移動網(wǎng)絡(luò)世界的用戶通過瀏覽器與應(yīng)用程序進(jìn)行交互，交互的過程是否達(dá)到用戶的滿意,取決于這一過程是否滿足用戶體驗(yàn)的需求和習(xí)慣。依據(jù)普遍體驗(yàn)層次理論，將互聯(lián)網(wǎng)產(chǎn)品使用過程中的用戶體驗(yàn)分析為由淺至深、自頂而下的層次結(jié)構(gòu)，即本能層上基于產(chǎn)品界面外觀的視覺體驗(yàn)、行為層上基于產(chǎn)品交互設(shè)計(jì)的互動體驗(yàn)以及反思層上基于產(chǎn)品使用感受的心理和情感體驗(yàn)。理解用戶體驗(yàn)需求的層次模型，對移動瀏覽器產(chǎn)品的設(shè)計(jì)至關(guān)重要。依據(jù)這一理論，移動瀏覽器產(chǎn)品設(shè)計(jì)體現(xiàn)為滿足用戶視覺體驗(yàn)需求的用戶界面設(shè)計(jì)、滿足用戶互動體驗(yàn)需求的交互設(shè)計(jì)和滿足用戶心理情感體驗(yàn)的用戶體驗(yàn)設(shè)計(jì)內(nèi)容。并結(jié)合移動瀏覽器圖像App設(shè)計(jì)實(shí)踐總結(jié)出符合用戶體驗(yàn)需求的移動瀏覽器App設(shè)計(jì)方法。以此方法設(shè)計(jì)開發(fā)的移動瀏覽器App能夠達(dá)到良好的用戶體驗(yàn)，從而被用戶接受。

[1]Serrano Nicolas,Hernantes Josune,Gallardo Gorka.Mobile Web Apps[J].IEEE Software,2013,30(5):22-27

[2]黃悅深.基于HTML5的移動Web App開發(fā)[J].圖書館雜志,2014(7):72-77

[3]劉魯川,王菲.移動瀏覽器用戶的感知匹配與持續(xù)使用意向研究[J].情報(bào)科學(xué),2014,32(2):106-111

[4]Hassenzahl M,Tractinsky N.User Experience Research Agenda[J].Behavior and Information Technology,2006,25(2)：91-97

[5]艾林伍德,比爾.國際經(jīng)典交互設(shè)計(jì)教程:用戶體驗(yàn)設(shè)計(jì)[M].孔祥富，路融雪，譯.北京：電子工業(yè)出版社,2015:41-64

[6]李小青.基于用戶心理研究的用戶體驗(yàn)設(shè)計(jì)[J].情報(bào)科學(xué),2010,28(5):763-767

[7]趙侃,陳岫.瞬間之美:瀏覽器界面的用戶體驗(yàn)設(shè)計(jì)[J].裝飾,2011(10):127-128

[8]林瓏.HTML5移動Web開發(fā)實(shí)戰(zhàn)詳解[M].北京：清華大學(xué)出版社,2014:17[9]Donald A Norman.Emotional Design:Why Do We Love (or Hate) everyday things[M].New York:BasicBooks,2004: 21-22

[10]單筱秋.淺議人機(jī)交互界面研發(fā)中的用戶體驗(yàn)設(shè)計(jì)[J].南京藝術(shù)學(xué)院學(xué)報(bào),2013(6):181-183

[11]李世國,靳文奎,孫辛欣.智能手機(jī)瀏覽器信息架構(gòu)設(shè)計(jì)研究[J].包裝工程,2013,34(6):45-49

10.3969/j.issn.1673-2006.2017.08.026

TB47

A

1673-2006(2017)08-0104-05

2017-02-04

安徽省高等教育提升計(jì)劃人文社會科學(xué)項(xiàng)目“面向多終端設(shè)備的webAPP響應(yīng)式界面設(shè)計(jì)與布局方案研究”(TSSK2017B05)；安徽工程大學(xué)青年科研基金項(xiàng)目“跨平臺Web App界面的響應(yīng)式布局方法與交互體驗(yàn)設(shè)計(jì)研究”(2016YQ06)。

李穎(1987-)，女，安徽滁州人，碩士，講師，研究方向：Web前端產(chǎn)品的設(shè)計(jì)與開發(fā)。

(責(zé)任編輯胡永近)