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

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

精神與基礎(chǔ)

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

◆平臺(tái)間平衡

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

◆瀏覽器框架

設(shè)計(jì)“泛”過(guò)程

◆移動(dòng)場(chǎng)景下的用戶需求

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

◆界面氣質(zhì)

精神與基礎(chǔ)

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

最初，我問(wèn)了自己一個(gè)問(wèn)題：究竟什么是我們津津樂(lè)道的“高端”體驗(yàn)？

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

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

平臺(tái)間平衡

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

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

不同分辨率及比例間移植

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

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

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

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

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

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

瀏覽器框架

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

◆自定義軟鍵盤

◆自繪控件

◆豐富的隱喻圖形界面

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

◆豐富的手勢(shì)操作

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

◆較大容量緩存

◆后臺(tái)實(shí)時(shí)通信

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

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

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

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

◆不支持插件

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

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

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

◆支持cookie

◆界面的動(dòng)態(tài)交互則可利用JavaScript來(lái)實(shí)現(xiàn)

◆支持播放html5視頻

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

#p#

設(shè)計(jì)“泛”過(guò)程

移動(dòng)場(chǎng)景下的用戶需求

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

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

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

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

手機(jī)終端用戶使用目的、操作行為以及潛在困難遠(yuǎn)比用戶端坐在桌旁要復(fù)雜多了。援引一份由Harris研究的手機(jī)使用習(xí)慣的圖文報(bào)告。可以了解到有趣的移動(dòng)互聯(lián)網(wǎng)用戶使用行為。

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

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

易用的手機(jī)應(yīng)用須遵循少即是多的設(shè)計(jì)原則，簡(jiǎn)便的交互，清晰的提示或反饋，少而精當(dāng)?shù)恼?qǐng)求，從簡(jiǎn)單中展現(xiàn)優(yōu)雅，準(zhǔn)確地滿足用戶。

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

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

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

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

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

◆盡可能減少用戶的輸入

記憶用戶信息；有策略地向用戶提請(qǐng)求。

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

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

◆避免不必要的交互

界面氣質(zhì)

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

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

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

◆圓角

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

◆頁(yè)面中常見(jiàn)圖文混排

【編輯推薦】

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