移動設(shè)計初探：觸屏網(wǎng)頁設(shè)計
歷時數(shù)月，連番經(jīng)歷了多個基于觸屏手機原生瀏覽器的網(wǎng)頁產(chǎn)品設(shè)計與開發(fā)。對觸屏手機用戶體驗設(shè)計有了進一步的認(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è)計的補集并非所謂“低端”版。面對低性能手持終端，要將約束諸多的版本同樣冠以“高端”的設(shè)計精神，實屬上流。
平臺間平衡
觸屏版設(shè)計，目前主要面向iPhone和Android平臺（Symbian V5平臺體驗沒有擺脫其經(jīng)典鍵盤機的經(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è)計師無法回避不同機型屏幕分辨率的差異和橫豎比例（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）方式。客戶端產(chǎn)品需根據(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)頁版”遇到了“客戶端”版心生感嘆：“既生瑜何生亮啊？”客戶端產(chǎn)品設(shè)計有諸多優(yōu)勢，例如：
◆自定義軟鍵盤
◆自繪控件
◆豐富的隱喻圖形界面
◆浮出式面板的絕對定位（始終置底的工具欄在網(wǎng)頁端不好實現(xiàn)）
◆豐富的手勢操作
◆支持較復(fù)雜的動畫反饋
◆較大容量緩存
◆后臺實時通信
◆調(diào)用手機硬件功能如：聲音或震動的提示；通過GPS或基站獲取地理位置信息；通過攝像頭、麥克風(fēng)傳輸多媒體文件。
上述均是網(wǎng)頁設(shè)計的短板，設(shè)計師常感捉襟見肘。然而網(wǎng)頁版對全產(chǎn)品戰(zhàn)略有著深遠(yuǎn)的意義。它的優(yōu)勢在于：更敏捷地彌補平臺性空缺，并有效維持跨平臺產(chǎn)品的體驗一致性；更及時地響應(yīng)日常運營和產(chǎn)品功能推廣；更迅速地響應(yīng)用戶需求；節(jié)省手機流量；更無縫地實現(xiàn)不同產(chǎn)品間的業(yè)務(wù)拉動（客戶端產(chǎn)品是相對獨立的，不容易做整合）。
九尺之臺起于壘土。做好觸屏手機網(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)核手機瀏覽器的一些特性會影響交互，例如：支持表格、CSS3高級樣式表等等。其中，最重要的特性是Ajax動態(tài)異步請求與局部刷新，后面會詳細(xì)的說明這個特性的意義。
#p#
設(shè)計“泛”過程
移動場景下的用戶需求
移動場景下，用戶主流需求是利用碎片時間閱讀、搜索、下載、游戲、溝通。在設(shè)計前期需要思考：
◆用戶是在什么狀態(tài)下如何進行操作的（了解用戶核心需求及使用方式）？
◆如何展示信息，才更容易引起用戶興趣（篩選適于手機端呈現(xiàn)的信息及信息布局）？
◆為什么選擇手機瀏覽器訪問網(wǎng)頁（分析網(wǎng)頁應(yīng)用與客戶端應(yīng)用的定位差異）？
手機終端用戶使用目的、操作行為以及潛在困難遠(yuǎn)比用戶端坐在桌旁要復(fù)雜多了。援引一份由Harris研究的手機使用習(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è)計原則
易用的手機應(yīng)用須遵循少即是多的設(shè)計原則，簡便的交互，清晰的提示或反饋，少而精當(dāng)?shù)恼埱螅瑥暮唵沃姓宫F(xiàn)優(yōu)雅，準(zhǔn)確地滿足用戶。
◆保持用戶對頁面專注力，讓人一目了然如何使用你的內(nèi)容
清晰定義適合手機使用場景的應(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)格與相對立體的按鈕
◆頁面中常見圖文混排
【編輯推薦】
