基于Android 系統(tǒng)的手機(jī)界面管理與設(shè)計(jì)

田智

摘要：隨著科技進(jìn)步，手機(jī)的功能越來越強(qiáng)大。我們對(duì)于手機(jī)軟件的評(píng)判標(biāo)準(zhǔn)也從單一的性能指標(biāo)延伸到良好的人機(jī)交互。該文的研究?jī)?nèi)容是基于 Android 系統(tǒng)的用戶手機(jī)界面管理與設(shè)計(jì)。通過該系統(tǒng)，用戶可以十分方便地進(jìn)行界面的開發(fā)和設(shè)計(jì)，設(shè)計(jì)好的界面，可以保存成 XML 格式的文件。同時(shí)，這種 XML 文件具有極好的可移植性，只要安裝了該系統(tǒng)的計(jì)算機(jī)，均支持打開一個(gè)已完成的 XML 界面程序，讀取解析其中包含的信息并在 PC 上顯示。該文介紹了界面開發(fā)的基本技術(shù)方法，希望為之后再繼續(xù)進(jìn)行界面研究的人提供幫助，開發(fā)出功能更強(qiáng)的軟件。

關(guān)鍵詞：XML 解析技術(shù)；UI 設(shè)計(jì)；Android 技術(shù)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）30-0068-03

從前人們對(duì)軟件的評(píng)判基本局限于能完成什么樣的任務(wù)，但是卻忽視了界面開發(fā)和良好人機(jī)交互的重要性。在很長的一段時(shí)間內(nèi)，界面描寫工作一直沒有被重視起來。做界面描寫的人也僅僅稱為"美工"。其實(shí)軟件界面描寫就像工業(yè)商品中的工業(yè)外型描寫一樣重要。一個(gè)和睦美麗的界面會(huì)給人帶來舒暢的視覺享受，拉近人與手機(jī)之間的距離。在手機(jī)的硬件方面，各項(xiàng)性能也都得到了大幅提升。硬件方面的進(jìn)步，對(duì)軟件業(yè)提出了更高的要求。因此，對(duì)于手機(jī)界面的管理設(shè)計(jì)就是十分重要的了。

1 Android系統(tǒng)的界面分析

Android 系統(tǒng)在 Linux 開放性內(nèi)核的操作系統(tǒng)的基礎(chǔ)上開發(fā)的，Android 是由操作系統(tǒng)、組件、用戶界面以及應(yīng)用軟件四部分組成。它的架構(gòu)形式是軟件堆層的，主要有三部分。底層的基礎(chǔ)是 Linux內(nèi)核，這是用 C 語言所開發(fā)的，功能比較基礎(chǔ)簡(jiǎn)單；中間層是由函數(shù)庫以及虛擬機(jī)所構(gòu)成的，這是用 C++語言開發(fā)的。而在最上層的就是應(yīng)用軟件，包括了通話程序，短信程序等，不同的軟件由不同的公司各自開發(fā)完成，編寫程序的語言是 Java。

1.1 起始的界面

Android 系統(tǒng)的起始界面是所有功能的導(dǎo)航，通過主界面要完成大量的跳轉(zhuǎn)工作。所以，用戶與設(shè)備的視覺交也是從主界面開始的。作為能留給用戶第一印象的主界面，應(yīng)該設(shè)計(jì)帶溫暖和家的感覺。對(duì)于起始界面的設(shè)計(jì)方法，有三點(diǎn)要著重的提出：標(biāo)題、色彩還有圖標(biāo)的整體布局格式。

1.2分界面的設(shè)計(jì)

一個(gè)好的分界面可以多種形式。使用者在這個(gè)基礎(chǔ)上會(huì)逐漸記住和理解分界面。比如，頂端的工具條就是已經(jīng)被大家所熟知的概念。分界面與起始界面在設(shè)計(jì)上大同小異，這里把應(yīng)用的 LOGO 設(shè)置在了屏幕左上角的位置上。而屏幕的右上角用來放置最重要或最常用的操作圖標(biāo)，通常在這個(gè)位置上，一般只有當(dāng)前屏幕所用到的操作，但是最常見的例外似乎就是搜索功能。

在最左邊部分的就是應(yīng)用圖標(biāo)了（這里包括后退鍵），點(diǎn)擊它就可以回到起始界面。在中間部分的就要考慮這些應(yīng)用怎樣配色才能協(xié)調(diào)。在最右邊的，就是當(dāng)前可以進(jìn)行什么樣的操作。

1.3應(yīng)用的列表界面

應(yīng)用程序中可能會(huì)要對(duì)大量的數(shù)據(jù)進(jìn)行處理，那么列表就是將這些數(shù)據(jù)規(guī)則地呈現(xiàn)出來的一種很好的方式。列表界面必須非常的清晰，才能為用戶提供一個(gè)清楚的呈現(xiàn)。同時(shí)，列表的操作欄必須要允許用戶可以進(jìn)行單項(xiàng)或者是多項(xiàng)的操作。同時(shí)，這里還有更加細(xì)致的規(guī)范，比如，“復(fù)選框—文本項(xiàng)—相關(guān)操作”這樣的布局方式可以實(shí)現(xiàn)更復(fù)雜的功能。

1.4 系統(tǒng)的載入列表

一個(gè)好的應(yīng)用程序需要處理大量信息，比如 Twitter 和 Facebook。對(duì)于使用者而言，這就意味著超長的列表?，F(xiàn)在，很多應(yīng)用程序已經(jīng)采用了比較好的處理方法，就是直到列表下滑到已緩沖的條目邊界時(shí)，再繼續(xù)加載下面的信息。

1.5 長按

如果用戶要對(duì)單項(xiàng)的信息操作，常用的方式就是長按這一項(xiàng)。這看上去不是最簡(jiǎn)便的辦法，但卻可以節(jié)省屏幕的空間，同時(shí)，滿足“情景菜單”這種理念。

2 用戶界面理論

人機(jī)交互系統(tǒng)的中心環(huán)節(jié)，就是人機(jī)結(jié)合面。主要實(shí)現(xiàn)的功能是信息在機(jī)器內(nèi)部的存在形式和人類直接接受的表現(xiàn)形式間的轉(zhuǎn)換[1]。圖形化的用戶界面也叫做 WIMP，從名字就可以看出，它包含四種屬性，即Window，就是窗口、Icon，也就是圖標(biāo)、Menu，也就是菜單、Pointing 也就是指針[2]。從這些屬性我們也能推測(cè)出，它具有操作簡(jiǎn)單，界面整潔的特點(diǎn)。

2.1 窗口

窗口是設(shè)備中最重要的部分，是用來顯示各種程序的地方，是與用戶交互的地方。窗口里主要包括工具欄、菜單欄和進(jìn)行各種操作，具有操作功能鍵的操作欄。

2.2 圖標(biāo)

它也是一個(gè)用于顯示的區(qū)域，可以看做一種標(biāo)志，用于表示某個(gè)具體的應(yīng)用。

圖標(biāo)最好要直觀，也就是從圖表當(dāng)中我們就能夠看出這個(gè)應(yīng)用是做什么的。圖標(biāo)一般是一種簡(jiǎn)化的標(biāo)示符，如關(guān)閉、撤銷、最大化等；另一種要和生活貼近，更加形象直觀，比如一個(gè)信封就可以表示郵箱、眼睛代表圖片處理器等。這種圖標(biāo)的設(shè)計(jì)要點(diǎn)就是要用直觀的圖形。

2.3 指針

指針是一種可視化的圖形，是用戶控制操作程序的一種輸入。最常見的就是鼠標(biāo)指針，通過點(diǎn)擊鼠標(biāo)或移動(dòng)鼠標(biāo)來實(shí)現(xiàn)操作，作用是操控設(shè)備上的某個(gè)位置，用戶可以在這個(gè)位置進(jìn)行編輯等功能。常見的指針有：十字形、等待沙漏、待機(jī)旋轉(zhuǎn)等。

2.4 菜單

菜單，顧名思義，就是將功能都展示出來讓用戶根據(jù)需要選擇，之后完成功能。在一個(gè)系統(tǒng)中，菜單應(yīng)該包含了所有的功能命令。菜單也需要一個(gè)現(xiàn)實(shí)途徑，通常就是通過窗口的方式。有時(shí)窗口也有其他的方式。菜單常見的類型有工具欄、彈出式等。

3 XML解析技術(shù)

XML 技術(shù)即可擴(kuò)展標(biāo)記語言，它的英文名為 extensible markup language，是用來對(duì)電子文件進(jìn)行標(biāo)記使其富有結(jié)構(gòu)性的一種標(biāo)記語言，同時(shí)也可以標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)的類型等，是允許使用者對(duì)自己所編寫的標(biāo)記語言來定義一種源語言[3]。

3.1 SAX解析技術(shù)

SAX 的解析器在解析文檔時(shí)會(huì)觸發(fā)事件，這種方式是基于事件型的解析方式。SAX 解析的好處之一是，它對(duì)內(nèi)存的容量和速度的要求一般很低，因?yàn)樗梢宰層脩魶Q定什么樣的目標(biāo)是要處理的。特別是，當(dāng)設(shè)計(jì)者只需處理文檔中的一部分?jǐn)?shù)據(jù)時(shí)，這樣的有點(diǎn)就更能體現(xiàn)出來。當(dāng)然也有一些缺陷，SAX 解析的編碼比較復(fù)雜，而且不能夠在同一時(shí)刻訪問處在相同文檔中不同位置的數(shù)據(jù)。

3.2 DOM解析技術(shù)

因?yàn)?DOM 是基于樹解析的，因此先將 XML 文件生成樹的形式，而且還可以對(duì)它遍歷。采用 DOM 解析可以容易的編程，已經(jīng)有現(xiàn)成的指令供開發(fā)者使用。開發(fā)者可以容易地對(duì)樹進(jìn)行編輯，可以添加和修改樹中的內(nèi)容。但如果采用 DOM 解析，就要對(duì)完整的 XML 文檔都進(jìn)行處理，所以要求采用的內(nèi)存運(yùn)行速度要比較高，特別是在處理大的 XML 文檔時(shí)。因?yàn)樗鼜?qiáng)大的遍歷功能，DOM解析大多數(shù)用來改變需要頻繁處理的 XML 文檔。

4 系統(tǒng)的實(shí)現(xiàn)

4.1 可行性分析

基于 Android 技術(shù)的手機(jī)界面管理與設(shè)計(jì)系統(tǒng)可以為手機(jī)界面的開發(fā)者提供可視化與圖形模塊化的手段來開發(fā)用戶界面。這可以使得在美術(shù)藝術(shù)方面的專業(yè)人士可以比較輕松地進(jìn)入到手機(jī)用戶界面開發(fā)的領(lǐng)域中來，不需要在計(jì)算機(jī)方面的專業(yè)知識(shí)。同時(shí)，界面的開發(fā)功能更加強(qiáng)大，開發(fā)周期較短，修復(fù)完善更容易，大大提高了效率。

4.2 系統(tǒng)實(shí)現(xiàn)

本系統(tǒng)總共分為兩大部分，一是在電腦端進(jìn)行設(shè)計(jì)的模塊，二是界面在Android 手機(jī)上的顯示模塊。界面在電腦端開發(fā)的過程即美工人員利用簡(jiǎn)單的拖拽，將系統(tǒng)庫中的組件組合起來形成界面。開發(fā)好之后，通過 Generate 功能將所開發(fā)的界面的信息生成為 XML代碼，以備之后在 Android 手機(jī)上進(jìn)行顯示。同時(shí)，我們也可以將一個(gè)現(xiàn)成的 XML 文件打開，進(jìn)行界面的繼續(xù)開發(fā)[4]。界面在 Android 手機(jī)上的顯示模塊就是將上一步生成的 XML 文件發(fā)送到手機(jī)上，解析之后，即可將界面顯示。我們?cè)陂_發(fā)過程中也可以使用 Android 模擬器，這樣可以提高效率。

4.3 用戶界面在電腦端的開發(fā)流程

界面組件包括基礎(chǔ)組件和高級(jí)組件，基礎(chǔ)組件有按鈕，文本框，標(biāo)簽，單選框和復(fù)選框，選項(xiàng)卡等[5]。高級(jí)的組件有時(shí)鐘組件和日期組件等。我們將每種組件封裝成圖形化的模塊，便于開發(fā)使用，但實(shí)質(zhì)的內(nèi)核是 XML 語句。而我們對(duì)組件的屬性進(jìn)行的調(diào)整，本質(zhì)上就是改變了這個(gè)模塊的 XML 語句中的某一部分?？梢哉{(diào)整的組件屬性有：邊框大小，位置，模板樣式等。這樣我們?cè)?PC 所設(shè)計(jì)出的圖形化的界面，實(shí)際上也就是導(dǎo)入到手機(jī)中所看到的樣子，不會(huì)改變，這樣有利于我們發(fā)現(xiàn)問題，進(jìn)行修改完善。

在具體的工作過程中，是按照如下步驟運(yùn)行的：首先，要導(dǎo)入 Android 資源，接著將所導(dǎo)入的資源文件進(jìn)行讀取，將 XML 的文件解析、讀取其中的組件信息。導(dǎo)入 Android 資源：Android 的界面資源文件有三種，它們分別是array.xml， colors.xml 和 strings.xml，他們都是 XML 格式的文件，存放在應(yīng)用程序的 res/values/目錄下。那么如果這些文件存在，就會(huì)解析這些文件，將解析得到的組件信息保存起來。 手機(jī)界面的顯示過程：在上一步導(dǎo)入 Android 資源之后，我們得到了組件的信息，這些信息保存于緩存之中。所以，手機(jī)界面的顯示過程如下：先選擇一個(gè)XML 格式的文件，解析文件讀取信息，在界面窗口創(chuàng)建組件，獲取緩存中的組件信息，用已經(jīng)保存在緩存中的信息為組件屬性賦值，最后界面顯示出來。具體如下圖：

4.4 界面在Android手機(jī)上顯示的流程

在之前的開發(fā)過程中，我們只是在設(shè)計(jì)系統(tǒng)中看到用戶界面的圖形化顯示。但這并不是在真正的 Android 上顯示出來的效果，界面到底做的好不好還需要放在真正的手機(jī)上才知道。首先將 XML 的文件和 colors.xml，array.xml，和 strings.xml這三種類型的資源文件進(jìn)行解析，得到解析后的內(nèi)容分別賦值給界面組件和適配器，這兩部分將共同組成 Android 的手機(jī)界面，然后將該界面呈獻(xiàn)給用戶。通過這個(gè)流程，可以實(shí)現(xiàn) XML 程序在 Android 手機(jī)上的界面顯示。當(dāng)然，為了方便，我們也可以安裝 Android 模擬器，利用模擬器測(cè)試我們的程序。 具體如下圖：

以上是將已經(jīng)編輯好的 XML 文件顯示到 Android 手機(jī)上的總體步驟。如果用戶想查看在手機(jī)上的顯示情況，可以采用以下方法：從電腦端發(fā)送 XML 文件，啟動(dòng) Activity 進(jìn)行接收，當(dāng)確認(rèn)已經(jīng)接收成功之后，啟動(dòng) Service，接著執(zhí)行我們?cè)谥疤岬竭^的步驟，開始解析 XML 文件，并將組件信息保存到緩存中，最后將信息賦值給對(duì)應(yīng)的組件，完成整個(gè)界面的配置。

5 結(jié)論

綜上所述，通過該系統(tǒng)，用戶可以十分方便地進(jìn)行界面的開發(fā)和設(shè)計(jì)，不需要在計(jì)算機(jī)方面的基礎(chǔ)設(shè)計(jì)好的界面，可以保存成 XML 格式的文件。同時(shí)，這種 XML 文件具有極好的可移植性，只要安裝了該系統(tǒng)的計(jì)算機(jī)，均支持打開一個(gè)已完成的 XML 界面程序讀取解析其中包含的信息并在 PC 上顯示。系統(tǒng)是模塊化、圖形化的顯示方式，每個(gè)組件均已圖形模塊展示。這就極大方便了美工設(shè)計(jì)師的界面開發(fā)工作。 這種 XML 格式文件還可以發(fā)送到 Android 手機(jī)端，使用戶最直接體驗(yàn)到開發(fā)的界面。

參考文獻(xiàn)：

[1] 賈廣宇.MVC設(shè)計(jì)模式下Web開發(fā)框架的研究與應(yīng)用[D]. 大連：大連海事大學(xué) 2006：23-25.

[2] 方敏.文化傳播視野下的圖形用戶界面設(shè)計(jì)研究[D]. 蘇州：蘇州大學(xué)，2009.

[3] 林清.XML與HTML在Web環(huán)境中的應(yīng)用分析[J].計(jì)算機(jī)應(yīng)用，2008（S1）：66-75.

[4] 李曉帆.界面設(shè)計(jì)與業(yè)務(wù)功能設(shè)計(jì)分離的軟件開發(fā)模型設(shè)計(jì)[D]. 北京：北京郵電大學(xué)，2009.

[5] 王鵬飛.移動(dòng)設(shè)備應(yīng)用軟件交互界面設(shè)計(jì)[D]. 昆明：昆明理工大學(xué)，2013.