手機(jī)客戶端UI設(shè)計(jì)之手機(jī)平臺(tái)之爭(zhēng)
1. 當(dāng)前手機(jī)平臺(tái)的爭(zhēng)鋒
為了占領(lǐng)移動(dòng)互聯(lián)網(wǎng)的制高點(diǎn),當(dāng)前的幾大IT巨頭都以手機(jī)平臺(tái)為基礎(chǔ)展開爭(zhēng)奪。占領(lǐng)移動(dòng)平臺(tái)就是占領(lǐng)了用戶的移動(dòng)桌面,也就為自身的移動(dòng)服務(wù)爭(zhēng)取到了最佳位置。
微軟公司推出windows phone 7, 曝光了windows 8;蘋果公司也開了iOS 5的發(fā)布會(huì);谷歌的Android 3.0的發(fā)布,Android 2.4 的若隱若現(xiàn)等等;大家都在努力提升平臺(tái)體驗(yàn)。另外,惠普的Web OS、黑莓公司也都在研制和發(fā)布新平臺(tái),也引起了業(yè)內(nèi)人士的極大關(guān)注。
從當(dāng)前市場(chǎng)占有率和未來(lái)的發(fā)展趨勢(shì)看,客戶端適配上,主要還是考慮iOS ,Windows,Android三個(gè)系統(tǒng)為主,其他的系統(tǒng)在國(guó)內(nèi)還難占據(jù)主流,這里不解釋。Android手機(jī)的增長(zhǎng)最快;iOS手機(jī)在國(guó)內(nèi)的占有量也增長(zhǎng)很快,利好消息也不斷,電信、移動(dòng)都在談;Windows主要看與Nokia的未來(lái)合作,前景不小。
因此,在本文中,簡(jiǎn)單的介紹一下這三個(gè)主流平臺(tái)的交互特性,以幫助剛從事客戶端交互設(shè)計(jì)的同行們更快地了解它們的基本特性,為能開發(fā)出更好體驗(yàn)的客戶端提供便利。#p#
2. 各個(gè)平臺(tái)的特點(diǎn)及優(yōu)勢(shì)
1)平臺(tái)的硬件特性
a) 平臺(tái)的按鍵
手機(jī)按鍵是系統(tǒng)自帶的,平臺(tái)也會(huì)把按鍵的功能帶入到系統(tǒng)的客戶端應(yīng)用中,他也天然地與用戶操作相融合。

手機(jī)按鍵一般分為兩類,功能鍵和導(dǎo)航鍵。功能鍵被指派為特定的功能,用戶按了后,觸發(fā)對(duì)應(yīng)的功能,一般與屏幕內(nèi)容關(guān)系不大,如拍照鍵,只是啟動(dòng)拍照,在其他的客戶端中基本無(wú)效。
另一類是導(dǎo)航鍵,被賦予了特定的邏輯規(guī)則,她的操作與屏幕有一個(gè)邏輯映射的關(guān)系,但操作與操作對(duì)象分離,用戶按鍵后,在屏幕中得到對(duì)應(yīng)的反饋。如【Back】映射為返回前一頁(yè),點(diǎn)擊【Back】后,屏幕的內(nèi)容返回到上一頁(yè)。
功能鍵能直接啟動(dòng)功能,它本身對(duì)交互的影響不是很大。而導(dǎo)航鍵則是交互設(shè)計(jì)的重要組成部分。主要應(yīng)該注意以下幾點(diǎn):
(1) 客戶端的交互導(dǎo)航設(shè)計(jì)應(yīng)該支持平臺(tái)的導(dǎo)航按鍵的操作。不管你是否已經(jīng)在屏幕中有虛擬按鈕代替了按鍵已有的功能,也應(yīng)該支持系統(tǒng)按鍵的導(dǎo)航邏輯。
(2) 客戶端用到了平臺(tái)的功能鍵對(duì)應(yīng)的功能,應(yīng)該支持功能鍵的操作。如,在客戶端中需要調(diào)節(jié)音量,則應(yīng)該支持系統(tǒng)音量的按鍵來(lái)控制。
(3) 所有客戶端對(duì)按鍵的操作都必須保持一致,不要隨意互用。
b) 平臺(tái)的屏幕適配
由于不同平臺(tái)的開放程度很不一樣,不同的平臺(tái)產(chǎn)品對(duì)于屏幕的大小的設(shè)計(jì)很不一樣,有些只有很少的尺寸分布;有些有很多不同的尺寸,這給適配帶來(lái)了很多問題和麻煩。屏幕適配設(shè)計(jì)參見我之前的博文。

c) 平臺(tái)支持的其他硬件:傳感器,屏幕特性等
iPhone 推出來(lái)后,迅速風(fēng)靡全球,創(chuàng)造了一個(gè)革新的時(shí)代(也有人說(shuō)iPhone本身不是革命,但是他創(chuàng)造了一次革命),除了設(shè)計(jì)本身外,幾個(gè)傳感器的合理使用也立下了汗馬功勞。主要包括,重力加速度傳感器、陀螺儀、接近傳感器、電子羅盤等。這些傳感器在不同的情景下,創(chuàng)造了很多獨(dú)特的體驗(yàn),極大的增強(qiáng)了手機(jī)的可玩性。
不同的平臺(tái)或是手機(jī)會(huì)支持不同的傳感器,在界面設(shè)計(jì)時(shí),也需要考慮它們?cè)诓煌脚_(tái)上支持的普及程度,以及不支持的時(shí),能提供的相關(guān)代替設(shè)計(jì)方案。
2)平臺(tái)的界面特性
a) 應(yīng)用入口形式
應(yīng)用程序的啟動(dòng)入口是指用戶啟動(dòng)程序的交互界面及操作形式。不同的平臺(tái)上,對(duì)于啟動(dòng)入口操作和界面也有較大的區(qū)別,這是展示平臺(tái)特性的第一印象。同時(shí),不同平臺(tái)及手機(jī)公司為了使品牌形象更加突出也會(huì)在這里多做文章。
從交互特性上看,應(yīng)用程序的啟動(dòng)入口主要有以下幾個(gè)特征和注意點(diǎn):

b) 頁(yè)面基本結(jié)構(gòu)
頁(yè)面的基本結(jié)構(gòu)布局,決定了手機(jī)界面的主要風(fēng)格,在不同的平臺(tái)上為了表現(xiàn)出設(shè)計(jì)的差異和風(fēng)格,在界面布局上都有所不同。但是,總的來(lái)說(shuō)還是沒有與iOS有何本質(zhì)的不同,主要在形式上略微的不同。
iOS:

Android:

Windows Phone7:

Android 的手機(jī)廠商都更改了原生系統(tǒng)的界面,不同Android手機(jī)在界面的展示上多有不同。在Android客戶端的設(shè)計(jì)上,本身有不少都是從iOS上直接移植了界面,導(dǎo)致了它的更多不同。但是不管怎么樣,界面上操作和導(dǎo)航邏輯要符合平臺(tái)本身的特征。
在框架的設(shè)計(jì)上,我是傾向于把最核心的操作放在底部,方便用戶的單手操作。iOS的設(shè)計(jì)把導(dǎo)航按鈕方在左上角,遠(yuǎn)離大拇指的操作區(qū)域,就是容易造成用戶脫手“甩機(jī)”,也影響操作效率。
c) 主要導(dǎo)航特性:
導(dǎo)航作為一個(gè)平臺(tái)的主要交互特性之一,不同平臺(tái)之間也存在較大的差異。iOS在設(shè)計(jì)上邏輯嚴(yán)密,所有的應(yīng)用自成一體、渾然天成;相比之下,Android像是由iOS和android設(shè)計(jì)師雜交的產(chǎn)物,在不同的應(yīng)用上導(dǎo)航系統(tǒng)混亂,不太成體系;Windows Phone 7 的導(dǎo)航在界面展示上,標(biāo)題采用全景圖的形式,真是另辟蹊徑,自成體系。
在這里主要講一下不同平臺(tái)下的導(dǎo)航按鍵、title和Tab、返回邏輯、退出程序幾個(gè)小點(diǎn)。

d) 菜單及操作形式
這幾個(gè)代表當(dāng)前最高水平的移動(dòng)平臺(tái),都是以手指觸摸為基礎(chǔ)的直接操作界面。iOS只提供了直接操作的方式;Android和Win Phone 7 還增加了幾個(gè)硬鍵按鈕配合操作,但總體也是以直接操作為主。幾個(gè)平臺(tái)都有菜單操作,但是展示的形式不同,但也在相互的借鑒。

由于手機(jī)屏幕較小,一屏內(nèi)容往往顯示一個(gè)對(duì)象或信息單元,toolbar的操作正是對(duì)這個(gè)單元進(jìn)行操作的。如果是對(duì)單元內(nèi)的對(duì)象操作,更多的設(shè)計(jì)都是在界面中直接設(shè)置操作對(duì)象(如屏幕內(nèi)的操作按鈕)。
e) 信息提示
信息提示方式,各個(gè)平臺(tái)之間也都在相互學(xué)習(xí)。信息list作為Android系統(tǒng)的最核心的設(shè)計(jì)優(yōu)勢(shì),現(xiàn)在iOS5也開始應(yīng)用。同時(shí)許多Android手機(jī)及鎖屏應(yīng)用在鎖屏界面與提示信息間做更多地權(quán)衡,使用戶能更快地處理信息,提升效率。
各個(gè)平臺(tái)都提供了對(duì)話框的形式,只是在叫法上略有不同,如alert,popup,dialog,raw notification等,其主要的交互操作沒有區(qū)別,都是對(duì)話框的基本操作形式。也有一些變異的反饋提示框,如android系統(tǒng)提供的快速消失的反饋提示,做成輕量級(jí)的,對(duì)用戶干擾也減到更少。
Android系統(tǒng)提供的狀態(tài)欄的消息提示機(jī)制,是處理多應(yīng)用push信息的一個(gè)十分創(chuàng)新的設(shè)計(jì),可以說(shuō)是android系統(tǒng)的最佳設(shè)計(jì)。用戶可以在任何界面中,快速的向下?lián)軇?dòng)狀態(tài)欄呼出信息list,也可以再向上撥動(dòng)手指收起提示信息。但是,在最近看到的iOS5上也看到了它的更新特性中,這一點(diǎn)就赫然在列。所以,有好的特性,不同的平臺(tái)也會(huì)相互學(xué)習(xí)。
iOS上也有它的創(chuàng)新提示,就是在程序圖標(biāo)上來(lái)進(jìn)行新消息數(shù)量的提示,這在后面的幾個(gè)平臺(tái)上都有應(yīng)用,只是不同的平臺(tái)上,表現(xiàn)形式略微不同,就是視覺上微創(chuàng)新。
Windows Phone 7 提供了tile形式的提示信息顯示方式,那只是樣式上的不同,在設(shè)計(jì)的本質(zhì)上,差異不大。#p#
3. 移動(dòng)應(yīng)用在多平臺(tái)適配的原則
一個(gè)產(chǎn)品的規(guī)劃,很少會(huì)僅局限于某一個(gè)平臺(tái),都會(huì)進(jìn)行跨平臺(tái)的適配。那應(yīng)該如何進(jìn)行適配呢?
這里主要有兩個(gè)觀點(diǎn),以設(shè)備為中心來(lái)設(shè)計(jì)還是以應(yīng)用為中心來(lái)設(shè)計(jì);以設(shè)備為中心的設(shè)計(jì)師認(rèn)為,應(yīng)用界面應(yīng)該與設(shè)備的設(shè)計(jì)規(guī)范保持一致,讓用戶快速上手,不覺得陌生。以應(yīng)用為中心的設(shè)計(jì)師認(rèn)為,保持所有的平臺(tái)上的一致性,同時(shí),很多多平臺(tái)的應(yīng)用開發(fā)工具也是為開發(fā)人員提供了多平臺(tái)界面移植的便利,但是對(duì)用戶體驗(yàn)是否好,卻有待思考。
在多平臺(tái)適配中遵循如下原則
1) 客戶端的設(shè)計(jì)規(guī)范應(yīng)該以平臺(tái)規(guī)范為基礎(chǔ)
2) 在多平臺(tái)中,應(yīng)保持統(tǒng)一的品牌標(biāo)識(shí),包括logo,視覺風(fēng)格,核心功能點(diǎn)等等。
3) 更多地與平臺(tái)的特性相融合,運(yùn)用平臺(tái)提供的特色功能,來(lái)減少用戶的輸入或者其他體驗(yàn)提升點(diǎn)。如拍照輸入,傳感器的使用等。
每個(gè)平臺(tái)都需要注意的問題有:
1) 移動(dòng)的特性決定了手機(jī)信號(hào)的強(qiáng)弱不均,如何處理在弱信號(hào)下的設(shè)計(jì)?
2) 需要考慮在斷網(wǎng)情況下,如何快速恢復(fù)中斷?
3) 如何設(shè)計(jì)手機(jī)推送的問題?
4) 如何盡量避免手機(jī)的固有限制,如屏幕小,輸入不方便,電源緊張等?
5) 如何盡量通過(guò)手機(jī)的特有特性來(lái)提升體驗(yàn),如各類傳感器,聲音提示等?#p#
4. 后記
當(dāng)我從3月份擬好提綱寫這幾篇文章到現(xiàn)在,不過(guò)短短幾個(gè)月時(shí)間,各大公司的移動(dòng)平臺(tái)就都推出了新的版本,對(duì)平臺(tái)特性總結(jié)的速度有些趕不上平臺(tái)更新的速度。
從本質(zhì)上說(shuō),iOS是一個(gè)開創(chuàng)性的設(shè)計(jì),也引發(fā)了客戶端的高潮,其他的平臺(tái)還沒有脫離iOS的痕跡,雖然各大公司都在努力創(chuàng)新,形成自己的風(fēng)格,但是還遠(yuǎn)沒有到開創(chuàng)、革命的程度。
除了這三大平臺(tái)外,Blackberry,Palm WebOS也都在發(fā)布新品,體驗(yàn)也不遜色與三大平臺(tái),在客戶端的設(shè)計(jì)上,非常值得大家更多地研究一二,說(shuō)不定哪天主流平臺(tái)就把他們的有點(diǎn)給抄了,你也是在為你的新設(shè)計(jì)做知識(shí)儲(chǔ)備。
從客戶端的交互設(shè)計(jì)上來(lái)說(shuō),我們要做的是如何發(fā)揮平臺(tái)的特性上的設(shè)計(jì)優(yōu)點(diǎn),把客戶端的體驗(yàn)去做好,而不是去改變平臺(tái)的設(shè)計(jì)特性。所以,做客戶端設(shè)計(jì)的設(shè)計(jì)師,需要時(shí)刻關(guān)注平臺(tái)特性的更新,這都是你提升客戶端體驗(yàn)的契機(jī)。


















