移動(dòng)軟件開發(fā)中的UI設(shè)計(jì)

鄭 卉 鄧 晶

重慶電子工程職業(yè)學(xué)院，重慶 401331

對(duì)于用戶而言，應(yīng)用程序中最重要的就是用戶界面，對(duì)相當(dāng)一部分用戶而言，用戶界面就是應(yīng)用程序。桌面系統(tǒng)的應(yīng)用程序可以有相當(dāng)復(fù)雜的用戶界面，但是移動(dòng)設(shè)備上的用戶界面最好的應(yīng)用程序中最重要的單一功能。針對(duì)目前移動(dòng)設(shè)備的運(yùn)行平臺(tái)主要是Android和IOS，本文討論的移動(dòng)設(shè)備中主要是指Android平臺(tái)下的移動(dòng)設(shè)備。

1 桌面系統(tǒng)軟件開發(fā)中UI設(shè)計(jì)的規(guī)則

界面色彩要求，用戶在較長(zhǎng)時(shí)間使用后不感到視覺疲勞，要避免顏色種類過多。整個(gè)界面要主次分明，要將最重要的內(nèi)容放在最易引起用戶注意的位置，例如最上部或者左邊欄。整個(gè)界面的排版要整齊，樣式要統(tǒng)一，設(shè)置導(dǎo)航以方便用戶的使用，排版應(yīng)當(dāng)留有一定的間隙。

需要展示的數(shù)據(jù)應(yīng)當(dāng)集中顯示，在視覺上使用戶容易察覺數(shù)據(jù)之間的關(guān)系。在有較多文本信息的情況下，對(duì)文本字體、色彩上增加格式的變化，使內(nèi)容有層次變化，更容易辨識(shí)。頁面適當(dāng)留白，以增強(qiáng)可讀性，例如在段落間添加空行的做法，可以減輕用戶的視覺疲勞。

頁面相應(yīng)速度要快，實(shí)在無法響應(yīng)，應(yīng)當(dāng)有提示彈出等變化告知用戶。鼠標(biāo)移動(dòng)的距離應(yīng)當(dāng)盡量的短，并且點(diǎn)擊時(shí)鼠標(biāo)狀態(tài)應(yīng)當(dāng)有變化。

2 移動(dòng)設(shè)備的特點(diǎn)

移動(dòng)設(shè)備的屏幕要比桌面系統(tǒng)的屏幕小得多，所以對(duì)顯示控件的數(shù)量要進(jìn)行嚴(yán)格的限制。同時(shí)移動(dòng)設(shè)備的應(yīng)用輕便也是其主要特性之一，移動(dòng)設(shè)備上不會(huì)采取復(fù)雜的類似PC輸入端的操作，相比輸入大量的信息，用戶更加偏向用手指寫寫畫畫選擇信息，從而取代在移動(dòng)設(shè)備上輸入長(zhǎng)篇大論。

由于無線網(wǎng)絡(luò)的不穩(wěn)定性，對(duì)移動(dòng)設(shè)備本地緩存數(shù)據(jù)要優(yōu)于通過無線方式獲得數(shù)據(jù)。同時(shí)，用戶在一次屏幕更新后，應(yīng)該盡量獲得較多的信息，避免切換時(shí)等待時(shí)間較長(zhǎng)。

由于移動(dòng)設(shè)備的高攜帶性，用戶很有可能是在移動(dòng)的環(huán)境下進(jìn)行對(duì)設(shè)備的操作，開發(fā)相應(yīng)應(yīng)用程序時(shí)，就應(yīng)當(dāng)注意針對(duì)移動(dòng)環(huán)境下，例如抖動(dòng)和行走，進(jìn)行相應(yīng)設(shè)計(jì)。

移動(dòng)設(shè)備的平面尺寸比較小，同時(shí)使用的環(huán)境一般情況是比較多樣，例如，夜晚，應(yīng)當(dāng)考慮用戶讀取信息的方便和容易，設(shè)計(jì)針對(duì)夜間光線模式以及放大字體都是比較好的選擇。

由于不同設(shè)備有不同的屏幕尺寸和分辨率，針對(duì)不同的設(shè)備尺寸和功能進(jìn)行相應(yīng)的測(cè)試是十分必要的。一般存在下列幾種屏幕：特大屏幕，指比大屏幕更大的屏幕；大屏幕，比標(biāo)準(zhǔn)智能手記的屏幕大，一般指平板電腦或者上網(wǎng)本大小的屏幕；中等屏幕，與智能手機(jī)典型的屏幕大小一樣，一般為3. 2英寸；小屏幕，比標(biāo)準(zhǔn)的智能手機(jī)屏幕小。

像素密度是另一個(gè)需要考慮的問題，常見的幾個(gè)標(biāo)準(zhǔn)像素密度有：Idpi指像素密度在100dpi-140dpi；mdpi的像素密度一般在140dpi-190dpi；hdpi的像素密度大于等于190dpi；xhdpi的像素密度為320dpi。

移動(dòng)設(shè)備更廣泛的利用了觸控技術(shù)進(jìn)行操作，支持通過設(shè)備的上下左右搖擺，以及手指對(duì)屏幕的觸控進(jìn)行功能項(xiàng)的操作。

3 構(gòu)建移動(dòng)UI的策略

受移動(dòng)設(shè)備屏幕尺寸的影響，不應(yīng)當(dāng)讓用戶看到太多的表單元素。受移動(dòng)性的影響，用戶可能在各種各樣的情況下使用移動(dòng)設(shè)備，可能是在早上繁忙的交通工具中，也可能是在戶外運(yùn)動(dòng)中，此時(shí)，表單元素應(yīng)當(dāng)足夠的大，并方便用戶的使用，當(dāng)然對(duì)于屏幕比較小的設(shè)備，表單元素也應(yīng)當(dāng)適合屏幕。

由于不同設(shè)備有不同的屏幕尺寸和像素密度，針對(duì)不同的設(shè)備尺寸和功能進(jìn)行相應(yīng)的測(cè)試是十分必要的。值得注意的是，移動(dòng)設(shè)備屏幕有著越來越大的傾向，例如目前市場(chǎng)上出現(xiàn)的5英寸智能機(jī)，甚至出現(xiàn)了7～8英寸的智能設(shè)備。根據(jù)Google在2010年8月進(jìn)行的一次調(diào)查，大約97%的設(shè)備擁有mdpi或hdpi像素密度，在開發(fā)時(shí)，我們完全可以假定設(shè)備擁有較高的像素密度。具體操作中，需要注意以下幾點(diǎn)：盡量不使用絕對(duì)定位；避免在代碼中直接設(shè)置像素值；在多個(gè)物理設(shè)備中對(duì)各種配置的應(yīng)用程序進(jìn)行測(cè)試。

對(duì)于菜單的處理，移動(dòng)設(shè)備的屏幕空間是非常珍貴的，比較大屏幕的桌面系統(tǒng)，菜單的要求更加靈活，要求既可以提供程序功能，同時(shí)又不占用額外屏幕空間的機(jī)制。多級(jí)菜單和上下文菜單都是不錯(cuò)的處理方式。

允許滾動(dòng)控件。合理使用虛擬鍵盤。提供狀態(tài)列表，方便用戶選擇使用。提供自動(dòng)完成功能來輸入一些特定的值，例如國家、地名等。合理使用位置服務(wù)來獲取用戶當(dāng)前的位置，減少對(duì)地址信息的輸入。

4 總結(jié)

移動(dòng)軟件開發(fā)是目前發(fā)展十分迅速的一類軟件開發(fā)，同時(shí)移動(dòng)設(shè)備具有高攜帶性，輕便性，以及屏幕較傳統(tǒng)PC小等特點(diǎn)。針對(duì)移動(dòng)設(shè)備進(jìn)行軟件開發(fā)時(shí)，應(yīng)當(dāng)根據(jù)設(shè)備的特點(diǎn)，進(jìn)行軟件UI設(shè)計(jì)，本文正是針對(duì)移動(dòng)UI設(shè)計(jì)的討論，整理提出了一些通用的設(shè)計(jì)策略。

[1]Wallance B. McClure，Nathan Blevins，John J. Croft IV，etc. C#開發(fā)Android應(yīng)用實(shí)戰(zhàn)——使用Mono for Android 和. NET/C#，清華大學(xué)出版社，2013，1

[2]http://developer. android. com/design/get-started/uioverview. html 2014-3-13

[3]王東明. 精彩絕倫的Android UI設(shè)計(jì):響應(yīng)式用戶界面與設(shè)計(jì)模式，Juhani Lehtimaki，中國科技信息，2013，20

[4]朱振恒. B/S界面規(guī)范，季靜，科技信息，2009，2