為觸摸而設計:App界面設計與移動交互體驗研究

湯程心

杭州電子科技大學，杭州310018

移動化將是未來網(wǎng)絡發(fā)展的主要趨勢，傳統(tǒng)的pc通過瀏覽器訪問網(wǎng)絡的方式，正逐步被App應用所取代。一個與以往全然不同的通訊世界，將在全球范圍內(nèi)產(chǎn)生，一些令人驚異的移動電子設備將被創(chuàng)造出來，如智能手機和平板電腦。現(xiàn)在最著名的，是以蘋果公司產(chǎn)品iPad、iPhone等為代表的智能電子設備?？萍嫉拿恳淮蝿?chuàng)新與進步，都會給人類的生活，帶來全新的體驗，“App”就是應運而生的針對移動平臺的手機應用，現(xiàn)在的移動支付、移動游戲、移動社交、掌上購物及云音樂、云儲存等“云端”上的生活正在形成。

目前，移動終端App應用的設計環(huán)境，主要依托蘋果的iOS系統(tǒng)、谷歌的Android系統(tǒng)和微軟的Windows Phone系統(tǒng)。本文所涉及的案例，主要是蘋果iOS系統(tǒng)下的App應用。該系統(tǒng)下，有數(shù)量眾多的App應用，關涉到人們生活的方方面面，包括游戲、兒童、教育、生活、健康健美、旅游、音樂、體育，等等。用戶必須通過注冊成功的Apple ⅠD，即可輕松訪問、下載或購買這些應用。用戶使用“手指”，創(chuàng)造了自鼠標誕生以來，最具創(chuàng)新意義的用戶界面。近年來，它所呈現(xiàn)的界面，是多頁平鋪的App應用或文件夾，偏向扁平化的設計風格。

一、移動端App應用的現(xiàn)狀及趨勢

中國目前的互聯(lián)網(wǎng)三巨頭，有百度（Baidu）、阿里巴巴（Alibaba）、騰訊（Tencent），被簡稱為“BAT”。隨著目前移動商業(yè)模式的擴張與發(fā)展，這三家互聯(lián)網(wǎng)巨頭，已經(jīng)在連接“人與服務”的App應用層面，展開了正面交鋒。其分別代表的App應用，有“手機百度”、“淘寶”和“微信”，僅這三者，就已經(jīng)占有了移動端App應用很大的份額。

當然，在移動互聯(lián)網(wǎng)思維迅猛發(fā)展的新形勢下，眾多傳統(tǒng)企業(yè)也不甘示弱，紛紛開始涉足移動互聯(lián)網(wǎng)產(chǎn)業(yè)，將其企業(yè)品牌宣傳推廣與移動互聯(lián)網(wǎng)緊密相結合[1]。例如，百威啤酒在2015年初，推出了一款“為夢想舉杯”的針對移動端的手機互動應用（見圖1）。

圖1 百威啤酒移動端界面設計①

用戶通過掃描二維碼便可進入活動頁面，用戶在手機端與電腦PC端同步進行。百威啤酒以其酒瓶為依托，將焰火煙花這種現(xiàn)實世界中的元素帶入屏幕：用戶在酒瓶上輸入新年夢想、用戶名稱及好友名稱，即可通過手機提示及附有的圖標演示，“握緊手機，快速高舉”，從而看到自己的新年夢想升空并綻放。其移動端設計的動畫，比較貼近真實，將新年夢想的文字內(nèi)容如“HAPPY”，以放焰火煙花的虛擬形式，呈現(xiàn)每個字母在空中點燃的動畫特效，并在最終還原最貼近真實的用戶體驗，即呈現(xiàn)完整的新年夢想文字。將焰火煙花在現(xiàn)實生活中的運動或展示規(guī)律，配以虛擬世界里的靈活性，讓人瞬間感受到新年的氣氛，并且可以轉發(fā)好友進行互動。這個設計，以良好的視覺效果，結合移動平臺的良好的互動體驗，極大地提升了用戶對百威啤酒品牌的認可度。這就是傳統(tǒng)企業(yè)以開放的心態(tài)在積極擁抱移動互聯(lián)網(wǎng)，為企業(yè)注入新的商業(yè)思維模式的優(yōu)秀案例。

手機、網(wǎng)絡等新傳播媒介的更新與發(fā)展，大大地提升了人們傳播信息的自由度。移動互聯(lián)網(wǎng)時代，人們對信息傳播也有了更高的參與度與參與要求，這也給界面設計帶來了更多的可能性，同時也對多元化、個性化設計的App應用，提出了更高的要求。

也正因為如此，很多有趣的App應用應運而生，其中也涌現(xiàn)了許多優(yōu)秀的App應用設計。特別值得我們學習的，是由故宮博物院推出的幾款獨具匠心的App（見圖2），即“胤禛美人圖”、“紫禁城祥瑞”、“韓熙載夜宴圖”、“每日故宮”。這幾款故宮系列的App設計，在視覺設計上令人驚艷，同時還通過這種新穎的數(shù)字交互方式，展示了中國的傳統(tǒng)文化、古典手工藝品、傳承技藝、歷史故事，讓用戶通過這些App應用，領略到了宮廷皇室與知識典故相融合的魅力。在這里，設計師不再僅以視覺感知作為觀眾反應的唯一模式,而是尋求兼具視覺、觸覺，可與用戶之間產(chǎn)生互動的創(chuàng)作形式，以激發(fā)人們?nèi)ド钊胩骄恐袊鴤鹘y(tǒng)文化的瑰寶。設計出具備“觸覺”、“手勢”等功能的App應用，無疑是具有里程碑意義的。

圖2 故宮系列App圖標設計②

二、觸摸屏——視覺與觸覺的新載體

隨著移動互聯(lián)網(wǎng)的發(fā)展，手機等智能終端屏幕——新的信息傳播媒介產(chǎn)生并迅速發(fā)展。iPhone、iPad等智能設備的風靡，用戶操作都在觸摸屏幕中實現(xiàn)，這種信息傳播方式的轉變也讓用戶在屏幕上找到了另一種樂趣。

和傳統(tǒng)PC電腦相比，手機是線上和線下聯(lián)接的最好工具，觸摸屏的應用也給移動界面設計增添了更多的樂趣，這種樂趣就是通過觸摸控制，使用戶可以直接通過“手指”來觸控體驗沉浸在虛擬的App應用環(huán)境中，產(chǎn)生身臨其境的臨場感。例如，App應用“榫卯”（見圖3），讓用戶可以根據(jù)觸感帶來的反饋，去感受其中虛擬物體的操作軌跡。例如，該款App用木器知識里的“刨床”、“尺”等工具來演示其功能時，用戶必須通過觸碰來完成，直觀又實時的模擬出“平刨用于平整木制表面”、“校驗角度工具由兩條直尺組成可展開任意角度”等功能介紹，讓用戶良好的感知到工具的效用。人與機器之間的觸感連接會拉近他們彼此的距離，因此觸摸屏的出現(xiàn)，使設計更能帶來愉悅的用戶體驗。

圖3 “榫卯”App界面設計③

在人與“物”的交流過程中，“屏幕”已經(jīng)來到了我們的身邊，人們也經(jīng)歷著全新的體驗——觸摸屏幕就是這一新的變革[2]。多點觸控（Multitouch）這一技術，實現(xiàn)了屏幕可以識別五個手指同時做出的點擊、觸控等手勢動作，手勢操作如今在App應用交互過程中越來越重要，已經(jīng)開始取代直接去觸碰實體或虛擬按鍵，輕輕松松揮舞雙手便可以實現(xiàn)各種復雜的動作，比如，上下拉、左右滑，等等。

iPad推出了一款專門為數(shù)字藝術家開發(fā)的App——“Tayasui Sketches（簡單速寫）”(見圖4)，其繪圖工具涉及鋼筆、鉛筆、水彩筆、記號筆、簽字筆、蠟筆和其他特殊樣式的筆，新版本的App界面設計簡約，亮點在于可以用手勢提示，來完成所有的繪圖視窗的操作動作。例如，用兩個手指同時往左滑動表示撤銷之前的命令，而利用兩個手指同時往右滑動，則代表了重復上一步動作。作畫者畫完之后，則利用“捏合”的手勢命令，可以將作品縮小，通過手指的左右滑動，來切換不同的作品或者更新一張空白的畫紙。在iPad上，還有許多類似優(yōu)秀的適合藝術家和設計師發(fā)揮創(chuàng)意的App應用，可以使他們利用移動終端應用這一優(yōu)勢——“手勢”的良好體驗，來完成相關藝術創(chuàng)作。

圖4 Tayasui Sketches之App界面及手勢提示④

雖然移動終端的觸摸屏幕觸感體驗還受制于它的面積，與面積大的PC電腦屏幕相比還是差強人意。但微軟所發(fā)明的一項新設備，可以將手機屏幕的觸控界面，投放到墻壁或桌面等物體上，從而使用戶可以用更加自如的方式操控界面。也許未來，手機的操控界面可以投影到空氣中，你可以將任何物體的表面都變成觸屏。讓觸摸屏幕無處不在，設計師應該充分利用這一觸感體驗，來為用戶創(chuàng)造出人性化的設計，這也將給設計帶來更大的革命。

三、為觸摸而設計：App界面設計的整體性及交互體驗研究

觸摸屏作為App應用視覺與觸覺的新載體，具有很大的潛力。當用戶與界面進行互動時，多點觸控的優(yōu)勢非常明顯，它摒棄了鍵盤、鼠標的單點操作方式，讓用戶可以自由地與移動終端屏幕交互。用戶可通過“手指”來進行單點觸摸進行操作，同時更重要的是，觸摸屏支持單擊、雙擊、平移、按壓、滾動、旋轉、滑動、撥開等不同手勢（見圖5），未來還會出現(xiàn)許多創(chuàng)新手勢，類似從我們?nèi)粘Ｉ钪泻喕鰜淼膭澣?、打叉等，通過手勢直接完成操作，這不僅簡化了App的操作步驟，實現(xiàn)隨心所欲地操控媒介產(chǎn)品，從而更友好、更全面地與媒介交互，并獲取良好的用戶體驗。

圖5 不同操作手勢⑤

倘若完全按照傳統(tǒng)的web界面設計原理來設計App界面，那么已經(jīng)不再適用于這個時代?，F(xiàn)在，設計師不僅需要關注技術本身，更要從用戶的感受和使用習慣去了解一款App應用的功能需求、交互流程、界面設計樣式、操作方式帶來的革新的整體認識，圍繞用戶體驗的設計思路，進行界面的視覺再設計及用戶體驗的再優(yōu)化。

App應用的競爭也日益激烈，企業(yè)如何在眾多的應用世界里脫穎而出，讓用戶對自己的產(chǎn)品或品牌留下強烈的印象，App的視覺設計，將會起到關鍵的作用。這和我們熟知企業(yè)形象設計（VⅠ）類似，都應該有一套完整且規(guī)范的設計規(guī)范，當用戶打開App界面，里面出現(xiàn)的文字、間距、配色、圖標等，都應該保證風格統(tǒng)一，即視覺的連續(xù)性。

1.文字信息的“易識別性”

文字是用戶獲得信息交互的重要媒介，輸入文字對于觸屏也許就是天敵，限于移動終端的屏幕尺寸較小，而信息獲取的方式又主要是依靠文字的閱讀，因此App界面設計的第一點，就是要讓文字具有易讀性和易辨認性。

手機App界面設計和傳統(tǒng)網(wǎng)頁設計，在文字上有一些通用的準則：文字必須清晰可讀，大小合適，文字的顏色和背景色有較為明顯的對比，文字周圍的設計元素不能對文字造成或形成干擾。

不同的字體會帶來不同的感覺，同時不同的字體大小和顏色，也會對內(nèi)容起到不一樣的視覺感受，正確的文字和配色方案，更是好的界面設計的基礎。字體顏色與背景色，要盡量對比明顯，避免使用“黃底綠色字”、“紫紅底白色字”、“藍底紫紅色字”、“綠底紅字”等不容易閱讀的配色。

特別是在為某些特殊人群設計界面時，要考慮到用戶的年齡層。例如，年長的老人來使用App時，就要特別注意使用較恰當?shù)奈淖肿痔柎笮?，盡量避免用小號字體。

考慮到用戶的特殊性，在“微信”公眾號的詳情內(nèi)容頁面右上方，要有“調(diào)整字號”的貼心提示，用戶可以通過放大字號，來加大文字行間距以方便閱讀，以此為用戶建立有效的閱讀環(huán)境提示用戶體驗。一款好的App應用，自己會說話。例如，由愛范兒推出的iPhone客戶端App“數(shù)讀”（見圖6）。

圖6 “數(shù)讀”App界面設計③

這是一個直接用鮮明的文字設計作為主要元素來設計的App新聞資訊產(chǎn)品，運用字體可以設計出不一樣的版式和視覺效果?！皵?shù)讀”，即用數(shù)字讀懂世界。界面設計是它的一大亮點，整個界面，都是依靠“字體”來演繹App界面設計風格的，沒有多余的元素，它用碩大的字體——“數(shù)字”來吸引你的眼球，其目的是用該數(shù)字來告訴用戶代表的是什么新聞內(nèi)容。如果用戶想詳細看該數(shù)字代表的詳細內(nèi)容，那么用戶可以往上滑動界面，即會出現(xiàn)新聞詳情和來源網(wǎng)址。在界面設計里，有意識地將標題數(shù)字和正文所用的文字大小區(qū)別開來，標題的大數(shù)字用來作為界面的背景，占據(jù)頁面1/3的位置。新聞詳情的文字，采用由灰色到黑色透明轉換的方式，區(qū)別明顯，適宜閱讀?！皵?shù)讀”，黑白灰為主色調(diào)配以紅色為鏈接色的極簡設計，給用戶以強烈的視覺沖擊力，更是以一種自然而直接的方式，讓用戶輕松自如地獲取想要的信息[3]。可以說，這是一款用戶一旦裝上，就會讓其愛不釋手的應用。

2.體驗的“易用性”

在互聯(lián)網(wǎng)時代，“用戶體驗”是一個使用頻率最高的專有名詞。用戶大部分時間會在走路、坐車、開會、與人交談等移動場景中，來使用App應用。因此，為移動終端設計之前，設計師必須親身感受到用戶的使用場景及手指的操作過程是否合適，必須能站在使用者的角度，去體驗、感受[4]。

（1）優(yōu)化最常用的交互功能。設計師應將精力集中，關注移動用戶在移動設備中要獲得及需完成的主要任務，盡量精簡主要信息，不要妄圖把應用的全部功能、操作都暴露出來，設計手機App要做個優(yōu)先級設定，把用戶最想關注的核心內(nèi)容和功能，放在界面的主要位置上。復雜的界面，對新用戶來說，意味著認知與使用操作的負擔加重。從界面的布局上，要讓用戶找到非常明顯的功能選項，為用戶提供操作指示，如果有操作失誤，也能快速找到相關提示。

（2）讓按鈕容易點擊。按鈕是App界面設計中伴隨著用戶的點擊行為的特殊區(qū)域，由于按鈕點擊行為是將用戶引向重要步驟，告訴用戶現(xiàn)在在哪個位置可以去哪個位置。操作欄上的操作按鈕，用來展示APP 中的最重要功能的操作。因此，在移動設計上對按鈕有較高的要求。按鈕設計要達到“點擊暗示”的效果，凹凸感、動態(tài)轉換、陰影效果等，均是這一原則的體現(xiàn)。同時，按鈕中的可點擊范圍，最好是整個按鈕，而不僅限于按鈕圖片上的文本區(qū)。結合移動終端屏幕大小的限制，按鈕的設計必須確?？牲c擊的尺寸范圍夠用戶點擊，不要讓用戶的拇指難以觸碰，防止“fat finger”胖手指操作失誤（常指由于按錯鍵）的發(fā)生。

（3）預見用戶動作。好的設計要以人為本，方便用戶的使用習慣。日本設計大師深澤直人提出了“無意識設計（Without Thought）”，他的設計理念更多是在用戶需求層面的考慮，深入探究產(chǎn)品的本身，即：“將無意識的行動轉化為可見之物”。一款名為“Clear”的App應用（見圖7），以任務和待辦事項清單設計的應用見長，整個體驗非常流暢，用戶幾乎可以順利完成相關任務操作，從左到右滑動即完成待辦事項，從右到左滑動即刪除待辦事項；這些都是用戶在直覺反應下去探索和執(zhí)行的操作。

3.屏幕的“響應性”

響應式設計（Responsive web design，通常縮寫為RWD），也可以稱為自適應設計，它更像是一種對移動設計的全新思維方式，作為設計師，不再是局限于傳統(tǒng)的PC電腦屏幕，而是需要為不同的平臺、不同的屏幕大小的終端上設計出跨平臺的統(tǒng)一視覺效果。

移動終端需要考慮到界面是可變化的：橫向或是縱向。屏幕的變化，意味著移動web設計需要重新考慮視覺的展示效果。此外，移動終端的特點和新的操作方式，對移動web的設計提出了新的要求。針對不同功能的App，選擇適合的版式構圖類型，大膽的結合板式設計的一些經(jīng)典的形式，也許能為我們的設計拓展新的思路。

手機的界面設計跟用戶的習慣緊密結合，當手機擺放的位置不同，界面也會隨之更改。目前主要就是橫和豎兩種界面，這就給界面設計增加了一定的難度。同一個設計稿需要適應兩種規(guī)格的設計界面。iPhone和iPad這種手持移動設備都是類似的設計要求，需要橫和豎的兩種版面設計方案。例如，在iPad移動終端設備上，臺灣景文科技大學的“景文視傳”App電子書設計里面，由于電子書作品自身展示的內(nèi)容的局限性，專門為橫式或豎式閱讀體驗的提示，讓用戶在閱讀電子書的時候，不斷擺放，以便用戶找到自己感覺舒適的視覺體驗。不過，隨著智能手表、智能電視等的蓬勃發(fā)展，響應式所需要“響應”的屏幕尺寸范疇，再一次得到了擴展。

4.交互的“創(chuàng)新性”

在現(xiàn)今琳瑯滿目的App中，如何脫穎而出？設計師要考慮的，不光是產(chǎn)品如何更合理的展現(xiàn)結構與功能，更重要的是思考自己的App是否能做到簡便易懂的同時，又給用戶新穎感。此時，有限的屏幕空間緊靠文字的提示是不夠的，App需要更多的新鮮血液——“動效設計”[5]。

“樂流”這款音樂類App應用（見圖8），會給用戶帶來驚喜，因為用戶會發(fā)現(xiàn)，整個交互突破了常規(guī)的限制、將語言交互功能發(fā)揮到了獨特和出彩極致的層面，搜索音樂的過程只需要用戶“按住任意位置說話”的提示，即可播放用戶所要聽的歌曲或歌手專輯。這款應用是在設計師不斷思考用戶需求的基礎上，用更簡單的交互努力，實現(xiàn)了功能與美觀之間的平衡。

圖8 “樂流”App界面設計③

與紙質書籍只能單層靜態(tài)顯示相比，無論是iPhone還是iPad，都可以有音效和動態(tài)的效果。這與傳統(tǒng)網(wǎng)頁上的動態(tài)效果，也不完全一樣，傳統(tǒng)的網(wǎng)頁更多的是通過鼠標與用戶的交互產(chǎn)生的動態(tài)，而針對移動終端設計的界面設計，則需要手與屏幕的接觸，如果將紙質書籍與傳統(tǒng)網(wǎng)頁的設計習慣，移植到觸摸屏設備上，實在是水土不服。因此，設計師可以通過擬物化的視覺外觀與聽覺反饋，來強化動態(tài)效果。ipad上的界面設計（見圖9）就是參考了翻書這樣一個動態(tài)過程，模擬出了類似的動態(tài)效果 。

圖9 模擬翻書動態(tài)⑤

四、未來展望

一款優(yōu)秀的App應用，它應該在視覺、功能、交互等體驗上都是完善且出眾的。隨著互聯(lián)網(wǎng)和移動終端的不斷的革新，特別是觸摸等新技術的出現(xiàn)和發(fā)展，給App界面設計帶來了更多的變化和新的要求，在設計移動端網(wǎng)頁和App應用的時候，在滿足傳統(tǒng)的設計要求的基礎上，更應該注意新技術帶來的變化，注重新技術帶來的互動性、易讀性、自適應等要求，使App等移動應用的設計更好地吸引用戶，傳遞主題，真正地黏住用戶。

未來，萬物互聯(lián)。大量的移動終端，極大地豐富了設計的多種可能性，可以發(fā)現(xiàn)未來還有大量的未知的可能性，等著我們?nèi)グl(fā)現(xiàn)與探索研究，車聯(lián)網(wǎng)及車載系統(tǒng)界面設計（見圖10）、健康醫(yī)療傳感器、智能首飾、智能手表、顯示設備等這些新技術設備，將與移動應用溝通，多屏或跨屏將成為常態(tài)化。未來為觸摸而設計將跨界多個領域，表現(xiàn)出個性化與多元化的發(fā)展趨勢，并不斷地為人們創(chuàng)造出視覺與交互體驗上的驚喜。

圖10 車載系統(tǒng)界面⑤

注釋

① 圖1來源：手機及網(wǎng)頁截圖.

② 圖2來源：蘋果App Store.

③ 圖3、圖6、圖8來源： iPhone界面截圖.

④ 圖4來源：iPad界面截圖.

⑤ 圖5、圖7、圖9、圖10來源：網(wǎng)絡.

[1] MARTIN C.決戰(zhàn)第三屏：移動互聯(lián)網(wǎng)時代的商業(yè)與營銷新規(guī)則[M].唐興通，張延臣，鄭常青，譯.北京：電子工業(yè)出版社，2012：56-57.

[2] TIDWELL J.界面設計模式[M].2版.De Dream，譯.北京：電子工業(yè)出版社，2013：431-435.

[3] 郝凝輝，魯曉波.實體交互界面設計的方法思辨[J].裝飾，2014（2）：34-37.

[4] KRUG S.點石成金：訪客至上的網(wǎng)頁設計秘笈[M].2版.De Dream，譯.北京：機械工業(yè)出版社，2006：117-123.

[5] 搜狐新聞客戶端UED團隊.設計之下：搜狐新聞客戶端的用戶體驗設計[M].北京：電子工業(yè)出版社，2014：201-206.