哪樣?xùn)|西是你永遠(yuǎn)都不想遺留在家里的，隨時(shí)攜帶在身邊并觸手可及，即便是睡覺(jué)的時(shí)候？
或許對(duì)大部分人來(lái)說(shuō)答案是手機(jī)。我們對(duì)移動(dòng)設(shè)備（和可穿戴設(shè)備）不斷增長(zhǎng)的依賴是很明顯的。所以對(duì)開(kāi)發(fā)者來(lái)說(shuō)，擁有一個(gè)強(qiáng)大的移動(dòng)互聯(lián)網(wǎng)戰(zhàn)略應(yīng)該是你未來(lái)網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站的一個(gè)組成部分。
當(dāng)我們聽(tīng)到“移動(dòng)Web”這個(gè)概念時(shí)，我們想到的第一件事是響應(yīng)設(shè)計(jì)以及過(guò)多的工具與框架使其成為可能。有一些簡(jiǎn)單的復(fù)制桌面網(wǎng)站的做法，其不能作為一個(gè)移動(dòng)互聯(lián)網(wǎng)戰(zhàn)略。這只能說(shuō)是權(quán)宜之下的“創(chuàng)可貼”，以最少的努力換取最好的情勢(shì)。不過(guò)它忽略了移動(dòng)的關(guān)鍵點(diǎn)——提供一個(gè)“精致的”用戶體驗(yàn)。而現(xiàn)在是時(shí)候?qū)⒁苿?dòng)互聯(lián)網(wǎng)的焦點(diǎn)從響應(yīng)Web工具轉(zhuǎn)移到用戶了。
桌面和移動(dòng)之間的關(guān)鍵不同
第一步需要了解的是，跟桌面相比，移動(dòng)設(shè)備提供了一種不同的用戶體驗(yàn)。它們有不同的用途。一些移動(dòng)體驗(yàn)不同于桌面體驗(yàn)的有：
- 它是一個(gè)“個(gè)人”設(shè)備：鮮有人會(huì)去共享一個(gè)電話。小屏幕手機(jī)保證了任何在你身后的人無(wú)法看清屏幕。
- 它意味著容易、即時(shí)訪問(wèn)：也就是說(shuō)人們希望移動(dòng)Web頁(yè)面加載是即時(shí)的，或者至少要比在臺(tái)式機(jī)上快得多。
- 它總是被連接的：無(wú)論是通過(guò)蜂窩數(shù)據(jù)還是Wi-Fi。這意味著除非手機(jī)用戶擁有無(wú)限的流量，否則都會(huì)謹(jǐn)慎于下載東西的大小。
- 交互的主要方式是觸控：沒(méi)有鼠標(biāo)點(diǎn)擊，也許以后交互的主要方式會(huì)變?yōu)槁暱亍?/li>
- 屏幕是有限的：這導(dǎo)致不同的查看和使用模式。
不要僅照“桌面網(wǎng)站”的葫蘆畫“移動(dòng)Web”的瓢
正如你從上圖所看到的那樣，移動(dòng)設(shè)備的使用模型是不同于桌面的。常用的將桌面網(wǎng)站縮放到移動(dòng)設(shè)備上的方法是導(dǎo)致移動(dòng)訪問(wèn)失敗的本質(zhì)。
響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)為所有的設(shè)備供應(yīng)相同的HTML，使用CSS來(lái)改變內(nèi)容顯示的方式。然而這并不適用于移動(dòng)設(shè)備。例如，HTML標(biāo)記Web頁(yè)面釋放的順序。在桌面上，你希望菜單在頂部，便于用戶導(dǎo)航。在移動(dòng)設(shè)備上，你希望能夠看到和訪問(wèn)的實(shí)際內(nèi)容可以直接導(dǎo)航到其他頁(yè)面。所以你不想先加載菜單，菜單最好是收縮的，或在屏幕的底部。
而媒體這一塊，即使你使用CSS或JavaScript來(lái)調(diào)整圖像大小，但最終先加載的是大圖，然后才把它縮放下來(lái)。這也加大了用戶的數(shù)據(jù)消費(fèi)和整體頁(yè)面的加載時(shí)間。
聚焦用戶體驗(yàn)
用你縮放桌面或使其響應(yīng)的工具來(lái)開(kāi)始你的移動(dòng)互聯(lián)網(wǎng)戰(zhàn)略？不！或許你應(yīng)該考慮先從關(guān)注你的用戶開(kāi)始。
考慮到斷點(diǎn)，它們形成了RWD的基礎(chǔ)以及基于常見(jiàn)設(shè)備的屬性確定布局、內(nèi)容加載。但是定義斷點(diǎn)是正確的路嗎？同樣，隨著該方法而來(lái)的問(wèn)題是它側(cè)重的是移動(dòng)設(shè)備而不是使用設(shè)備的人。相反，為什么不選擇基于你想讓用戶怎么體驗(yàn)網(wǎng)站的邏輯斷點(diǎn)呢？
繪出你希望你的用戶與你的網(wǎng)站交互的藍(lán)圖，即你想讓他們?cè)诿總�(gè)階段體驗(yàn)到什么，以及整體感受。也許這些都是好的設(shè)計(jì)元素，但是，它們常常在我們?cè)O(shè)計(jì)的過(guò)程中迷失了。
Web應(yīng)用VS響應(yīng)站點(diǎn)/單獨(dú)的移動(dòng)站點(diǎn)
當(dāng)你決定想要實(shí)現(xiàn)什么樣的移動(dòng)Web體驗(yàn)時(shí)，接下來(lái)就需要找出工具。你需要探索一些選項(xiàng)：你應(yīng)該追求本地Web應(yīng)用嗎？你應(yīng)該做一個(gè)響應(yīng)站點(diǎn)嗎？或者你需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的移動(dòng)站點(diǎn)嗎？它們都有各自的優(yōu)點(diǎn)和缺點(diǎn)，你需要決定基于哪個(gè)才是最適合你的用戶的。
一個(gè)響應(yīng)站點(diǎn)更容易管理——對(duì)所有設(shè)備的單一URL和單一設(shè)計(jì)，對(duì)用戶來(lái)說(shuō)更容易記住和訪問(wèn)，對(duì)你來(lái)說(shuō)更容易維護(hù)。桌面和移動(dòng)都利用一組通用的搜索引擎優(yōu)化和營(yíng)銷工具。制作一個(gè)網(wǎng)站絕對(duì)要比制作兩個(gè)或兩個(gè)以上的網(wǎng)站（以適應(yīng)不同的移動(dòng)設(shè)備）便宜得多。但是，移動(dòng)體驗(yàn)可能不是最優(yōu)轉(zhuǎn)換，它可能需要更長(zhǎng)時(shí)間來(lái)加載，也有可能在某些移動(dòng)瀏覽器上不正常顯示。
你可以通過(guò)創(chuàng)建一個(gè)單獨(dú)的移動(dòng)網(wǎng)站來(lái)避免上面的問(wèn)題，不過(guò)這也意味著你必須創(chuàng)建和維護(hù)兩個(gè)獨(dú)立的網(wǎng)站與URL，也許還有包括獨(dú)立搜索引擎優(yōu)化和營(yíng)銷的努力。
本地應(yīng)用也是非常受歡迎的。應(yīng)用幾乎可用于所有事物。應(yīng)用是即時(shí)可用的，并比網(wǎng)站更容易訪問(wèn)。但它們需要額外的開(kāi)發(fā)和維護(hù)成本，并且在移動(dòng)設(shè)備上不是普遍存在的——你需要為iOS、Android以及其他你想要運(yùn)行的系統(tǒng)開(kāi)啟端口。
最終的決定應(yīng)該基于哪一介質(zhì)能更好的服務(wù)于客戶業(yè)務(wù)。在這里推薦一篇文章，或許可以更好的幫助你如何選擇這三者，點(diǎn)此進(jìn)入。
內(nèi)容結(jié)構(gòu)的正確
在移動(dòng)設(shè)備上顯示一個(gè)桌面內(nèi)容的子集是行不通的。用戶對(duì)設(shè)備的選擇是不固定的，他們可能經(jīng)常選擇一個(gè)方便的移動(dòng)設(shè)備去做一些事情，而不是筆記本。他們可以在一次會(huì)議上使用平板電腦來(lái)記錄重要的內(nèi)容等等，所以當(dāng)決定內(nèi)容的時(shí)候，你的注意力應(yīng)該放在確保提供正確的用戶體驗(yàn)上，而不是簡(jiǎn)單的為了移動(dòng)用戶而減少內(nèi)容，這是窮人的內(nèi)容策略。
一個(gè)響應(yīng)Web設(shè)計(jì)不會(huì)解決你的內(nèi)容問(wèn)題，當(dāng)然一個(gè)單獨(dú)的移動(dòng)網(wǎng)站也不會(huì)。
設(shè)計(jì)已經(jīng)走了很長(zhǎng)一段路，從激光打印機(jī)開(kāi)始，我們把一切都整齊的從左到右排列到頁(yè)面上。從那時(shí)起“F型”已經(jīng)成為主要的設(shè)計(jì)布局，緊隨其后的是Z布局。試想一下將這些用于移動(dòng)網(wǎng)站，在狹窄的手機(jī)屏幕上持有F模式或Z布局？手機(jī)屏幕需要垂直布局，而不是我們之前所用的水平設(shè)計(jì)。所有的這些都足夠有理由讓你評(píng)估你希望你手機(jī)網(wǎng)站實(shí)現(xiàn)的最終目標(biāo)。專注于終端用戶和轉(zhuǎn)換響應(yīng)的結(jié)構(gòu)內(nèi)容。
老實(shí)說(shuō)，開(kāi)發(fā)移動(dòng)Web策略沒(méi)有什么正確的答案，它涉及到評(píng)估用戶業(yè)務(wù)以及他們想要何種交互方式，然后開(kāi)發(fā)一個(gè)集中于終端用戶體驗(yàn)的移動(dòng)戰(zhàn)略。或許這是一個(gè)很好的開(kāi)始，不是嗎？
