移動網頁設計概要、案例和技巧

本文由SocialBeta內容貢獻者wisp譯自Mobile Web Design: Overview, Examples and Tips,由於專業所限,翻譯中難免有一些錯誤,請廣大讀者指正,謝謝。

移動界面設計正越來越流行,幾乎每個主流網站或者網絡服務提供商或者web app都會有手機應用版。因此從業人員迫切需要學習移動網頁設計的相關知識。本文不僅會介紹移動網頁設計的趨勢,還提供一些優秀的設計案例,從中讓讀者得到一些啟發。

什麼是移動網頁(mobile web)設計?

在開始設計移動網頁之前,你應該先對手機網絡非常熟悉。你會高興地發現這裡不需要學習一些新技術,不過由於屏幕小以及操作系統繁多,你需要改變自己的設計風格。

按照Cameron Chapman的調查,目前最流行的操作系統是:

  • Windows Mobile
  • The iPhone platform
  • Palm OS
  • Mobile Linux
  • Symbian OS
  • The BlackBerry platform
  • Android

而手機網絡上最受歡迎的瀏覽器是:

  • Safari for the iPhone
  • Android browser
  • Opera Mobile
  • WebOS browser (on Palm devices)
  • BlackBerry browser
  • Internet Explorer Mobile (on Windows Mobile devices)

移動網頁(mobile web)設計簡史

下面的圖片簡單地展示了移動網站設計語言的發展,也許你對有些詞彙不了解,下面我們給出了專門的解釋:

 instantShift - Mobile Web Design

Standard Generalized Markup Language-簡稱SGML,1986年出版發布的一個信息管理方面的國際標準,主要用於印刷出版行業。該標准定義獨立於平台和應用的文本文檔的格式、索引和鏈接信息,為用戶提供一種類似於語法的機制,用來定義文檔的結構和指示文檔結構的標籤。其中Markup的含義是指插入到文檔中的標記。標記分為兩種:一種稱為procedardmarkup,用來描述文檔顯示的樣式;另一種稱為descriptive markup,用來描述文檔中的文字的用途。制定SGML的基本思想是把文檔的內容與樣式分開。

Handheld Device Markup Language– HDML(手持裝置標示語言),通常與WML(無線標示語言)進行對比。是一種能夠讓手機或PDA可以上網瀏覽信息的一種語言。 Unwired Planet(無線星球)公司設計了這種語言,並將其定位為免費的開源語言。任何具備HTML,CGI以及SQL編程經驗的程序員都可以利用HDML語言來編寫代碼。 HDML與WML的一個主要區別在於WML是基於XML的,而HDML不是。另外,HDML不支持腳本,而WML擁有自己的JavaScript腳本語言,稱為WMLScript。

Wireless Markup Language– WML(Wireless Markup Language – 無線標記語言)。它是一種從HTML 繼承而來的標記語言,但是WML 基於XML,因此它較HTML 更嚴格。 WML 被用來創建可顯示在WAP 瀏覽器中的頁面。用WML編寫的頁面被稱為 DECKS。 DECKS 是作為一套 CARDS 被構造的。這種描述語言同我們常聽說的HTML語言同出一家,都屬於XML語言這一大家族。 WML的語法跟XML一樣,WML是XML的子集。 HTML語言寫出的內容,我們可以在我們的PC機上用IE或是Netscape等瀏覽器進行閱讀,而WML語言寫出的文件則是專門用來在手機等的一些無線終端顯示屏上顯示,供人們閱讀的,並且同樣也可以向使用者提供人機交互界面,接受使用者輸入的查詢等信息,然後向使用者返回他所想要獲得的最終信息。

Compact HTML –緊縮HTML ,壓縮(形式)的HTML 。面向移動電話的頁面記述語言,是在對HTML 4.0 的功能壓縮後得到的子集。日本 NTT DoCoMo 的i-mode 採用這種語言。

XHTML Mobile Profile –2001年發布,基於XHTML,針對移動電話的語言,被認為是目前最優秀的語言。

移動網頁設計的優勢與劣勢

 instantShift - Mobile Web Design

任何事物都有好有壞,移動網頁設計也不例外:

優點:

優點就在於移動性。在家裡用電腦上網的時間是很長的,不過任何人都可以通過手機來上網,其狀態可以是在做公交車、火車或者在一個百貨店裡,用戶可以隨時查找在其周圍的相關信息、 :所以你的移動網頁必須保證在“走”的狀態。

劣勢:

主要體現在2個方面:屏幕小,裝載時間長。基於這2點,你需要思考如何在一個小空間設計一個能吸引人注意力的網頁,同時還能提供受眾需要的信息。

為什麼你不能忽視移動網頁設計?

instantShift - Mobile Web Design

隨著手機的不斷增加,移動網頁設計正漸趨重要。 RipRoad的調查顯示:

  • 2.34+億美國人擁有手機(占美國總人口的85%)
  • 2009年11月至2010年1月期間,4270萬美國人中,18%是智能手機的活躍用戶

另外,按照Pewinternet的調查,“83%的成年擁有手機或者智能手機,在這些人中,35%的人通過手機上網”。另外Ericsson還發現:“2009年12月份期間,全世界手機數據傳輸量首次超過語音數據量,雖然這大多歸功於社交媒體和視頻的使用,但是這一現象將會普遍出現。”

移動網頁設計從哪開始?

首先要決定是給一個網站做手機版還是完全設計出一個新的網站,雖然兩個都可以做,但是目前流行的是還是給一個主流網站做一個手機版,以作為網站的分支。

然後決定內容的佈局以及什麼內容。另外由於通過手機瀏覽網頁,用戶通常沒有很長的等待時間,所以要確保裝載時間短,所以簡潔設計要起到更好的效果。

屏幕尺寸

一定要記住你不再是在電腦桌面上做設計了,你的頁面是要在更小的手機屏幕上顯示,另外IPhone的用戶可以縱橫向翻轉屏幕,所以你可以使用百分比和EMS來是你的網站適用於不同尺寸的手機屏幕,另外你也可以使用META properties來限制界面的放大和屏幕尺寸。

網站測試

移動網頁的測試主要是測試其在智能手機和非智能手機上網站的外觀、導航以及加載是什麼情況,有時甚至在不同的手機瀏覽器,其效果都會有所不同。盡可能在更多的手機設備上進行測試,這樣才能保證更多的用戶有著很好的體驗。

移動網頁設計範例

Mobile Awesomeness是一個移動網站設計作品資源庫,展示不同行業的移動網頁設計。這是網站地址:http://www.mobileawesomeness.com/

01. Facebook

instantShift - Mobile Web Design

Official Link

02. Nclud

instantShift - Mobile Web Design

Official Link

03. Mail Chimp

instantShift - Mobile Web Design

Official Link

04. Mixx

instantShift - Mobile Web Design

Official Link

05. Mashable

instantShift - Mobile Web Design

Official Link

06. Smashing Magazine

instantShift - Mobile Web Design

Official Link

07. Deviant Art

instantShift - Mobile Web Design

Official Link

08. Cnet

instantShift - Mobile Web Design

Official Link

09. Walmart

instantShift - Mobile Web Design

Official Link

10. Viget Labs

instantShift - Mobile Web Design

Official Link

11. Coosh

instantShift - Mobile Web Design

Official Link

12. Intel

instantShift - Mobile Web Design

Official Link

13. United Airlines

instantShift - Mobile Web Design

Official Link

14. H&M

instantShift - Mobile Web Design

Official Link

15. Tabo Bell

instantShift - Mobile Web Design

Official Link

16. McDonald

instantShift - Mobile Web Design

Official Link

17. Ars Technica

instantShift - Mobile Web Design

Official Link

18. iWeathr

instantShift - Mobile Web Design

Official Link

19. Amazon

instantShift - Mobile Web Design

Official Link

20. eBay

instantShift - Mobile Web Design

Official Link

Conclusion!結論!

大部分設計是簡單簡潔的,直接切入要點,同時還要有圖片和Logo,可以把移動網頁設計想像成傳統網站的簡潔版,所以你不需要拋棄之前的網絡設計知識,就是要削減網站規模與裝載時間,做到這些,你的設計肯定會得到客戶的喜愛。

Fur​​ther References!

更多參考內容:

本文鏈接:http:// www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/

原文鏈接:http://www.socialbeta.cn/articles/ mobile-web-design-overview-examples-and-tips.html/

譯者:wisp

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.