張超 譚楓 康藝方

摘要 ：隨著出行環(huán)境日益復(fù)雜化，移動端導(dǎo)航也呈現(xiàn)出迅猛發(fā)展的趨勢。本文通過文獻(xiàn)研究法及案例對比分析法對移動端導(dǎo)航中的微交互特點(diǎn)及設(shè)計(jì)方法進(jìn)行了系統(tǒng)研究。首先，歸納了移動端導(dǎo)航微交互的主要類型及特點(diǎn) ;其次，結(jié)合用戶體驗(yàn)的原理對移動端導(dǎo)航中的微交互設(shè)計(jì)功能與特征進(jìn)行了分析 ;最后，在前期研究基礎(chǔ)上提出了移動端導(dǎo)航中的微交互設(shè)計(jì)策略。通過本文的研究，以期為移動端導(dǎo)航中的微交互設(shè)計(jì)提供有利的理論指導(dǎo)。

關(guān)鍵詞 ：移動端 ;導(dǎo)航 ;微交互 ;設(shè)計(jì) ;策略

中圖分類號 ：TB37文獻(xiàn)標(biāo)識碼 ：A

文章編碼 ：1672-7053（2021）07-0114-02

Abstract ：With the increasingly complex travel environment， mobile navigation is also showing a trend of rapid development. This paper systematically studies the characteristics and design methods of micro-interactions in mobile navigation through the literature research method and case comparative analysis method. First， summarize the main types and characteristics of mobile navigation microinteractions; secondly， combine the principles of user experience to analyze the functions and characteristics of micro-interaction design in mobile navigation. Finally， based on the previous research， the mobile navigation is proposed. A strategic approach to micro-interaction design. Through the research of this article， we hope to provide favorable theoretical guidance for the micro-interaction design in mobile navigation.

Key Words ：Mobile Terminal; Navigation; The Micro Interaction; Design; Strategy

微交互設(shè)計(jì)是由人機(jī)專家 Dan · Saffer 最早提出，之后逐漸被學(xué)界及業(yè)界重視。微交互圍繞用戶使用場景對細(xì)節(jié)視覺與操作體驗(yàn)進(jìn)行優(yōu)化，在微交互設(shè)計(jì)過程中通過深層次的解構(gòu)、簡化、重組設(shè)計(jì)細(xì)節(jié)，使交互設(shè)計(jì)變得更加簡約、優(yōu)雅、人性化 [1]。它通常以更“人性化”的方式，可以使人們?nèi)硇牡赝度氲揭苿釉O(shè)備中，以此增加用戶使用時(shí)的參與感，更好地吸引用戶的注意力，使用戶在對移動設(shè)備進(jìn)行操作時(shí)可以忽視周圍的場景，有更好的體驗(yàn)。移動端導(dǎo)航是集地圖、定位、導(dǎo)航及位置信息等服務(wù)為一體的數(shù)字化產(chǎn)品。本文從微交互設(shè)計(jì)理論出發(fā)，結(jié)合產(chǎn)品的可用性以及用戶的使用體驗(yàn)，系統(tǒng)地對移動端導(dǎo)航中的微交互設(shè)計(jì)進(jìn)行了研究。

1 移動端導(dǎo)航中的微交互分類

在與移動端導(dǎo)航的交互過程中，微交互行為往往分散在不同模塊功能的實(shí)現(xiàn)過程中，雖然移動端導(dǎo)航設(shè)備的種類多樣，但滿足用戶的移動行為需求的目的統(tǒng)一，用戶的尋路行為具有統(tǒng)一的行為模式，因此不同移動端導(dǎo)航產(chǎn)品在功能模塊設(shè)置上具有一定的相似性。在眾多移動端導(dǎo)航設(shè)備中，手機(jī)端導(dǎo)航產(chǎn)品的功能較為全面，是用戶使用較為頻繁的一種導(dǎo)航設(shè)備，為了更系統(tǒng)地研究移動端導(dǎo)航中的微交互，本文選取了手機(jī)端導(dǎo)航的高德地圖及谷歌地圖兩個(gè)品牌進(jìn)行了產(chǎn)品案例的對比分析。對比分析的內(nèi)容主要基于用戶導(dǎo)航的使用流程，從用戶行為導(dǎo)向的原則出發(fā)，將移動端導(dǎo)航中的微交互劃分為 ：查詢微交互、路線規(guī)劃微交互、導(dǎo)航過程微交互、地理信息服務(wù)微交互，并逐類進(jìn)行了歸納與分析。

1） 查詢微交互 ：用戶在進(jìn)入到移動端導(dǎo)航首頁時(shí)，通常觸發(fā)到的第一個(gè)微交互就是查詢微交互，其微交互的設(shè)計(jì)圍繞查詢行為，主要依托于查詢控件及相關(guān)位置信息顯示。反饋多以圖標(biāo)與文字結(jié)合的形式顯示于界面中或簡單的語音播報(bào)。視覺形式多牽扯到目的地的地圖視圖轉(zhuǎn)化和目的地信息標(biāo)簽頁的展示。

2） 路線規(guī)劃微交互 ：在路線規(guī)劃中，微交互主要集中在地圖的界面操作中，顯示關(guān)于路線的一些動態(tài)信息，如當(dāng)前方向、行進(jìn)方向動畫、預(yù)計(jì)到達(dá)時(shí)間、路況信息等。路線規(guī)劃中的微交互主要輔助用戶選路，一些信息同時(shí)兼具操控功能，例如路況信息會顯示擁堵原因，點(diǎn)擊可以顯示路況當(dāng)前狀態(tài)等。控件圖標(biāo)的動態(tài)化微交互設(shè)計(jì)能在復(fù)雜的地圖界面中吸引用戶的注意力，有效提高用戶感知信息的效率和愉悅感。

3） 導(dǎo)航過程微交互 ：導(dǎo)航服務(wù)以定位服務(wù)和路線規(guī)劃服務(wù)為基礎(chǔ)，它是移動端導(dǎo)航服務(wù)的核心功能 [2]。根據(jù)用戶所輸入的目的地位置，通過視覺、語音結(jié)合等方式提示方向信息，實(shí)行準(zhǔn)確的導(dǎo)航 [3]。

移動端導(dǎo)航過程中的微交互較為豐富，例如，動效的出現(xiàn)，使時(shí)間維度信息引入到交互界面，讓用戶能直觀地感受到其并不處于靜止?fàn)顟B(tài)。如果系統(tǒng)沒有及時(shí)進(jìn)行微交互的動效反饋，會造成用戶的認(rèn)知感知延遲。除了位置反饋，微交互也服務(wù)于導(dǎo)航過程中的界面轉(zhuǎn)換，如關(guān)鍵復(fù)雜路況的窗口放大和方向指引等。在進(jìn)入路線導(dǎo)航時(shí)，微交互不僅有視覺上的交互，語音微交互也是其重要的形式，對導(dǎo)航過程起著重要的作用，語音微交互的反饋設(shè)計(jì)中多采用語音、文字提示相結(jié)合的形式，例如，當(dāng)系統(tǒng)通過語音提示用戶轉(zhuǎn)彎時(shí)，在進(jìn)行左轉(zhuǎn)或者右轉(zhuǎn)的同時(shí)系統(tǒng)界面在視覺上也會出現(xiàn)相同方向的提示，從生理學(xué)來看，人腦的一部分知識是存在自然世界中的，所以導(dǎo)航系統(tǒng)界面的微交互設(shè)計(jì)的時(shí)間和節(jié)奏也需要同現(xiàn)實(shí)一樣，遵循現(xiàn)實(shí)的物理規(guī)律和節(jié)奏，使得行為與事情之間存在著空間同向、時(shí)間同時(shí)、運(yùn)動同步，保證移動界面元素運(yùn)動的物理感 [4]。

4） 地理信息服務(wù)微交互 ：地理信息服務(wù)主要是包括了用戶查詢位置點(diǎn)的概況介紹、周邊服務(wù)設(shè)施信息及餐飲、娛樂的整合。以高德地圖為例，用戶通過點(diǎn)亮星星的方式在用餐后對店鋪進(jìn)行評分。每點(diǎn)亮一顆其顏色會被填充，且其上端會出現(xiàn)分?jǐn)?shù)評價(jià)的變化，界面的動態(tài)走向更符合手指的動效 [5]。

2 移動端導(dǎo)航中的微交互設(shè)計(jì)功能與特征

2.1 移動端導(dǎo)航中的微交互設(shè)計(jì)功能

1） 增加移動端導(dǎo)航交互行為的有用性。導(dǎo)航微交互可以幫助用戶更好地注意和識別信息，提高操作效率。例如，在路線規(guī)劃完成顯示路線概況時(shí)，動畫是自出發(fā)點(diǎn)到終點(diǎn)的動態(tài)顏色顯示，既吸引了用戶注意，又可以使用戶識別起點(diǎn)與終點(diǎn)的區(qū)別，清楚識別將要行進(jìn)的路線方向。在移動端導(dǎo)航界面中，召喚控件位于導(dǎo)航界面頂部，通過長按等可以動態(tài)顯示出二級控件，使得移動端導(dǎo)航操作更加簡潔、高效。

2） 增強(qiáng)移動端導(dǎo)航交互行為的愉悅性。通過細(xì)小的動畫可以使移動端導(dǎo)航的界面視覺形式感增強(qiáng)，界面和交互層次更加細(xì)致。例如，導(dǎo)航界面會利用顏色顯示交通狀況，適當(dāng)?shù)膭有гO(shè)計(jì)會使微交互高效傳達(dá)信息，增添產(chǎn)品的趣味性。聲音的設(shè)計(jì)也可以利用音律的編排達(dá)到刺激用戶情感體驗(yàn)的目的。

2.2 移動端導(dǎo)航中的微交互設(shè)計(jì)特征

1） 微交互過程的多情境化。移動端導(dǎo)航的使用過程具有復(fù)雜性的特點(diǎn)，首先表現(xiàn)在設(shè)備終端的多樣性上，如手機(jī)、車載設(shè)備、智能眼鏡及智能手表等都是目前較為普遍的設(shè)備 ;其次，移動端導(dǎo)航的使用發(fā)生在移動過程中，交互環(huán)境具有變化性，如較為嘈雜的聲音環(huán)境等 ;最后，用戶意圖、移動方式及個(gè)性化因素等也是影響移動端導(dǎo)航微交互的重要因素?？傮w看，終端、環(huán)境及用戶行為的復(fù)雜性導(dǎo)致移動端導(dǎo)航產(chǎn)品微交互過程具有多情境化特征。

2） 微交互形式的多態(tài)性。由于移動端導(dǎo)航使用的多情境化特點(diǎn)，移動端導(dǎo)航微交互的形態(tài)也具有多樣性特征。從用戶感知和操作行為來看，移動端導(dǎo)航的微交互主要包含有聽覺微交互、觸覺微交互、視覺微交互、體感微交互等多種形態(tài)。面向聽覺的語音交互是移動端導(dǎo)航的重要交互形式，語音微交互主要完成語言和聲音的操作與信息交流，如在汽車導(dǎo)航的過程中，當(dāng)臨近路口轉(zhuǎn)彎等重要路段時(shí)，系統(tǒng)會發(fā)出“叮”一聲的提示音，通過聲音提示用戶注意關(guān)鍵行進(jìn)指示 ;面向觸覺的微交互除了觸屏之外，還包括震動反饋等，如在手機(jī)端步行導(dǎo)航過程中，除了語音提示外，關(guān)鍵路口有手機(jī)會有震動提醒 ;視覺交互部分，用戶可以依托終端視覺界面進(jìn)行微交互，如關(guān)鍵路口的界面切換及路線指引動畫顯示等。而在如谷歌一類的穿戴設(shè)備中則提供了基于增強(qiáng)現(xiàn)實(shí)的各種微交互。體感交互也是未來移動端導(dǎo)航發(fā)展的重要趨勢，在汽車駕駛及穿戴設(shè)備導(dǎo)航過程中，通過手勢操作等結(jié)合其它形態(tài)的微交互會使得微交互的反饋更加自然，且反饋更加細(xì)致化。

3 移動端導(dǎo)航中的微交互設(shè)計(jì)策略

3.1 交互易用性為中心

移動端導(dǎo)航多樣的使用情境造成了導(dǎo)航使用交互的復(fù)雜性，多數(shù)導(dǎo)航的使用情境都是多任務(wù)性的，如駕車過程中，用戶使用導(dǎo)航的同時(shí)要進(jìn)行駕駛和觀察路況，自行車用戶需要控制自行車等，因此可用性和易用性應(yīng)是移動端導(dǎo)航中微交互設(shè)計(jì)的核心，在保證可用性和易用性的基礎(chǔ)上才能進(jìn)行審美體驗(yàn)設(shè)計(jì)。從而，可以避免不重要信息的過度動態(tài)化設(shè)計(jì)影響用戶對有用信息的認(rèn)知 [6]。

3.2 增強(qiáng)細(xì)節(jié)審美愉悅體驗(yàn)

審美愉悅體驗(yàn)可以從兩方面進(jìn)行設(shè)計(jì)，一是通過顏色、動態(tài)、聲音的形式化設(shè)計(jì)增加界面的美感，塑造多感官的交互體驗(yàn)細(xì)節(jié)。二是增強(qiáng)導(dǎo)航界面中定制化設(shè)計(jì)，為用戶提供個(gè)性化服務(wù)，用戶可以根據(jù)自己的偏好來自行選擇導(dǎo)航頁面各功能控件的表現(xiàn)形式。例如，在高德導(dǎo)航的自定義導(dǎo)航中可以切換成簡潔卡片的模式，簡潔模式的導(dǎo)航卡片在導(dǎo)航地圖中可以顯示出更多的路線信息。三是加入更多文化元素，通過符號象征性等特點(diǎn)增強(qiáng)微交互在形式上的審美愉悅性。

3.3 積極的動態(tài)交互反饋

導(dǎo)航設(shè)備中動態(tài)反饋是微交互使用較多的部分，是保證導(dǎo)航設(shè)備與用戶進(jìn)行溝通的重要交流方式，動態(tài)反饋的參與可以吸引用戶的視線，起到提醒、引導(dǎo)的作用，同時(shí)也豐富了界面的視覺效果。設(shè)計(jì)師應(yīng)對動態(tài)微交互單元進(jìn)行分類化且細(xì)致化設(shè)計(jì)，在導(dǎo)航設(shè)備的使用過程中向用戶提供系統(tǒng)運(yùn)行的狀態(tài)與結(jié)果，積極的動態(tài)反饋為用戶交互行為和移動行為提供依據(jù)，如利用轉(zhuǎn)場動效可消除用戶因界面層級轉(zhuǎn)換而帶來的不適感，制造視覺上界面與真實(shí)物理世界的協(xié)調(diào)統(tǒng)一感，減少用戶在使用導(dǎo)航設(shè)備時(shí)與真實(shí)物理環(huán)境轉(zhuǎn)換所產(chǎn)生的摩擦 [7]。例如，在高德地圖中進(jìn)行語音輸入時(shí)，會有語音操作狀態(tài)反饋顯示，聲音輸入時(shí)用戶可以通過動畫清楚自己是否成功輸入聲音。

3.4 自然化交互設(shè)計(jì)

一是增加導(dǎo)航過程中的自主化的觸發(fā)設(shè)計(jì)，主動識別用戶行為和情境，增強(qiáng)微交互的環(huán)境和行為適應(yīng)性 ;二是可以模擬物理化的動態(tài)視覺，增強(qiáng)用戶對界面層級及控件屬性的感知與識別 ;三是綜合感知多通道，靈活匹配微交互的交互形態(tài)，如語音 + 體感 + 視覺在導(dǎo)航微交互中的綜合運(yùn)用。

4 結(jié)語

出行環(huán)境的復(fù)雜化導(dǎo)致用戶對移動端導(dǎo)航提出了更高的要求，微交互可以在動效、功能上引導(dǎo)用戶，優(yōu)化產(chǎn)品的使用感。未來隨著移動端導(dǎo)航設(shè)備的更新變革，面向多樣化設(shè)備的微交互細(xì)致化分析將會是未來研究的重要方向。

本文系湖南省哲學(xué)社會科學(xué)基金項(xiàng)目（項(xiàng)目編號 ：18YBQ004）;湖南省教育廳科學(xué)研究項(xiàng)目（項(xiàng)目編號 ：18B154）;湖南省藝術(shù)文化科普宣傳基地基金項(xiàng)目（項(xiàng)目編號 ：2018YSJDA02）。

參考文獻(xiàn)

[1] 錢程.微交互在 B2C 網(wǎng)站界面設(shè)計(jì)中的應(yīng)用與研究 [D].湖北工業(yè)大學(xué) ，2016.

[2] 鄧力源.可供性視域下地圖服務(wù)類應(yīng)用的交互設(shè)計(jì)研究 [D].江南大學(xué)，2020.

[3] 金宇陽.基于可用性理論的大屏車載信息系統(tǒng)微交互設(shè)計(jì)研究 [D].華東理工大學(xué)，2015.

[4] 吳儉濤，李蒙曉，王之苑.移動應(yīng)用界面中動效設(shè)計(jì)的運(yùn)用與探究 [J].藝術(shù)與設(shè)計(jì)（理論），2015（09）：42-44.

[5] 徐千堯，徐迎慶.智能手機(jī)動效設(shè)計(jì)研究 [J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2020（07）：82-87.

[6] 栗娜.基于用戶體驗(yàn)的電子商務(wù)網(wǎng)站微交互研究 [D].四川美術(shù)學(xué)院，2017.

[7] 李嬌.移動界面微交互的視覺動效“三融合”設(shè)計(jì)研究 [D].西南交通大學(xué)，2018.