基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)分析

◆付昊苒 王澤 唐灝 林嘉怡

基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)分析

◆付昊苒 王澤 唐灝 林嘉怡通訊作者

（大連東軟信息學(xué)院 遼寧 116000）

隨著我國(guó)經(jīng)濟(jì)的迅速發(fā)展，各項(xiàng)科學(xué)技術(shù)不斷更新，互聯(lián)網(wǎng)產(chǎn)品逐漸被推廣，因此基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品競(jìng)爭(zhēng)十分激烈。接下來(lái)，我們主要圍繞互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)展開(kāi)探討，并提出幾點(diǎn)可供參考的可行性建議。

用戶體驗(yàn)；互聯(lián)網(wǎng)產(chǎn)品；界面設(shè)計(jì)

近年來(lái)，互聯(lián)網(wǎng)技術(shù)的產(chǎn)生對(duì)人們的生活以及社會(huì)的經(jīng)濟(jì)、政治、文化、藝術(shù)等都產(chǎn)生了重大影響。隨著互聯(lián)網(wǎng)技術(shù)的逐漸發(fā)展，其技術(shù)設(shè)計(jì)越來(lái)越廣泛。在這樣的時(shí)代背景下，互聯(lián)網(wǎng)產(chǎn)品的競(jìng)爭(zhēng)越來(lái)越激烈，為積極應(yīng)對(duì)競(jìng)爭(zhēng)，立足于市場(chǎng)，我國(guó)各大互聯(lián)網(wǎng)產(chǎn)品不斷創(chuàng)新，想辦法提高競(jìng)爭(zhēng)力，立足于市場(chǎng)經(jīng)濟(jì)之中。其中，互聯(lián)網(wǎng)產(chǎn)品的界面成為互聯(lián)網(wǎng)運(yùn)營(yíng)商更新創(chuàng)造的首選。如何設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品界面成為人們關(guān)注的問(wèn)題，下面，我們對(duì)此進(jìn)行簡(jiǎn)單探討。

1 傳統(tǒng)產(chǎn)品界面設(shè)計(jì)存在的問(wèn)題

我們所探討的互聯(lián)網(wǎng)產(chǎn)品界面的重點(diǎn)是基于用戶體驗(yàn)的產(chǎn)品界面，因此這一方面的創(chuàng)新必須站在用戶的角度，以用戶的角度進(jìn)行思考創(chuàng)新。在以往傳統(tǒng)的產(chǎn)品界面設(shè)計(jì)的案例中，大多沒(méi)有更好的考慮到這一點(diǎn)，在對(duì)產(chǎn)品界面設(shè)計(jì)之前沒(méi)有充分考慮到客戶的體驗(yàn)感，沒(méi)有做出足夠完整的設(shè)計(jì)方案。傳統(tǒng)的互聯(lián)網(wǎng)產(chǎn)品界面更多關(guān)注了互聯(lián)網(wǎng)技術(shù)的可操作性，忽略了用戶體驗(yàn)感，缺乏用戶的角度觀[1]。這與銀行自動(dòng)取款機(jī)的設(shè)計(jì)是一樣的道理，當(dāng)人們用銀行自動(dòng)取款機(jī)進(jìn)行存款或者取款的時(shí)候，人們覺(jué)得通過(guò)這種方法使得業(yè)務(wù)變得簡(jiǎn)單便捷高效，這就說(shuō)明自動(dòng)取款機(jī)的設(shè)計(jì)更好的站在了用戶的角度考慮問(wèn)題。而傳統(tǒng)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)就缺乏這一優(yōu)勢(shì)，致使傳統(tǒng)的產(chǎn)品設(shè)計(jì)界面存在很多不足之處，已經(jīng)無(wú)法滿足現(xiàn)在大眾的需求。

2 基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)原則

基于互聯(lián)網(wǎng)技術(shù)的不斷更新改造，目前已經(jīng)實(shí)現(xiàn)了大眾的互聯(lián)網(wǎng)購(gòu)物模式，這種模式將在未來(lái)發(fā)展得越來(lái)越普遍。因此，傳統(tǒng)的互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)已經(jīng)完全不能更好服務(wù)于人們的生活需要。然而，如今基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)的工作大多由互聯(lián)網(wǎng)的軟件工程師來(lái)完成的，這決定了互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)存在一定的專業(yè)性，但與此同時(shí)也存在一些弊端，比如設(shè)計(jì)的出發(fā)點(diǎn)以及審美感官上的不足。因此，下面我們對(duì)基于用戶使用的互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)原則進(jìn)行簡(jiǎn)單探討。

互聯(lián)網(wǎng)產(chǎn)品發(fā)展至今已經(jīng)給人們帶來(lái)了很多的便利，它包括對(duì)互聯(lián)網(wǎng)用戶的社交、商品及各種游戲的服務(wù)，形式多樣，涵蓋方面十分廣闊。因此，互聯(lián)網(wǎng)產(chǎn)品的核心受眾是廣大用戶，用戶的“體驗(yàn)感”對(duì)互聯(lián)網(wǎng)產(chǎn)品的發(fā)展起到?jīng)Q定性作用。受眾反饋將給互聯(lián)網(wǎng)產(chǎn)品的發(fā)展提供充分的建議。想要設(shè)計(jì)出良好的基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面，需要首先從受眾的角度出發(fā)，根據(jù)長(zhǎng)期以來(lái)用戶體驗(yàn)的反饋，包括產(chǎn)品的質(zhì)量、便捷程度等，逐個(gè)進(jìn)行頁(yè)面更新，分析現(xiàn)有互聯(lián)網(wǎng)界面的不足之處。其次，相關(guān)設(shè)計(jì)者要十分關(guān)注互聯(lián)網(wǎng)產(chǎn)品界面的布局、色彩。因?yàn)榛ヂ?lián)網(wǎng)商品界面是大眾進(jìn)入購(gòu)物系統(tǒng)的第一步，這一界面在帶給用戶良好的體驗(yàn)感方面發(fā)揮著重要的作用。因此，作為互聯(lián)網(wǎng)產(chǎn)品門(mén)臉的首頁(yè)布局和色彩對(duì)用戶的體驗(yàn)感十分重要。互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)還應(yīng)該本著一個(gè)重要的原則，那就是便捷?！笆鼙姟笔欠袷艿轿M(jìn)入網(wǎng)頁(yè)，是界面的布局和色彩的吸引力所決定的?；ヂ?lián)網(wǎng)產(chǎn)品的頁(yè)面是否達(dá)到操作便捷，是否適合不同知識(shí)層次的受眾使用，是互聯(lián)網(wǎng)產(chǎn)品界面所要考慮的一個(gè)重要問(wèn)題。這就要求相關(guān)設(shè)計(jì)師要從廣大受眾的角度出發(fā)，換位思考，如果自己是使用者，在操作上有哪方面的需求，如何操作最為便捷高效，減少用戶使用過(guò)程中的錯(cuò)誤。例如，我們?cè)谑褂镁W(wǎng)絡(luò)進(jìn)行購(gòu)物時(shí)，往往會(huì)出現(xiàn)大量的產(chǎn)品，如何使得“受眾”能夠更加快速地在大量產(chǎn)品中找到目標(biāo)商品是值得我們關(guān)注的問(wèn)題。我們可以嘗試將網(wǎng)絡(luò)商城中的商品按照大類進(jìn)行分類，其次還可以在網(wǎng)頁(yè)的首行設(shè)置搜索引擎，讓大眾群體可以在進(jìn)入購(gòu)物網(wǎng)業(yè)的時(shí)候快速通過(guò)搜索功能找到目標(biāo)物。這樣既可以留住客戶群體，又能為廣大用戶節(jié)省時(shí)間，達(dá)到共贏的良好狀態(tài)[2]。

3 基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)分析

3.1 基于用戶感官體驗(yàn)的界面設(shè)計(jì)

互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)要為大眾使用者提供一種視覺(jué)的導(dǎo)向，能夠使得“受眾”進(jìn)入互聯(lián)網(wǎng)頁(yè)面時(shí)有一個(gè)感官上的指引，引導(dǎo)“受眾”能夠有一個(gè)有序的閱讀功能。這就要求相關(guān)設(shè)計(jì)師要發(fā)揮設(shè)計(jì)靈感，首先對(duì)互聯(lián)網(wǎng)產(chǎn)品界面進(jìn)行排版。例如，如果想設(shè)計(jì)一個(gè)縱向閱讀的購(gòu)物界面，設(shè)計(jì)師可以將店鋪名字以及牌面設(shè)置在網(wǎng)頁(yè)的最上方，接下來(lái)是產(chǎn)品的搜索引擎，再往下是商品的分類。廣大受眾將會(huì)通過(guò)點(diǎn)擊具體商品進(jìn)入相關(guān)的產(chǎn)品鏈接，產(chǎn)品的鏈接中同樣是按照縱向排列的順序，首先是產(chǎn)品的主圖，接下來(lái)是產(chǎn)品的價(jià)格明細(xì)，再下面可以設(shè)置一些評(píng)價(jià)明細(xì)，縱向依次排列的是商品的詳細(xì)簡(jiǎn)介及相關(guān)圖片功能介紹等。如果想要設(shè)計(jì)一種橫向的視覺(jué)效果，也類似于此，只是將相關(guān)引擎設(shè)置為橫向即可。這樣整體設(shè)計(jì)下來(lái)，互聯(lián)網(wǎng)產(chǎn)品的相關(guān)界面會(huì)為大眾提供一種無(wú)形的視覺(jué)引導(dǎo)，從“受眾”進(jìn)入網(wǎng)絡(luò)的一刻起，就會(huì)被無(wú)形的視覺(jué)引擎所引導(dǎo)，使得受眾的瀏覽層次分明，便于“受眾”快速找到目標(biāo)商品，減少受眾的視覺(jué)疲勞。因此，在互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)過(guò)程中設(shè)計(jì)師要注意受眾的感官界面設(shè)計(jì)，為受眾提供優(yōu)質(zhì)的服務(wù)[3]。比如 photo notes采用了最近流行的扁平化設(shè)計(jì)，整個(gè)界面簡(jiǎn)潔大方不失活潑，如圖1所示。

圖1 互聯(lián)網(wǎng)產(chǎn)品扁平化設(shè)計(jì)

3.2 基于用戶感官體驗(yàn)的界面色彩設(shè)計(jì)

在眾多視覺(jué)感官要素中，色彩這個(gè)因素一直以來(lái)都占據(jù)主導(dǎo)地位。鮮艷的色彩給人一種無(wú)形的吸引力，清新的色彩使人感到微妙的親切感。在眾多的互聯(lián)網(wǎng)產(chǎn)品的商城中，產(chǎn)品界面的色彩設(shè)置在很大程度上發(fā)揮著重要的決定作用。如果我們登錄網(wǎng)上各種商城，我們可以明顯感覺(jué)到不同商城給我們帶來(lái)的視覺(jué)差異，我們首先看到的差異必定是產(chǎn)品界面色彩的差異。因此，這就要求相關(guān)設(shè)計(jì)者要花時(shí)間在學(xué)習(xí)相關(guān)色彩的搭配上面，認(rèn)真研究所售商品的整體風(fēng)格特征，通過(guò)不斷的實(shí)驗(yàn)和設(shè)計(jì)，自身先進(jìn)行一下感官察覺(jué)，并從中選擇一種最適合分享產(chǎn)品的色彩風(fēng)格特征?；ヂ?lián)網(wǎng)產(chǎn)品頁(yè)面顏色的設(shè)計(jì)要符合產(chǎn)品的主題，并不是一切艷麗的顏色都適合任何一種互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面。因此，在進(jìn)行頁(yè)面的色彩選擇之前，我們必修站在受眾的角度進(jìn)行反向思考，思考如果自己是受眾，自己是不是會(huì)接受這種互聯(lián)網(wǎng)產(chǎn)品，是否喜歡使用該種產(chǎn)品，只有這樣做，通過(guò)嚴(yán)密的思考和調(diào)查，才能夠盡可能設(shè)計(jì)出較為完善的互聯(lián)網(wǎng)頁(yè)面。只有這樣才可以使得互聯(lián)網(wǎng)產(chǎn)品界面盡可能滿足受眾的感官體驗(yàn)，使得“受眾”能夠?qū)Ψ窒淼漠a(chǎn)品產(chǎn)生濃厚的興趣，以此來(lái)吸引大眾購(gòu)買(mǎi)商品。

3.3 基于用戶情感體驗(yàn)的界面設(shè)計(jì)

當(dāng)下，各種互聯(lián)網(wǎng)產(chǎn)品界面層出不窮，競(jìng)爭(zhēng)激烈。然而在這么激烈的競(jìng)爭(zhēng)背景下，如何進(jìn)行互聯(lián)網(wǎng)界面設(shè)計(jì)成為我們重點(diǎn)需要關(guān)注的話題。相關(guān)設(shè)計(jì)者應(yīng)該善于觀察生活，從生活實(shí)際中探尋設(shè)計(jì)的靈感，推動(dòng)互聯(lián)網(wǎng)技術(shù)的正向發(fā)展。通過(guò)細(xì)心觀察我們不難發(fā)現(xiàn)，隨著經(jīng)濟(jì)的發(fā)展，雖然人們的生活水平也隨之不斷提高，但是人們的社交情感逐漸變得薄弱，人與人之間的溝通變得越來(lái)越少。這在一方面反映了人們的情感訴求，相關(guān)互聯(lián)網(wǎng)界面設(shè)計(jì)者可以充分利用這一點(diǎn)，對(duì)互聯(lián)網(wǎng)產(chǎn)品界面進(jìn)行優(yōu)化，使得人們通過(guò)互聯(lián)網(wǎng)產(chǎn)品獲得感情上的訴求。只有這樣，才能夠使得互聯(lián)網(wǎng)產(chǎn)品更好的被受眾所接納，讓受眾在進(jìn)入某一互聯(lián)網(wǎng)產(chǎn)品的界面時(shí)有一種莫名的親切感，這種親切感就像大眾平時(shí)使用的日常用品一樣，讓其產(chǎn)生依賴感。當(dāng)某一個(gè)互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)達(dá)到了一個(gè)近乎完美的效果時(shí)，就會(huì)有更多的群眾愿意去使用該產(chǎn)品，在長(zhǎng)時(shí)間的接觸使用并且獲得良好的體驗(yàn)感時(shí)，群眾就會(huì)不自覺(jué)地對(duì)該種互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生強(qiáng)烈的依賴感，這時(shí)就達(dá)到了互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)的真正目的。

3.4 基于情感體驗(yàn)的“引導(dǎo)詞”設(shè)計(jì)

互聯(lián)網(wǎng)產(chǎn)品的界面具有一個(gè)共同的特點(diǎn)，那就是空間很小，不具備較多的空白空間。這使得一些用戶在面對(duì)空白沒(méi)有提示的空間時(shí)，他們有時(shí)無(wú)法對(duì)自己的需求進(jìn)行準(zhǔn)確的描述，當(dāng)他們想要在搜索引擎中進(jìn)行詞匯搜索時(shí)，大腦處于空白狀態(tài)，無(wú)法找到目標(biāo)產(chǎn)品。這時(shí)大部分的人有可能都會(huì)選擇放棄搜索，導(dǎo)致互聯(lián)網(wǎng)產(chǎn)品受眾的流失，非常不利于互聯(lián)網(wǎng)產(chǎn)品的推銷(xiāo)[4]。為更好解決這個(gè)問(wèn)題，互聯(lián)網(wǎng)的相關(guān)設(shè)計(jì)者可以引用關(guān)鍵詞的方式來(lái)為使用者解決這個(gè)問(wèn)題。關(guān)鍵詞的引用是指，設(shè)計(jì)者可以在互聯(lián)網(wǎng)產(chǎn)品首頁(yè)界面的搜索引擎中設(shè)置有關(guān)產(chǎn)品的搜索關(guān)鍵詞匯，這樣可以更好地把大眾引入相關(guān)產(chǎn)品界面，避免“受眾”因?yàn)闊o(wú)法正確找到目標(biāo)產(chǎn)品詞匯而導(dǎo)致的問(wèn)題，提高使用者的使用效率，節(jié)省使用者的使用時(shí)間，使得使用者愿意主動(dòng)去參與去使用。設(shè)計(jì)者還可以在搜索引擎中設(shè)置文字閃爍的輸入功能，制造一種緊迫的提示感，并針對(duì)所提示的內(nèi)容進(jìn)行加工設(shè)計(jì)，激發(fā)用戶使用的欲望。例如，我們很常見(jiàn)的微博，在“微博”的相關(guān)界面中會(huì)有一個(gè)“熱搜”的模塊，這一模塊的設(shè)置使得用戶可以直接通過(guò)“熱搜”模塊清晰地看到大眾所感興趣的話題，使得“受眾”可以直接點(diǎn)擊自己所喜愛(ài)和關(guān)心的話題。再如，各個(gè)瀏覽器頁(yè)面的設(shè)置在一定程度上也精心設(shè)置了這種模塊，當(dāng)“受眾”進(jìn)入某瀏覽器界面的時(shí)候，在首頁(yè)都會(huì)有一個(gè)主題鮮明的熱點(diǎn)搜索話題，這些熱點(diǎn)話題能夠第一時(shí)間抓住群眾的眼球，為觀眾提供搜索熱度的話題內(nèi)容。這種設(shè)計(jì)的思維是通過(guò)情感上的共鳴來(lái)抓住大眾的眼球，使得互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面有所吸引力，為使用者提供良好的產(chǎn)品。

3.5 基于情感體驗(yàn)的“附件控件”設(shè)計(jì)

如上文所提到的，互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)要關(guān)注的重點(diǎn)要素之一是操作的便捷性。如何使得設(shè)計(jì)的互聯(lián)網(wǎng)產(chǎn)品界面具備更加便捷的界面，為廣大群眾提供高效便捷的服務(wù)是一個(gè)優(yōu)秀的設(shè)計(jì)者必須考慮的問(wèn)題之一。然而，在我們所見(jiàn)的互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)中，大多沒(méi)有完全考慮到這一點(diǎn)，致使互聯(lián)網(wǎng)產(chǎn)品的使用者體驗(yàn)感較差，甚至對(duì)某些產(chǎn)品失去使用的興趣。因此，互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)者必須解決這個(gè)問(wèn)題。而為網(wǎng)業(yè)添加附件控件正好能解決這個(gè)問(wèn)題，提升用戶的體驗(yàn)感。這種附件控件大體可以分為刪除控件和提醒控件，這種設(shè)計(jì)可以使得互聯(lián)網(wǎng)產(chǎn)品界面更趨于人性化。例如，設(shè)計(jì)師可以根據(jù)受眾的續(xù)需求，設(shè)置一些常用的字段，并為受眾提供刪除附件，這個(gè)附件最大的特點(diǎn)是使用者可以快速刪除自己不需要的字段，在一定程度上簡(jiǎn)化了使用者的操作步驟，避免了因?yàn)闊o(wú)關(guān)的內(nèi)容影響受眾的體驗(yàn)感。而提醒控件最大的作用就是為受眾提供一些提醒的字段，這種提醒控件的設(shè)置最主要的目的是為簡(jiǎn)化使用者的操作流程，同樣也發(fā)揮著提高使用者體驗(yàn)感的重要作用，給受眾提供一個(gè)良好的體驗(yàn)感。

4 結(jié)語(yǔ)

網(wǎng)絡(luò)信息技術(shù)迅速發(fā)展，網(wǎng)絡(luò)相關(guān)產(chǎn)業(yè)競(jìng)爭(zhēng)激烈，各相關(guān)產(chǎn)業(yè)只能通過(guò)不斷的創(chuàng)新才能更好地立足于當(dāng)下的市場(chǎng)經(jīng)濟(jì)中，當(dāng)下的互聯(lián)網(wǎng)產(chǎn)品也是如此，而互聯(lián)網(wǎng)產(chǎn)品界面的設(shè)計(jì)對(duì)其產(chǎn)品的推廣意義重大。綜上所述，根據(jù)當(dāng)下的產(chǎn)業(yè)發(fā)展情況，基于用戶使用的網(wǎng)絡(luò)產(chǎn)品界面設(shè)計(jì)技術(shù)亟待被繼續(xù)創(chuàng)新。以上為本文的全部見(jiàn)解，希望能夠?qū)ヂ?lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)產(chǎn)生積極有效的促進(jìn)作用。

[1]寧馨兒. 以用戶體驗(yàn)為導(dǎo)向的博物館互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)研究[D].湖南師范大學(xué)，2020.

[2]劉香漁. 基于用戶體驗(yàn)的高校慕課APP界面設(shè)計(jì)研究[D].長(zhǎng)春工業(yè)大學(xué)，2018.

[3]袁浩洲. 基于用戶體驗(yàn)的互聯(lián)網(wǎng)個(gè)人信用評(píng)分產(chǎn)品設(shè)計(jì)研究[D].華東理工大學(xué)，2017.

[4]唐余虎. 基于用戶體驗(yàn)的B2C產(chǎn)品界面設(shè)計(jì)研究[D].東南大學(xué)，2017.