歷時數(shù)月，連番經(jīng)歷了多個基于觸屏手機(jī)原生瀏覽器的網(wǎng)頁產(chǎn)品設(shè)計與開發(fā)。對觸屏手機(jī)用戶體驗設(shè)計有了進(jìn)一步的認(rèn)識，也頗想分享些心得。

***篇包括以下一些內(nèi)容：

精神與基礎(chǔ)

◆何謂高端高端設(shè)計精神

◆平臺間平衡

◆不同分辨率及比例間移植

◆瀏覽器框架

設(shè)計“泛”過程

◆移動場景下的用戶需求

◆少即是多的設(shè)計原則

◆界面氣質(zhì)

精神與基礎(chǔ)

何謂高端（high-end）高端設(shè)計精神

最初，我問了自己一個問題：究竟什么是我們津津樂道的“高端”體驗？

我對它的參悟從細(xì)細(xì)打量iPhone那一刻，略有了眉目。雖然它是工業(yè)化商品的出色代表，但我更希望將它視為“藝術(shù)品”。它的精巧優(yōu)雅透射于每個曲面與用材，每處工藝都絲絲入扣。內(nèi)部軟件設(shè)計也傳承了這種血統(tǒng)與氣質(zhì)，并升華為一種純粹、本能、情感化和典藏大氣。凡擁有者都奉為“我的”藝術(shù)品（調(diào)動起歸屬情感）；凡未擁有者，它則是人人希冀的“禮物”。設(shè)計師像創(chuàng)造藝術(shù)品一樣創(chuàng)造客戶端或網(wǎng)頁，才能誕生高端體驗。這個過程沒有折中和妥協(xié)，唯有用盡心力。

以上是撇開高端市場和用戶需求，對于高端體驗的另一維度的思考。當(dāng)然，高端版設(shè)計的補(bǔ)集并非所謂“低端”版。面對低性能手持終端，要將約束諸多的版本同樣冠以“高端”的設(shè)計精神，實屬上流。

平臺間平衡

觸屏版設(shè)計，目前主要面向iPhone和Android平臺（Symbian V5平臺體驗沒有擺脫其經(jīng)典鍵盤機(jī)的經(jīng)驗束縛，所以暫不歸為設(shè)計對象）。適配不同平臺的網(wǎng)頁應(yīng)用設(shè)計，需要平衡軟硬件差異帶來的交互特性和系統(tǒng)習(xí)慣的差別。比如：iPhone唯一的home硬鍵（導(dǎo)航必須通過軟件界面實現(xiàn)）、無菜單風(fēng)格、單頁面單一任務(wù)的交互思想、彈出對話框的按鈕倒置，等等。而Android平臺則多數(shù)保留返回、菜單、主頁（home）、搜索等四個系統(tǒng)硬鍵；依賴上下文菜單和彈出式菜單處理復(fù)雜任務(wù)；建立用戶長按的操作習(xí)慣。

觸屏網(wǎng)頁如需實現(xiàn)一些復(fù)雜的設(shè)計，Android-Chrome對比iPhone-Safari的表現(xiàn)稍顯遜色。比如：頁面局部橫向滑動一組內(nèi)容；在限定高度內(nèi)滾動列表等等。Android版本繁復(fù)，為保證設(shè)計一致性，往往會向下適配。另外，考慮成本，會盡可能平衡不同平臺間差異，精簡版本。若要追求體驗***化，可通過UA（User Agent）標(biāo)識匹配不同平臺。

不同分辨率及比例間移植

分辨率問題是手持終端永恒的話題。設(shè)計師無法回避不同機(jī)型屏幕分辨率的差異和橫豎比例（Aspect Ratio）展示兼容性。

iPhone 3GS和iPad屏幕分辨率密度相近（163 ppi 與 132 ppi），利用界面背景平鋪能基本解決適配問題。

如直接將iPhone 3GS的圖片資源復(fù)用到iPhone 4的虹膜屏（326 ppi）上，界面元素的物理面積會縮小為原來的1/4，畫面質(zhì)量和操作易用性均有損失。

要實現(xiàn)界面物理尺寸的無縫縮放（Resolution Independence），目前常用預(yù)繪制（pre-rendered）方式?？蛻舳水a(chǎn)品需根據(jù)機(jī)型獨立定制界面；網(wǎng)頁產(chǎn)品需分化版本，通過識別用戶代理（User Agent）去指向不同URL。為了保證較高靈活性和低成本的重繪，在視覺設(shè)計時，建議用Photoshop的矢量路徑工具（開啟對齊像素模式），并應(yīng)用圖層樣式繪制（快速復(fù)制圖層樣式）。注意像素虛化的細(xì)節(jié)。本文不作贅述，請查看《Designing for iPhone 4 Retina Display: Techniques and Workflow》了解。

為了提高頁面適配能力，公共界面元素宜少用圖片，多用CSS3支持的規(guī)則設(shè)計樣式。

在此，推薦另一篇關(guān)于屏幕大小適配的專業(yè)文章《客戶端交互設(shè)計適配之屏幕大小》。

瀏覽器框架

“網(wǎng)頁版”遇到了“客戶端”版心生感嘆：“既生瑜何生亮?。?rdquo;客戶端產(chǎn)品設(shè)計有諸多優(yōu)勢，例如：

◆自定義軟鍵盤

◆自繪控件

◆豐富的隱喻圖形界面

◆浮出式面板的絕對定位（始終置底的工具欄在網(wǎng)頁端不好實現(xiàn)）

◆豐富的手勢操作

◆支持較復(fù)雜的動畫反饋

◆較大容量緩存

◆后臺實時通信

◆調(diào)用手機(jī)硬件功能如：聲音或震動的提示；通過GPS或基站獲取地理位置信息；通過攝像頭、麥克風(fēng)傳輸多媒體文件。

上述均是網(wǎng)頁設(shè)計的短板，設(shè)計師常感捉襟見肘。然而網(wǎng)頁版對全產(chǎn)品戰(zhàn)略有著深遠(yuǎn)的意義。它的優(yōu)勢在于：更敏捷地彌補(bǔ)平臺性空缺，并有效維持跨平臺產(chǎn)品的體驗一致性；更及時地響應(yīng)日常運(yùn)營和產(chǎn)品功能推廣；更迅速地響應(yīng)用戶需求；節(jié)省手機(jī)流量；更無縫地實現(xiàn)不同產(chǎn)品間的業(yè)務(wù)拉動（客戶端產(chǎn)品是相對獨立的，不容易做整合）。

九尺之臺起于壘土。做好觸屏手機(jī)網(wǎng)頁應(yīng)用設(shè)計，需要對“瀏覽器”框架有大致了解。iPhone和Android瀏覽器都是Webkit內(nèi)核。以iPhone-Safari瀏覽器為例：

◆不支持Flash和Java（包括Java Applet）

◆不支持插件

◆不支持基于瀏覽器的文件下載

◆不支持插入本地文件，即不支持<input />

◆節(jié)省緩存。iPhone僅支持小于25kb的緩存

◆支持cookie

◆界面的動態(tài)交互則可利用JavaScript來實現(xiàn)

◆支持播放html5視頻

此外，Webkit內(nèi)核手機(jī)瀏覽器的一些特性會影響交互，例如：支持表格、CSS3高級樣式表等等。其中，最重要的特性是Ajax動態(tài)異步請求與局部刷新，后面會詳細(xì)的說明這個特性的意義。

#p#

設(shè)計“泛”過程

移動場景下的用戶需求

移動場景下，用戶主流需求是利用碎片時間閱讀、搜索、下載、游戲、溝通。在設(shè)計前期需要思考：

◆用戶是在什么狀態(tài)下如何進(jìn)行操作的（了解用戶核心需求及使用方式）？

◆如何展示信息，才更容易引起用戶興趣（篩選適于手機(jī)端呈現(xiàn)的信息及信息布局）？

◆為什么選擇手機(jī)瀏覽器訪問網(wǎng)頁（分析網(wǎng)頁應(yīng)用與客戶端應(yīng)用的定位差異）？

手機(jī)終端用戶使用目的、操作行為以及潛在困難遠(yuǎn)比用戶端坐在桌旁要復(fù)雜多了。援引一份由Harris研究的手機(jī)使用習(xí)慣的圖文報告?？梢粤私獾接腥さ囊苿踊ヂ?lián)網(wǎng)用戶使用行為。

iPhone 的應(yīng)用有三大分類：高效型應(yīng)用、實用工具型應(yīng)用和沉浸式應(yīng)用（詳見iPhone HIG）。不同的產(chǎn)品定位會產(chǎn)生差異化設(shè)計策略，從而影響用戶的交互方式。設(shè)計啟動前需與產(chǎn)品經(jīng)理明確界定產(chǎn)品類型和大致的設(shè)計方向。

少即是多的設(shè)計原則

易用的手機(jī)應(yīng)用須遵循少即是多的設(shè)計原則，簡便的交互，清晰的提示或反饋，少而精當(dāng)?shù)恼埱螅瑥暮唵沃姓宫F(xiàn)優(yōu)雅，準(zhǔn)確地滿足用戶。

◆保持用戶對頁面專注力，讓人一目了然如何使用你的內(nèi)容

清晰定義適合手機(jī)使用場景的應(yīng)用定義說明（Application Definition Statement），篩檢功能，降維信息，滿足用戶專注地獲取信息、完成當(dāng)前任務(wù)。

涉及到具體頁面設(shè)計，分享一個心得：可嘗試用簡潔語句歸納出我們設(shè)計的每個頁面的核心功能以及對用戶的意義。如果難以準(zhǔn)確簡單地歸納出來，將意味著增加用戶理解成本和記憶負(fù)擔(dān)。

◆避免噪音、無用的留白、花里胡哨的背景

避免用戶被內(nèi)容以外的視覺信息干擾。

◆盡可能減少用戶的輸入

記憶用戶信息；有策略地向用戶提請求。

◆簡潔表達(dá)必要信息

簡潔明確地提示引導(dǎo)性操作（如新手任務(wù)、操作指引、功能介紹）和中斷性操作（如提示、詢問）。

◆避免不必要的交互

界面氣質(zhì)

觸屏版網(wǎng)頁設(shè)計應(yīng)充分表現(xiàn)觸屏界面的氣質(zhì)。可觸控界面要求關(guān)注鏈接及控件尺寸。以iPhone 3GS為例，適于手指點觸的控件尺寸是44×44pix；隨手勢的輕重變化，iPhone控件響應(yīng)范圍在22×22pix ~ 55×55pix之間。

觸屏界面顯著的氣質(zhì)表現(xiàn)為：

◆足夠響應(yīng)范圍的控件和文字鏈接

◆圓角

◆紙張化的扁平風(fēng)格與相對立體的按鈕

◆頁面中常見圖文混排

【編輯推薦】

1. 產(chǎn)品設(shè)計新策略：手機(jī)游戲與電子商務(wù)聯(lián)合
2. 針對碎片時間進(jìn)行移動產(chǎn)品設(shè)計
3. 支付寶產(chǎn)品經(jīng)理談iPad上的設(shè)計工具
4. 移動終端設(shè)備游戲設(shè)計初體驗
5. 移動設(shè)備客戶端交互適配設(shè)計