基于移動UI界面的交互式設計

葉聰

（蘇州信息職業技術學院 江蘇省蘇州市 215200）

移動UI 界面已成為人們與移動電子設備互相聯系的重要技術媒介，目前，該設計技術正廣泛應用于移動電子設備后臺與前臺信息傳達交互模塊，進而給人們帶來良好的使用體驗。因此，應對以移動UI 界面為基礎的交互式設計進行探究，從而更好滿足用戶使用需求。

1 分析移動UI界面相關概述

所謂UI，主要是指用戶界面，移動UI 界面指的是移動電子設備用戶的操作界面。在UI 設計出現之初，其主要代表著界面樣式和外觀，但在科學技術水平不斷提高、人們對界面需求逐漸上升的背景下，UI 設計逐漸變為人機交互的操作邏輯與界面美觀性的有機整合，良好的移動UI 界面不僅能夠滿足用戶對頁面操作的需求，還需要為用戶提供愉快的操作體驗和視覺體驗，并從界面上獲得更多有用信息。從目前移動UI 界面發展現狀來看，移動UI 設計的特點主要有兩方面，分別是簡約性和導向性。

具體而言，對于移動UI 界面設計的簡約性而言，主要是因為移動電子設備的體積較小，影響界面體驗的要素主要是移動電子設備屏幕的分辨率和整體尺寸大小。目前，大部分移動電子設備大小均在五寸到十二寸之間，分辨率基本為2160*1080，雖然移動電子設備具有極強的便攜性，但也限制了移動UI 界面設計空間，無法對其設計復雜的交互操作。在人們對移動電子設備要求逐漸增多的當下，大部分用戶不會選擇需要兩只手進行操作的系統和軟件，為此，一般情況下，移動APP 的觸點在兩個及兩個以下。那么當對移動UI 界面進行設計時，需要對交互結構進行科學規劃，以盡量簡約的操作和界面給用戶便捷的使用體驗，例如，左右邊欄的設計或是上下菜單的設計就實現了功能按鍵的隱藏，進而為用戶提供更加流暢的操作體驗。對于導向性而言，傳統圖形用戶界面使用的是WIMPS 威普斯界面，但該界面對鍵盤鼠標的依賴性極強，例如Windows 系統等，但對于移動UI 界面而言，操作和輸入方式不再局限于鼠標，而是依靠體感和觸屏。因此，移動UI 界面的設計需要考慮到用戶使用習慣和思維模式，這導致移動UI 界面具有極強的導向性，通過設備界面引導用戶操作，體驗更加便捷和簡潔的用戶界面和操作[1]。

2 探討以移動UI界面為基礎交互式設計視覺元素及原則

2.1 以移動UI界面為基礎交互式設計視覺元素

對于移動UI 界面而言，作為關鍵的是界面向用戶傳達的視覺元素，為此，大部分設計師在以移動UI 界面為基礎進行交互式設計過程中，往往會使用RGB 模型，并使用六位十六進制數對色彩進行表示、搭配和設計，從而給用戶帶來直接心理效應。具體而言，其視覺元素有：

（1）文字視覺元素。對于移動UI 界面而言，文字是重要的基礎組成，也是最為常見的視覺原色，一般情況下，文字多被選擇為默認字體，這是因為文字元素是用戶與移動電子設備進行信息交互的主要方式，在對其進行設計時，主要是使用無裝飾文字符號對用戶進行引導。同時，簡潔的字體能夠更快加載CSS 代碼，從而提高軟件交互體驗。

（2）圖標視覺元素。在移動UI 界面中，存在多個功能軟件，在對軟件圖標進行設計時，主要以點、線、面視覺符號為主，并將軟件名稱直觀呈現給用戶，符合用于使用習慣，滿足用戶點擊、觸摸等交互操作需求。

（3）靜態圖像視覺元素。在移動UI 界面中，靜態圖像主要包括GIF、JPEG 以及PSD 等格式，為用戶提供高壓縮的高清圖像，在對其進行設計時，主要是對其失真現象進行處理，并使用差值彌補算法對圖像細節進行表現，進而為用戶提供滿意的視覺體驗。

（4）動態圖像視覺元素。該元素主要包括WMV、PNG 以及AVI 等格式，通過使用不同格式對圖像和視頻數據進行存儲，其壓縮量具有不同程度的變化，其中，PNG 等視頻模式色彩較為豐富[2]。

2.2 以移動UI界面為基礎交互式設計原則

在以移動UI 界面為基礎的交互式設計中，需要在將信息準確傳給用戶的同時，根據用戶使用習慣、需求以及審美等方面開展交互式設計，為此，應遵循以下原則：

（1）一致性原則。在開展交互式設計工作時，需要保證界面視覺排列、字體以及圖標大小的一致性，給予用戶直接的外在觀感，降低用戶界面交互的學習成本。另外，還應開展標準化設計，將其貫穿于界面元素和產品形象中，從而產生關聯系，使用戶通過視覺獲得感知，提高軟件的可用性。

（2）準確性原則。該原則主要體現在交互信息的準確性以及功能代碼等方面的準確性，使用戶能夠在短時間內獲取信息、交互使用信息。同時，在設計過程中應降低操作難度，滿足不同用戶的使用需求。

（3）操作合理性和時間響應原則。由于移動UI 界面需要排布多種視覺元素，所以，應以用戶使用習慣為基礎對文字、圖表進行交互式設計，避免出現誤觸情況。對于響應時間而言，應在0.5s 內完成功能、軟件以及動畫的跳轉。

（4）了解狀態差異化。為使用戶在使用過程中能夠了解系統運行狀態，并便于用戶學習和檢索，應保證界面能夠給予用戶使用反饋，從而更好做好信息交互和檢索。

（5）注重圖形化設計，在遵循便捷、簡約原則的基礎上，使用圖形設計替代基礎文字表述，還可以對文字進行補充，從而使用戶能夠更好的與設備之前進行信息交互，進一步提高用戶使用體驗，滿足其交互使用需求[3]。

3 探究以移動UI界面為基礎的交互式設計

3.1 明確目標，結合用戶使用習慣

在以移動UI 界面為基礎開展交互式設計工作時，需要明確用戶目標、結合用戶使用習慣和需求，開展針對性設計，從而實現用戶與移動電子設備的信息交互。具體而言，在對移動電子設備頁面進行交互式設計時，最為重要的就是避免誤觸情況，在蘋果手機的引領下，用戶在移動電子設備界面進行操作時往往通過觸屏的方式進行，若是界面的交互式設計不合理，極易導致用戶誤觸或是做出錯誤操作，進而影響用戶交互體驗。因此，應結合用戶使用習慣，并以盡量簡約的形式對界面進行設計，在當前全面屏時代，返回一般位于界面左上角，下一步則一般位于界面右上角。在長時間的使用過程中，用戶逐漸形成這一使用需求，為此，在以移動UI 界面為基礎進行交互式設計時，應結合用戶使用習慣，從而給用戶提供良好的操作體驗。以外賣軟件的訂單查詢功能為例，在對該功能界面進行交互式設計時，美團需要在訂單下面點擊一次，而餓了么則需要在訂單下面點擊兩次，相對于美團，餓了么的出錯率更高。但是，后者的交互式設計能夠有效節約整體頁面，也被稱為“抽屜式菜單”。另外，在對UI 界面進行交互式設計時，還需要對網絡環境進行考慮，由于移動電子設備面向的群體更加廣泛，群體所處的網絡環境不盡相同，進而導致用戶使用體驗也存在較大差異。因此，對于次要信息應放在后面，優先呈現重要信息，避免界面無法刷新或是等待時間過長，進而滿足不同用戶的使用需求[4]。

3.2 色彩設計

在以移動UI 界面為基礎開展交互式設計時，尤其是在對一款APP 進行UI 界面的設計過程中，最為重要的元素就是色彩。一般情況下，在開展UI 界面設計時，主要相對軟件圖標進行設計，明確其圖標后再對軟件結構以及色彩進行設計，主要使用RGB 模型開展色彩設計工作。而且，在對色彩進行表達時，主要使用六位十六進制數，例如，在對湖藍色進行表示時，其參數為00EBC0，在對玫紅色進行表示時，其參數為fb0495。但是，需要注意的是，顏色具有一定的心理暗示，例如綠色代表通過，紅色則表示暫停等，為此，在進行色彩設計時，一方面需要利用其心理暗示優化整個交互式設計，另一方面需要注意文化背景差異。在當前全球化的發展機制下，軟件的使用是全球性的，不同文化背景下顏色的含義存在差異，因此，在對界面色彩進行設計時可按照以下幾種搭配方式進行設計：

第一種，使用單一顏色進行界面配色。該方式主要是指將一種顏色作為界面核心顏色，通過對其進行飽和度或是色相的調整進而得到其他顏色，該搭配方式具有極強的協調性，能夠給予用戶和諧的使用感受。而且，主色調的選擇可以與界面主題相關，使用戶通過顏色就能夠對界面模塊以及軟件圖標等功能進行分辨。第二種，使用兩種以上顏色進行設計，增加補色的使用強化顏色對比。所謂補色，指的是對比色，當兩種顏色在色環上之間的間隔在120°-180°之間時，其為對比色，若是兩種燈亮顏色在相互混合后能夠成為黑灰色，也稱為補色。通過在UI 界面交互式設計中使用補色，能夠有效通過顏色的對比對UI 位置進行強化。另外，在具體設計中，設計人員應遵循上述原則把握元素和設計之間的關聯，以提高用戶舒適度為前提對色調使用效果和明暗選擇進行考慮，從而使用戶能夠在較短時間內適應界面的交互式操作習慣，使得界面更加明確、整潔。

3.3 交互式結構設計

由于移動電子設備發展較快，每一代都存在新的性能和創新，當用戶第一次接觸新型移動電子設備時，給用戶留下第一印象的就是第一操作界面，除了產品的實質性功能，該方面是影響用戶使用體驗的重要因素。因此，在以移動UI 界面為基礎進行交互式結構設計時，需要根據不同的使用群體設計不同的交互界面，例如，華為就根據年輕群體開發了華為NOVA 系列，該系列設備的界面更為年輕化，且配色更為生動。因此，在對UI 界面交互式結構進行設計時，可以使用Axure RP 模塊化對界面進行設計。所謂Axure RP 是一款產品設計工具，包含了產品線框圖、文檔以及流程圖等多個內容，相較于手繪圖，該工具展示的效果圖則更加全面、直觀。通過Axure RP，設計人員可以在移動電子設備原型圖的基礎上對架構及模塊進行設計，并進行交互模擬，例如翻頁、鏈接或是效果等，從而保證交互式結構適用于移動電子設備，確保視覺層級上的連貫性。

另外，在進行軟件圖標設計時，應結合產品設計理念以及面向對象群體的特性，例如，淘寶軟件圖標以及界面的主色調為橙色，京東軟件圖標及界面的主色調為紅色，美團軟件圖標及其界面的主色調為黃色等。在長期使用下，用戶對其顏色較為敏感，為此，在進行結構設計時，應從產品調性、用戶需求及習慣等多個方面進行綜合考慮，面向整個使用群體，從而保證框架能夠滿足各個階段用戶的需求。例如，在面向青少年等年輕化群體進行交互式設計時，主要選擇生動、有趣的界面框架，并為其提供靈活、多樣化的功能服務，若是該軟件性質偏向于商業化，則應該設計簡潔、明了的界面框架結構。因此，仍應該立足于使用群體，從而設計合適的交互式設計[5]。

3.4 注重用戶情感體驗

對于交互式設計而言，其服務對象是用戶，所以，在以移動UI 界面為基礎開展交互式設計工作時，設計人員應以用戶心理需求為核心開展工作，提高對用戶情感體驗的重視程度，從而提高用戶體驗感。具體而言，在開展交互式設計過程中，設計人員應對UI 界面區域、模塊以及色彩進行合理設計，根據不同軟件的特性以及使用特點可以融入情感因素或者典故，從而引發用戶共鳴，感覺到界面傳達的情感，進而認同該產品，獲得更好的使用體驗。在當前社會經濟不斷發展的背景下，移動端軟件也在不斷更新、優化，無論是框架、功能還是色彩，都進入高優化階段，用戶在與軟件進行交互式使用時，相較于色彩、功能，更加注重軟件的視覺沖擊以及誕生歷程。因此，為更好的強化設備與用戶之間的交互式體驗，應對用戶需求進行捕捉，對軟件及界面不斷注入新元素。以網易云音樂為例，二零一五年，人們使用最多的音樂軟件是QQ 音樂，但在網易云音樂增加情感要素之后，其下載量和好評度不斷上升，這主要是因為在對音樂播放軟件進行設計時，以用戶產生的情感波動為基礎為用戶提供訴說情感的窗口，也就是評論區，而一首歌曲具有較大面積的受眾，用戶與歌曲之間產生的情感共鳴引起了其他聽眾的情感共鳴，而這些情感共鳴產生的結果作用于網易云音樂這一音樂播放軟件，進而獲得大量用戶的喜愛。另外，網易云音樂將評論區的點擊方式優化為手指上滑，同時，保有原本的點擊功能，進一步加深了用戶的交互體驗，為用戶提供良好使用服務。因此，在進行交互式設計時，應注重用戶的情感需求，立足于實際軟件特性增加情感設計，從而提高用戶與設備之間的交互性。

3.5 對UI視覺界面功能、審美交互性進行設計

在對UI 視覺界面功能交互性進行設計時，主要選擇上下結合方式進行界面布局，或是采取導航欄下、展示頁面上的布局方式，從而能夠順利引導用戶進行瀏覽等邏輯操作。同時，在交互界面具體功能實現方面，設計人員應立足于不同軟件、網頁的行業需求對導航欄、返回、信息提示框等方面進行懸浮型或是方框形的提示信息和窗口，并對多種軟件圖標以及展示界面進行上下級的任務鏈接，從而使用戶能夠在短時間內熟悉界面操作并完成交互指令和功能操作。在對UI 視覺審美交互性進行設計時，主要是對文字、視頻以及圖標等視覺要素進行設計，并按照上下、垂直、左右以及居中等方式對其進行排班，便于用戶檢索需求。另外，為使設備與用戶能夠更好的進行交互，對于窗口以及圖標等方面的線條應盡量選擇柔和的，同時，根據空間要素不同對功能區域之間的間隔進行設計，滿足用戶在軟件產品操作過程中的心理需求[6]。

以中界面框架為例，在對其進行UI 界面交互式設計時，在保證交互功能的基礎上需要保證各個設計和功能的協調性。為此，可以采取上下結合的布局方式對UI 界面進行設計。主要是將導航欄設計在界面最上方，并將關鍵信息放在導航欄上，從而使用戶能夠通過觸摸、滑動或是點擊導航欄進而快速進行信息檢索或是瀏覽，并將網址放在上面，滿足用戶的功能使用。在界面下方應設計圖標按鈕，通過點擊和觸摸能夠直接打開軟件，滿足用戶使用的多種需求。除此之外，還可以使用導航欄在下放、展示頁面在上方的界面布局。在該布局方式中，主要是將重要信息設計在用戶第一眼可以注意到的位置，從而更好的進行信息推送和交互，為此，應將導航欄設計在UI 界面下方。在該布局下，用戶只需要進行交互界面的滑動，或是對導航欄進行滑動、點擊，就能夠完成功能獲取或是瀏覽等操作。以微信UI 信息界面為例，最近使用的小程序圖標為放置在最上方，而導航欄被設計在最下方，通過下滑，用戶能夠直接獲得最近使用的小程序應用，滿足其快速使用需求。另外，為滿足用戶的使用需求，便于新用戶使用，可以進登陸窗口設計在軟件最上層，并使用箭頭、文字等元素對用戶進行引導，從而完成用戶交互操作行為的同時，給予用戶良好的使用體驗。

4 結論

綜上所述，在當前時代背景下，人們對UI 界面的使用需求日益增高，通過進行交互式設計能夠簡化操作的同時給予用戶良好使用體驗。因此，應從色彩、布局結構以及情感等方面進行交互設計，從而正確傳統交互信息，滿足用戶使用需求。