網(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)生的不安全感。
- 2018-02-08人工智能網(wǎng)頁(yè)設計的特點(diǎn)和優(yōu)勢
- 2018-02-052018年較新流行的網(wǎng)頁(yè)設計趨勢
- 2018-02-05響應式網(wǎng)頁(yè)設計與自適應網(wǎng)頁(yè)設計有什么區別
- 2018-02-01網(wǎng)頁(yè)設計制作簡(jiǎn)化網(wǎng)頁(yè)設計的方法
- 2018-01-29網(wǎng)頁(yè)設計領(lǐng)域中的開(kāi)放式布局
- 2018-01-29影響網(wǎng)頁(yè)設計的5個(gè)關(guān)鍵因素
- 2018-01-22網(wǎng)頁(yè)設計師如何和客戶(hù)理解與溝通
- 2018-01-20網(wǎng)頁(yè)設計中的排版原則有哪些
- 2018-01-18網(wǎng)頁(yè)設計必須注意的一些常見(jiàn)問(wèn)題
- 2018-01-02網(wǎng)頁(yè)設計中flex布局垂直水平居中
- 2017-12-15網(wǎng)頁(yè)設計flex布局瀏覽器兼容解決方案
- 2017-10-27網(wǎng)頁(yè)設計為什么在不同電腦顯示不一樣
- 2017-09-01網(wǎng)頁(yè)設計博客類(lèi)的靈感源于借鑒
- 2017-09-01網(wǎng)頁(yè)設計師的靈感主要從哪里來(lái)
- 2017-07-11網(wǎng)頁(yè)設計移動(dòng)端H5前端性能優(yōu)化方案
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16