解密像素

 

像素如何工作以及它如何影響你的設計 

像素的容量指的是在一個無力空間里（通常是英寸）有多少像素被放里面，在最開始的蘋果電腦里，有72像素/英寸，(也許聽起來很多，但是實際上平面上需要這么多的像素)

 

為最開始MAC設計的圖標 Susan Kare設計的。

自從那時候開始屏幕的發展技術很快。現在，即使最基本的電腦屏幕也達到了在115到160像素每英寸。但是一個新的角色這個演變的過程中出現了，就是在2010年當蘋果介紹了一款iphone配備了Retina顯示。一個超級爽的屏幕因為在把每英寸上的像素雙倍顯示了。結果顯而易見，我們看到了一個更佳清晰的屏幕。 

注意一下不同的清晰度尤其是郵箱圖標的清晰度。

為了對用戶的界面保持相同的尺寸物理尺寸，像素的范圍加倍。一個44像素高的按鈕現在要變成88像素高了。為了適應不同的設備， 設計者需要提供不同的圖片（比如按鈕）例如“1px”和“2px”圖片。但是有一個急需解決的難題，你不能直接說：“嗨，這個按鈕應該是44px 高”，因為在不同設備上也同樣需要88px，沒有一個統一的像素設備獨立尺寸，解決方案是“點（point)”，Pt是的簡寫,一個點等于早期設備上的一個像素，或者兩個像素在現在的Retina屏幕上，這樣就允許設計者說“嗨，這個按鈕應該是44pt的高度”，然后任何設備都可以渲染出它自己的像素尺寸例如1倍或者2倍以及在在蘋果PLUS上的三倍尺寸。

  

PT & DP

 

但是這不僅僅是為了蘋果設備，時至今日，每一個操作系統無論是桌面還是移動端都支持PPI/DPI 屏幕，谷歌已經給它對于安卓 的命名設備獨立尺寸。他們不再被稱作“點”他們被稱作“DIPs”。代表設備獨立尺寸的首字母縮寫。簡稱DP。他們不再精準的等同于IOS系統里的點，但是他們背后的思想是一樣的，他們是通用的度量衡的統一，已經轉化成為設備的伸縮率（2x,3x等）。

你也許會驚奇設備的物理尺寸，但是實際上對于UI設計師幾乎沒有必要擔心他，因為我們已經又了在特殊尺寸的選擇上的最少控制，設計師們因該相信設備生產商們已經安放了適合那款設備的像素密度，集中我們的注意在在準備射擊的圖標1x 2x 3x圖上，活著其他的一些尺寸，但是如果你好奇，在蘋果的設備上在像素和點之間有沒有持續的變化，換句話說，有沒有獨立的像素密度來代表一個點，——他是獨立于任何尺寸設備的（可以看下一節的尺寸圖的理解）在一個IOS設備上，一個點的變化從132像素／英寸到163像素／英寸，在安卓上面通常DIPs是以160PPI為基準的。

 

受控的混亂

 

準備設備真實性的檢測，在早些移動設備演變的日子里，像素密度遍簡單看作1x和2x，但是這顯然是笨的 因為有那么多不同的像素設備需要來支持，安卓就是哥完美的例子，同時在這片文章寫的時候，有六種不同的根據不同設備生產商的不同像素設備，這意味著一個圖標出現在不同屏幕上顯示同一個尺寸需要六個不同的尺寸，對于蘋果設備只需要兩到三個不同的設備。

 

 

矢量設計，用一倍圖來設計

 

在這個問題上分為兩部分來講，首先我們應該用矢量工具來設計，這允許我們的界面，按鈕以及平面可以擴展到任何尺寸。

 

第二部分我們所有設計都應該在1倍圖上，換句話說，設計應該用點的范圍來為所有的設備來設計，然后當倒出的時候他們擴展到不同高像素的尺寸。（譯者說，Sketch就是基于這個理念來設計的）作為設備最終尺寸范圍（2倍，3倍等）的設備對立面，把所有的問題規整到導出。因為把兩倍圖擴展到150%生成3倍圖，就會產生模糊的效果，但是把一倍圖變成擴展200%和300%仍然保持清晰。

 

 

制作一個標準Iphone的標準尺寸原型事375X667，而不是他們實際展示在設備上的尺寸750x1334。大部分設計工具不區分點和像素的區別。（Flinto這個工具區分了）所以對于設計師來說知道他們的實際系統的像素以及點來說是很重要的。然后可以彈性的導出2倍以及3倍圖。

 

假的嘛？

 

這有一點超前，但是這個需要提示：有一些設備偽裝了，他們假裝像素和點的比率是常見的，就像是3倍圖，實際上他們僅僅是2.61倍，為了方便把圖稱作3倍圖，這就是iPhone Plus實際的樣子，他們把一個1242×2208 的界面縮減到1080×1920的屏幕上，

因為圖像緊緊被縮放了一點（87%) 結果看起來挺像樣的， －一倍的線在三倍的屏幕上顯示很清晰。或許將來蘋果公司將會制作一個真正的講3倍可視化在硬件上，現在的Iphone Plus 就是假裝已經達到了這個效果。

 

這種不完整的擴展是否可以接近接受呢？細節的足夠放大是看不出來的，許多安卓的設備同樣使用擴展的方式來達到一個更佳標準的像素／點的比率，不幸的是，一些設備做的非常差，像這種的擴展是不容易接受的，因為所有你設計的東西都應該是精細清楚的，像素的擴展將會變得模糊因為插值法（即1像素的線變成1.15像素）即使你不是完美的像素狂熱愛好者（中國的強迫癥英文說法。a fanatical pixel perfection nerd)  毋庸置疑的是設計元素應該在像素級別對齊，從而在我們視野里是精細的。不幸的是像素設備輸入在變化范圍內輸入四倍，不是整數倍的迷糊就會出現使得精細變的困難了，所以我預言隨著時間的遷移，設備生產商，將會越來越接近標準，我相信不同設備的擴展問題最終會被消滅。

你的眼睛對于擴展的感知

讓我們把像素設備的問題擱置一會，然后考慮這個問題：是否一個按鈕應該在不同的設備航永遠保持同樣的物理尺寸？當然，我們需要使用一個按鈕作為樣例，到那時我們可以談論一個按鈕一段文字活著一個工具條，這些跨設備的時候是否應該是一致的尺寸呢？是否一致取決于一些條件。

• 取決于輸入方式的精細程度（即觸摸還是鼠標點擊）

• 取決于屏幕的物理尺寸

• 取決于你和屏幕之間的距離 

最后兩個類型是一個意思，因為桌面已經有了一個比手機屏幕更大的尺寸，我們離它更遠 先是手提電腦然后是臺式機然后是電視，隨著屏幕尺寸的增加距離在增加。 

 

 

一個在電視上的按鈕也許和你iPhone上的尺寸差不多大，因為從那個距離上來說大致是這樣的。

一個引人注意的并且是非常真實的例子是：一個在臺式機上的APP按鈕應該是比你手機上的那些大，這是通過兩種方式來完成的，一個是實用更低像素級別的設備，改變按鈕的尺寸，（如點 ）

 

更低的像素設備

更大的屏幕我們在一定距離內使用，傾向于更低的像素設備，電視可能低到40像素/英寸，典型的電視裝備這是允許的。一個IPAD retina顯示大約264PPI,蘋果的retina顯示326ppi，因為像素在IPAD上更大（屏幕更小的密集度）整個用戶界面就變得有一點大，他從IPAD的屏幕上考慮了額外的距離。

 

不同的尺寸

 但是過一段時間，霍思燕難過低像素設備就不夠…一個特殊的設計元素需要變得更大，這在發生在iPad的APP按鈕上，在iphone上她們是60x60，但是在IPAD上屏幕更大提供一些更多的空間，

有一個可以思考的實際尺寸或者視覺上的提升到76X75App按鈕。

 

改變元素在不同設備上的尺寸創造了更多的對于設計師的工作，

在一些特殊的環境下，蘋果設備需要更多的比安卓的設備尺寸，幸運的是，這并不常見。

 

完整性檢查

 

我們剛剛討論了一堆的復雜性需要你來調停。幸運的事界面設計是關系設備獨立單位的設計（像PT或者DP）這對于一個APP圖標設計來說是復雜的，但是這也是有模版的。下面關于這個主題又一些資源。（需要資源的可以聯系我獲取或者原文最下方找到）