建立良好web體驗:4個最佳化移動Web產品的建議

來源:互聯網
上載者:User

文章描述:案例學習:最佳化移動Web產品的四個要點.

世界範圍內行動裝置的使用數量在與日俱增。面對在跨越多個不同裝置上建立良好web體驗的挑戰,現在已經存在多種解決方案。但是對於任何一個給定的項目,這些解決方案中哪個是最合適的?為了回答這個問題,《移動優先》作者Luke以Bagcheck應用作為案例(註:Bagcheck是一家從事搜尋與發現業務的創新型企業),解釋了選擇分別設計移動版和案頭版背後的原因,並通過對比提煉出四個最佳化移動Web產品的建議。

全文如下:

本人是響應式Web設計(Responsive Web Design)理念的擁護者和粉絲。但經常有人這樣問我:為什麼我們還要為Bagcheck單獨構建一個獨立的移動版本,而不使用流體網格(fluid grids),彈性圖片(flexible images)和媒體查詢(media queries)等方法來為我們的移動使用者提供一個響應式Web解決方案?

對於我們的Bagcheck網站來講,網站效能以及網站開發速度是兩個至關重要的問題。我們所做的決定中,很多都是為了使網站效能和開發速度兩者都儘可能的快(畢竟我們是一家新成立的企業)。作為我們關注網站效能的一部分,我們也很注重“什麼才是必須的”這樣的理念。這意味著我們需要向不同裝置或者使用者呈現一些他們需要的東西。我們樂於做一些最佳化工作。使用雙重模板系統(dual template system)我們就可以從以下多個方面進行最佳化,比如資源順序(source order),媒體(media),URL結構以及應用程式設計。

最初我們以命令列介面(command-line interface)的形式構建Bagcheck,在此基礎之上我們建立了一個移動Web體驗版的Bagcheck,接著很快就開發出了一個案頭Web體驗版的Bagcheck。這樣的過程很可能也影響到了我們所使用的開發方法。

另外值得一提的是,雖然自己能夠勝任編碼工作,但我主要是一個設計師。因為我關注的焦點是設計要素,所以在這篇文章裡會盡量多的包含一些技術層面的資源連結,如果你有更多的資源和實現想法,趕快發給我吧!

資源順序(Source Order)

響應式Web設計(Responsive Web Design)最為核心的部分是,將相同的HTML代碼應用到不同的裝置上面來,並且根據具體裝置自身的效能來動態調整(主要是通過CSS)外觀顯示。HTML標記有一個資源順序,這個資源順序通常規定Web頁面如何被瀏覽器渲染。儘管可以使用JavaScript和CSS技術來改變HTML元素的位置布局,但想以一種可靠的方式在多種不同裝置上面進行HTML元素重定位則非常具有挑戰性。

就拿網站導覽功能表這個簡單的例子來說吧,對於那些擁有較大螢幕以及滑鼠/鍵盤等輸入的裝置來說,將導覽功能表放置到網頁的頂部是很常見的做法,其原因有以下幾個方面:

  1. 裝置螢幕擁有足夠多的空白區,頁面實際內容不可能被擠出螢幕之外。
  2. 通常需要通過一些關鍵的類別和動作集合來決定在網站上顯示什麼內容
  3. 當這些關鍵的分類和動作集合與螢幕/瀏覽器的邊緣對齊時,訪問他們的速度可能會更快一些。將網站的整體導航放在在網頁頂部是很有意義的,所以標記資源順序就成為首先得考慮的問題。

然而在那些有著校小螢幕並且觸摸作為輸入的裝置,將網站的整體導航放在網頁底部會更加合理一些,這是因為:

  1. 小螢幕裝置沒有足夠多的空白地區,導致網頁的實際內容被網站的整體導覽按鈕擠出螢幕之外。
  2. 對於小螢幕和低頻寬的裝置來說,相對於網站的導航功能,使用者更關注的是網站內容的立即訪問。
  3. 人類工程學的因素使得使用者更容易在螢幕底部點擊到他們感興趣的目標。

所以對於行動裝置來講,將網站的整體導覽按鈕放置在網頁的底部是非常合理的做法,這樣做就意味著菜單標記(menu markup)在資源順序中很可能是排在最後面的。當在不同裝置上使用相同的HTML代碼時,資源順序不可能被改變。使用雙重模板系統,我們在構建Bagcheck的時候就可以提供不同的標記,因此在行動裝置上就會有不同的資源順序。下圖展示的是我們為行動裝置和電腦裝置產生的兩種不同的UI介面。

當然你也可以使用其他解決方案,不用提供不同的HTML代碼也可以達到相似的效果。Box-direction能夠反轉條目列表的順序而不會影響到資源標記順序。你也可以嘗試使用display:table的方法來根據裝置螢幕的實際大小重建內容顯示和網站導航。這些方法可能會更適合你,就看你的需求了。

[1] [2] [3]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。