秦始皇來不及統一的 點線面 度量單位 - 從活版印刷、桌面出版、到行動裝置、顯示系統

(圖說：動手量看看，手摸到的動手摸，手摸不到的動手換算。圖片來源：Photo by Jeremy Bezanger on Unsplash。)

開發網頁或是手機、行動裝置應用程式時，會使用到各種長度單位、密度單位，例如：pixel, point, pt, dp, ppi, dpi, 等等。當軟體團隊跨足到硬體領域，面對面板、電子紙等顯示器裝置，也將真實面對，這些伸手可以摸得到的，物理度量衡量測單位。正所謂「像素點滴批，傻傻分不清」(pixel, pt, dp)…

因為有些量測單位使用於軟體領域、另一些量測單位使用於硬體、物理性場域，為了釐清、確認每個環節參數的數值與量測單位能夠正確對應，我們運用了幾個自己推導的「土炮工作法」工作模式，來做拆解，過程當中也回頭找尋當年人類從發明印刷術等歷史，從歷史中觀察或推敲這些度量衡單位之間演進的脈絡，並將結果以這篇拆解練習筆記作備忘（差不多就是每次要用的時候就會忘記，所以要寫筆記 XDD）。與大家分享、一起看看有沒有理解錯誤的地方，歡迎留言跟我們說 😃

(圖說：與 PAFERS PTI (Product & Technology Integration) 部門同事們，在大白板上嘔吐列舉出所有讓大家混擾很久的各種關於資訊顯示會用到的度量衡單位。圖片來源：Ernest。)

tl;dr

• 🟢 紙張上的 dots、顯示面板上的 pixels
• 📏 許多個 dots 或 pixels 排成一直線，可以用 inch 來度量長度
• 🚥 許多個 dots 或 pixels 排成一直線，可以用 inch 來計算密度
• 🟦 許多個 dots 或 pixels 在平面上排出一個圖案，X 和 Y 方向各用了幾個 dots 或 pixels，也就是 width x height。
• 🟢 Apple iOS 在 72 ppi 的情況下 👉 1 pixel = 1 px = 1 pt = 1 DTP point
• 🟢 Google Android 在 160 ppi (mdpi) 的情況下 👉 1 pixel = 1 px = 1 dp = 1 sp

點線面

我們從小常聽到的「點、線、面」，以此延伸在稍後我們即將面對紙張、螢幕等以平面方向資訊呈現的各種載體。

• 當我們討論「點 🟢」的時候，可以想像將一幅 點繪畫作 拿到面前很近來觀察，可以看到組成畫作線條或平線裡頭的一個點一個點。這些點可以有大有小，點與點之間的距離可以有長有短。
• 當我們討論「線 📏」的時候，可以想像將許多個點安排在同一條直線上，這就形成了一條線，可以藉由 長度單位 來進行測量。
• 當我們討論「面 🟦」的時候，可以想像將許多個點安排在同一個平面上，這就形成了一個區域，這個區域可以藉由兩個方向的 長度單位 來計算出面積。

我們最後再回到這個「點、線、面」思路，先來用土炮工作法裡頭的嘔吐法將所有我們聽過、知道過的各種名詞、單位、英文字、中文字都先寫在白板上（或紙上），然後一個一個查字典、找定義，找出他們彼此之間的關係（歷史時間先後關係、公式計算關係等等）。

以下拆解，我們試著依照歷史時間順序來介紹出場：

活版印刷 Typography

「活字的雛形或可追溯至公元前 2000 年前後美索不達米亞文明的烏魯克和拉爾薩，磚塊上面不均勻的印花被視作有可能是活字思想雛形。」 ¹

「最早用來排版的活字源於中國宋代，由工匠畢昇發明。畢昇的活字由膠泥製作，這項技術一直使用到清代之前。元代的王禎是木活字的先驅，相比泥活字，木活字對外力的耐受性更好。金屬活字同樣起源於東亞，但能夠確定的是，這一項技術並沒有西傳至比中亞更遠的地方。」

「現代的鉛活字印刷工藝由古騰堡於 西元 1439 年發明，時至今日仍然被使用。 使用這項技術排印出的第一本書是《古騰堡聖經》。」

📏 點 (points)

點 (points) ² 在此是個長度單位。不是「點、線、面」概念中的一個小點。

舉個例子可能比較好理解，「這是一個 8 點大的鉛字字母 A」，可以感覺到是一個長度，而不是八個小點。

• “In typography, the point is the smallest unit of measure, used to measure font size and leading on a printed page. Size of the point is varied in printing history.”
• 「是印刷所使用的長度單位，用於表示字型的大小，也用於餘白（字距、行距）等其他版面構成要素的長度。作為鑄字行業內部的一個專用單位，1 點的長度在世界各地、各個時代曾經有過不同定義，並不統一。」
• 1700s-1900s 這兩百年之間裡頭有許多精彩的、關於 點 的故事，大家有興趣可以繼續深挖，或是之後我再來整理一篇整理（老高模式（大誤 XDD
  • 可以從這位 Pierre Simon Fournier ³ 起頭開始挖。

長度單位 Length Units

紙張、螢幕等平面載體，都可以拆解成一個一個（一點一點）的最小基本單位，這些最小基本單位延綿成一條線，就成了「長度 (length) ⁴」。

📏 英寸 (inch)

歷史上第一次出現 inch ⁵ 這個字是在第七世紀，雖然相同文字但在各個地區長度有所不同。如下圖是十九世紀中葉，各地 inch 的換算量尺 ⁶。本文討論的是 1950s 年代成立國際度量衡系統 ⁷ 之後的 inch，是個長度單位。

• “The inch (symbol: in or double prime symbol ″ ⁸) is a unit of length in the British imperial and the United States customary systems of measurement. It is equal to 1/36 yard or 1/12 of a foot.”
• “Standards for the exact length of an inch have varied in the past, but since the adoption of the international yard during the 1950s and 1960s it has been based on the metric system and defined as exactly 25.4 mm.” (2.54 cm)
• 「英寸（英語：inch，縮寫為 in 或符號 ″），是英制及美制中的長度單位。1 英寸等於 1⁄12 英尺，亦等於 1⁄36 碼。」
• 「按照現行國際碼的定義，1 英寸嚴格等於 25.4 公釐。」（2.54 公分）
• 📏 1 inch = 25.4 mm = 2.54 cm。

桌面出版 Desktop Publishing

“Desktop publishing was first developed at Xerox PARC in the 1970s.” ⁹

桌面出版這種應用在 1970s 年代在 Xerox PARC 平台上首次開發。並於 1980s 年代 Aldus PageMaker 這套軟體，在 Apple Macintosh 平台上，使用 Adobe PostScript 技術，達成所見即所得 WYSIWYG 的桌面出版應用。之後 Aldus 被 Adobe 收購，PageMaker 也逐步往 InDesign 方向發展。

📏 點 (points)

此時的 點 (points) 和當年活版印刷的 點，已然不同，有了國際通用的英寸 (inch) 基礎之上，定義了 DTP 點 (DeskTop Publishing point)。

• “Following the advent of desktop publishing in the 1980s and 1990s, digital printing has largely supplanted the letterpress printing and has established the DTP point (DeskTop Publishing point) as the de facto standard. The DTP point is defined as 1⁄72 of an international inch (1/72 × 25.4 mm ≈ 0.353 mm)”
• 1980s-1990s 年代，「當代最通行的是廣泛應用於桌面排版軟體的 DTP 點，72 點等於 1 英寸（1 point = 127⁄360 mm = 0.352777… mm）。」

密度單位 Density Units

🚥 密度 Density

接著我們討論密度。

有了點、有了長度、接續著可以發展成面積。在單位面積中有多少東西，這是密度。例如人口密度，是在單位面積（例如每平方公里）範圍中有多少人。

稍後我們會看到 dpi, ppi 這樣的密度單位，但卻是單位長度（例如每英寸）裡頭有多少個點，這是為什麼呢？為什麼不使用單位面積呢？推測可能是一個維度相較於兩個維度來得更好理解。

假如一個 點 在物理實作時，是個 正方形，X, Y 方向等長，那我們就可以將單位面積的二維密度簡化成單位長度的一維密度。

影像印刷與掃描 Imaging Printing & Scanning

🟢 Dot

這個點可以想像成噴墨印表機或雷射印表機噴在紙上的最小一個點。由許多個小點組成一幅畫、或是一串文字。這個點是個計數的點，不是長度單位。稍後進到顯示裝置，可以對應到顯示像素 (pixel)。

• An individual dot that is going to form a video or image.

🚥 DPI (dpi) (dots per inch)

DPI ¹⁰ 用來描述數位影像、畫作、影片或掃描儀器的精細程度（密度）。例如：透過印表機列印一張繪圖在紙張上、透過掃瞄設備掃瞄一張照片進電腦，可以藉由 DPI 規格來判斷設備的精細程度。因為是固定的單位長度（例如 1 inch）當中有多少個點 (dots)，因此可以推論 DPI 數值越大，成像越細膩。

• “Dots per inch (DPI, or dpi) is a measure of spatial printing, video or image scanner dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm).”
• “Similarly, the more newly introduced dots per centimetre (d/cm or dpcm) refers to the number of individual dots that can be placed within a line of 1 centimetre (0.394 in).”

🟦 Digital imaging

數位影像 ¹¹ 發展於 1960s-1970s 年代，主要討論使用光感應器（例如 CMOS、CCD）來成像或攝影，經過數位儲存裝置後，輸出於數位顯示器上或列印在紙張上。

顯示裝置 Display device

顯示裝置 ¹² 是個視覺化的資訊輸出裝置。顯示裝置我們先討論其中兩種典型，分別是 1930s-1990s 年代的陰極射線管 (CRT ¹³)，以及 2000s 年代成為主流的發光二極體 (LED ¹⁴)。

在此我們先專注討論發光二極體 LED 顯示器。簡單來說，先想像一個發光二極體 LED 就是一個小小小發光體，三原色（三種顏色）各自一個小小小 LED，組合成一個正方形的顯示像素 (pixel)。再將這些像素在同一個平面上排列整齊，形成顯示面板 (panel)。加上背光模組、觸控模組、電源模組等組合成我們現在手機、平板、筆電等的顯示螢幕。

🟢 像素 Pixel (px)

• A cluster of LED (e.g. 3-color LED; triad)
• 一組 LED 組成成一個像素。（例如：一組三原色 LED 組合成一個像素。）
• 用個不精確的說法來方便理解，可以將 像素 (pixel) 當作是顯示面板最小顯示的一個 點。

📏 Pixel Pitch (mm)

Pixel pitch ^{15 16} 是兩個相鄰 像素 的中心點之間的距離，使用 公釐 (mm) 作為量測單位。

• “Pixel pitch as a technical measure is the distance in millimeters from the center of an LED cluster, or package, to the center of the next LED packages above, below and beside it.”
• Measure unit is millimeters (mm).

🚥 Pixel Density (PPI) (pixels per inch)

• 同樣是 100px*100px 顯示面板 (panel)，但交給不同廠商實作相同 100px*100px 解析度顯示面板，不同廠商之間最終成品的物理長度尺寸不一樣。
• 所以套用真實世界的長度單位 inch 去量測面板長度，換算成單位長度中有多少個 顯示像素 pixel，可以得到密度 ppi ¹⁷。

🟦 Resolution

• Native resolution (HxV, or WxH)
• Resolution of an image file.
• 解析度。

行動裝置系統 Mobile System

行動裝置（例如：手機、平板）沿用了桌上型電腦、膝上型電腦（筆記型電腦）的生產技術，但更近一步縮小尺寸、降低重量。輸出入裝置、關鍵零組件在概念上依然是通用的，其中也包含了顯示裝置。

2007 年 6 月 Apple iOS 行動裝置作業系統第一次發布，隔年 2008 年 9 月 Android 搭載 HTC Dream（又稱 T-Mobile G1）帥氣滑蓋鍵盤機第一次發布。（題外話，後來有收藏到一支二手 G1。）

此時的作業系統需要解決一件事情，如何讓軟體開發者、軟體設計師在一致的開發體驗當中進行繪圖、呈現 UI，而又不需要知道作業系統所運行的手機、平板對應的顯示裝置硬體規格？（相同世代的手機（例如 iPhone 13）也有可能使用多個供應商提供的顯示裝置。）

通常在軟體世界中，遇到左右兩邊都可能未知的時候，可以在中間定義一位中間人，由中間人來完成對應關係或是翻譯。這位中間人通常需要一個基準線 (baseline) 來對齊，就像在學校排隊或是跳早操的時候，對齊中央伍、向右看齊這樣的概念。對齊之後就可以在這個基礎上做變化，在數位環境中的變化也很好理解，通常和 2 有關係，所以通常會是 2 的倍數往上變大（或是變精細），也可以是 2 的倍數往下縮小（或是變粗糙）。

因此在顯示裝置硬體規格，以及作業系統軟體規格之間，就有個中間人，姑且先稱呼他為「Device-independent pixel ¹⁸」。

📏 Device-independent pixel

• “A device-independent pixel (also: density-independent pixel, dip, dp) is a unit of length.”
• “A typical use is to allow mobile device software to scale the display of information and user interaction to different screen sizes. The abstraction allows an application to work in pixels as a measurement, while the underlying graphics system converts the abstract pixel measurements of the application into real pixel measurements appropriate to the particular device.”

Apple iOS

🟢 1 pt

Apple iOS 定義：在 72 ppi 的情況下，

• 1 pixel = 1 px = 1 pt = 1 DTP point

🚥 iOS Scale Factor

@1x, @2x, @3x。

• iOS Docs: Human Interface Guidelines > Image Size and Resolution

Google Android

🟢 1 dp

Google Android OS based device 在 160 ppi (mdpi) 的情況下 (baseline density)，

• 1 pixel = 1 px = 1 dp = 1 sp

🚥 Android Density Qualifier

Android Density qualifier: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi, tvdpi

• Android Docs:
  • Screen compatibility overview  |  Android Developers
  • Support different pixel densities |  Android Developers

FAQ

Q: 為什麼人類需要這麼多種不同度量單位，來描述印刷出版或數位影像的長度/密度？

• 在不同時空背景和情境之下，需要解決的問題不同，也對應不同的度量衡單位。但基本出發點都是想要一個 最小單位，來告訴大家手上摸到的東西、眼前看到的影像有多長、有多大、或有多細緻。在尋找這個最小單位的當下，通常會選用當時隨手可以取得的方法。
  • 從歷史脈絡來看，人類從一開始活版印刷，製作鉛板等需要 點 (points)。 👉 在不同地區這些 點 也有不同的長度，當時國際之間交流也才剛萌芽。
  • 隨著時間推進，印刷出版漸漸發展到使用電腦製作數位文件來做印刷出版，因此延伸出 DTP point (DeskTop Publishing point)，作為電腦印刷產業通用的 點。 👉 這套 DTP point 標準是由 John Warnock ¹⁹ 和 Charles Geschke ²⁰ 所發展，當時他們正在創造 Adobe PostScript。
  • 在電腦出現的同時，也逐漸搭配顯示螢幕的需求，若將近代顯示螢幕簡單分成顯示面板 (panel) 和背光板來做討論的話，定義出 pixel 這個由三原色 LED 所組成的最小單位，也滿合理的，可以讓大家知道手上這個面板由多少個 pixel 組合而成，以及藉由這些 pixel 之間的距離長短，就可以知道密度。 👉 這是物理上的單位，硬體上的單位，手摸得到的度量單位，理論上藉由合適工具的協助下，我們可以將任何一個顯示面板拆解出裡頭一個個的 pixel 元件（繼續拆下去也可以拆到 LED 或更底層的元件，但先拆到 pixel 這一層就好）。（我 ok，你先拆？！XDD）
  • 有了硬體，接下來要處理讓軟體能夠處理。所謂的處理，通常的解法是對應。如果在條件 A 的情況下，就對應使用方法 A 或公式 A、如果在條件 B 的情況下，就對應使用方法 B 或公式 B。
  • 所以可以看到在行動裝置系統，Apple iOS 和 Google Android 都採取的自己的對應方法，iOS 使用 pt (DTP point) 去對應硬體的 pixel，Android 使用 dp 去對應硬體的 pixel。
• 把時間拉回到活版印刷使用 點 (points) 的年代，也是在不同地區使用著不同長度的 點（名字相同，但是長度不同），但思路相同，都是想要在軟體應用曾，創造一個對應關係，對應到硬體層。在活體印刷的年代，硬體層就是紙張、鉛字，軟體層則是製作鉛字的工具。

Q: 這麼多單位和名詞，有什麼方法可以方便記憶嗎？

• 我也有這個困擾，常常當下追查清楚的時候是印象最深刻的時候，然後隔天就忘了一大半，幾個月之後要用的時候又要重新查詢一次，頗耗費時間，所以就自己編一個方便記憶的故事來將這些資訊打包起來，下次要用的時候（希望）只要解壓縮就可以馬上使用 😄
• 回到開頭所講的「點、線、面」，我覺得是個滿好的架構，搭配幾個 emoji 圖示來做分類與記憶。
  • 🟢 紙張上的 dots、顯示面板上的 pixels
  • 📏 許多個 dots 或 pixels 排成一直線，可以用 inch 來度量長度
  • 🚥 許多個 dots 或 pixels 排成一直線，可以用 inch 來計算密度
  • 🟦 許多個 dots 或 pixels 在平面上排出一個圖案，X 和 Y 方向各用了幾個 dots 或 pixels，也就是 width x height。
  • 🟢 Apple iOS 在 72 ppi 的情況下 👉 1 pixel = 1 px = 1 pt = 1 DTP point
  • 🟢 Google Android 在 160 ppi (mdpi) 的情況下 👉 1 pixel = 1 px = 1 dp = 1 sp

Q: 請問身為一位軟體工程師，我可以如何使用這些度量單位在我的專案中呢？

• 先確定密度 (ppi) ，再確定長度 (inch)，再確定解析度 (px)。
• 確定密度裡頭的確認項目之一是，確定這次軟體專案將執行在幾種硬體環境，硬體環境包含顯示裝置的 dpi/ppi 規格。
• 如果可能，盡量收集各種可能執行你這套軟體專案的硬體環境，並在其上進行測試。此時通常有機會取得顯示裝置的 dpi/ppi 等規格。
• 如果作業系統層沒有幫忙做 Device-independent pixel 對應，例如 embedded system，那可能得要自己動手（或請人動手）。

Q: 請問身為一位產品經理，這些度量單位對我的專案有哪些影響呢？

• 小則影響專案時程，大則影響庫存呆料。通常會一定幅度影響專案時程（變長的那種）。
• 如果可能，盡量收集取得這次專案的各種硬體環境給設計團隊、工程團隊等施工團隊作確認，確認顯示裝置規格、確認作業系統設定值。只要名字不一樣、版本號碼不一樣，就算供應商是同一家，都要再確認一次，眼見為憑。
• 如果無法取得所有硬體環境，且不確定自己理解是否正確，可以試著在紙上畫畫看、模擬看看各種狀況排列組合。因為 點 (points) 不會不見，只是被作業系統變成它喜歡的樣子 (pt/dp/sp)，最後對應到硬體 pixel 點亮對應的 LED 傳送到使用者的眼睛裡。

Q: 請問身為一位專案經理，我該如何運用這些度量單位在溝通中呢？

• 確認專案團隊使用相同的溝通字典，這個重要性不亞於確認專案範圍、確認專案組成成員。
• 可以玩玩看「我的 AAA 是不是你的 AAA、還是其實是你的 BBB」這類確認的遊戲。也可以設定一個小目標（例如將公司 logo 圖示顯示在指定的三種不同裝置上），邀請大家自己手上的軟體打開來，實際演練一次。
• 在溝通之前，自己做點功課也是個好方法，例如閱讀這篇文章引用的參考資料。

Q: 請問 App 設計師 與 App 工程師 之間，該如何有效率地合作？

• 有效率的前提是要找出一條可行的作業流程、做法，然後經過多次練習、實作，才有機會能逐步加速，進而從中優化提升效率。這個過程中，跨領域了解彼此之間的工作任務、常用名詞、細節是很好的開始。

Q: 請問還有更多關於這些度量單位的參考資料嗎？

• px、pt、dp、sp 大混戰 · 嫁給 RD 的 UI Designer
• UI/UX｜第一次設計 App：寫給菜逼的新手指南. 那天一翻兩瞪眼我才明白，學怎麼設計… | by H.Ching｜林筱晴 | AAPD — As A Product Designer | Medium

工具 Tools

DPI/PPI Calculator

https://www.sven.de/dpi/