網頁美工設計

網頁設計手機移動端設計稿寬度多少

編輯：時間：2018-02-21 09:20:46

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

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

　　通過對比可得：

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

　　由于Android系統可以更改狀態欄和導航欄的高度，這里可以取默認值為48px和100px(這些尺寸網上均可查)。

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

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

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

　　結論：

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

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

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

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

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

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

　　先做PC版的頁面還是手機版頁面　　看用戶的訪問數據來定。一般情況下都是先做PC版的頁面再做手機頁面，PC端網頁可以呈現更豐富的內容，用戶瀏覽網頁時更專注，達到最好的體驗。但有很多情況下，頁面的訪問更多的來自手機端，比如專題頁面，用戶通過微信、手機QQ入口進入。如果開始就先做PC版的專題，想必手機版的內容將是一個移植的PC版網頁，讓移動版的體驗大打折扣。

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

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

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

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

　　5.移動端網頁少用跳轉　　手機用戶的網絡環境不如PC用戶，頁面的跳轉會對用戶產生更大的心理效力，如果在手機頁面中能把信息合理的展示在一個頁面中最佳。如果非要跳轉，咱們可以用些假裝不是跳轉的方式，比如展開，浮出等。減少用戶產生的不安全感。

<< 上一篇：人工智能網頁設計的特點和優勢

>> 下一篇：網頁設計常用的技能手法：色彩疊加

推薦資訊