移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些
- 作者：新網(wǎng)
- 來源：新網(wǎng)
- 瀏覽：100
- 2018-03-03 16:09:22
移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些？現(xiàn)在我們經(jīng)?？吹降碾娚叹W(wǎng)站的手機(jī)頁面大都是直接按照移動(dòng)端頁面尺寸設(shè)計(jì)的，那么你知道移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些嗎？小編就來與大家聊一聊這個(gè)問題。
移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些？現(xiàn)在我們經(jīng)常看到的電商網(wǎng)站的手機(jī)頁面大都是直接按照移動(dòng)端頁面尺寸設(shè)計(jì)的，那么你知道移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些嗎？小編就來與大家聊一聊這個(gè)問題。
可以通過這個(gè)測試頁面 https://greenzorro.github.io/demo/basic/響應(yīng)式斷點(diǎn).html 來看看你的移動(dòng)設(shè)備屏幕寬度，這是邏輯像素寬度。
以iPhone 5s為例，屏幕的分辨率是640x1136，倍率是2。瀏覽器會(huì)認(rèn)為屏幕的分辨率是320x568，仍然是基準(zhǔn)倍率的尺寸。所以在制作頁面時(shí)，只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設(shè)計(jì)和開發(fā)頁面。只不過在準(zhǔn)備資源圖的時(shí)候，需要準(zhǔn)備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。
實(shí)際應(yīng)用
大家最關(guān)心的還是實(shí)際運(yùn)用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個(gè)平臺(tái)來分別梳理一下。不過在這之前，我要為使用PS進(jìn)行設(shè)計(jì)的朋友介紹一個(gè)小技巧。
之前我說過，我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計(jì)過程中，就是要把單位設(shè)置成邏輯像素。打開PS的首選項(xiàng)——單位與標(biāo)尺界面，把尺寸和文字單位都改成點(diǎn)(Point)。這里的點(diǎn)也就是pt，無論設(shè)計(jì)iOS、Android還是Web應(yīng)用，單位都用它。當(dāng)然，各平臺(tái)單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。
要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個(gè)DPI，其實(shí)就是PPI，像素密度。有個(gè)常識(shí)大家都知道，屏幕上的設(shè)計(jì)DPI設(shè)成72，印刷品設(shè)計(jì)DPI設(shè)成300。
移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些？以上文章就是小編為大家?guī)淼年P(guān)于移動(dòng)端頁面尺寸設(shè)計(jì)考慮的因素有哪些的全部文字介紹了，希望對你有所幫助。
免責(zé)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)自行上傳，本網(wǎng)站不擁有所有權(quán)，也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，請發(fā)送郵件至：operations@xinnet.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，本站將立刻刪除涉嫌侵權(quán)內(nèi)容。
商品已成功加入購物車