為(wèi)移動環境而調整一個(gè)站(zhàn)點是巨大(dà)的挑戰。許多(duō)在網頁設計(jì)上(shàng)的技(jì)巧及感官效果将無法在移動設備上(shàng)完好呈現，反之亦然。

移動設備是以不同的限制(zhì)來(lái)嘗試新事物的好地方。人(rén)們訪問移動網頁通(tōng)常不像在電(diàn)腦(nǎo)屏幕前那(nà)樣有(yǒu)耐心——手持設備的屏幕要小(xiǎo)得(de)多(duō)，而且移動網絡的連接（通(tōng)常是3G網絡）仍然不夠快。

設計(jì)上(shàng)的調整

導航

因為(wèi)屏幕大(dà)小(xiǎo)的限制(zhì)，原本無所不在的菜單将無法被完全應用。如果為(wèi)每個(gè)頁面都直接應用上(shàng)相同的菜單，訪問者就必須做(zuò)滾動操作(zuò)，翻掉菜單才能看到內(nèi)容。這會(huì)讓人(rén)非常不适。所以隻有(yǒu)當你(nǐ)的網站(zhàn)在頂部導航中有(yǒu)少(shǎo)量菜單鏈接時(shí)才考慮把它們放置到每個(gè)頁面中。為(wèi)此，它還(hái)得(de)是橫向水(shuǐ)平的。 解決方案是，把導航放置到第一個(gè)頁面，而在其他頁面中盡可(kě)能的使用一個(gè)鏈接連向第一個(gè)頁面，或者使用面包屑式的導航。

內(nèi)容

你(nǐ)的內(nèi)容應該是擁有(yǒu)最高(gāo)優先級的。屏幕很(hěn)小(xiǎo)，所以使用較少(shǎo)的圖片及留白，讓你(nǐ)的設計(jì)盡可(kě)能的簡潔。移動網絡的連接速度還(hái)無法快到處理(lǐ)大(dà)量圖片，這些(xiē)圖片還(hái)會(huì)增加主要內(nèi)容聚焦閱讀的難度。

鏈接

在移動設備上(shàng)任何東西都會(huì)變小(xiǎo)，鏈接也不例外。你(nǐ)得(de)讓它們更容易被用戶點到。要做(zuò)到這點，可(kě)以在它們周圍多(duō)留些(xiē)空(kōng)間(jiān)并把字體(tǐ)調大(dà)些(xiē)。當鏈接被選中時(shí)，要能有(yǒu)相應的反饋，比如改變字體(tǐ)顔色、增加下劃線、改變背景色等等，即使這個(gè)鏈接是附在圖片上(shàng)的。用戶會(huì)很(hěn)樂意看到當他們點擊鏈接時(shí)發生(shēng)的變化。

各式的屏幕尺寸

各款手機均有(yǒu)不同的屏幕尺寸，僅iPhone就有(yǒu)兩種：垂直和(hé)水(shuǐ)平。所以，你(nǐ)的網站(zhàn)不該用像素值來(lái)固定寬度，用百分比和(hé)EMS會(huì)更好。這個(gè)方法能讓你(nǐ)的網站(zhàn)适應各種屏幕尺寸。另外，你(nǐ)也可(kě)以通(tōng)過設定META關于移動設備的屬性值來(lái)限制(zhì)界面的縮放和(hé)尺寸大(dà)小(xiǎo)。

補充關于meta對移動設備控制(zhì)的舉例

其中：

width - viewport的寬度

height - viewport的高(gāo)度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小(xiǎo)比例

maximum-scale - 允許用戶縮放到的最大(dà)比例

user-scalable - 用戶是否可(kě)以手動縮放

跨平台

别指望你(nǐ)的網站(zhàn)能在所有(yǒu)的移動設備浏覽器(qì)上(shàng)都有(yǒu)相同的表現，那(nà)得(de)做(zuò)很(hěn)多(duō)的事。一些(xiē)浏覽器(qì)不支持或不完全支持某些(xiē)HTML元素和(hé)CSS屬性，頭部标識也是各式各樣。不過如果你(nǐ)隻是希望頁面在iPhone和(hé)android上(shàng)有(yǒu)良好表現，就不必在原本針對桌面浏覽器(qì)的代碼上(shàng)太費周折的做(zuò)修改了，你(nǐ)需要做(zuò)的就是按之前說的幾個(gè)要點作(zuò)調整。要在移動設備上(shàng)對代碼多(duō)做(zuò)測試。一些(xiē)頁面在設計(jì)未必很(hěn)好，但(dàn)是它們的代碼是有(yǒu)效的，你(nǐ)可(kě)以參考它們。

經典案例

下面是一些(xiē)非常棒的移動設備網頁設計(jì)，你(nǐ)會(huì)發現這些(xiē)是非常有(yǒu)用的案例展示，移動互聯真的很(hěn)精彩。

原文地址：http://abduzeedo.com/mobile-web-design 原文作(zuò)者：Alessandra dos Santos

譯文地址：http://osstyle.cn/html/article_kzsx/20101113396296331.html 譯者：陳大(dà)龍