楊 賢 唐超蘭

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

1.前言

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

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

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

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

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

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

從用戶(hù)角度來(lái)說(shuō)，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)[2]，它致力于了解目標(biāo)用戶(hù)和他們的期望，了解用戶(hù)在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)，通過(guò)對(duì)產(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è)備、界面、使用場(chǎng)景不同，人與手機(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ā)展，因此，對(duì)手機(jī)應(yīng)用程序交互設(shè)計(jì)提出了新的要求，怎樣創(chuàng)建簡(jiǎn)潔、流暢、適合于手機(jī)應(yīng)用程序的交互設(shè)計(jì)是設(shè)計(jì)師需要迫切考慮和解決地問(wèn)題。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2.1 布局清晰，簡(jiǎn)潔，保持一致性

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

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

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

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

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

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

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

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

5.結(jié)論

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

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

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

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

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

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