跨平臺移動終端APP界面的創(chuàng)新設計思考

【摘 要】本文從目前在移動終端占市場份額最大的兩個操作系統(tǒng)iOS系統(tǒng)和Android系統(tǒng)的設計特點分析入手，闡述了兩個系統(tǒng)差異的深層次原因，并闡述了跨平臺移動終端APP界面設計受iOS系統(tǒng)和Android系統(tǒng)設計規(guī)范和特點的影響所面臨的設計差異性問題。最后結合筆者前期的研究結論以及對APP界面設計的案例分析，提出了關于跨平臺移動終端APP界面的創(chuàng)新設計思考：建立整體多感官的認知隱喻系統(tǒng)展現功能可供性，以及跨平臺的品牌風格統(tǒng)一性。

【關鍵詞】iOS系統(tǒng)；Android系統(tǒng)；認知隱喻；品牌風格

中圖分類號： TP872 文獻標識碼： A 文章編號： 2095-2457（2018）03-0031-004

Innovative design thinking of the mobile terminal APP interface of cross-platform

YANG Jie

（Chongqing University of Posts and Telecommunications，Chongqing 400065，China）

【Abstract】This paper starts with the analysis of the design features of the two-operating systems iOS and Android systems， which have the largest market share in mobile terminals， expounds the deep reasons for the difference between the two systems， and the differences between the design of cross platform mobile terminal of APP interface design by iOS and Android systems design specifications and features of the facing problems. Finally， combined with the author's early research conclusion and analysis of the APP interface design of the case， put forward the innovative design thinking on the mobile terminal APP interface cross platform： the establishment of the overall system of multi-sensory cognitive metaphor to show the function of supply， and cross platform unified brand style.

【Key words】iOS systems； Android system； Cognitive metaphor； Brand style

目前，移動終端設備尤其是智能手機使用的操作系統(tǒng)中，占市場份額最大的兩個操作系統(tǒng)非iOS系統(tǒng)和Android系統(tǒng)莫屬。本文將從這兩個系統(tǒng)的設計特點入手，探討跨平臺移動終端APP界面的創(chuàng)新設計思考。

1 iOS及Android系統(tǒng)的設計特點

1）iOS系統(tǒng)的設計特點

iOS系統(tǒng)是蘋果公司開創(chuàng)的圖形化操作系統(tǒng)，用戶可以使用物理按鍵和多點觸控對移動終端設備進行控制并與系統(tǒng)進行互動。iOS的系統(tǒng)架構通常是通過視覺隱喻以引導式的方式進行功能的設定，提供給用戶有限的、高度統(tǒng)一的交互方式和路徑，為用戶排除了很多認知干擾和選擇負擔。根據iOS的系統(tǒng)架構層次，用戶通過直接操作媒體層和可觸摸層就可以按照一定的邏輯實現與系統(tǒng)的交互，獲取到想要的信息。而在用戶的交互過程中隨時可以通過單擊Home鍵返回到系統(tǒng)主界面，且雙擊Home鍵可以實現后臺應用程序之間的選擇切換。所以說“iOS系統(tǒng)的本質可以分解為：演示隱喻、直接操縱的概念和Home鍵的中心性”[1]。iOS系統(tǒng)的“屏幕界面以應用程序方格的形式呈現，可以有最多四個程序圖標被固定在最底部Dock欄上”[2]，這一視覺界面的布局結構確立了應用于iOS系統(tǒng)上的APP界面區(qū)別于Android系統(tǒng)的結構特征。此外，iOS系統(tǒng)“定義所有APP的入口為圖標，所有APP的出口為Home鍵”[3]，所有APP的前進、返回等交互操作均由APP中的虛擬按鈕通過用戶的手勢操作完成，另外不提供系統(tǒng)統(tǒng)一可用的操作欄按鈕。

2）Android系統(tǒng)的設計特點

2007年11月5日，谷歌公司正式向外界展示了名為Android的操作系統(tǒng)，并且在這天Google宣布建立一個全球性的聯盟組織，這一聯盟將支持谷歌發(fā)布的手機操作系統(tǒng)以及應用軟件，將共同開發(fā)Android系統(tǒng)的開放源代碼。Android系統(tǒng)從誕生之日起就是一個有別于iOS系統(tǒng)的一個自由開放的系統(tǒng)。早期的Android系統(tǒng)帶有極強的Google“以工程師為主導”的文化特色，在Android4.x之前，Google對應用開發(fā)市場沒有一個統(tǒng)一和嚴格的標準，導致Android應用良莠不齊。Android在5.0版本時經歷了一個徹底的變革，Material Design出現了。Material Design結合卡片式設計，講究自然過渡，顏色更鮮艷并傾向于用顏色來進行視覺隱喻提示，更強調動畫效果，規(guī)范了Android系統(tǒng)的運動元素。這套設計系統(tǒng)為應用Android系統(tǒng)的智能手機、平板電腦、臺式機等設備的用戶界面提供了一致、美觀的視覺體驗以及交互的設計方法。但它只是一個設計標準的參考，各個品牌應用商依然可根據自己的實際情況對運行的Android系統(tǒng)進行個性化設計。

2 iOS及Android系統(tǒng)的差異性對APP界面設計的影響

iOS系統(tǒng)和如今在Material Design指導下的Android系統(tǒng)最大的差異性在于iOS系統(tǒng)是一個更加強勢和封閉的系統(tǒng)，所有運行于iOS系統(tǒng)上的APP都必須遵循它統(tǒng)一的設計規(guī)范，而Android系統(tǒng)則更加開放和自由，沒有做太多的強制約束。這就自然導致了同一款APP在iOS系統(tǒng)和Android系統(tǒng)上界面設計的差異。

1）對APP界面視覺設計的影響

首先在界面的布局結構上，iOS系統(tǒng)的界面區(qū)域劃分為狀態(tài)欄、導航欄、內容區(qū)域和標簽欄，其中狀態(tài)欄屬于系統(tǒng)欄，放置如時間、電量、移動信號等系統(tǒng)信息顯示。Android系統(tǒng)的界面區(qū)域劃分為狀態(tài)欄、應用欄、標簽欄、內容區(qū)域和導航欄，其中狀態(tài)欄和導航欄為系統(tǒng)欄，狀態(tài)欄放置如通知圖標、電量和信號強度等，導航欄在底部，包括返回、主頁和最近使用的應用列表三個按鈕。但是導航欄在不同的移動終端設備上設計的方式略有不同，有的會直接出現在界面屏幕中，有的則是出現在移動端設備的機身上。兩個系統(tǒng)由于區(qū)域劃分不同，且高度尺寸也不同，自然造成了同一款APP很難用一套布局設計同時適應iOS系統(tǒng)和Android系統(tǒng)，即使大致相同也會出現布局細節(jié)的差異。如圖1和圖2分別是iOS系統(tǒng)和Android系統(tǒng)的“淘寶”APP首頁設計，布局基本做到了一致，但是還是有不少布局細節(jié)上的差異。如iOS系統(tǒng)的“淘寶”APP將頂部的狀態(tài)欄和導航欄設置為統(tǒng)一的橙色漸變色，搜索框使用的是iOS系統(tǒng)搜索框的倒圓角設計，而Android系統(tǒng)的“淘寶”APP頂部的狀態(tài)欄默認為系統(tǒng)的黑色，應用欄中的搜索框使用的則是底部單線條的設計。

其次，iOS系統(tǒng)和Android系統(tǒng)所使用的字體截然不同，對字號和行距的規(guī)范要求也不盡相同。雖然iOS 11的字體相對之前的iOS系統(tǒng)字體已經加粗了很多，但和Android系統(tǒng)的字體相比給人的視覺感受還是相對纖細，給APP界面留出了更多的留白空間，不會給用戶太大的視覺壓迫感。

2）對APP界面交互設計的影響

首先在APP界面的返回操作上，iOS系統(tǒng)有著較為嚴格的統(tǒng)一性和唯一性，返回上一級界面必須通過在APP界面設置返回圖標或支持向右滑動的手勢，用戶才能實現返回上一級界面，返回圖標通常是設置在頂部導航欄的最左側。而Android系統(tǒng)由于提供了一個標準的系統(tǒng)返回鍵來讓用戶點擊返回到上一級界面，所以并沒有對返回的交互設計做統(tǒng)一的要求，這就使得各APP在設計時可以提供給用戶更多的交互操作選擇。如圖3是“今日頭條”APP的新聞詳情頁界面，在這一頁面上對返回上一級界面的設計與其在iOS系統(tǒng)中的設計保持了一致，在頂部應用欄的左側設計了左箭頭提示用戶點擊返回，但用戶也可以點擊底部導航欄最左側的系統(tǒng)返回鍵或采用向右滑動的手勢實現返回上一級界面。而有的APP則在Android系統(tǒng)的版本中取消了在界面中保留返回上一級界面的圖標設計，讓用戶統(tǒng)一使用系統(tǒng)的返回按鍵或向右滑動的手勢。也有的APP在Android系統(tǒng)的版本中將返回上一級界面的圖標放在左下角。

其次在APP界面的交互手勢的功能操作方面，兩個系統(tǒng)也存在著明顯的差異。如向左滑動手勢和長按手勢的應用，iOS系統(tǒng)中的向左滑動手勢支持APP消息列表的交互功能操作，如置頂、標為未讀、刪除，要退出消息列表的交互功能操作則需采用向右滑動手勢。iOS系統(tǒng)中的向左滑動手勢還支持頂部導航欄中的菜單導航間的界面切換，但不支持底部標簽欄的主導航間的界面切換。而在Android系統(tǒng)中，向左滑動手勢卻不支持APP消息列表的交互功能操作，而是需要通過長按手勢來實現，如果要退出APP消息列表的交互功能操作則只能通過底部導航欄的返回鍵。另外，Android系統(tǒng)中的向左滑動手勢既支持APP底部導航欄界面間的切換，也支持頂部標簽欄中的菜單導航間的界面切換，但優(yōu)先支持后者。

3 對跨平臺移動終端APP界面的創(chuàng)新設計思考

基于以上分析，在不同的操作系統(tǒng)下沒有完全通用的設計方案。雖然Android系統(tǒng)后來推出了Material Design，但是由于iOS系統(tǒng)更早的從一開始就有清晰、統(tǒng)一的設計原則，且一直延續(xù)了下來，所以目前跨平臺移動終端APP的界面設計大部分都以iOS系統(tǒng)的設計規(guī)范作為通用的設計版本的指導。但筆者認為無論以哪個系統(tǒng)的設計原則作為指導，要提高移動終端APP界面的設計水平，為用戶提供更好的使用體驗，不能過多地從某一系統(tǒng)或平臺的特點或要求出發(fā)，設計師需要集中精力關注用戶的認知特點，并研究用戶的行為邏輯對用戶界面設計的影響以及不同移動終端的屏幕尺寸對用戶的使用影響來思考通用的APP內容的設計。因此，筆者結合前期對移動終端APP界面設計特點和方法的研究成果，嘗試對跨平臺移動終端APP界面的創(chuàng)新設計思考再做進一步的研究，得出的結論如下：

1）建立整體多感官的認知隱喻系統(tǒng)展現功能可供性

“20世紀70年代末，詹姆斯·吉布森（James J. Gibson）在認知心理學的研究過程中創(chuàng)造了‘功能可供性的概念。功能可供性是事物自身特點所顯示出的操作可能性?！盵4]。這一觀點運用到移動終端的APP界面設計上就是一個成功的APP界面應該要實現讓用戶在人機交互的過程中不需要調動太多的理性思維，僅靠直覺就能領會到操作的可能性，輕松進行操作。雖然iOS系統(tǒng)是以視覺隱喻為主來引導用戶進行功能操作，但移動終端設備現在的技術是可以通過無處不在的各種視覺、聽覺、觸覺、本體感受體驗不斷刺激用戶，其獨特的感官體驗與使用對象之間的關系不僅僅是用戶和所見屏幕之間的視覺認知關系，還有和設備本身的互動關系。在筆者的前期研究中也提出了通過“合理的多感官認知引導交互設計”[5]，在此基礎上，筆者認為建立整體多感官的認知隱喻系統(tǒng)展現功能可供性對于提高用戶的認知和情感體驗是十分必要的。

首先需要對提供給用戶的功能可供性程度進行分級，越重要的可觸控元素應該承擔越強的功能可供性。結合移動終端用戶的認知特點“視覺經驗占主導地位影響用戶認知”[6]，在建立整體多感官的認知隱喻系統(tǒng)展現功能可供性的過程中，應主要通過不同的視覺可觸控元素設計來構建最強的功能可供性層級。對用戶的最主要的行為召喚可使用顏色鮮艷的按鈕，較次要的行為召喚使用動態(tài)圖片/圖標，最常用的行為召喚使用靜態(tài)圖片/圖標/文字組合的鏈接表現等。如圖4是“大眾點評”APP的“限時秒殺”界面，界面中最重要的行為召喚就是用戶下單搶購，在此界面中通過設計的黃色“馬上搶”按鈕的視覺隱喻很醒目地展現了這一功能可供性，且將此按鈕布局在界面右側更符合右手操作的用戶的行為習慣。

其次，在建立視覺認知隱喻為主的隱喻系統(tǒng)的基礎上，加強對用戶聽覺、觸覺、本體認知隱喻的建立以展現有特殊功能可供性操作的引導設計。移動終端的用戶使用行為始終是碎片化的，僅僅依靠視覺認知隱喻是無法完全滿足用戶的需求的。以“高德地圖”APP為例，該APP在之前的版本中提供了一項在駕車導航的過程中根據路況臨時調整路線的功能給用戶，這項功能采用的是文字提示+語音提示的方式提醒用戶，但如果用戶同意切換路線則需要在駕車過程中去點擊屏幕進行確認，APP才會進行路線的切換。在用戶處于駕車的移動環(huán)境中如果還這樣依賴視覺隱喻進行功能可供性操作，無疑增加了用戶駕車過程的安全隱患，是不符合用戶的實際需求的。所以，在用戶沒有將移動終端產品拿在手里使用時如何提示用戶進行有關操作，這就需要設計出視覺以外的其它感官的認知隱喻。設計師可以利用麥克風增加語音輸入操作的隱喻設計，還可以通過設計個性化的聲音隱喻或者振動來提示用戶，但在進行聲音設計時盡量采用逗號音，越短暫就越容易被用戶接受?！案叩碌貓D”APP在最新的版本中就做了設計改進，增加了切換路線時用戶可通過語音下達確認命令的設計。隨著技術的不斷發(fā)展，VR、AR在移動端設備上的運用，可以考慮更多地使用移動端設備的各種傳感器來進行用戶操作，如通過環(huán)境傳感器、運動傳感器讓用戶不需要用手操作屏幕就可以發(fā)出指令操作某些APP功能。依靠聽覺、觸覺、本體認知建立的特殊功能可供性操作的設計更適合用于一些需要反復操作且簡單的功能，但也需要有與之相配合的視覺隱喻才能降低用戶的初次學習成本，比如通過圖標、文字說明等來對這些特殊使用做一些必要的提示。

2）跨平臺的品牌風格統(tǒng)一性

雖然在不同平臺和操作系統(tǒng)下沒有完全通用的APP設計，但也不能完全用不同的設計方案，這樣既會造成設計和開發(fā)成本的高昂，又會給用戶造成認知困擾，所以移動終端的APP在不同平臺間的界面設計上還是需要保持一定的品牌風格統(tǒng)一性，尤其是視覺設計風格和視覺隱喻系統(tǒng)。對于與可穿戴設備相關的APP，由于通常會涉及到智能手機和移動可穿戴設備兩個完全不同的使用終端，更需要設計師有意識地去保持品牌風格的統(tǒng)一性才能在情感和認知上帶給用戶更好地使用體驗。以米兔兒童電話手表中的應用及其智能手機端APP的界面設計為例（圖7-圖8）。通過圖5和圖6的對比可以看到在智能手表端的“運動記步”和“講故事”應用的圖標設計與智能手機iOS系統(tǒng)中的APP界面相對應的圖標設計無論在視覺隱喻圖形的設計上還是色彩的設計都是完全不同的。尤其是“運動記步”，圖標的隱喻圖形一個設計的是秒表，一個設計的是顆心。再看圖5和圖7的對比，同樣的語音聊天界面，智能手表中的界面設計了媽媽的頭像，沒有孩子的頭像，而在智能手機iOS系統(tǒng)中的界面設計了孩子的頭像卻又沒有跟智能手表端一樣的媽媽的頭像。通過此案例分析可以看到混亂不統(tǒng)一的視覺隱喻系統(tǒng)會讓用戶對跨平臺移動終端產品的認知帶來一定困擾。

雖然iOS系統(tǒng)和Android系統(tǒng)從最初的開發(fā)模式就不一樣，設計規(guī)范也有很多差異，但也不是不能做到保持同一款APP的品牌風格統(tǒng)一性。首先，設計師需要清楚了解各系統(tǒng)的特點，但最需要關注的還是用戶的認知特點和行為邏輯，根據APP的信息架構和具體內容確定適用于所有目標系統(tǒng)平臺上的布局、導航模塊，確定出用戶使用的通用主流程。其次，確定統(tǒng)一的圖形/圖標設計風格、色彩系統(tǒng)、背景紋理、陰影顏色、模糊半徑以及其他具體的視覺元素應用規(guī)范。規(guī)范好字體系統(tǒng)，對于圖文結合的鏈接文字和詳情頁的文字要分開進行規(guī)范的設定。最后，盡量采用約定俗成的操作手勢，越簡單越好，以降低在不同運行系統(tǒng)和移動終端設備上用戶進行交互操作的認知成本。如多使用點擊手勢、滑動手勢。

4 結語

隨著技術的不斷發(fā)展，跨平臺移動終端APP的設計會越來越呈現人性化的發(fā)展趨勢，本文對其創(chuàng)新設計的思考既是立足目前存在的問題，也是展望未來的探索。本文提出的從用戶需求和認知特點出發(fā)，將理論與APP產品特點結合，明確品牌設計目標和特點，采用有效的整體多感官的認知隱喻系統(tǒng)展現APP的功能可供性以及確定跨平臺的品牌風格統(tǒng)一性的思考，希望為跨平臺移動終端APP的界面設計提供借鑒和參考。

【參考文獻】

[1]Timothy Wood. iOS用戶體驗設計[M].毛姝雯，譯.北京：人民郵電出版社，2013.

[2]陳鑫萍.移動設備用戶體驗的易用性研究[D].杭州：浙江理工大學，2015：20.

[3]余振華.術與道—移動應用UI設計必修課[M].北京：人民郵電出版社，2016：102.

[4]艾米麗·布歇.匠心體驗—智能手機與平板電腦的用戶體驗設計[M].吳博，譯.北京：人民郵電出版社，2016：29.

[5]楊潔.基于用戶認知特點的移動終端APP界面設計[J].傳媒，2017（04）：65.

[6]楊潔.論移動終端APP用戶認知特點[J].設計，2016（19）：85.