基于用戶體驗(yàn)的微信小程序微交互設(shè)計(jì)分析

陳其嶙

摘 要：現(xiàn)階段，微信小程序應(yīng)用范圍極為廣泛，與一般App程序相比，微信小程序占用資源更少，使用更加便捷。因此，在設(shè)計(jì)微信小程序的過程中，要將用戶體驗(yàn)作為第一考慮要素，而在這其中，微交互則與用戶體驗(yàn)具有密切關(guān)聯(lián)?；诖?，文章以用戶體驗(yàn)為基礎(chǔ)，針對(duì)微信小程序微交互設(shè)計(jì)展開分析。

關(guān)鍵詞：用戶體驗(yàn);微信小程序;微交互

中圖分類號(hào)：TP317 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1674-1064（2021）12-0-03

DOI：10.12310/j.issn.1674-1064.2021.12.013

在移動(dòng)互聯(lián)網(wǎng)和新媒體技術(shù)不斷進(jìn)步的社會(huì)環(huán)境下，用戶對(duì)信息傳遞的需求趨于快速易懂，交互邏輯清晰，操作快捷方便。騰訊開發(fā)的微信小程序與手機(jī)端App相比具有諸多優(yōu)勢(shì)，是現(xiàn)階段“微網(wǎng)”核心理念的充分體現(xiàn)。在微信小程序中，微交互并不是一個(gè)應(yīng)該被低估的關(guān)鍵組成部分，一個(gè)好的微交互設(shè)計(jì)會(huì)讓用戶享受整個(gè)應(yīng)用過程。因此，小程序中的微交互設(shè)計(jì)方案應(yīng)從用戶體驗(yàn)的方向考慮，兼顧企業(yè)產(chǎn)品的易用性和用戶在應(yīng)用全過程的體驗(yàn)，推動(dòng)持續(xù)改進(jìn)和發(fā)展微信小程序。

1 無意識(shí)認(rèn)知與無意識(shí)設(shè)計(jì)

1.1 無意識(shí)認(rèn)知

無意識(shí)認(rèn)知是社會(huì)心理學(xué)的定義，當(dāng)代認(rèn)知社會(huì)心理學(xué)研究發(fā)現(xiàn)，人腦除了有意識(shí)的認(rèn)知系統(tǒng)外，還有無意識(shí)的認(rèn)知系統(tǒng)，相對(duì)于意識(shí)認(rèn)知系統(tǒng)的緩慢，串行通信不會(huì)受到情緒的影響，整個(gè)過程必須消耗大量的心智操控。無意識(shí)認(rèn)知系統(tǒng)快速且自動(dòng)，習(xí)慣性地而不受意識(shí)控制。

每個(gè)人的核心都可以看作三個(gè)大腦，即大腦、中腦、新腦。簡而言之，大腦控制身體的自動(dòng)調(diào)節(jié)作用，中腦調(diào)節(jié)情緒，新腦控制有意識(shí)的主體活動(dòng)。人的思維并不是完全客觀的、有意識(shí)的，大部分是無意識(shí)的。舊腦的反射比新腦好，在大腦皮層反射之前，人們都按照老中腦的指導(dǎo)行動(dòng)，無意識(shí)認(rèn)知可以快速解決信息工問題。

例如，當(dāng)看到紅燈時(shí)，人們會(huì)停車;當(dāng)看到一個(gè)燒紅的熨斗時(shí)，并不會(huì)觸摸。然而，人腦并不能無意識(shí)地認(rèn)知和解決所有信息，而是根據(jù)信息對(duì)認(rèn)知壓力施加多少信息作出決策。一般情況下，對(duì)于已經(jīng)掌握的經(jīng)驗(yàn)、已經(jīng)學(xué)會(huì)的操作、無需耗費(fèi)過多腦力的事物，大腦容易進(jìn)行無意識(shí)認(rèn)知。

1.2 無意識(shí)設(shè)計(jì)

無意識(shí)設(shè)計(jì)是基于對(duì)人們無意識(shí)的個(gè)人行為的深入分析，最大限度地利用用戶的判斷習(xí)慣來培養(yǎng)，根據(jù)設(shè)計(jì)，通過引入產(chǎn)品和環(huán)境，將用戶引入某種場(chǎng)景，將設(shè)備的物理特性轉(zhuǎn)化為喚起用戶“判斷力和個(gè)人行為”的媒體因素。在App設(shè)計(jì)中，優(yōu)秀的交互設(shè)計(jì)，讓用戶快速有效地實(shí)現(xiàn)應(yīng)用目標(biāo)，降低用戶的學(xué)習(xí)培訓(xùn)成本和認(rèn)知壓力，快速產(chǎn)生無意識(shí)的應(yīng)用。

用戶在使用App執(zhí)行日常任務(wù)時(shí)，無需考慮如何使用軟件，可以無視專用工具。當(dāng)然，用戶可以在不知不覺中高效地操作，個(gè)人行為無意識(shí)認(rèn)知的主要外在表現(xiàn)包括視覺效果、個(gè)人行為，個(gè)人行為的控制以及其他認(rèn)知和互動(dòng)的個(gè)人行為。很多個(gè)人行為都是無意識(shí)的結(jié)果，只是自身意識(shí)不到，App的交互設(shè)計(jì)是對(duì)用戶個(gè)人行為的設(shè)計(jì)。根據(jù)設(shè)計(jì)頁面的合理布局、結(jié)構(gòu)層次、操作方式等，定義用戶與App“溝通”的方式——用戶獲取操作命令，App即時(shí)響應(yīng)，獲取反饋關(guān)于用戶操作。無意識(shí)設(shè)計(jì)是通過有目的的認(rèn)知，讓用戶無需“生產(chǎn)和加工”信息內(nèi)容即可與App“交流”，引發(fā)無意識(shí)的個(gè)人行為。

2 用戶體驗(yàn)與微交互概念

2.1 用戶體驗(yàn)

用戶體驗(yàn)的定義首先由唐納德·諾曼（Jeffrey Norman）提出，成功的用戶體驗(yàn)必須保證首先滿足消費(fèi)者的要求，不打擾用戶，不讓用戶厭煩。其次，贈(zèng)送的產(chǎn)品要簡潔大方，讓消費(fèi)者用得開心?，F(xiàn)階段，關(guān)于用戶體驗(yàn)基礎(chǔ)理論的文獻(xiàn)研究較多，很多專家學(xué)者都提出了相關(guān)的基礎(chǔ)理論，例如從用戶的產(chǎn)品需求、情感體驗(yàn)等角度構(gòu)建用戶體驗(yàn)評(píng)價(jià)指標(biāo)體系?；?dòng)產(chǎn)品感受的構(gòu)成概括為三個(gè)層次：享受（Wow）、通用性和易用性（Flow）、榮譽(yù)感（Show）。有人認(rèn)為用戶體驗(yàn)包括易用性、情感和用戶價(jià)值，其中用戶使用價(jià)值的關(guān)鍵包括自我滿足、愉悅、人性化要求、社會(huì)發(fā)展表現(xiàn)和附加的現(xiàn)實(shí)意義[1]。

2.2 微交互

英國著名交互設(shè)計(jì)師丹薩弗提出，“微”是指關(guān)鍵點(diǎn)，微交互設(shè)計(jì)方案是指交互中的小細(xì)節(jié)設(shè)計(jì)方案，微交互致力于在環(huán)境中以多功能性為關(guān)鍵特征進(jìn)行交互，追求完美和個(gè)性化的用戶體驗(yàn)。

微交互由觸發(fā)原理、標(biāo)準(zhǔn)、意見反饋、循環(huán)系統(tǒng)和方法四部分組成。觸發(fā)原理運(yùn)行微交互，標(biāo)準(zhǔn)要求微交互的全過程，反饋向用戶表明標(biāo)準(zhǔn)，循環(huán)系統(tǒng)和方法構(gòu)成了微交互規(guī)則，四個(gè)部分相互配合，產(chǎn)生微交互的重復(fù)和循環(huán)時(shí)間，從而產(chǎn)生更好的用戶體驗(yàn)，制定微交互標(biāo)準(zhǔn)，觸發(fā)原理是微交互結(jié)構(gòu)的基礎(chǔ)，是指?jìng)€(gè)體行為的逐步交互，直接影響用戶的感受。標(biāo)準(zhǔn)是微交互的主體部分，決定用戶在微交互的整個(gè)過程中可以做什么、如何響應(yīng)觸發(fā)原理的興奮等。反饋方式多樣，還可以幫助用戶掌握設(shè)備的標(biāo)準(zhǔn)。在循環(huán)系統(tǒng)和方法設(shè)計(jì)方案中，主體部分是循環(huán)的主體部分參數(shù)設(shè)計(jì)方案，同時(shí)要盡量避免用戶的應(yīng)用疑惑[2]。

3 微信小程序設(shè)計(jì)

3.1 進(jìn)入小程序

從目前的使用情況來看，可以通過以下兩種方式進(jìn)入小程序。一個(gè)是在微信首頁，根據(jù)下拉指示，彈出下拉提示框，在HTML頁面“我的小程序”中找到添加的微信小程序，點(diǎn)擊相應(yīng)標(biāo)志進(jìn)入，點(diǎn)擊右上角關(guān)閉按鈕或返回按鈕退出，進(jìn)入手機(jī)主界面手機(jī)微信。另一個(gè)是點(diǎn)擊微信首頁底部菜單欄的發(fā)現(xiàn)按鈕，彈出一個(gè)文本框，輸入想要找到的小程序名稱，點(diǎn)擊轉(zhuǎn)換后的微信小程序的標(biāo)志，進(jìn)入微信小程序。

3.2 添加微信小程序

在微信中打開小程序管理網(wǎng)頁，會(huì)顯示各種微信小程序文件目錄。將微信小程序從右向左翻轉(zhuǎn)，右側(cè)出現(xiàn)“添加”和“刪除”兩個(gè)選擇。點(diǎn)擊“添加”按鈕，匹配的小程序右側(cè)經(jīng)常出現(xiàn)一個(gè)明亮的星形圖標(biāo)。點(diǎn)擊“刪除”按鈕，從列表中刪除微信小程序。這兩種是非常常見的小程序微交互技術(shù)。

4 微信小程序微交互設(shè)計(jì)的特征

設(shè)計(jì)微信小程序的過程中，諸多方面皆能體現(xiàn)交互特點(diǎn)，這一特性在實(shí)際操作方式中得以顯現(xiàn)。站在產(chǎn)品角度，需加大對(duì)用戶體驗(yàn)感關(guān)注力度，而在微交互設(shè)計(jì)方案中，則要對(duì)產(chǎn)品功能進(jìn)行滲透，促使二者存有緊密關(guān)聯(lián)。站在小程序發(fā)展角度，微交互設(shè)計(jì)特點(diǎn)在功能、操作性、感官情感、使用價(jià)值等綜合體驗(yàn)感上得以顯現(xiàn)[3]。

微信小程序微交互用戶體驗(yàn)分析如圖1所示。

4.1 功能與操作性

微交互對(duì)于微信小程序操作與應(yīng)用而言有著諸多裨益，當(dāng)用戶自界面進(jìn)入小程序時(shí)，縮短等待時(shí)間，提高可實(shí)現(xiàn)性與便利性，而在經(jīng)過多次升級(jí)更新后，微信現(xiàn)能夠兼容其他電子產(chǎn)品端，其功能也在不斷優(yōu)化。

在目前小程序中已經(jīng)新增掃碼功能，用戶可通過掃碼進(jìn)入小程序，隨后關(guān)注相關(guān)公眾號(hào)，令操作更加便捷，有助于提升用戶的體驗(yàn)感。同時(shí)，為更好地處理外圍小程序，目前增加了分層導(dǎo)航、網(wǎng)頁信息顯示優(yōu)化、搜索對(duì)話框重新規(guī)劃等諸多功能，這一方式能夠提升網(wǎng)頁規(guī)劃合理性與科學(xué)性，促使用戶快速識(shí)別小程序，提升用戶體驗(yàn)。

4.2 感官與情感體驗(yàn)

從現(xiàn)在很多微信小程序的設(shè)計(jì)方案的有效性看，很多小程序的整體布局和配色都比較傳統(tǒng)，無法展現(xiàn)小程序本身的特點(diǎn)。因此，有必要完成小程序頁面圖形和顏色使用的改進(jìn)，例如將常用按鈕設(shè)置為醒目的圖形，以便用戶快速識(shí)別。此外，顏色的選擇也是非常關(guān)鍵的一個(gè)環(huán)節(jié)，例如麥當(dāng)勞、拼多多平臺(tái)等常用小程序，界面設(shè)計(jì)的顏色選擇主要以鮮紅色為主，增強(qiáng)了產(chǎn)品的辨識(shí)度和人性化[4]。

從用戶的觸覺設(shè)計(jì)方案看，如果用戶想要打開微信小程序，只需在微信主界面向下滾動(dòng)即可。在微信小程序的人性化設(shè)計(jì)過程中，借助各種微交互設(shè)計(jì)方案，可以有效提升小程序的交互性。

從用戶聽覺系統(tǒng)的設(shè)計(jì)角度看，也加入了很多微交互設(shè)計(jì)方案。

4.3 價(jià)值體驗(yàn)

用戶首次進(jìn)入小程序時(shí)通常具有強(qiáng)烈的新鮮感，希望能夠在小程序中發(fā)現(xiàn)令其驚喜的內(nèi)容，為保障用戶在使用小程序后不產(chǎn)生較大的心理落差，需在設(shè)計(jì)過程中始終保持個(gè)性化與神秘感。

在設(shè)計(jì)過程中要對(duì)用戶滿意度加大關(guān)注力度，切實(shí)促進(jìn)用戶心理幸福感。站在現(xiàn)階段微信小程序開發(fā)現(xiàn)狀發(fā)角度上，娛樂性小程序能夠?yàn)橛脩魩砀鼜?qiáng)的體驗(yàn)感，而其他類型小程序次之。為改善這一問題，要提升小程序社交屬性，令用戶感受到體驗(yàn)價(jià)值，以微交互為基礎(chǔ)，促進(jìn)社交性，使用戶的社交需求得到充分滿足。

4.4 動(dòng)態(tài)變化引起無意識(shí)摘報(bào)

運(yùn)動(dòng)的對(duì)象，即使是非常輕微的運(yùn)動(dòng)，一般也很容易被人眼注意到，這是古代傳說中的狩獵階段，人類祖先避免了掠食者進(jìn)化出的人眼特征，以便更好地發(fā)現(xiàn)成分。在人機(jī)交互中，頁面上動(dòng)態(tài)變化的圖形對(duì)人眼非常有吸引力，如果用戶對(duì)變化的信息感興趣，很容易被人眼下意識(shí)地捕捉到。稍后會(huì)有一個(gè)有目的的查詢。因此，在頁面中有效應(yīng)用動(dòng)態(tài)變化，可以合理提高養(yǎng)牛的實(shí)際效果?，F(xiàn)在的智能手機(jī)顯示屏都比較大，在用戶單手模式下，顯示屏的頂部區(qū)域是不會(huì)被手指觸摸到的。在一般的手機(jī)軟件的頂部區(qū)域放置太多功能并不容易。靜態(tài)數(shù)據(jù)文本放置在手機(jī)微信頂部區(qū)域的中間，顯示聊天對(duì)象的名稱。

一般情況下，用戶比較關(guān)注應(yīng)用中的聊天內(nèi)容，并不特別關(guān)心熱門信息。頂部的昵稱信息會(huì)幫助用戶下意識(shí)地確定八卦目標(biāo)。對(duì)方打字時(shí)，最上面的文字由原來的通信對(duì)象名稱變?yōu)椤皩?duì)方正在輸入”的文字提示。由于人眼跟蹤動(dòng)態(tài)變化的特性，即使是小的動(dòng)態(tài)變化也很容易引起用戶的關(guān)注。同時(shí)，小的文字變化也不容易分散已經(jīng)在聊天的用戶的注意力，從而在實(shí)際效果和交互體驗(yàn)上得到了提升。因?yàn)閯?dòng)態(tài)效果，每個(gè)人的眼睛都忍不住跟蹤。這時(shí)候，如果這類圖形提供的信息不是用戶關(guān)心的或不需要的，就會(huì)導(dǎo)致用戶關(guān)閉頁面甚至不合理地退出應(yīng)用程序。所以App頁面一定要合理使用動(dòng)態(tài)變化，不要給用戶造成太大的干擾。

例如，在微信聊天頁面的動(dòng)態(tài)表情列表中，每個(gè)表情并沒有直接播放動(dòng)態(tài)效果。相反，您可以通過長按來瀏覽表情的動(dòng)態(tài)效果。想象一下，如果表情列表中的幾個(gè)表情符號(hào)同時(shí)播放視頻動(dòng)態(tài)效果，用戶就會(huì)被壓垮，眼睛無法集中在一個(gè)地方，很容易放棄應(yīng)用。所以，設(shè)計(jì)方案動(dòng)態(tài)變化時(shí)，一定要有效應(yīng)用，掌握好分寸，這樣動(dòng)態(tài)變化才能有很好的實(shí)際效果，過多的應(yīng)用會(huì)適得其反。

在App人機(jī)交互中，由于人眼是針對(duì)動(dòng)態(tài)圖形的潛意識(shí)捕捉，所以要有效應(yīng)用動(dòng)態(tài)變化，在需要或關(guān)鍵的地方提醒，可以考慮應(yīng)用某些動(dòng)態(tài)變化提高實(shí)際效果，但不需要應(yīng)用太多，避免用戶的視覺疲勞和認(rèn)知壓力。

5 實(shí)際案例

測(cè)試對(duì)象必須首先盯著眼動(dòng)儀屏幕。設(shè)備識(shí)別出測(cè)試對(duì)象的視線數(shù)據(jù)信號(hào)并在屏幕上投射出雙目圖案設(shè)計(jì)后，測(cè)試對(duì)象需要盯著屏幕上出現(xiàn)在不同部位的“+”字符點(diǎn)。此時(shí)，測(cè)試對(duì)象必須移動(dòng)視線跟隨“+”字符點(diǎn)，以提示儀器捕獲視線數(shù)據(jù)信號(hào)并進(jìn)行儀器校準(zhǔn)過程。這一過程有利于測(cè)試對(duì)象盡快進(jìn)入測(cè)試狀態(tài)。整個(gè)校正過程大約需要30秒。

開始測(cè)試，給測(cè)試對(duì)象兩張圖片，分別是原生態(tài)App手機(jī)客戶端和小程序的實(shí)際操作主界面。觀察記錄表，測(cè)試對(duì)象在5秒內(nèi)了解兩個(gè)不同頁面，視線運(yùn)動(dòng)軌跡、動(dòng)作點(diǎn)停留位置和停留時(shí)間的變化，主體必須在兩個(gè)不同頁面上“快速選擇”操作流程，并記錄每個(gè)頁面的時(shí)間段數(shù)據(jù)信息。

通過檢測(cè)視線移動(dòng)軌跡得到的統(tǒng)計(jì)數(shù)據(jù)可以看出，原生App操作面板更加細(xì)致，應(yīng)用功能比較完善。應(yīng)用操作面板時(shí)，測(cè)試對(duì)象的視線移動(dòng)軌跡總數(shù)為10條，視線重點(diǎn)停留在角色選擇項(xiàng)目區(qū)、地形圖指示區(qū)和選擇區(qū)。其中，視線長時(shí)間停留在功能選項(xiàng)區(qū)，專用于區(qū)分App給出的各種功能選項(xiàng)。獲取合理信息的速度更快，功能識(shí)別率和應(yīng)用效果更高。小程序操作面板比較簡單，只保留一鍵“快速選擇”功能。測(cè)試對(duì)象在使用操作面板時(shí)注視軌跡總數(shù)為14條，注視鍵停留在正確的引導(dǎo)語言區(qū)、確認(rèn)選項(xiàng)區(qū)和在線客服設(shè)置區(qū)、地形圖顯示選項(xiàng)隱藏在位置確定選項(xiàng)下。正確的導(dǎo)游語言區(qū)和在線客服設(shè)置區(qū)對(duì)獲取合理信息有輕微影響，底部的視線是空白的，功能識(shí)別率和使用率比較高。

6 微信小程序微交互設(shè)計(jì)的優(yōu)化

首先，融合功能促進(jìn)了高應(yīng)用效率。注重觸發(fā)原理的設(shè)計(jì)方案，獨(dú)特易用;改進(jìn)標(biāo)準(zhǔn)設(shè)計(jì)方案，使標(biāo)準(zhǔn)更符合邏輯，更方便用戶使用。

其次，提高感官和情感體驗(yàn)的分辨率。引入設(shè)計(jì)心理、可靠性設(shè)計(jì)的要點(diǎn)，將感官交互和反饋緊密結(jié)合，使反饋更具吸引力。例如，用戶在進(jìn)行實(shí)際的觸感操作后，會(huì)提示頁面的顏色變化和聲音效果。這樣的反饋在情感上給用戶帶來放松的感覺，防止用戶產(chǎn)生焦慮心理。

7 結(jié)語

小程序是微信非常關(guān)鍵的功能，隨著微信不斷創(chuàng)新和提升，小程序的作用和實(shí)際操作也在逐步提升，微交互設(shè)計(jì)也在趨于完善，通過與現(xiàn)階段先進(jìn)技術(shù)相結(jié)合，促使微交互設(shè)計(jì)滿足不同人群需求。通過微交互設(shè)計(jì)，能夠促使微信小程序更加人性化，大幅提高產(chǎn)品在市場(chǎng)中的知名度。

參考文獻(xiàn)

[1] 李炳琰.基于用戶體驗(yàn)的微信界面交互設(shè)計(jì)分析[J].銅陵學(xué)院學(xué)報(bào)，2020，19（1）：85-98.

[2] 高群霞，胡鏡鴻.基于微信小程序的“睡眠助手”設(shè)計(jì)與實(shí)現(xiàn)[J].科技創(chuàng)新與應(yīng)用，2020（34）：31-32.

[3] 袁浩，王靜.閑置物品交易微信小程序的可用性研究[J].設(shè)計(jì)，2020，33（9）：140-142.

[4] 周璨.基于用戶體驗(yàn)的移動(dòng)端UI交互設(shè)計(jì)探究[J].信息與電腦，2020，32（4）：185-187.