網(wǎng)頁(yè)設(shè)計(jì)中“像素”和“點(diǎn)”的區(qū)別

產(chǎn)品開(kāi)發(fā)的分工是一件挑戰(zhàn)團(tuán)隊(duì)合作技巧的事情，以網(wǎng)頁(yè)開(kāi)發(fā)來(lái)說(shuō)，由于網(wǎng)頁(yè)的特性，單純的網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)師很少能夠直接掌握產(chǎn)品最終的外觀，往往是在繪 圖軟件里面將視覺(jué)部分定稿，再由前端工程師根據(jù)設(shè)計(jì)來(lái)將產(chǎn)品的視覺(jué)部分實(shí)現(xiàn)出來(lái)。舉凡圖片的尺寸、位置，組件的效果、色彩的 RGB 值、文字的尺寸等等，都必須清楚的傳達(dá)才能夠完整的重現(xiàn)原本的設(shè)計(jì)。先前我們?cè)?jīng)介紹過(guò)一些方便網(wǎng)頁(yè)制作時(shí)的溝通技巧跟工具，有興趣的讀者可以參考【學(xué)會(huì)為設(shè)計(jì)稿做好標(biāo)注（附工具推薦）】。

而在開(kāi)發(fā) APP 的時(shí)候，這些問(wèn)題一樣存在。在大部分的時(shí)候，我們都使用像素來(lái)做繪制以及開(kāi)發(fā) App 的單位，這沒(méi)什么問(wèn)題，尤其是 iOS 系統(tǒng)目前的屏幕尺寸還算單純，使用像素作為溝通的單位基本上不會(huì)有什么太大的誤會(huì)產(chǎn)生。需要的時(shí)候頂多是視覺(jué)設(shè)計(jì)師準(zhǔn)備一臺(tái)手持裝置，透過(guò) xScope、Screenshots 之類(lèi)的工具實(shí)時(shí)在手機(jī)上檢視設(shè)計(jì)稿，增加工作的效率。

但是文字的尺寸則會(huì)出現(xiàn)問(wèn)題，實(shí)際上遇到的狀況就是設(shè)計(jì)師提供的字體尺寸不對(duì)，開(kāi)發(fā)人員如果按照設(shè)計(jì)師的數(shù)值，則制作出來(lái)的文字會(huì)比設(shè)計(jì)稿來(lái)得變?。?/p>

有經(jīng)驗(yàn)的開(kāi)發(fā)人員通常就直接把設(shè)計(jì)師給的數(shù)值直接乘以 2 使用，藉以得到原本設(shè)計(jì)的結(jié)果，但這其中當(dāng)然是有些誤會(huì)在其中。在這里我們發(fā)現(xiàn)設(shè)計(jì)師標(biāo)示文字尺寸時(shí)是使用了 pt 這個(gè)單位，很容易讓人把它跟像素搞混在一起，但它們卻是完全不同的東西。

pt 是常見(jiàn)的標(biāo)示文字尺寸的單位，在繪圖以及文書(shū)軟件等幾乎都是使用 pt 作為字體尺寸的單位，故一般稱(chēng)呼「字級(jí)」時(shí)，通常即是指 pt，許多平面排版設(shè)計(jì)師都喜歡在手邊準(zhǔn)備一張字級(jí)對(duì)照表，方便與客戶(hù)溝通時(shí)使用。

px 與 pt 的區(qū)別

px ( pixel、又稱(chēng)為像素) 與 pt ( point、有時(shí)被稱(chēng)為點(diǎn)) 是兩個(gè)看起來(lái)很像、卻完全不一樣的單位 (在某些場(chǎng)合他們是1：1的)，在很多時(shí)候卻常常被搞混，或是制作過(guò)程根本沒(méi)有分清楚、導(dǎo)致結(jié)果沒(méi)有很精確。在繪圖軟件里面可以看到基本單位設(shè)定里面就有 這兩個(gè)選擇：

px ，即是 pixel、像素 。是屏幕上所顯示的最小單位，當(dāng)制作的版面是供屏幕瀏覽時(shí)，使用 px 可以精確的控制畫(huà)面上顯示效果。但也因?yàn)槊總€(gè)屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一個(gè)像素可能會(huì)小到肉眼無(wú)法辨識(shí)的大小。

pt，即是 point，是一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位。定義上 1pt＝1/72 英吋。因此它跟我們所熟悉的公分、公尺一樣，可以明確的指出1pt 的長(zhǎng)度是多少。

也因此，像 word 這種以打印輸出為需求的軟件，字體大小使用 pt 就顯得相當(dāng)方便實(shí)用，只要軟件設(shè)定是對(duì)的，使用多少 pt 的字級(jí)，透過(guò)打印后永遠(yuǎn)都會(huì)得到一樣大小的字體。

但是在屏幕顯示的時(shí)候，則需要透過(guò)一定的轉(zhuǎn)換公式，但這邊會(huì)遇到的另外一個(gè)問(wèn)題就是各家操作系統(tǒng)的 dpi 并不一致。Windows 系統(tǒng)一般都是設(shè)定 96dpi，Mac 的OSX系統(tǒng)則大多是 72dpi。由于 pt 在定義上是 1/72 英吋的關(guān)系，因此在 72dpi 的系統(tǒng)上時(shí) 1pt= 1px，這沒(méi)什么問(wèn)題，但在 96dpi 時(shí)則明顯不適用，像素密度明顯變細(xì)了，所以需要一個(gè)轉(zhuǎn)換的公式，在這邊，1px ＝ 0.75pt。（ 72 / 96 = 0.75 )

也因?yàn)檫@樣，在許多時(shí)候都建議屏幕顯示用的設(shè)計(jì)可以選擇 px 作為字體的單位，例如網(wǎng)頁(yè)的css 樣式表單就有 pt、px 以及百分比的 em 等方式來(lái)定義字體大小可供設(shè)計(jì)師選擇。

開(kāi)發(fā) iOS app 的時(shí)候，雖然沒(méi)有這么多樣的單位可選，但設(shè)計(jì)師只需要簡(jiǎn)單的利用一些小技巧即可讓文字尺寸與最后的結(jié)果相符：由于 Photoshop 使用 1 inch = 72 pt 的標(biāo)準(zhǔn)，因此當(dāng)文件檔案的分辨率設(shè)定為 72 的時(shí)候（這是默認(rèn)值），1 pt = 1 px ，而設(shè)定為 144 的時(shí)候 1 pt = 2 px 。

所以，在以 Retina APP 為主流的現(xiàn)在，開(kāi)新文件時(shí)請(qǐng)記得將檔案的分辨率設(shè)定為 144，如此就能保證你的 pt 數(shù)值是開(kāi)發(fā)人員需要的數(shù)值了。

pt 與 px 理解起來(lái)其實(shí)不難，在應(yīng)用的時(shí)候其實(shí)也相當(dāng)單純，在大部分的情況下適用的一個(gè)理論是：當(dāng)設(shè)計(jì)的目的是用于供屏幕瀏覽, 則趨向于使用 px 以方便掌握細(xì)節(jié)；而如果是為了做輸出打印的需求, 使用 pt 則是較好的選擇。

文章名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)中“像素”和“點(diǎn)”的區(qū)別
文章分享：http://www.bm7419.com/news13/218963.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、云服務(wù)器、小程序開(kāi)發(fā)、ChatGPT、域名注冊(cè)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)