手機(jī)應(yīng)用程序的交互設(shè)計(jì)研究

楊 賢 唐超蘭

（廣東工業(yè)大學(xué),廣東 廣州 510006）

1.前言

隨著手機(jī)功能越來越強(qiáng)大以及3G網(wǎng)絡(luò)的普及，手機(jī)應(yīng)用程序的開發(fā)及應(yīng)用越來越流行，今年年初，蘋果公司在線應(yīng)用商店App Store下載量超過100億次，其中應(yīng)用數(shù)量已突破40萬個。蘋果App Store啟動于2008年，當(dāng)時只有500個初始應(yīng)用，數(shù)日后下載量就達(dá)上千萬，一年上10億，兩年半時間就擴(kuò)張到100億的下載量。由此可見手機(jī)應(yīng)用程序的發(fā)展勢頭非常迅猛，并且仍然保持上升勢頭。

手機(jī)平臺跟計(jì)算機(jī)平臺相差很大，手機(jī)的設(shè)計(jì)開發(fā)存在很多問題：首先，僅靠小小的鍵盤或者是觸控控件，手機(jī)用戶的輸入有很大限制，而輸出設(shè)備過小也限制了很多功能，如瀏覽網(wǎng)頁，看視頻等。再者，各個手機(jī)生產(chǎn)商的手機(jī)平臺相差很大，顯示屏不一致，輸入系統(tǒng)不一致，甚至操作系統(tǒng)也不一致，這就對移動設(shè)備應(yīng)用的開發(fā)提出了很大的挑戰(zhàn)。更甚者，由于移動設(shè)備應(yīng)用的開發(fā)還不成熟，也沒有統(tǒng)一的標(biāo)準(zhǔn)，這就造成了手機(jī)應(yīng)用程序五花八門，設(shè)計(jì)上存在很多問題，導(dǎo)致用戶在使用這些應(yīng)用程序的時候存在很多認(rèn)知摩擦。這些嚴(yán)重影響了用戶體驗(yàn)。

因此，手機(jī)應(yīng)用程序的可用性亟待提高。而在手機(jī)應(yīng)用程序的開發(fā)設(shè)計(jì)流程中，提高產(chǎn)品可用性的兩個非常重要的階段是用戶研究及交互設(shè)計(jì)。本文將對手機(jī)應(yīng)用程序的交互設(shè)計(jì)進(jìn)行研究。

2.交互設(shè)計(jì)

2.1 交互設(shè)計(jì)簡介

交互設(shè)計(jì)是指人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計(jì)與定義。不同于傳統(tǒng)的設(shè)計(jì)學(xué)科主要關(guān)注形式，交互設(shè)計(jì)更多的是關(guān)注內(nèi)容和內(nèi)涵，它首先規(guī)劃和描述事物的行為方式，然后描述傳達(dá)這種行為的最有效形式。

Donald Norman認(rèn)為，設(shè)計(jì)分為本能層，行為層，反思層3個層面[1]，本能層的設(shè)計(jì)主要著重于使用者對產(chǎn)品的第一感覺，講究美觀；行為層的設(shè)計(jì)主要著重于在使用過程中的體驗(yàn)，講究實(shí)用；反思層的設(shè)計(jì)主要著重于在使用產(chǎn)品之后給人的感覺，講究滿足感。交互設(shè)計(jì)傾向于行為層。交互設(shè)計(jì)借鑒了傳統(tǒng)設(shè)計(jì)，可用性工程等學(xué)科的理論和技術(shù)。它是一個具有獨(dú)特方法和實(shí)踐的綜合體，而不只是部分的疊加。它也是一門工程學(xué)科，具有不同于其它科學(xué)和工程學(xué)科的方法。

從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)[2]，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點(diǎn)，通過對產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)，這就是交互設(shè)計(jì)的目的。

2.2 手機(jī)應(yīng)用程序的交互設(shè)計(jì)

由于手機(jī)和計(jì)算機(jī)的硬件設(shè)備、界面、使用場景不同，人與手機(jī)和計(jì)算機(jī)的交互方式也有很大區(qū)別（如表1）。這就導(dǎo)致了手機(jī)應(yīng)用程序的交互設(shè)計(jì)與計(jì)算機(jī)軟件的交互設(shè)計(jì)有很大的不同。計(jì)算機(jī)軟件的設(shè)計(jì)方法顯然已經(jīng)不適合手機(jī)應(yīng)用程序的發(fā)展，因此，對手機(jī)應(yīng)用程序交互設(shè)計(jì)提出了新的要求，怎樣創(chuàng)建簡潔、流暢、適合于手機(jī)應(yīng)用程序的交互設(shè)計(jì)是設(shè)計(jì)師需要迫切考慮和解決地問題。

表1 計(jì)算機(jī)與手機(jī)區(qū)別

3.手機(jī)應(yīng)有程序交互設(shè)計(jì)研究

交互設(shè)計(jì)是一門比較新興的學(xué)科，目前在產(chǎn)品開發(fā)中并沒有統(tǒng)一標(biāo)準(zhǔn)，筆者大膽將交互設(shè)計(jì)分為兩個層面來研究。在縱向上分為交互流程設(shè)計(jì)，在橫向上分為用戶界面設(shè)計(jì)。下面將以筆者團(tuán)隊(duì)設(shè)計(jì)的一款手機(jī)應(yīng)用程序“小谷圍”作為例子?！靶」葒笔且豢頰ndroid手機(jī)平臺基于LBS+SNS的大學(xué)生交友應(yīng)用程序。

3.1 交互流程設(shè)計(jì)

交互流程是用戶完成某個特定目標(biāo)所需要的一系列步驟，它要求應(yīng)用程序在信息架構(gòu)上以及每個步驟和跳轉(zhuǎn)要足夠清晰[3]。沒有不必要的層級，并且清晰的指示了當(dāng)前的位置，讓用戶一進(jìn)入產(chǎn)品，就可以一目了然的知道產(chǎn)品是干什么的，有幾個功能模塊，模塊之間怎么切換。

由于手機(jī)應(yīng)用程序的交互設(shè)計(jì)還不是特別成熟，沒有現(xiàn)有的標(biāo)準(zhǔn)去指導(dǎo)手機(jī)應(yīng)用程序的設(shè)計(jì)，下面是筆者在手機(jī)應(yīng)用程序開發(fā)中以及借鑒互聯(lián)網(wǎng)知識下摸索出來的針對手機(jī)應(yīng)用開發(fā)中流程設(shè)計(jì)的一些評估標(biāo)準(zhǔn)：

3.1.1 產(chǎn)品結(jié)構(gòu)清晰，沒有不必要層級，沒有太多分支，界面跳轉(zhuǎn)符合用戶預(yù)期，有清晰的返回與退出引導(dǎo)

3.1.2 明確產(chǎn)品有幾個主要的任務(wù)流程以及幾個主要頁面，盡量保證產(chǎn)品主要部分都能夠通過首頁訪問

3.1.3 清晰的指示了當(dāng)前的位置，復(fù)雜的交互要有很好的引導(dǎo)和幫助

3.1.4 操作成功或失敗都有明確的反饋，預(yù)防出錯，如出錯要幫助用戶從錯誤中恢復(fù)過來

3.1.5 功能的排布要有邏輯，分類要清晰，命名要準(zhǔn)確、易懂

根據(jù)以上的交互流程設(shè)計(jì)標(biāo)準(zhǔn)，筆者團(tuán)隊(duì)對“小谷圍”的交互流程作出了詮釋，如圖1所示：

圖1 交互流程設(shè)計(jì)

頁面流程緊隨上一步的交互流程設(shè)計(jì)，對任務(wù)分析進(jìn)行自然轉(zhuǎn)化，并指導(dǎo)整個軟件界面交互的信息架構(gòu)和操作邏輯?；旧弦粋€主要任務(wù)便對應(yīng)一張頁面流程圖，頁面流程設(shè)計(jì)有利于確定頁面內(nèi)容，頁面數(shù)量，還有各頁面間的交互關(guān)系。

3.2 用戶界面設(shè)計(jì)

用戶界面設(shè)計(jì)包括應(yīng)用程序的外觀、布局、導(dǎo)航、控件等等。手機(jī)應(yīng)用程序涉及到很多的控件[4]。標(biāo)簽欄、列表、按鈕、對話框、提示框、發(fā)布框等等，這些控件使用的是否到位，對于界面設(shè)計(jì)來說至關(guān)重要。比如說兩個二級頁面都需要二級標(biāo)簽欄，如果設(shè)計(jì)出兩個樣式，這樣不僅設(shè)計(jì)師要設(shè)計(jì)兩套二級控件，程序人員要重復(fù)勞動，用戶也會懷疑這兩個控件是不是同一個含義、同一種操作方式。另外，界面布局中，措辭是否準(zhǔn)確，是否能有效傳達(dá)意思，文字長度限制、特殊情況處理是否考慮到位，列表文字的布局、內(nèi)容頁的排版是否合適，都是需要斟酌使用的（如圖2所示）。以下是用戶界面設(shè)計(jì)中的一些參考評估標(biāo)準(zhǔn)[5]：

圖2 用戶界面設(shè)計(jì)

3.2.1 布局清晰，簡潔，保持一致性

3.2.2 焦點(diǎn)狀態(tài)，控件狀態(tài)等要準(zhǔn)確使用，并且高效使用，可以復(fù)用的控件避免重新設(shè)計(jì)（比如兩個頁面都用到tabbar，不用設(shè)計(jì)兩個，這樣不但增加設(shè)計(jì)師與程序員的工作量，也會增加用戶的學(xué)習(xí)成本）

3.2.3 合理排版，結(jié)構(gòu)化要易于理解，操作前，結(jié)果可預(yù)知，讓用戶知道身處何地，標(biāo)簽和內(nèi)容的從屬關(guān)系要明確（能否看出當(dāng)前標(biāo)簽頁，和當(dāng)前標(biāo)簽頁的從屬內(nèi)容）

3.2.4 少即是多，對于手機(jī)應(yīng)用來說，做減法很重要，避免多余的功能

3.2.5 信息表達(dá)應(yīng)該清楚、明確、直接，避免術(shù)語（比如“拉取失敗”這種措辭）

4.交互設(shè)計(jì)DEMO呈現(xiàn)

交互設(shè)計(jì)是一個過程設(shè)計(jì)，其設(shè)計(jì)結(jié)果不是一個最終產(chǎn)品。交互設(shè)計(jì)是為視覺設(shè)計(jì)以及產(chǎn)品技術(shù)實(shí)現(xiàn)準(zhǔn)備的，它的呈現(xiàn)結(jié)果是一份交互設(shè)計(jì)報告文檔以及交互設(shè)計(jì)DEMO。DEMO根據(jù)要求可以是低保真原型也可以是高保真原型。下面兩幅圖是用FLASH動畫實(shí)現(xiàn)的兩個截圖（如圖3、圖4），并非是一個android的APK格式的應(yīng)用程序。這就是交互設(shè)計(jì)的一種高保真的呈現(xiàn)方式。

圖3 交互設(shè)計(jì)呈現(xiàn)-我的主頁

圖4 交互設(shè)計(jì)呈現(xiàn)-活動發(fā)布

5.結(jié)論

手機(jī)應(yīng)用程序的交互設(shè)計(jì)必須結(jié)合手機(jī)本身的特點(diǎn)和用戶使用手機(jī)應(yīng)用程序的使用習(xí)慣為基礎(chǔ)，做好用戶研究，并在此基礎(chǔ)上構(gòu)建應(yīng)用程序的信息架構(gòu)。手機(jī)的信息架構(gòu)決定了手機(jī)的交互流程并且對手機(jī)界面設(shè)計(jì)起到很好的指導(dǎo)作用。在手機(jī)應(yīng)用程序的開發(fā)中，雖然業(yè)界還沒有形成成熟的開發(fā)標(biāo)準(zhǔn)，但是仍然有一些成果可以借鑒，譬如筆者給出的那些設(shè)計(jì)評估標(biāo)準(zhǔn)，有一定的指導(dǎo)作用，這在一定程度上避免手機(jī)應(yīng)用程序雜亂無章，降低了用戶在使用手機(jī)應(yīng)用程序的學(xué)習(xí)消耗，從而減少用戶使用手機(jī)應(yīng)用程序時產(chǎn)生的挫折感，讓用戶可以流暢、高效的使用手機(jī)軟件，并最終提高用戶體驗(yàn)。

[1] Donald A.Norman.情感化設(shè)計(jì) [M].付秋芳，程進(jìn)三譯.北京：電子工業(yè)出版社，2005.

[2] 董建明.人機(jī)交互：以用戶為中的設(shè)計(jì)和評估[M].北京：清華大學(xué)出版社，2007.

[3] MORVILLEPeter，ROSENFELD Louis.Web 信息架構(gòu)[M].陳建勛譯.北京：電子工業(yè)出版社，2008.

[4] 楊會利，李誕新，葛列眾.用戶體驗(yàn)在通信產(chǎn)品開發(fā)中的應(yīng)用[M].北京：人民郵電出版社，2010.

[5] 周陟.UI進(jìn)化論[M].北京：清華大學(xué)出版社，2010.