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