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

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

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

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

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

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

px 與 pt 的區(qū)別

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

px ，即是 pixel、像素 。是屏幕上所顯示的最小單位，當制作的版面是供屏幕瀏覽時，使用 px 可以精確的控制畫面上顯示效果。但也因為每個屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一個像素可能會小到肉眼無法辨識的大小。

pt，即是 point，是一個標準的長度單位。定義上 1pt＝1/72 英吋。因此它跟我們所熟悉的公分、公尺一樣，可以明確的指出1pt 的長度是多少。

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

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

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

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

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

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

名稱欄目：網(wǎng)頁設(shè)計中“像素”和“點”的區(qū)別
鏈接URL：http://bm7419.com/news/218963.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站設(shè)計公司、ChatGPT、服務(wù)器托管、App開發(fā)、云服務(wù)器

廣告

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