像素的客觀物理特性

在 iPhone 4 發(fā)布會(huì)上，Steve Jobs 曾說：“當(dāng)你所拿的東西距離你 10-12 英寸（約25-30厘米）時(shí)，它的分辨率只要達(dá)到 300 PPI 這個(gè)‘神奇數(shù)字’以上，你的視網(wǎng)膜就無法分辨出像素點(diǎn)了?！?/blockquote>

言下之意，當(dāng) Pixels Per Inch（每英寸屏幕所擁有的像素?cái)?shù)量）數(shù)值越大時(shí)，手機(jī)屏幕的像素密度也就越高，由此肉眼對畫面的「精確性」感官就越好。但永遠(yuǎn)不要忽略顯示器成像的本質(zhì)——它是一個(gè)將圖像數(shù)字參數(shù)以物理發(fā)光單元刷新展示的過程——而在絕大多數(shù)情況下，一份圖片文件都不可能「完美無瑕」地把每一個(gè)數(shù)據(jù)像素細(xì)節(jié)通過某個(gè)終端一一映射到物理像素上為你所見。

因?yàn)橄袼攸c(diǎn)距（或條紋間距）作為顯示器的硬件指標(biāo)，直接決定了一種給定顏色的一個(gè)發(fā)光點(diǎn)與離它最近的相鄰?fù)l(fā)光點(diǎn)之間的距離，這種距離不能用軟件來更改，而這一點(diǎn)與分辨率是不同的，我們只能通過算法將圖片文件的像素與顯示器的像素點(diǎn)距關(guān)系進(jìn)行匹配。

如果你還不能充分理解上述概念，其實(shí)可以一定程度上逆向思考：好比任何一臺(tái)攝影設(shè)備都無法捕獲現(xiàn)實(shí)物理世界的一切那樣，真實(shí)物理和虛擬數(shù)據(jù)之間的轉(zhuǎn)化總存在信息的丟失，如同柏拉圖《理想國》認(rèn)為的世界是「理念的世界」一樣，這種偏差是客觀存在著的。

偏差補(bǔ)償算法與質(zhì)因數(shù)分解

從數(shù)字參數(shù)到物理參數(shù)的轉(zhuǎn)化，科學(xué)家們采用了諸多與眾不同的技術(shù)補(bǔ)償方法，比如最直截的 PPI 補(bǔ)償——目前主流手機(jī)的 PPI 其實(shí)都在 300 到 500 之間，讓肉眼盡可能無法分辨圖片文件自身的參數(shù)細(xì)微差異。

但是，顯示器硬件彼此之間總有差異，比如，iPhone X 的屏幕大小為 5.8 英寸，分辨率為 1125x2436，也就是說，這款手機(jī)在寬度方向有 1125 個(gè)物理像素，長度方向有 2436 個(gè)物理像素。由此，一個(gè)參數(shù)為 1125x2436 的圖片文件在 iPhone X 上靜態(tài)展示時(shí)（動(dòng)態(tài)如 overflow 的滾動(dòng)時(shí)依然會(huì)在縱向失去對齊能力），我們可以認(rèn)為 Layer 上所有的像素和屏幕上的像素可以絕對完美對齊映射。

但如果一個(gè) 1080 寬的圖片要在 iPhone X 上要滿屏顯示呢？這時(shí)候就不得不運(yùn)用補(bǔ)償算法。

正因此，早期的電腦顯示器主流分辨率為：

14英寸 1024×768

15英寸 1280×1024

17英寸 1600×1280

21英寸 1600×1280

這些數(shù)字乍看之下沒有什么明顯特征，但為何它們會(huì)成為行業(yè)共識(shí)？來觀察它們的質(zhì)因數(shù)分解：

1024=2×2×2×2×2×2×2×2×2

1280=2×2×2×2×2×2×2×2×5

768=2×2×2×2×2×2×2×2×3

1080=2×2×2×3×3×3×5

……

顯然，我們即便不考慮硬件的具體像素偏差補(bǔ)償算法，也很容易理解文件參數(shù)與硬件參數(shù)的公約數(shù)越多，適配（尤其 GPU 縮放）性就越好，物理像素的偏差就越不容易被肉眼觀察到，這一點(diǎn)在早期電腦顯示器研發(fā)中至關(guān)重要。

而手機(jī)終端的硬件發(fā)展速度實(shí)際已經(jīng)超越了傳統(tǒng)顯示器，通過 PPI 的瘋狂提升已經(jīng)能解決大多數(shù)像素顯示偏差，因此多樣化尺寸的手機(jī)款式自然越來越多。

并且現(xiàn)在的偏差補(bǔ)償技術(shù)越來越多樣，比如響應(yīng)式像素補(bǔ)償（在抽取一個(gè)像素補(bǔ)償?shù)幕A(chǔ)上，再抽取備用像素根據(jù)第一個(gè)像素的響應(yīng)強(qiáng)度進(jìn)行色彩備用補(bǔ)償）、相鄰像素相關(guān)性補(bǔ)償（針對向錯(cuò)誤差通過迭代函數(shù)進(jìn)行亮度水平修正）等，所以大多數(shù)頁面中我們已經(jīng)很難明顯注意到網(wǎng)頁前端的畫面偏差。

新媒體圖像設(shè)計(jì)的誤差「玄學(xué)」

而新媒體圖像設(shè)計(jì)作為一種前端導(dǎo)向的設(shè)計(jì)，width: 100% 的應(yīng)用是非常普遍的，加之長圖切片化的主流設(shè)計(jì)方法，圖像與圖像頻繁涉及無縫銜接。在這種情況下，如果設(shè)計(jì)師能力初出茅廬，設(shè)計(jì)時(shí)寬度定義隨心所欲，就極有可能出現(xiàn)因物理像素偏差補(bǔ)償不足產(chǎn)生的圖像銜接問題。

很多時(shí)候，新媒體工作者仔細(xì)查看代碼對照、對照圖片，都無法找到其問題所在，只能將其歸咎于玄學(xué)。但實(shí)際上，筆者就見過一些頭部大品牌設(shè)計(jì)師，出圖使用如 1135 這類匪夷所思的寬度（1135=5×227），一方面這種難以進(jìn)行質(zhì)因數(shù)分解的參數(shù)對任何硬件終端的物理屬性都是極端不友好的，另一方面體現(xiàn)了身為設(shè)計(jì)師但前端基本常識(shí)匱乏的技術(shù)和思路問題。

作為品牌方，我們不可能在任何情況下去指望用戶端的硬件能力去補(bǔ)償自身的設(shè)計(jì)問題，選擇合理合適的圖片寬度進(jìn)行統(tǒng)一設(shè)計(jì)并規(guī)范切圖，就是解決這類如對齊偏差等玄學(xué)的首要步驟。

計(jì)育韜

微信官方 SVG AttributeName 白名單開發(fā)者
上海市信息化青年人才協(xié)會(huì)會(huì)員
上海市知識(shí)分子聯(lián)誼會(huì)會(huì)員
復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心導(dǎo)師

著有：
設(shè)計(jì)學(xué)圖書《Prezi 完全解讀：從入門到精通》
傳播學(xué)圖書《硬核運(yùn)營：技術(shù)流新媒體養(yǎng)成》

標(biāo)簽：SVG交互新媒體運(yùn)營公眾號(hào)排版