互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中用戶體驗(yàn)與交互設(shè)計(jì)優(yōu)化策略

邵俊翔

Shao Junxiang

廣西藝術(shù)學(xué)院 廣西 南寧 530022

Guangxi University of Arts Nanning, Guangxi

關(guān)鍵字：用戶體驗(yàn)；交互設(shè)計(jì)；色彩運(yùn)用；優(yōu)化策略；

新的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)項(xiàng)目，需要對項(xiàng)目進(jìn)行全方位的溝通了解及診斷，逐步地推進(jìn)項(xiàng)目設(shè)計(jì)。在設(shè)計(jì)流程和細(xì)節(jié)上不注意，會影響產(chǎn)品設(shè)計(jì)的體驗(yàn)、視覺、交互方式，達(dá)不到最佳體驗(yàn)效果。因此，如何進(jìn)行用戶體驗(yàn)與交互設(shè)計(jì)優(yōu)化策略研究值得每一位互聯(lián)網(wǎng)產(chǎn)品研發(fā)者深思。通過國內(nèi)外學(xué)者對此項(xiàng)研究發(fā)現(xiàn)，已有學(xué)者關(guān)注到用戶界面色彩體驗(yàn)和交互設(shè)計(jì)并取得了優(yōu)秀的研究成果，例如辛向陽以交互設(shè)計(jì)的對象：行為的設(shè)計(jì)、物理邏輯到行為邏輯進(jìn)行深入研究。從現(xiàn)有研究來看，雖有部分關(guān)于用戶體驗(yàn)與交互設(shè)計(jì)的原則理論研究，對于優(yōu)化策略的研究卻很缺少，良好的用戶體驗(yàn)和交互設(shè)計(jì)能改善人機(jī)交互的效能，增加應(yīng)用程序的親和力，對于設(shè)計(jì)中的優(yōu)化策略還需要更多的理論和實(shí)踐，尚有較大的研究空間。

1 互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)狀況分析

1.1 互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)現(xiàn)狀

當(dāng)前的互聯(lián)網(wǎng)技術(shù)與設(shè)計(jì)領(lǐng)域相互影響和推動，從用戶角度出發(fā)，好的設(shè)計(jì)往往提升用戶體驗(yàn)好感度，從而給產(chǎn)品設(shè)計(jì)提升高品質(zhì)的體驗(yàn)價(jià)值，因此設(shè)計(jì)對于互聯(lián)網(wǎng)產(chǎn)品是很重要的。

目前，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)通常分為交互設(shè)計(jì)和視覺設(shè)計(jì)兩個(gè)大的工作方向。交互設(shè)計(jì)的關(guān)注點(diǎn)在于用戶操作行為的設(shè)計(jì)和物的設(shè)計(jì)、產(chǎn)品功能的物理邏輯到行為邏輯的呈現(xiàn)[1]。而視覺設(shè)計(jì)的關(guān)注點(diǎn)在于產(chǎn)品能否給體驗(yàn)的用戶既直觀又愜意的視覺體驗(yàn)，如合理的顏色搭配、圖形元素、特效演示等。

5G時(shí)代，用戶對于產(chǎn)品的使用體驗(yàn)要求不斷提升，從產(chǎn)品的設(shè)計(jì)應(yīng)用技術(shù)呈現(xiàn)方式與場景色彩設(shè)計(jì)來看，樣式變得多樣化，用戶對設(shè)計(jì)的要求也更加嚴(yán)謹(jǐn)和重視。因此，近年來交互設(shè)計(jì)師相關(guān)崗位薪酬有明顯的改善，設(shè)計(jì)的邊界得到了廣泛的拓展，在互聯(lián)網(wǎng)的大舞臺上給設(shè)計(jì)人員發(fā)揮帶來更大的機(jī)遇和挑戰(zhàn)。

1.2 互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)趨勢

互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì)從設(shè)計(jì)同質(zhì)化的體驗(yàn)追求個(gè)性化和創(chuàng)新設(shè)計(jì)，在設(shè)計(jì)變革當(dāng)中更多產(chǎn)品通過定位找到了機(jī)遇和挑戰(zhàn)。設(shè)計(jì)者必須了解競品和產(chǎn)品分析，鎖定目標(biāo)群體，進(jìn)行用戶細(xì)分研究和體驗(yàn)需求，提升產(chǎn)品價(jià)值。筆者通過研究近年數(shù)字媒體藝術(shù)與技術(shù)的用戶體驗(yàn)變化，從用戶體驗(yàn)探索的媒介、交互、信息、場景等多角度出發(fā)，探索設(shè)計(jì)未來的趨勢。

圖1 用戶體驗(yàn)影響因素

通過人、環(huán)境、硬件與技術(shù)四個(gè)維度，來探討和總結(jié)用戶體驗(yàn)趨勢，在這個(gè)順勢而變的行業(yè)，大家在體驗(yàn)創(chuàng)新設(shè)計(jì)的過程中，不斷尋求設(shè)計(jì)優(yōu)化策略，了解互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)趨勢，向設(shè)計(jì)未來的方向努力前行。關(guān)注產(chǎn)品與人之間的溝通，即用恰到好處的方式打破產(chǎn)品設(shè)計(jì)者和產(chǎn)品使用者之間無形的壁壘?；ヂ?lián)網(wǎng)產(chǎn)品在采用體驗(yàn)型方法后，簡約的色彩搭配，通過多維度的感官刺激體驗(yàn)者形成記憶。

圖2 用戶體驗(yàn)結(jié)構(gòu)圖

人工智能時(shí)代，機(jī)械化單向交互方式逐漸被打破，機(jī)器漸漸演化趨向于智能數(shù)據(jù)分析，主動觀察真實(shí)場景，感受用戶情感，預(yù)判用戶意圖并自動篩選完成意向信息呈現(xiàn)的工作方式。機(jī)器如何為人們提供便捷高效的智能化服務(wù)，未來還有非常大的想象空間。

2 極簡主義用戶體驗(yàn)與交互設(shè)計(jì)

2.1 用戶體驗(yàn)之旅

一個(gè)杰出的數(shù)字產(chǎn)品從用戶體驗(yàn)中就可以看出產(chǎn)品差異化，有學(xué)者指出用戶體驗(yàn)取決于交互設(shè)計(jì)，用戶在互動系統(tǒng)中感受。其實(shí)，用戶體驗(yàn)涉及廣泛，是衡量一個(gè)產(chǎn)品是否好用的有效評判，包含了用戶對產(chǎn)品的使用所涵蓋色彩、印象、喜好、生理和心理等諸多因素。

互聯(lián)網(wǎng)用戶體驗(yàn)是指人機(jī)交互過程中所獲得的體驗(yàn)，從用戶打開互聯(lián)網(wǎng)產(chǎn)品的那一刻到關(guān)閉頁面時(shí)對觸發(fā)所形成的所有認(rèn)知和感受。具有以下幾個(gè)特征：

①特性：體驗(yàn)相對來說是一個(gè)比較有主觀性也比較抽象的概念，并沒有一個(gè)很確切的評判標(biāo)準(zhǔn)，由于每個(gè)人的喜好情感色彩訴求還有思維方式的不同，導(dǎo)致產(chǎn)品給用戶的感受和體驗(yàn)也是不一樣的。

②感性：由于產(chǎn)品使用時(shí)，色彩成為用戶第一視覺，其次是周邊環(huán)境的影響，不同環(huán)境下產(chǎn)品視覺效果使用可能會帶給用戶不一樣的體驗(yàn)，如應(yīng)用程序的白天和夜晚的體驗(yàn)界面區(qū)分。

③融性：用戶體驗(yàn)不單單指應(yīng)用程序當(dāng)中某些部分的體驗(yàn)，它同時(shí)還包含了應(yīng)用的界面版式、色彩運(yùn)用、交互方式還有響應(yīng)速度等很多方面，是一個(gè)應(yīng)用程序整體給用戶所呈現(xiàn)的體驗(yàn)。

用戶體驗(yàn)之旅，從用戶角度出發(fā)，以敘事方式描述使用產(chǎn)品或接受服務(wù)的體驗(yàn)情況，旅途中以可視化的色彩圖形展示及互動，追求旅行的最佳體驗(yàn)效果。

2.2 交互設(shè)計(jì)之美

交互設(shè)計(jì)是一門關(guān)于如何創(chuàng)建新的用戶體驗(yàn)的學(xué)科，幫助人們擴(kuò)充生活中的交互方式和空間敘事，進(jìn)行良好溝通，以提升用戶交互方式的趣味性和新鮮感。通過對用戶行為和產(chǎn)品界面色彩進(jìn)行交互可以為產(chǎn)品與用戶之間建立一種有機(jī)的聯(lián)系，這種聯(lián)系幫助用戶達(dá)到更加有效的目標(biāo)，并創(chuàng)造良好的用戶體驗(yàn)，在體驗(yàn)過程中提高了效率，提升了用戶對產(chǎn)品的好感和美譽(yù)度。

App端交互以移動設(shè)備為中心。主要涉及手勢觸發(fā)，有點(diǎn)擊屏幕交互、連續(xù)點(diǎn)擊交互、長按交互、滑動交互、重力交互、全景交互、語音交互、虛擬交互等。

3 互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)構(gòu)建與優(yōu)化策略

3.1 構(gòu)思發(fā)現(xiàn)—用戶思維導(dǎo)圖優(yōu)化策略

用戶思維導(dǎo)圖以發(fā)散性思維為基礎(chǔ)，把思維對象的相關(guān)信息用圖文并茂的方法匯聚到一起在進(jìn)行創(chuàng)意。思維向四面八方發(fā)散，多角度捕捉靈感來源。導(dǎo)圖可以清晰梳理想法，聚焦主題，信息之間建立聯(lián)系，一幅清晰的思維全景圖，使設(shè)計(jì)者可以想到細(xì)節(jié)，又可以想到整體。設(shè)計(jì)者所關(guān)注的主題形象化了，更容易發(fā)現(xiàn)便于創(chuàng)造的誘發(fā)因素，形成良好的誘導(dǎo)設(shè)計(jì)方向。

導(dǎo)圖強(qiáng)調(diào)快速思維，思維越快思想組合越積極，力求最短的時(shí)間內(nèi)將思維高速運(yùn)轉(zhuǎn)起來，在思維涌出時(shí)敏感地捕捉到設(shè)計(jì)的誘發(fā)點(diǎn)。構(gòu)思中還需要設(shè)計(jì)者進(jìn)行應(yīng)用程序框架功能模塊的規(guī)劃，從而有效高效地完成優(yōu)良的設(shè)計(jì)框架。

3.2 體驗(yàn)發(fā)現(xiàn)—用戶體驗(yàn)設(shè)計(jì)優(yōu)化策略

筆者通過查閱相關(guān)文獻(xiàn)、網(wǎng)絡(luò)資料及項(xiàng)目實(shí)踐中，深入學(xué)習(xí)交流，總結(jié)了產(chǎn)品體驗(yàn)優(yōu)化策略由簡入圣的進(jìn)階過程劃分了三個(gè)塊面：

①界面設(shè)計(jì)篇：學(xué)習(xí)掌握模塊界面設(shè)計(jì)的方法和實(shí)例，比如頁面和圖標(biāo)。關(guān)注細(xì)節(jié)設(shè)計(jì)，了解產(chǎn)品特性及需求。牽動用戶情感的紐帶的設(shè)計(jì)取決于圖標(biāo)，當(dāng)然，圖標(biāo)設(shè)計(jì)須結(jié)合基礎(chǔ)界面的核心內(nèi)容，在分場景中契合用戶體驗(yàn)、原型交互、視覺動效來設(shè)計(jì)，找到最佳設(shè)計(jì)效果[3]。

②細(xì)節(jié)設(shè)計(jì)篇：分析常被忽略的細(xì)節(jié)設(shè)計(jì)，如讀取、彈窗、表單、狀態(tài)、缺省等設(shè)計(jì)方法。深入了解細(xì)節(jié)模塊，把控設(shè)計(jì)的風(fēng)格，提升用戶的體驗(yàn)。

③全鏈思維篇：理解藝術(shù)和技術(shù)之間的界限，比如沉浸式體驗(yàn)設(shè)計(jì)、可視化服務(wù)設(shè)計(jì)、智能化設(shè)計(jì)等。并不是好看的設(shè)計(jì)體驗(yàn)就好，往往是追求極簡設(shè)計(jì)更容易被用戶喜好。

3.3 設(shè)計(jì)發(fā)現(xiàn)—視覺藝術(shù)設(shè)計(jì)優(yōu)化策略

在視覺色彩表現(xiàn)上，拋棄了擬物化設(shè)計(jì)中的光質(zhì)感、立體感、透視感，摒棄一切裝飾效果，如陰影、肌理、3D效果的使用等，版面干凈利落，不添加任何羽化、濾鏡等效果。將界面設(shè)計(jì)回歸到藝術(shù)的根本，以點(diǎn)線面為表現(xiàn)元素，圖形和空間色彩簡潔化處理。

3.3.1 扁平化設(shè)計(jì)方法

扁平風(fēng)格上給人簡約大氣，講究簡潔圖形、色彩、文字及合理有序的搭配。主次分明的風(fēng)格，使圖形化的界面分割易于識別提高閱讀效率。它簡約卻不簡單，舍棄多余設(shè)計(jì)元素，簡潔明了有效傳達(dá)視覺交互。

3.3.2 以簡約主義為出發(fā)點(diǎn)

極簡主義的美術(shù)風(fēng)格和當(dāng)下互聯(lián)網(wǎng)領(lǐng)域的設(shè)計(jì)潮流不謀而合，秉承新媒體設(shè)計(jì)思維的傳承和發(fā)展。設(shè)計(jì)師應(yīng)多借鑒國內(nèi)外優(yōu)秀設(shè)計(jì)，吸取設(shè)計(jì)思路和靈感，有效快捷提升設(shè)計(jì)品質(zhì)。

3.3.3 秉持視覺一致原則

為有效建立用戶完整的設(shè)計(jì)模型和體驗(yàn)效果，需把視覺風(fēng)格和設(shè)計(jì)模式統(tǒng)一化。在圖標(biāo)上也需要統(tǒng)一視覺表現(xiàn)，降低光影紋理材質(zhì)陰影對設(shè)計(jì)的影響。

3.3.4 巧用裝飾元素點(diǎn)綴空間色彩

色彩搭配中，裝飾元素有效應(yīng)用界面設(shè)計(jì)也是不錯(cuò)的方法，但是必須簡潔化處理。視覺上，單純的扁平化設(shè)計(jì)不一定能滿足所有用戶的視覺體驗(yàn)，裝飾元素的適當(dāng)運(yùn)用并不會阻礙和破壞設(shè)計(jì)的整體性，取巧發(fā)揮，利用細(xì)節(jié)為用戶有效提供簡潔大方卻又不失趣味的應(yīng)用設(shè)計(jì)。

3.3.5 扁平化的交互設(shè)計(jì)

交互的易用性和界面的友好性是其重要考慮因素之一。除了優(yōu)秀的界面之外，必然取決于功能實(shí)現(xiàn)的合理性，對于用戶任何額外的操作步驟都會降低其體驗(yàn)效果。提升交互領(lǐng)域的改造和創(chuàng)新，設(shè)計(jì)出符合現(xiàn)代審美需求，真正能為用戶提供便利的產(chǎn)品應(yīng)用。

3.4 色彩發(fā)現(xiàn)—空間色彩搭配優(yōu)化策略

在視覺藝術(shù)設(shè)計(jì)中，根據(jù)實(shí)際的需要優(yōu)化用戶界面色彩也是非常重要的環(huán)節(jié)。界面設(shè)計(jì)與色彩優(yōu)化的策略有直接的關(guān)聯(lián)性，對用戶的瀏覽速度及適應(yīng)有決定性，目前，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)趨向于扁平化色彩設(shè)計(jì)方向。

強(qiáng)調(diào)配色好感度。使用戶產(chǎn)生好感和共鳴的配色，更能引發(fā)用戶自發(fā)地去了解設(shè)計(jì)所要傳達(dá)的意圖。如：在表現(xiàn)食品應(yīng)用時(shí)，考慮激發(fā)人的欲望進(jìn)行消費(fèi)購買，常見的方法就是使用高明度高純度的色彩使用。

通過色彩導(dǎo)引閱讀和使用，合理對色彩位置的調(diào)和管理，達(dá)到色彩自然引導(dǎo)視覺流程作用。如：色彩方案中易識別需要強(qiáng)對比的色彩來進(jìn)行設(shè)計(jì)，當(dāng)然還需要考慮色彩簡潔化搭配。

利用色彩引導(dǎo)消費(fèi)設(shè)計(jì)。優(yōu)秀的色彩設(shè)計(jì)可以在應(yīng)用被使用時(shí)，給用戶留下第一眼的色彩印象，提高用戶轉(zhuǎn)化率。如：適當(dāng)?shù)目臻g色彩及留白，可以點(diǎn)綴產(chǎn)品主題，色彩識別體驗(yàn)更佳，建議一個(gè)移動互聯(lián)網(wǎng)產(chǎn)品用色不超過三種，一種主色，兩種輔助色調(diào)。

3.5 原型發(fā)現(xiàn)—交互動效設(shè)計(jì)優(yōu)化策略

交互設(shè)計(jì)的終極目標(biāo)是改變和影響用戶的行為，達(dá)到期望的業(yè)務(wù)結(jié)果，如訪問、搜索率等結(jié)果指標(biāo)，結(jié)果指標(biāo)因產(chǎn)品而異，不具有普遍性。而在交互設(shè)計(jì)中，以交互設(shè)計(jì)定律為指導(dǎo)的過程指標(biāo)（少快好?。┦峭ㄓ玫模梢哉f放之四海皆準(zhǔn)。

靜態(tài)頁面瀏覽者會覺得很平淡呆板，如果頁面訪問時(shí)有入場動效，會更加友好，需要探索一番，換言之，好的交互創(chuàng)意甚至能讓瀏覽者產(chǎn)生心流模式，頁面不斷給出交互動畫效果，獲得更多驚喜收獲及嘗試。

3.6 程序發(fā)現(xiàn)—功能設(shè)計(jì)應(yīng)用優(yōu)化策略

低代碼開發(fā)使團(tuán)隊(duì)提高工作效率又可以快速構(gòu)建和部署互聯(lián)網(wǎng)產(chǎn)品應(yīng)用程序。低代碼或無代碼平臺的用戶可以用點(diǎn)擊界面構(gòu)建項(xiàng)目，而不必為給定應(yīng)用程序編寫每一行代碼。

以往不同終端都需要選擇不同的編程語言進(jìn)行有效地編寫，才能實(shí)現(xiàn)不同終端的體驗(yàn)。如今只需要一套代碼就可以在多個(gè)平臺上兼容。

當(dāng)前我們對于技術(shù)、大數(shù)據(jù)的需求也逐漸提高，想必對軟件編程這個(gè)領(lǐng)域的訴求也越來越多。無論是作為軟件編程的專家還是作為該領(lǐng)域的小白來說，了解這些優(yōu)化策略并把握其動態(tài)，一定會讓我們受益頗多。

3.7 測試發(fā)現(xiàn)—設(shè)計(jì)進(jìn)程細(xì)節(jié)優(yōu)化策略

互聯(lián)網(wǎng)產(chǎn)品的應(yīng)用一般劃分為前端和后臺。我們可以理解成后臺是用來實(shí)現(xiàn)應(yīng)用程序的功能的。而前端是屬于功能的表現(xiàn)。除了后端需要在性能上做優(yōu)化外，前端也需要在性能優(yōu)化，才能給我們的用戶帶來更好的用戶體驗(yàn)。前后端優(yōu)化，不僅為產(chǎn)品節(jié)約成本，還能吸引用戶增強(qiáng)了用戶體驗(yàn)。下面從三個(gè)方面簡要說明前端優(yōu)化：在HTML優(yōu)化方面，從超文本、文件、用戶體驗(yàn)方面進(jìn)行減少嵌套層級關(guān)系、文件加載遵循W3c標(biāo)準(zhǔn)、訪問加載等進(jìn)行優(yōu)化，不僅提升速度而且可以快速解析便于引導(dǎo)。在CSS優(yōu)化方面，從渲染和動畫方面進(jìn)行精簡代碼模塊和動畫加載，既能提升渲染速度且對瀏覽器兼容更佳。在JS優(yōu)化方面，從JS文件、變量與函數(shù)、動效、緩存等進(jìn)行路徑位置、節(jié)流函數(shù)、減少動效、降低緩存來進(jìn)行優(yōu)化，既提升性能及效率又對用戶體驗(yàn)帶來更佳的體驗(yàn)效果。

結(jié)論

交互設(shè)計(jì)之美，助力打造完美的用戶體驗(yàn)之旅。本文通過對互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中用戶體驗(yàn)、色彩搭配、交互設(shè)計(jì)細(xì)節(jié)優(yōu)化的思考，從互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)現(xiàn)狀、用戶體驗(yàn)和交互設(shè)計(jì)、構(gòu)建與優(yōu)化策略進(jìn)行研究。通過反復(fù)調(diào)查分析，集思廣益尋求產(chǎn)品設(shè)計(jì)解決方案，再從互聯(lián)網(wǎng)產(chǎn)品的構(gòu)思、體驗(yàn)、視覺、色彩、交互、研發(fā)、測試等方面，闡明用戶體驗(yàn)與交互設(shè)計(jì)中的改進(jìn)優(yōu)化的關(guān)鍵點(diǎn)，尋求清晰思路，提升設(shè)計(jì)效率，有效設(shè)計(jì)優(yōu)化，打造出色的用戶體驗(yàn)設(shè)計(jì)?？傊?，設(shè)計(jì)優(yōu)化策略是用來解決用戶實(shí)際問題最直觀的結(jié)論，構(gòu)建有價(jià)值的功能體驗(yàn)，并遵循用戶的使用方式和思考。因此對用戶體驗(yàn)、色彩搭配、交互設(shè)計(jì)的細(xì)節(jié)作出優(yōu)化是十分有必要的。