UI筆記(一)
前言：作為一名UI設(shè)計師，在工作中不可避免會遇到px/pt/dp等基礎(chǔ)單位，這些并不是一成不變的，場景的不同決定了其所承載的職能也不同，本文將根據(jù)查閱到的資料加上作者的理解對這些單位做出較為淺顯易懂的解釋，百密之中難免一疏，如有解釋的不恰當(dāng)?shù)牡胤?，望指正?/p>
01-PX?(pixel)? ?
px：像素，由三個發(fā)光管RGB組成的最小基本單元。
常見場景：視覺稿單位/分辨率單位/css常用單位(網(wǎng)頁、web應(yīng)用等)。
1.??視覺稿單位。UI設(shè)計師設(shè)計界面，無論設(shè)計工具是PS、sketch還是XD，其基本單位都是px。當(dāng)我們完成視覺稿交付給開發(fā)，開發(fā)會根據(jù)場景進(jìn)行單位換算。
2.??分辨率單位。我們經(jīng)常會看到”xx手機屏幕的分辨率1920*1080”這里1920*1080的單位即是px。
3.??css常用單位。web端開發(fā)html+css直接采用px為基本單位。
02-PT(point)
pt：點，絕對長度單位。密度無關(guān)像素，是IOS開發(fā)的基本單位。
常見場景：印刷行業(yè)常用單位/IOS開發(fā)基本單位/PS中的字體單位。
1.?印刷行業(yè)常見單位。查字典可知，pt翻譯過來并不是“點”，而是“磅”。在印刷行業(yè)，pt是一個絕對單位，是可用標(biāo)準(zhǔn)測量工具測出尺寸的。1pt=1/72(inch)。
2.?IOS開發(fā)基本單位。UI設(shè)計師與平面設(shè)計師不同，由于市面上存在各種各樣屏幕尺寸的手機，分辨率碎片化，為了能夠一稿適配，蘋果官方設(shè)定了pt為IOS基本單位。在這里，它代表著密度無關(guān)像素(獨立像素)(邏輯像素)，意味著它不會隨著屏幕密度(PPI)的改變而改變。它也是一個絕對尺寸，我們可以用iphone3GS(1px=1px)的尺寸與屏幕密度(PPI)得出1pt=1/163(inch)。
3.?PS中的字體單位。假如PS設(shè)定72PPI的背景，此時的pt約等同于場景1的pt，PS默認(rèn)使用1pt=1/72(inch)的標(biāo)準(zhǔn)。為什么PS中的pt和IOS開發(fā)單位含義不同呢？因為PS中的字體大小單位pt是服務(wù)于印刷行業(yè)的(PS更偏向于平面設(shè)計)。所以如果用PS設(shè)計視覺稿，需要將字體大小單位調(diào)為px方便開發(fā)。
總結(jié)：雖然印刷行業(yè)單位與IOS開發(fā)基本單位都叫pt，但是兩者無論是概念還是數(shù)值都不盡相同，此pt非彼pt。
03-dp/sp? ?
dp/sp:(device independent pixels)密度無關(guān)像素，是Android開發(fā)的基本單位。
使用場景：移動端開發(fā)。
dp：Google設(shè)定dp為Android開發(fā)基本單位，其效果與IOS中的pt類似，同樣是為了一稿適配不同的移動端設(shè)備而創(chuàng)定的。1dp=1/160(inch)。
sp：Android開發(fā)中文字的基本單位。
dp和sp的區(qū)別：
?32dp的文字與32sp的文字在默認(rèn)顯示上并沒有區(qū)別。sp最重要的作用是可以跟隨系統(tǒng)文字一起調(diào)整(例如系統(tǒng)文字從中字號變成大字號，用sp為單位的文字會變成大字號，但以dp為單位的文字則不會改變)。對于一些視覺性的文字，需要固定其大小時，使用dp單位。其他情況，使用sp為單位。
dp和pt的異同點：
1.????都是屏幕密度無關(guān)像素，為了適配不同的設(shè)備尺寸、不同的分辨率而設(shè)計出來的單位。
2.????使用場景不同，一個是IOS開發(fā)單位，一個是Android開發(fā)單位。
3.????絕對尺寸不同。1pt=1/163(inch)，1dp=1/160(inch)。
思考：為什么要單獨設(shè)定pt與dp為開發(fā)單位，而不是用px呢？
04-PPI/DPI
PPI:(pixels per inch)每英寸含有的像素值，又稱像素密度。
使用場景：屏幕。
DPI：(dots perinch)每英寸含有的點數(shù)。又稱點密度。
使用場景：印刷設(shè)備/屏幕。
PPI場景解讀：
屏幕：我們常用PPI來衡量一塊屏幕細(xì)膩程度。PPI越高，屏幕越精細(xì)，能顯示的細(xì)節(jié)就越多，給人的視覺感受也更好。我們以iPhone3GS和iPhone4為例子，屏幕尺寸同樣是3.5英寸，其物理分辨率卻并不相同。iPhone4的PPI是iPhone3GS的兩倍。
問題：為什么要單獨設(shè)定pt與dp為開發(fā)單位，而不是用px呢？
可以得出：像素(px)是一個相對單位，如果以像素為單位開發(fā)移動端，在iPhone4上一個按鈕尺寸40px剛剛好，放在iPhone3GS中40px就過大了。為了適配各種分辨率的屏幕，設(shè)計了絕對單位pt/dp，不會隨著屏幕密度的改變而忽大忽小。
例：一個10cm*2cm的長方形，是一個絕對尺寸，可以被標(biāo)準(zhǔn)測量工具測出尺寸的，這10cm*2cm的長方形里包含了多少像素都與其無關(guān)，不會隨著屏幕密度的改變而改變。
DPI場景解讀：
印刷設(shè)備：在印刷中，是以DPI為參考印刷，點(pt)是最小單位。例：打印一張分辨率為1920*1080且DPI為72的圖片。
屏幕：在屏幕設(shè)備中，并沒有對DPI和PPI做出詳細(xì)區(qū)分。我們常說電腦屏幕的DPI為96，這里的DPI和PPI相同，指的是像素密度。但是DPI就是PPI嗎？不盡然，這需要參考上下文語境。DPI的最小單位是點，PPI的最小單位是像素，當(dāng)一個點等于一個像素的時候，我們可以說DPI與PPI相同。但是在一些特殊屏幕如Mac retina(我們常說的2k屏、4k屏)，一個像素等于很多個點，這時候DPI就不等同于PPI了。例：一個150ppi的圖片在600dpi的設(shè)備上顯示，每個pixel有16個dot。
PS：一般電腦屏幕用DPI，手機屏幕用PPI。
場景擴展：“柵格處理”
我們知道，一張圖片的真正大小是由分辨率所決定的。圖片的分辨率決定了所承載的細(xì)節(jié)內(nèi)容。那么DPI有什么用呢？
屏幕場景：這里要提到一個“設(shè)備的最大解析能力”。有72DPI的設(shè)備，也有300DPI的設(shè)備。這里的72和300決定了設(shè)備的最大解析能力。在72DPI屏幕上我們只能看到最高72DPI的圖片。如果將一張300DPI的圖片用72DPI的設(shè)備進(jìn)行顯示，會怎么樣呢？設(shè)備會進(jìn)行“柵格處理”。
柵格處理就是在圖片尺寸不變的情況下，對圖片DPI進(jìn)行處理，圖片的信息量會受到影響。一張300DPI的圖片明顯超過了72DPI屏幕的最大解析能力，所以屏幕會將其柵格成72DPI的圖片。UI設(shè)計師在導(dǎo)出視覺稿1倍圖時，在電腦屏幕(96DPI)上看好像沒有問題，但是放在手機(300PPI)上預(yù)覽就會顯得模糊了。這是因為手機屏幕將其柵格成300DPI的圖片，其缺少很多細(xì)節(jié)，所以就顯得模糊了。
打印機場景：DPI還有一個重要作用就是作為電子屏幕與打印機溝通的橋梁。同等分辨率的圖片，一張72DPI，一張300DPI，在顯示上可能不會有太大的差別，但是打印出來差別很大。例如72DPI的圖片用300DPI的設(shè)備打印出來就是模糊的。
? ?物理分辨率/邏輯分辨率? ?
物理分辨率/邏輯分辨率：在日常生活中我們所提到的手機分辨率指的就是物理分辨率。如上圖中的640*960、1242*2208等，由于尺寸規(guī)格不一，為了方便設(shè)計師做視覺稿，誕生了邏輯分辨率。物理分辨率除以縮放因子進(jìn)行縮放得到邏輯分辨率，邏輯分辨率之間差別不大，例如用320*480的尺寸做的視覺稿同樣可以適配320*568。
(結(jié)合第一部分：以px為單位的是物理分辨率，以pt為單位的是邏輯分辨率)
結(jié)尾：以上就是作者對于用戶界面設(shè)計中經(jīng)常會遇到的一些單位做出的歸納總結(jié)。個人總結(jié)難免有疏忽以及理解不到位的地方，不足之處望指正。謝謝！
End
