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

葛田

摘要：移動UI界面的交互設計是平面設計中人機交互的新體驗，本文從移動UI的概念、與傳統UI設計的區別入手，討論了新型UI界面交互設計的要點，UI設計的常見配色方法以及提出使用Axure RP軟件來快速地創建原型圖。

關鍵詞：移動UI；界面設計；Axure RP

中圖分類號：TP37 文獻標識碼：A

文章編號：1009-3044（2019）09-0207-02

界面UI是使用者與設備互相聯系的橋梁。現今廣泛得到應用的移動電子設備正是通過其界面UI設計將后臺的運行程序與前臺界面的進行交互信息傳達。而為了給用戶帶來更好的體驗，增加用戶的黏性程度，就必須讓UI設計具有更好的可用性來滿足用戶的需求。

1 移動UI設計的特點

移動UI是移動通信與UI設計的結合。近年來隨著4G網絡在全國的普及，移動網絡設備如智能手機，智能手表等逐漸代替了原來的筆記本電腦，平板電腦等等。因為移動設備特有便攜性，使其界面的UI設計與傳統的界面設計有著不小的區別。

1.1了解移動設備的“體積”

移動設備的體積小是它最大設備制造特點。影響顯示端體驗的要素有兩種：屏幕尺寸和分辨率。目前市場上的移動設備類型層出不窮，僅僅智能手機的終端屏幕尺寸就多達幾十種。主流的尺寸從5.9到11.6甚至更大。分辨率也由640*480到2160*1080不等。便攜的移動設備極大地方便了用戶的網絡體驗，但尺寸大小也限制了復雜的交互操作。例如大部分移動設備用戶不會接受需要頻繁使用雙手的操作系統和軟件。事實上常見的APP設計很少會需要2個以上的觸點去操作。那么當設計師不能將所有操作一次性呈現的時候，結構規劃就變得更加重要。我們通過左右邊欄，上下菜單對元素進行有效的取舍和隱藏。設計師最終的目的不是要讓用戶刻意地去理解UI交互，而是需要讓用戶有流暢的使用體驗。

1.2移動設備的“界面”

傳統的圖形用戶界面一般都是指WIMPS維普斯界面，它是菜單、指針、視窗等依賴于鍵盤鼠標輸入的界面。像我們熟悉的windows7及以前的系統，二維、三維設計軟件，播放器等等界面。現如今我們不再局限于臺式電腦，一體機等設備，我們的UI界面已經運用到智能手機，智能手表或其他手持設備。用戶也不再局限于鼠標，游戲柄等輸入方式，而是大量采用觸屏和體感的方式來瀏覽界面。這是我們所說的后維普斯時代。設計師需要采用更多的技術來實現交互設計，因為在這里用戶本身就是輸入端和控制端。

2 UI設計最重要的視覺傳達：色彩

我們在設計一款APP的UI界面時，最常見的方法是先設計它的圖標，確定這款軟件的色彩和基本結構。在進行移動端色彩設計的時候，設計師一般會采用RGB模型。色彩通過六位十六進制數來表示，比如玫紅色表示為fb0495，湖藍色表示為00EBC0，赤褐色表示為835c25。UI設計中色彩的設計最具表現力，它可以給客戶帶來直接心理效應。但需要注意的是不同的文化背景可能其色彩的意思也不盡相同。紅色在東亞表現為節日，喜慶，熱烈的感情，但在其他地區可能代表著危險，敏感等元素。在趨于扁平化設計的今天，移動UI的色彩搭配方案主要有以下幾種搭配方法：

（1）單一色配色：依賴一種顏色作為主色調，通過調整飽和度或色相來得到趨近的顏色系（效果圖3）。

（2）采用兩種以上顏色方案，搭配補色來突出對比 。補色也稱為對比色，是兩種在色相環上間隔120°到180°的顏色。如果兩種等量的顏色在相互混合后成黑灰色，那么就互為補色。互補色能夠增強兩方的顏色，通過對比來突出要強調的UI位置。圖3是選擇單一紅色系做互補的效果圖。圖4是選擇色環距離中30°的兩種顏色做雙補色的效果圖。

3 Axure RP模塊化設計界面

Axure RP是一款快速產品設計工具，由美國Axure Software Solution公司出品。它集產品線框圖、流程圖、原型和說明文檔設計與一身。這樣的效果圖比手繪圖更加直觀，為我們UI的模塊化設計提供了便利。利用Axure我們可以設計移動設備的原型圖，并利用軟件元件做出基本的交互模擬，如翻頁，鏈接，選擇效果。下圖為使用Axure設計的iPhone手機APP原型圖。

使用Axure 、Photoshop等軟件設計的模塊化界面使得無論是前臺設計師還是后臺程序員都可以快速的理解設計結構，確保視覺層級上的連貫性。同時模塊化設計可以很方便地重復使用素材，節省我們的工作時間。

移動界面的交互設計除了包含了UI的層次，配色、模塊化設計等要素，設計者還應該了解用戶如何去感知界面并與界面交互的。界面只有一個，而不同的用戶擁有不同的美感，理解用戶并會用用戶的視角體驗可以幫助設計師正確的去傳達視覺信息，完善我們的設計。

參考文獻：

[1] 陳曉蕾.基于用戶體驗的交互界面設計研究[D].長春：長春工業大學，2013：9-11.

[2] 高鵬，楊正.論UI設計中的扁平化與擬物化[J].美術教育研究，2014（10）：60.

[3] 廖宏勇.圖形界面的隱喻設計[J].同濟大學學報：社會科學版，2010（3）：76-82.

[4] 饒衛民，林道貴.略談智能手機App開發中的UI設計技巧[J].電子測試，2016（13）：41-42.

【通聯編輯：唐一東】