1、手機客戶端UI設計之手機平臺之爭2011年07月06日 1. 當前手機平臺的爭鋒為了占領移動互聯網的制高點，當前的幾大IT巨頭都以手機平臺為基礎展開爭奪。占領移動平臺就是占領了用戶的移動桌面，也就為自身的移動服務爭取到了最佳位置。 微軟公司推出windows phone 7, 曝光了windows 8；蘋果公司也開了iOS 5的發布會；谷歌的Android 3.0的發布，Android 2.4 的若隱若現等等；大家都在努力提升平臺體驗。另外，惠普的Web OS、黑莓公司也都在研制和發布新平臺，也引起了業內人士的極大關注。 從當前市場占有率和未來的發展趨勢看，客戶端適配上，主要還是考慮iOS ，

2、Windows，Android三個系統為主，其他的系統在國內還難占據主流，這里不解釋。Android手機的增長最快；iOS手機在國內的占有量也增長很快，利好消息也不斷，電信、移動都在談；Windows主要看與Nokia的未來合作，前景不小。 因此，在本文中，簡單的介紹一下這三個主流平臺的交互特性，以幫助剛從事客戶端交互設計的同行們更快地了解它們的基本特性，為能開發出更好體驗的客戶端提供便利。2. 各個平臺的特點及優勢1）平臺的硬件特性a) 平臺的按鍵 手機按鍵是系統自帶的，平臺也會把按鍵的功能帶入到系統的客戶端應用中，他也天然地與用戶操作相融合。 手機按鍵一般分為兩類，功能鍵和導航鍵。功能鍵被

3、指派為特定的功能，用戶按了后，觸發對應的功能，一般與屏幕內容關系不大，如拍照鍵，只是啟動拍照，在其他的客戶端中基本無效。 另一類是導航鍵，被賦予了特定的邏輯規則，她的操作與屏幕有一個邏輯映射的關系，但操作與操作對象分離，用戶按鍵后，在屏幕中得到對應的反饋。如【Back】映射為返回前一頁，點擊【Back】后，屏幕的內容返回到上一頁。 功能鍵能直接啟動功能，它本身對交互的影響不是很大。而導航鍵則是交互設計的重要組成部分。主要應該注意以下幾點：（1） 客戶端的交互導航設計應該支持平臺的導航按鍵的操作。不管你是否已經在屏幕中有虛擬按鈕代替了按鍵已有的功能，也應該支持系統按鍵的導航邏輯。（2） 客戶端用

4、到了平臺的功能鍵對應的功能，應該支持功能鍵的操作。如，在客戶端中需要調節音量，則應該支持系統音量的按鍵來控制。（3） 所有客戶端對按鍵的操作都必須保持一致，不要隨意互用。b) 平臺的屏幕適配 由于不同平臺的開放程度很不一樣，不同的平臺產品對于屏幕的大小的設計很不一樣，有些只有很少的尺寸分布；有些有很多不同的尺寸，這給適配帶來了很多問題和麻煩。屏幕適配設計參見我之前的博文。c) 平臺支持的其他硬件：傳感器，屏幕特性等 iPhone 推出來后，迅速風靡全球，創造了一個革新的時代（也有人說iPhone本身不是革命，但是他創造了一次革命），除了設計本身外，幾個傳感器的合理使用也立下了汗馬功勞。主要包括

5、，重力加速度傳感器、陀螺儀、接近傳感器、電子羅盤等。這些傳感器在不同的情景下，創造了很多獨特的體驗，極大的增強了手機的可玩性。 不同的平臺或是手機會支持不同的傳感器，在界面設計時，也需要考慮它們在不同平臺上支持的普及程度，以及不支持的時，能提供的相關代替設計方案。2）平臺的界面特性a) 應用入口形式 應用程序的啟動入口是指用戶啟動程序的交互界面及操作形式。不同的平臺上，對于啟動入口操作和界面也有較大的區別，這是展示平臺特性的第一印象。同時，不同平臺及手機公司為了使品牌形象更加突出也會在這里多做文章。從交互特性上看，應用程序的啟動入口主要有以下幾個特征和注意點：b) 頁面基本結構 頁面的基本結構

6、布局，決定了手機界面的主要風格，在不同的平臺上為了表現出設計的差異和風格，在界面布局上都有所不同。但是，總的來說還是沒有與iOS有何本質的不同，主要在形式上略微的不同。iOS：Android：Windows Phone7： Android 的手機廠商都更改了原生系統的界面，不同Android手機在界面的展示上多有不同。在Android客戶端的設計上，本身有不少都是從iOS上直接移植了界面，導致了它的更多不同。但是不管怎么樣，界面上操作和導航邏輯要符合平臺本身的特征。 在框架的設計上，我是傾向于把最核心的操作放在底部，方便用戶的單手操作。iOS的設計把導航按鈕方在左上角，遠離大拇指的操作區域，就

7、是容易造成用戶脫手“甩機”，也影響操作效率。c) 主要導航特性： 導航作為一個平臺的主要交互特性之一，不同平臺之間也存在較大的差異。iOS在設計上邏輯嚴密，所有的應用自成一體、渾然天成；相比之下，Android像是由iOS和android設計師雜交的產物，在不同的應用上導航系統混亂，不太成體系；Windows Phone 7 的導航在界面展示上，標題采用全景圖的形式，真是另辟蹊徑，自成體系。 在這里主要講一下不同平臺下的導航按鍵、title和Tab、返回邏輯、退出程序幾個小點。d) 菜單及操作形式 這幾個代表當前最高水平的移動平臺，都是以手指觸摸為基礎的直接操作界面。iOS只提供了直接操作的方

8、式；Android和Win Phone 7 還增加了幾個硬鍵按鈕配合操作，但總體也是以直接操作為主。幾個平臺都有菜單操作，但是展示的形式不同，但也在相互的借鑒。 由于手機屏幕較小，一屏內容往往顯示一個對象或信息單元，toolbar的操作正是對這個單元進行操作的。如果是對單元內的對象操作，更多的設計都是在界面中直接設置操作對象（如屏幕內的操作按鈕）。e) 信息提示 信息提示方式，各個平臺之間也都在相互學習。信息list作為Android系統的最核心的設計優勢，現在iOS5也開始應用。同時許多Android手機及鎖屏應用在鎖屏界面與提示信息間做更多地權衡，使用戶能更快地處理信息，提升效率。 各個平

9、臺都提供了對話框的形式，只是在叫法上略有不同，如alert，popup，dialog，raw notification等，其主要的交互操作沒有區別，都是對話框的基本操作形式。也有一些變異的反饋提示框，如android系統提供的快速消失的反饋提示，做成輕量級的，對用戶干擾也減到更少。 Android系統提供的狀態欄的消息提示機制，是處理多應用push信息的一個十分創新的設計，可以說是android系統的最佳設計。用戶可以在任何界面中，快速的向下撥動狀態欄呼出信息list，也可以再向上撥動手指收起提示信息。但是，在最近看到的iOS5上也看到了它的更新特性中，這一點就赫然在列。所以，有好的特性，不同

10、的平臺也會相互學習。 iOS上也有它的創新提示，就是在程序圖標上來進行新消息數量的提示，這在后面的幾個平臺上都有應用，只是不同的平臺上，表現形式略微不同，就是視覺上微創新。 Windows Phone 7 提供了tile形式的提示信息顯示方式，那只是樣式上的不同，在設計的本質上，差異不大。具體可以參見鐘磊的博文，手機系統消息通知設計的整理和分析3. 移動應用在多平臺適配的原則 一個產品的規劃，很少會僅局限于某一個平臺，都會進行跨平臺的適配。那應該如何進行適配呢？ 這里主要有兩個觀點，以設備為中心來設計還是以應用為中心來設計；以設備為中心的設計師認為，應用界面應該與設備的設計規范保持一致，讓用戶

11、快速上手，不覺得陌生。以應用為中心的設計師認為，保持所有的平臺上的一致性，同時，很多多平臺的應用開發工具也是為開發人員提供了多平臺界面移植的便利，但是對用戶體驗是否好，卻有待思考。在多平臺適配中遵循如下原則1） 客戶端的設計規范應該以平臺規范為基礎2） 在多平臺中，應保持統一的品牌標識，包括logo，視覺風格，核心功能點等等。3） 更多地與平臺的特性相融合，運用平臺提供的特色功能，來減少用戶的輸入或者其他體驗提升點。如拍照輸入，傳感器的使用等。每個平臺都需要注意的問題有：1） 移動的特性決定了手機信號的強弱不均，如何處理在弱信號下的設計？2） 需要考慮在斷網情況下，如何快速恢復中斷？3） 如何設計手機推送的問題？4） 如何盡量避免手機的固有限制，如屏幕小，輸入不方便，電源緊張等？5） 如何盡量通過手機的特有特性來提升體驗，如各類傳感器，聲音提示等？4. 后記 當我從3月份擬好提綱寫這幾篇文章到現在，不過短短幾個月時間，各大公司的移動平臺就都推出了新的版本，對平臺特性總結的速度有些趕不上平臺更新的速度。 從本質上說，iOS是一個開創性的設計，也引發了客戶端的高潮，其他的平臺還沒有脫離iOS的痕跡，雖然各大公司都在努力創新，形成自己的風格，但是還遠沒有到開創、革命的程度。 除了這三大平臺外，Blackberry，Palm W