網(wǎng)頁(yè)設計手機移動(dòng)端設計稿寬度多少

 　　在平時(shí)做手機端H5網(wǎng)頁(yè)設計稿時(shí)，UI設計師和前端工程師肯定會(huì )糾結過(guò)：那么多手機屏幕尺寸，設計稿應該按照哪一個(gè)尺寸作為標準尺寸。現在已經(jīng)有2K分辨率的手機屏幕了，設計稿是不是也要把寬高跟著(zhù)最大分辨率來(lái)設計。顯然不是。設備獨立像像素、CSS像素和屏幕物理像素之間的關(guān)系。那么在前端布局(viewport設定content=”width=device-width”)時(shí)，樣式尺寸就可以用設備獨立像素(設備獨立像素從數字上等同于CSS像素)的尺寸范圍來(lái)進(jìn)行設定各個(gè)元素的大小。

　　那么從上面所得出的結論，是否就可以斷定設計稿直接按照設備獨立像素來(lái)定就行了呢?且看下面的分析。所以我們在頁(yè)面內容規劃布局時(shí)，不能把重要內容放在太偏下的位置，否則前端布局時(shí)可能出現內容顯示不全的情況。

　　通過(guò)對比可得：

　　除去將瀏覽器全屏顯示的情況，幾乎所有情況均會(huì )有頂部的狀態(tài)欄和導航欄。iPhone的設計標準，狀態(tài)欄和導航欄的獨立像素高度分別為40px和88px。

　　由于A(yíng)ndroid系統可以更改狀態(tài)欄和導航欄的高度，這里可以取默認值為48px和100px(這些尺寸網(wǎng)上均可查)。

　　那么就會(huì )把網(wǎng)頁(yè)內容往下擠，進(jìn)入盲區(根據不同的布局方式可能擠出視口，即可視區域之下，)。取這兩個(gè)系統者的最大值為148(48+100)

　　那么在所有屏幕大小上把重要內容顯示完全，就要注意市面上存在的小尺寸手機屏幕，現在絕大部分智能手機分辨率都在640x960px(iPhone4分辨率)之上，所以只要把重要內容放在上圖5中的盲區之上即可。計算后的最安全高度為812(960-148=812)。

　　在此總結，一般情況下，以現有市場(chǎng)上流行的移動(dòng)智能手機，單頁(yè)翻轉(非延伸向下的長(cháng)頁(yè)面)設計稿尺寸為640x1136，在高度為812處設置一條安全線(xiàn)(參考線(xiàn))，將重要的內容布局在這條安全線(xiàn)之上。

　　結論：

　　1、像素是沒(méi)有寬高的(不要被Photoshop中的像素格欺騙)，它只代表一個(gè)采樣的色值。

　　2、任何圖片作為數據信息被保存在存儲盤(pán)中時(shí)，只有寬高像素數是有意義的，此時(shí)的ppi對于圖片來(lái)說(shuō)時(shí)沒(méi)有任何意義，也并不能描述這個(gè)圖片有多少英寸的寬度或者高度，而只有在被打印出來(lái)后才有ppi的意義，被打印出來(lái)才可以描述這張圖片有多高多寬。

　　3、平時(shí)制作H5頁(yè)面時(shí)設計原型時(shí)，產(chǎn)品經(jīng)理出的原型稿建議屏寬為320px，用這個(gè)尺寸一是為了瀏覽方便(現在很多手機的屏寬達到1440px，用這個(gè)尺寸去模擬顯然不現實(shí))，二是以iPhone5s為標準的手機屏寬較小，進(jìn)行內容排版布局時(shí)屏寬應該向下兼容。

　　4、制作設計稿時(shí)，設計師應該把原型稿上的所有尺寸進(jìn)行2倍處理。這樣設計稿在移動(dòng)設備上預覽便可保證清晰。而前端切片時(shí)，按照現在流行的做法，可以直接使用原型稿上的尺寸，也就是設計稿上的1/2。

　　5、一般情況下，H5頁(yè)面設計稿做成640x1136px是最為穩妥的尺寸，在812px高度處增加一條安全線(xiàn)，重要內容在此線(xiàn)之上(網(wǎng)上有些文章說(shuō)安全線(xiàn)是960px處，個(gè)人認為不太準確)。既保證了在移動(dòng)設備上顯示清晰，也保證了素材的最小尺寸。

　　雖然手機因為性能和網(wǎng)絡(luò )等限制因素，不能達到PC專(zhuān)題那么優(yōu)秀的效果。但手機網(wǎng)頁(yè)還是有他獨有的優(yōu)勢。手機網(wǎng)頁(yè)也是可以動(dòng)起來(lái)的，而且還可以通過(guò)手機特有的重力感應功能做視差滾動(dòng)效果的交互，看起來(lái)很優(yōu)雅。通過(guò)手機控制PC頁(yè)面的瀏覽也是一種新體驗，不妨試試挖掘更多可能性。下面鄭州清新教育的小編告訴您手機網(wǎng)頁(yè)設計注意事項，手機頁(yè)面排版方法。

　　先做PC版的頁(yè)面還是手機版頁(yè)面 　　看用戶(hù)的訪(fǎng)問(wèn)數據來(lái)定。一般情況下都是先做PC版的頁(yè)面再做手機頁(yè)面，PC端網(wǎng)頁(yè)可以呈現更豐富的內容，用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)更專(zhuān)注，達到最好的體驗。但有很多情況下，頁(yè)面的訪(fǎng)問(wèn)更多的來(lái)自手機端，比如專(zhuān)題頁(yè)面，用戶(hù)通過(guò)微信、手機QQ入口進(jìn)入。如果開(kāi)始就先做PC版的專(zhuān)題，想必手機版的內容將是一個(gè)移植的PC版網(wǎng)頁(yè)，讓移動(dòng)版的體驗大打折扣。

　　1.安全寬度與擴展區域讓頁(yè)面適應主流分辨率 　　與PC上網(wǎng)頁(yè)的做法一樣，確定一個(gè)安全寬度，把重要信息控制在640PX寬度內(以iphone分辨率為安全寬度。目前主要瀏覽器在iphone4S下的首屏高度如下,可以根據具體頁(yè)面投放的渠道做相應的首屏高度。

　　2.控制圖片的大小 　　專(zhuān)題的頭圖一般有很強的視覺(jué)，對于手機用戶(hù)來(lái)說(shuō)，加載一張圖片的等待時(shí)間比PC上成本大很多，如果一個(gè)頁(yè)面加載時(shí)間超過(guò)5秒，70%的用戶(hù)會(huì )選擇關(guān)閉，那么再出彩的專(zhuān)題也沒(méi)辦法呈現再用戶(hù)面前了,所以需要對設計稿做折中的處理。 　　在做頭部的延展區域(超出640px范圍)，推薦使用純色，漸變，可以平鋪的素材，以便于減少頭圖的大小，提高加載速度，并且延展區域可以無(wú)縫連接。模糊的背景可以最大限度的壓縮圖片質(zhì)量。

　　3.字體 　　手機中的字號一般上電腦中的兩倍，一般在電腦中用的12px的字體在手機網(wǎng)頁(yè)中就該使用24px。在設計的過(guò)程中，也要使用iOS和安卓默認渲染的字體，以便更真實(shí)的還原真實(shí)環(huán)境。在規范的專(zhuān)題中，主要字號控制在3個(gè)，大中小都有一個(gè)區間。避免隨意用字體字號，并且字號必須上整數。

　　4.控件交互區域適合觸控 　　手機專(zhuān)題的主按鈕高度大于80px，并且根據活動(dòng)的需求放在首屏內。文字鏈接上下的間距大于80px，手指在屏幕上熱區最小感應是44px。

　　5.移動(dòng)端網(wǎng)頁(yè)少用跳轉 　　手機用戶(hù)的網(wǎng)絡(luò )環(huán)境不如PC用戶(hù)，頁(yè)面的跳轉會(huì )對用戶(hù)產(chǎn)生更大的心理效力，如果在手機頁(yè)面中能把信息合理的展示在一個(gè)頁(yè)面中最佳。如果非要跳轉，咱們可以用些假裝不是跳轉的方式，比如展開(kāi)，浮出等。減少用戶(hù)產(chǎn)生的不安全感。