跨平臺移動終端APP界面的創新設計思考

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

【關鍵詞】iOS系統；Android系統；認知隱喻；品牌風格

中圖分類號： 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

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

1 iOS及Android系統的設計特點

1）iOS系統的設計特點

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

2）Android系統的設計特點

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

2 iOS及Android系統的差異性對APP界面設計的影響

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

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

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

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

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

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

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

3 對跨平臺移動終端APP界面的創新設計思考

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

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

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

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

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

2）跨平臺的品牌風格統一性

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

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

4 結語

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