能夠為移動設備設計的是一種對任何網頁設計師變得越來越重要的技能。越來越多的人在旅途中尋找信息，而這些小屏幕的設計是一個全新的游戲。移動設備的設計與網絡設計的規(guī)則不同，為了跟上市場的發(fā)展方向，您必須能夠做到這一點。下面重慶網頁設計公司及重慶網站制作公司具體談談移動網站設計的問題。

瀏覽器

雖然對于我們在技術世界的人來說，假設每個人都有一個iPhone可能很容易，但情況并非如此。雖然iPhone的受歡迎程度在快速增長，但它仍然只占移動用戶的百分之三，所以不要僅僅為iPhone設計錯誤。

屏幕尺寸

1、iPhone是320像素寬×480像素高。

2、諾基亞N系列的許多設備都是240像素寬，320像素高。

3、較舊的（仍然受歡迎）諾基亞設備的顯示范圍從176×208像素到352×416像素。

4、黑莓屏幕分辨率范圍從160×160像素到324×352像素。

5、較新的設備通常支持橫向模式，其寬度和高度自發(fā)地相反。

總的來說，根據(jù)Device Atlas，兩個最常見的屏幕寬度為

128px寬，240px寬，主要由諾基亞設備普及。而根據(jù)MobiForge的文章，72％的手機屏幕分辨率為240×320以上。

根據(jù)這篇文章，最流行的手機屏幕尺寸如下：

1、128×160

2、176×220

3、240×320 =諾基亞N系列

4、320×480 = iPhone

顏色

來自W3C的一些簡單的建議：“移動設備通常沒有良好的色彩對比度，并且常常用于不太理想的照明條件。因此，用戶可能看不到以彩色突出顯示的信息。如果顏色用于指示特征，則該特征通常也應以不依賴于顏色的方式指示。特別是，不要使用藍色或紫色文本，因為這可能與超鏈接混淆，特別是在沒有下劃線鏈接的設備上。

總而言之，請記住，移動用戶通常在惡劣的條件下使用它，如缺乏光線或過多的光線，例如在晴朗的一天在街上。還要記住，一些設備仍然有單色屏幕。所以高對比度總是一個很好的主意。微妙的顏色細微差別對移動設計來說并不好。

要避免的錯誤

1、移動設備的用戶應該與普通PC用戶不同。提供快速且唯一真正相關的信息。不要使用深層或復雜的導航級別。

2、不要忽視手機的限制。記住屏幕的小尺寸，并保持盡可能簡單 - 使每個像素數(shù)。避免橫向導航 - 3、堅持垂直移動。請記住，移動用戶無法打印文檔，因此不要包含任何需要打印的pdf文件。并遠離任何需要大量打字的東西。即使使用最先進的設備，打字仍然比全尺寸鍵盤更困難。

4、請記住，移動設備帶來桌面設備沒有的其他優(yōu)勢。首先，這是一個電話 - 邀請一個電話，并使其成為一個鏈接！例如。這是一個相機 - 5、邀請用戶拍照并在比賽中輸入。想想移動設備可以做的一切，并使您的移動網站的一部分體驗。<a href="tel:+19995551212">+1 999 555-1212</a>

6、請考慮使用移動網站的.mobi 網址。這樣做表示網站是專為移動設備設計的，因為.mobi 網址專門用于移動網站。由于.mobi的高可用性標準，這也意味著該網站是值得信賴的，具有高質量的內容。

7、不要在移動網站上使用框架。它在大多數(shù)設備中不起作用，可能會創(chuàng)建可用性問題。始終保持XHTML- Mobile概要的標準，并以縱向模式計劃布局。如上所述，垂直卷軸是被廣泛接受的。

8、進行研究以了解有關正在使用的具體設備的更多信息。市場上有許多不同的移動平臺，每個移動平臺可能會以不同的方式顯示您的內容。通過創(chuàng)建設備感知站點來提前計劃。

9、不要隱藏您的移動網站 - 通過搜索引擎輕松查找。再次，在這方面，擁有.mobi地址是一個好主意，因為它已經是一個搜索引擎友好的URL。

設計策略

如果您需要為多個設備設計，一個好的做法是使用一個中間設計作為參考，并適應其他尺寸。

關于大小的一些建議是：

1、對于“默認分組”（或設備屏幕寬度的80％），內容圖像的寬度應不大于200px。

2、標頭使用瓷磚和彩色背景。較舊的設備，如具有較不復雜瀏覽器的諾基亞6680無法呈現(xiàn)平鋪的背景，但會顯示背景顏色。

3、專注于需求而不是戰(zhàn)術和解決方案。

4、設計部分注意力和中斷。絕對只是必要的基本信息。避免深層次的導航。

5、刪除側欄內容 - 只使用一列。

移動最佳實踐的良好例子

1、使用垂直列表進行導航。更重要的是，增加字體大小。

2、構建接口以支持單個任務。

3、牢記移動環(huán)境。移動環(huán)境是空間和時間，而不是語義和社會，如桌面網絡。

4、移動是關于讓人們快速了解信息。把事情簡單化。

5、剝去絨毛。移動網站需要簡單清晰的導航和最小化的圖形，以便它們快速載入。