由于HTML5和微信內(nèi)置瀏覽器的火爆,移動(dòng)端H5網(wǎng)頁(yè)越發(fā)流行。在設(shè)計(jì)制作移動(dòng)端網(wǎng)頁(yè)的時(shí)候,你是否疑惑,這種網(wǎng)站設(shè)計(jì)稿應(yīng)該做成的多少屏寬,是否應(yīng)該跟手機(jī)的分辨率一致,還是應(yīng)該按照iPhone的分辨率來(lái)設(shè)計(jì)(注意H5網(wǎng)頁(yè)區(qū)別于APP,APP的設(shè)計(jì)稿直接按照手機(jī)分辨率來(lái)設(shè)計(jì))?那么對(duì)于現(xiàn)在2K屏幕的手機(jī),應(yīng)該如何制作設(shè)計(jì)稿和前端稿呢?
由于文章篇幅原因,結(jié)論先行:
1、像素是沒(méi)有寬高的(不要被Photoshop中的像素格欺騙),它只代表一個(gè)采樣的色值。
2、任何圖片作為數(shù)據(jù)信息被保存在存儲(chǔ)盤(pán)中時(shí),只有寬高像素?cái)?shù)是有意義的,此時(shí)的ppi對(duì)于圖片來(lái)說(shuō)時(shí)沒(méi)有任何意義,也并不能描述這個(gè)圖片有多少英寸的寬度或者高度,而只有在被打印出來(lái)后才有ppi的意義,被打印出來(lái)才可以描述這張圖片有多高多寬。
3、平時(shí)制作H5頁(yè)面時(shí)設(shè)計(jì)原型時(shí),產(chǎn)品經(jīng)理出的原型稿建議屏寬為320px,用這個(gè)尺寸一是為了瀏覽方便(現(xiàn)在很多手機(jī)的屏寬達(dá)到1440px,用這個(gè)尺寸去模擬顯然不現(xiàn)實(shí)),二是以iPhone5s為標(biāo)準(zhǔn)的手機(jī)屏寬較小,進(jìn)行內(nèi)容排版布局時(shí)屏寬應(yīng)該向下兼容。
4、制作設(shè)計(jì)稿時(shí),設(shè)計(jì)師應(yīng)該把原型稿上的所有尺寸進(jìn)行2倍處理。這樣設(shè)計(jì)稿在移動(dòng)設(shè)備上預(yù)覽便可保證清晰。而前端切片時(shí),按照現(xiàn)在流行的做法,可以直接使用原型稿上的尺寸,也就是設(shè)計(jì)稿上的1/2。
5、一般情況下,H5頁(yè)面設(shè)計(jì)稿做成640x1136px是最為穩(wěn)妥的尺寸,在812px高度處增加一條安全線,重要內(nèi)容在此線之上(網(wǎng)上有些文章說(shuō)安全線是960px處,個(gè)人認(rèn)為不太準(zhǔn)確)。既保證了在移動(dòng)設(shè)備上顯示清晰,也保證了素材的最小尺寸。推薦前端攻城獅使用騰訊智圖,這里的圖片壓縮還是相當(dāng)好用,可以節(jié)省用戶不少帶寬。
6、文字默認(rèn)24px 小點(diǎn)兒可以20px 但是不能再小了
