當(dāng)我們?cè)跒槭謾C(jī)做H5頁面設(shè)計(jì)時(shí)(包括在WECTHEN方面的H5網(wǎng)頁設(shè)計(jì)),UI設(shè)計(jì)師和前端工程師肯定會(huì)被糾纏在沒有類似的移動(dòng)端設(shè)計(jì)的情況下。如果它是一個(gè)應(yīng)用程序設(shè)計(jì)者,它就不會(huì)那么糾結(jié)。
手機(jī)屏幕的尺寸和設(shè)計(jì)手稿的大小應(yīng)作為標(biāo)準(zhǔn)尺寸?,F(xiàn)在我們有2K分辨率的屏幕,設(shè)計(jì)草案也應(yīng)該設(shè)計(jì)最大分辨率的高度。顯然不是。
注意:(所有以下內(nèi)容和規(guī)范將視圖設(shè)置為內(nèi)容=寬度=設(shè)備寬度)是我們的H5頁前端代碼必須包含
元內(nèi)容=初始規(guī)模=1,用戶可擴(kuò)展性=否,最大規(guī)模=1,寬度=設(shè)備寬度名稱=視口/
在這里,25所學(xué)校還列出了當(dāng)前最受歡迎手機(jī)的規(guī)格和尺寸規(guī)格:智能手機(jī)尺寸圖,值得一看。
感興趣的合作伙伴可以嘗試不同的大小,例如1次、2次、3次。最后的測(cè)試結(jié)果是,H5的設(shè)計(jì)草稿通常被設(shè)計(jì)為640x1136px,它不僅滿足顯示的需要,而且還減少了用戶加載圖片所需的帶寬。
當(dāng)您可以使用具有不同分辨率的移動(dòng)智能手機(jī)查看我們?cè)O(shè)計(jì)的H5頁面時(shí),當(dāng)然會(huì)有以下內(nèi)容:內(nèi)容不完整,甚至一些重要內(nèi)容和按鈕將被阻塞。
第二:當(dāng)我們進(jìn)行H5頁面內(nèi)容規(guī)劃的布局和布局時(shí),我們不能把重要內(nèi)容放在太低或部分的位置,否則前端布局可能會(huì)出現(xiàn)在內(nèi)容不完整的情況下。
因?yàn)锳ndroid系統(tǒng)可以改變狀態(tài)欄和導(dǎo)航欄的高度,所以在網(wǎng)絡(luò)上可以提供48 px和100px的默認(rèn)值。
然后頁面的內(nèi)容將被壓縮到盲區(qū)(根據(jù)不同的布局可以被擠壓出視口,也就是說,在視域下),取這兩個(gè)系統(tǒng)的最大值是148(48+100),如下面的圖5所示,設(shè)計(jì)草稿應(yīng)該嘗試EnSU。Re沒有一個(gè)重要的內(nèi)容低于一頁。
所以在所有的屏幕尺寸上都要顯示出重要的內(nèi)容,你應(yīng)該注意市面上的小型手機(jī)屏幕的存在,絕大多數(shù)智能手機(jī)現(xiàn)在的分辨率都在640X960PX(iPoNe4分辨率)以上,所以只需把重要內(nèi)容放在圖5的盲區(qū),計(jì)算后最安全高度為812(960-148=812)。
在本綜述中,一般來說,在現(xiàn)有市場(chǎng)上流行的移動(dòng)智能手機(jī)中,單頁翻轉(zhuǎn)(非延伸向下長(zhǎng)頁)設(shè)計(jì)草稿為6401136,安全線(參考線)設(shè)置在812的高度,并且重要內(nèi)容放置在安全線上。
2。任何圖片作為數(shù)據(jù)信息都存儲(chǔ)在存儲(chǔ)盤中,只有寬素?cái)?shù)和高素?cái)?shù)才是有意義的。在這一點(diǎn)上,PPI對(duì)圖片沒有意義,也沒有用英寸來描述圖片的寬度或高度,但是只有在打印出來之后,它才有PPI的含義并被打印出來。
3,當(dāng)設(shè)計(jì)一個(gè)H5頁面在平時(shí)的原型時(shí),產(chǎn)品經(jīng)理的原型草稿建議了一個(gè)寬屏幕的3PX,使用這個(gè)尺寸便于瀏覽(現(xiàn)在很多手機(jī)屏幕已經(jīng)達(dá)到1440px,使用這個(gè)大小來模擬顯然是不現(xiàn)實(shí)的)。
4,在設(shè)計(jì)草稿時(shí),設(shè)計(jì)者應(yīng)將原型手稿的所有尺寸制成2次,在移動(dòng)設(shè)備上預(yù)覽設(shè)計(jì)草稿可以確保清晰。根據(jù)當(dāng)前流行的慣例,前端切片可以直接用于原型尺寸,即:是設(shè)計(jì)草案的1/2。
5,一般來說,H5頁面設(shè)計(jì)草案是以640x1136px為最安全的大小,在812px的高度增加一條安全線,這條線上的重要內(nèi)容(因特網(wǎng)上的一些文章說安全線是960px,個(gè)人認(rèn)為它不是太準(zhǔn)確)。ISPATH在移動(dòng)設(shè)備上是清晰的,并且還確保了材料的最小尺寸。
智能地圖智能自動(dòng)優(yōu)化平臺(tái)為您的圖片智能選擇合適的圖片格式,為您壓縮圖片,以節(jié)省帶寬優(yōu)化體驗(yàn),為您提供WebP圖片,讓您的站點(diǎn)高高在上
2。(手機(jī)應(yīng)用程序設(shè)計(jì)必備的圖片壓縮偽品TiNYPNG),這里圖片壓縮還是相當(dāng)容易使用的,可以節(jié)省用戶大量的帶寬。
