轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：Luke Wroblewski 國際知名的數(shù)字產(chǎn)品專家，個(gè)人簡介： http://www.lukew.com/about

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請點(diǎn)這里

世界范圍內(nèi)移動(dòng)設(shè)備的使用數(shù)量在與日俱增。面對在跨越多個(gè)不同設(shè)備上創(chuàng)建良好web體驗(yàn)的挑戰(zhàn)，現(xiàn)在已經(jīng)存在多種解決方案。但是對于任何一個(gè)給定的項(xiàng)目，這些解決方案中哪個(gè)是最合適的？為了回答這個(gè)問題，《移動(dòng)優(yōu)先》作者Luke以Bagcheck應(yīng)用作為案例（注：Bagcheck是一家從事搜索與發(fā)現(xiàn)業(yè)務(wù)的創(chuàng)新型企業(yè)），解釋了選擇分別設(shè)計(jì)移動(dòng)版和桌面版背后的原因，并通過對比提煉出四個(gè)優(yōu)化移動(dòng)Web產(chǎn)品的建議。全文如下：

本人是響應(yīng)式Web設(shè)計(jì)（Responsive Web Design）理念的擁護(hù)者和粉絲。但經(jīng)常有人這樣問我：為什么我們還要為Bagcheck單獨(dú)構(gòu)建一個(gè)獨(dú)立的移動(dòng)版本，而不使用流體網(wǎng)格（fluid grids），彈性圖片（flexible images）和媒體查詢（media queries）等方法來為我們的移動(dòng)用戶提供一個(gè)響應(yīng)式Web解決方案？

對于我們的Bagcheck站點(diǎn)來講，網(wǎng)站性能以及網(wǎng)站開發(fā)速度是兩個(gè)至關(guān)重要的問題。我們所做的決定中，很多都是為了使網(wǎng)站性能和開發(fā)速度兩者都盡可能的快（畢竟我們是一家新成立的企業(yè)）。作為我們關(guān)注網(wǎng)站性能的一部分，我們也很注重“什么才是必須的”這樣的理念。這意味著我們需要向不同設(shè)備或者用戶呈現(xiàn)一些他們需要的東西。我們樂于做一些優(yōu)化工作。使用雙重模板系統(tǒng)（dual template system）我們就可以從以下多個(gè)方面進(jìn)行優(yōu)化，比如資源順序（source order），媒體（media），URL結(jié)構(gòu)以及應(yīng)用程序設(shè)計(jì)。

最初我們以命令行接口（command-line interface）的形式構(gòu)建Bagcheck，在此基礎(chǔ)之上我們創(chuàng)建了一個(gè)移動(dòng)Web體驗(yàn)版的Bagcheck，接著很快就開發(fā)出了一個(gè)桌面Web體驗(yàn)版的Bagcheck。這樣的過程很可能也影響到了我們所使用的開發(fā)方法。

另外值得一提的是，雖然自己能夠勝任編碼工作，但我主要是一個(gè)設(shè)計(jì)師。因?yàn)槲谊P(guān)注的焦點(diǎn)是設(shè)計(jì)要素，所以在這篇文章里會(huì)盡量多的包含一些技術(shù)層面的資源鏈接，如果你有更多的資源和實(shí)現(xiàn)想法，趕快發(fā)給我吧！

資源順序（Source Order）

響應(yīng)式Web設(shè)計(jì)(Responsive Web Design)最為核心的部分是,將相同的HTML代碼應(yīng)用到不同的設(shè)備上面來，并且根據(jù)具體設(shè)備自身的性能來動(dòng)態(tài)調(diào)整（主要是通過CSS）外觀顯示。HTML標(biāo)記有一個(gè)資源順序，這個(gè)資源順序通常規(guī)定Web頁面如何被瀏覽器渲染。盡管可以使用JavaScript和CSS技術(shù)來改變HTML元素的位置布局，但想以一種可靠的方式在多種不同設(shè)備上面進(jìn)行HTML元素重定位則非常具有挑戰(zhàn)性。

就拿網(wǎng)站導(dǎo)航菜單這個(gè)簡單的例子來說吧，對于那些擁有較大屏幕以及鼠標(biāo)/鍵盤等輸入的設(shè)備來說，將導(dǎo)航菜單放置到網(wǎng)頁的頂部是很常見的做法，其原因有以下幾個(gè)方面：

• 設(shè)備屏幕擁有足夠多的空白區(qū)，頁面實(shí)際內(nèi)容不可能被擠出屏幕之外。
• 通常需要通過一些關(guān)鍵的類別和動(dòng)作集合來決定在網(wǎng)站上顯示什么內(nèi)容
• 當(dāng)這些關(guān)鍵的分類和動(dòng)作集合與屏幕/瀏覽器的邊緣對齊時(shí)，訪問他們的速度可能會(huì)更快一些。將網(wǎng)站的整體導(dǎo)航放在在網(wǎng)頁頂部是很有意義的，所以標(biāo)記資源順序就成為首先得考慮的問題。

然而在那些有著校小屏幕并且觸摸作為輸入的設(shè)備，將網(wǎng)站的整體導(dǎo)航放在網(wǎng)頁底部會(huì)更加合理一些，這是因?yàn)椋?/span>

• 小屏幕設(shè)備沒有足夠多的空白區(qū)域，導(dǎo)致網(wǎng)頁的實(shí)際內(nèi)容被網(wǎng)站的整體導(dǎo)航按鈕擠出屏幕之外。
• 對于小屏幕和低帶寬的設(shè)備來說，相對于網(wǎng)站的導(dǎo)航功能，用戶更關(guān)注的是網(wǎng)站內(nèi)容的立即訪問。
• 人類工程學(xué)的因素使得用戶更容易在屏幕底部點(diǎn)擊到他們感興趣的目標(biāo)。

所以對于移動(dòng)設(shè)備來講，將網(wǎng)站的整體導(dǎo)航按鈕放置在網(wǎng)頁的底部是非常合理的做法，這樣做就意味著菜單標(biāo)記（menu markup）在資源順序中很可能是排在最后面的。當(dāng)在不同設(shè)備上使用相同的HTML代碼時(shí)，資源順序不可能被改變。使用雙重模板系統(tǒng)，我們在構(gòu)建Bagcheck的時(shí)候就可以提供不同的標(biāo)記，因此在移動(dòng)設(shè)備上就會(huì)有不同的資源順序。下圖展示的是我們?yōu)橐苿?dòng)設(shè)備和桌面設(shè)備生成的兩種不同的UI界面。

當(dāng)然你也可以使用其他解決方案，不用提供不同的HTML代碼也可以達(dá)到相似的效果。Box-direction能夠反轉(zhuǎn)條目列表的順序而不會(huì)影響到資源標(biāo)記順序。你也可以嘗試使用display：table的方法來根據(jù)設(shè)備屏幕的實(shí)際大小重新生成內(nèi)容顯示和網(wǎng)站導(dǎo)航。這些方法可能會(huì)更適合你，就看你的需求了。

媒體（Media）

響應(yīng)式Web設(shè)計(jì)另外一個(gè)方法是使用彈性圖片（flexible images）和視頻。當(dāng)被設(shè)置為填充他們?nèi)萜鞔笮〉母袷降臅r(shí)候，彈性圖像能夠根據(jù)瀏覽器視圖中的可用空白區(qū)來動(dòng)態(tài)調(diào)整自己的大小。

在較大的瀏覽器視圖中，彈性圖片可以通過顯示自身的原始大小來填充更多的空白區(qū)域。在較小的瀏覽器視圖中，相同的圖片可以縮放自身大小從而占用較少的空白區(qū)域。為了實(shí)現(xiàn)這樣的效果，瀏覽器需要一些較大的圖片，這些圖片不管是在放大或者縮小的時(shí)候看起來都要有不錯(cuò)的效果。

現(xiàn)在的問題是，圖像越大，文件的大小就越大。雖然并不是所有的Web瀏覽器都以他們的原始大小來顯示圖像，但瀏覽器需要下載整個(gè)圖片文件，這樣會(huì)很快導(dǎo)致低性能，除非這樣做：

• 結(jié)合使用CSS Media Queries ,背景圖片不顯示，以及不要加載僅僅為較大瀏覽器視圖準(zhǔn)備的大圖等方法。這種方法對于指定圖片標(biāo)簽（image tags）的那些圖片是無效的，僅僅對使用CSS圖片背景的那些圖片有效果，這樣就限制了此方法的適用性。
• 你可以使用像響應(yīng)式圖片（Responsive Images）這樣的解決方案，這種方法依賴Javascript語言來將HTML標(biāo)記的小圖片根據(jù)瀏覽器視圖大小的增加替換成較大的圖片。禁用Javascript和cookie功能的瀏覽器只能夠顯示相應(yīng)的小圖片。
• 嘗試類似noscript tag這樣的方法，來阻止不必要的圖片加載。
• 使用服務(wù)器端的解決方案來檢測訪問你的站點(diǎn)的設(shè)備，并且只傳遞一些必要的東西。

隱藏在這些解決方案下面的相同理念是，使用media queries，背景圖片，JavaScript或者服務(wù)器端的解決方案等方法來僅向設(shè)備呈現(xiàn)必要的東西。這種方法可以顯著地減少文件傳輸大小并且提高網(wǎng)站性能。

舉個(gè)例子來講， Bagcheck的移動(dòng)優(yōu)化模板為每個(gè)列表上的項(xiàng)目提供50×50像素大小的壓縮圖片（平均大小為3KB），而Bagcheck桌面優(yōu)化模板則為相應(yīng)的列表項(xiàng)目提供200×125像素大小的圖片（平均大小為15KB）。擁有20個(gè)表項(xiàng)也就是300KB大小的差異外加少于20個(gè)http請求的頁面對于網(wǎng)站性能有非常大的影響。我們擁有獨(dú)立的移動(dòng)模板，所以就只需要在移動(dòng)設(shè)備上顯示列表的前10個(gè)表項(xiàng)，這樣就可以另外減少30KB的負(fù)載。

桌面設(shè)備上一個(gè)分類頁面總共有360KB大小的圖片，而相應(yīng)地頁面在移動(dòng)設(shè)備上只有30KB大小，這確實(shí)是個(gè)非常大的差異。

但是優(yōu)化圖片不僅僅是文件大小的優(yōu)化，你也可以為小屏幕設(shè)備精心設(shè)計(jì)一些顯示圖片，而不是通過縮放來適應(yīng)屏幕的大小。當(dāng)圖片中的內(nèi)容很重要的話，這樣子做就顯得尤其重要。

同樣的系統(tǒng)可以用來優(yōu)化視頻顯示。在所有設(shè)備上，我們希望通過簡單的單擊操作就能夠完成視頻回放。所以我們的桌面模板將視頻文件直接嵌入到頁面中，而移動(dòng)模板僅僅顯示一個(gè)縮略圖，兩者都只需要通過簡單的單擊操作就可以開始播放視頻。在移動(dòng)設(shè)備上面使用縮略圖可以使得視頻加載速度更快，并且能夠更好地控制頁面布局/像素尺寸。

URL結(jié)構(gòu)（URL structure）

我們不僅僅只從資源順序（Source order）和媒體（Media）兩個(gè)方面來優(yōu)化移動(dòng)版本的Bagcheck。在某些情況下，獨(dú)特的URL結(jié)構(gòu)將會(huì)對站點(diǎn)性能以及小屏幕低速連接的設(shè)備的用戶體驗(yàn)產(chǎn)生重大的影響。

例如，桌面版的Bagcheck在一個(gè)URL上面顯示所有的內(nèi)容列表，評論，更新和偏好。我們將這些部分或者模塊捆綁在一個(gè)單一文件中，然后在無須刷新頁面的情況下動(dòng)態(tài)加載每個(gè)模塊。這樣做可以在桌面體驗(yàn)上產(chǎn)生一個(gè)平滑過渡，但在移動(dòng)體驗(yàn)方面就會(huì)增加許多帶寬負(fù)擔(dān)。

所以移動(dòng)Web版本的Bagcheck使用不同的URL結(jié)構(gòu)。相同的URL加載相同的初始內(nèi)容，但是每個(gè)子模塊都擁有一個(gè)唯一的URL和一個(gè)獨(dú)立的頁面，如下圖所示：

在這個(gè)模型里，

bagcheck.com/bag/7811

在移動(dòng)設(shè)備和桌面設(shè)備上加載相同的內(nèi)容，但是以下這些

bagcheck.com/mobile/bag/7811/updates
bagcheck.com/mobile/bag/7811/comments
bagcheck.com/mobile/bag/7811/likes

都是移動(dòng)設(shè)備上才有的URL。使用這樣的結(jié)構(gòu)，我們通過將較大的文件分成小塊就可以更進(jìn)一步地優(yōu)化性能。另外值得注意的是，我們將這些移動(dòng)設(shè)備特有的URL設(shè)置為“nofollow”，這樣搜索引擎就不會(huì)對他們進(jìn)行索引。

應(yīng)用程序設(shè)計(jì)（Application Design）

URL結(jié)構(gòu)也可以幫助優(yōu)化移動(dòng)設(shè)備上的擴(kuò)展交互。將更長的任務(wù)或者多步/多模塊的應(yīng)用程序組織在不同的頁面上，可以讓用戶一次只處理一種交互。在較大屏幕上，通過模態(tài)對話框或者模塊/面板進(jìn)行的交互，通常也可以達(dá)到在較小屏幕上使用獨(dú)立頁面的效果。

現(xiàn)代智能手機(jī)和桌面/手提電腦之間的設(shè)備性能千差萬別。例如在移動(dòng)設(shè)備上可以獲得10-50m范圍內(nèi)的位置信息，而在桌面/手提電腦上卻只能獲得更小范圍的信息。這種信息的獲取能夠顯著地改變應(yīng)用程序接口的設(shè)計(jì)。

我們構(gòu)建Bagcheck時(shí)使用的雙重模板系統(tǒng)使得我們能夠優(yōu)化更長的交互,并且能夠在我們的應(yīng)用程序內(nèi)部利用設(shè)備功能。在移動(dòng)設(shè)備上我們啟動(dòng)了條形碼掃描功能，這樣子用戶就可以使用手機(jī)內(nèi)置的攝像機(jī)來識別物品。我們也重新組織了非線性列表創(chuàng)建工具（non-linear list creation tool），使其成為手機(jī)上一系列更為專注和短小的任務(wù)。