設(shè)計師在進行界面設(shè)計的工作以前娘汞，了解到設(shè)計的規(guī)范是必須要掌握的珍剑。熟悉手機尺寸钓辆，分辨率則是進行設(shè)計的第一步缕溉。首先就需要區(qū)分dpi和ppi分別是什么考传。dpi在平面設(shè)計中經(jīng)常會用到，一般用來表示打印機的性能证鸥，為每英寸的點個數(shù)僚楞。當每英寸的點的個數(shù)越多，則表示打印的圖像越清晰枉层。當這個點多到一定的數(shù)量時泉褐，人的眼睛已經(jīng)識別不出來了，此時圖像接近了矢量的效果鸟蜡。而ppi通常用在界面設(shè)計當中膜赃，用來表示每英寸可以防止多少個像素。每個像素就是一個發(fā)光的點揉忘。當這個點在一定的尺寸當中越多财剖，表示圖像顯示越清晰。
像素在設(shè)備生產(chǎn)的時候就已經(jīng)確定好了癌淮。例如iPhone 8躺坟，其手機為4.7英寸，它的分辨率是750*1334乳蓄，即在橫向擁有750個像素點咪橙，縱向有1334個像素點⌒榈梗總點數(shù)與英寸相除美侦，則是每英寸的像素點的個數(shù)，也就是像素密度魂奥。像素密度越高菠剩，畫面越細膩清晰。
一個像素的大小通常不是固定的耻煤。這取決于其顯示設(shè)備的大小具壮。你可以將1920*1080的尺寸放置在普通的電腦顯示器中，也可以放置在60寸的電視上哈蝇，還可以只顯示在某些手機上棺妓。
因為手機設(shè)備的分辨率差別太大，我們在設(shè)計工作中不可能為每一套尺寸設(shè)計一套界面炮赦，這就需要我們在設(shè)計的時候怜跑，做一套能夠適應(yīng)所有設(shè)備的界面。這也就是我們?yōu)槭裁磿趕ketch中通常以375pt寬度進行設(shè)計吠勘。設(shè)計完成后性芬，我們通常導(dǎo)出三套不同倍數(shù)的圖片即可峡眶。這里的375單位是pt而不是px，是因為這里表示的是邏輯像素植锉，也是開發(fā)尺寸幌陕。
導(dǎo)出的1倍圖最早用于iPhone 3GS等設(shè)備，由于現(xiàn)在市面上基本沒人使用了汽煮，也就僅是作為開發(fā)使用搏熄。而@2x則是適用于iPhone 8等設(shè)備中，@3x則是用于iPhone 8 Plus暇赤，iPhone 11 Pro等設(shè)備中心例。這樣才能使設(shè)計的界面應(yīng)用在不同的手機設(shè)備中顯示效果的一致。而安卓設(shè)備鞋囊，由于設(shè)備太過繁雜止后，其尺寸也各式各樣，在界面設(shè)計中溜腐，通常以iPhone的375尺寸進行適配译株。
有一種情況比較特殊，這就是iPhone X等系列的機型挺益。其邏輯像素為375*812歉糜，而普通機型則是375*667，高度增加了145像素望众。蘋果官方給出了劉海區(qū)域的高度是44像素匪补，底部的虛擬home鍵給出了34像素的高度。除此之外的區(qū)域則是界面設(shè)計中的安全區(qū)域烂翰。
iPhone 8的時間條為20pt夯缺，iPhone X的時間條為44pt，高度增加了24pt甘耿，這就需要在設(shè)計時踊兜，將iPhone 8的導(dǎo)航欄下移24pt，在其頂部增加24pt的內(nèi)容使得和導(dǎo)航欄的背景色一致佳恬。如果頂部為圖片時捏境，則需要額外對圖片的頂部增加24pt的高度進行設(shè)計。底部的虛擬home鍵部分殿怜，增加了34pt的高度典蝌。在設(shè)計時曙砂，若底部有按鈕头谜，可以在底部增添34pt的內(nèi)容，使其背景色和底部按鈕背景色一致即可鸠澈，也可以正常顯示home鍵柱告。而進行如APP的啟動頁等內(nèi)容時截驮，本人建議盡量將主要內(nèi)容靠上方的位置放置進行適配或者單獨進行設(shè)計，防止頁面在不同設(shè)備下的變形际度。
本人是做UI設(shè)計工作的葵袭，特借貴平臺輸出一些內(nèi)容為大家分享，旨在共同學(xué)習(xí)和進步乖菱。以上部分分享內(nèi)容來自《規(guī)律與邏輯》坡锡。如有部分侵權(quán)請告知，將會立即刪除窒所。
