解密像素
像素如何工作以及它如何影響你的設(shè)計
像素的容量指的是在一個無力空間里（通常是英寸）有多少像素被放里面，在最開始的蘋果電腦里，有72像素/英寸，(也許聽起來很多，但是實際上平面上需要這么多的像素)
為最開始MAC設(shè)計的圖標(biāo) Susan Kare設(shè)計的。
自從那時候開始屏幕的發(fā)展技術(shù)很快?，F(xiàn)在，即使最基本的電腦屏幕也達到了在115到160像素每英寸。但是一個新的角色這個演變的過程中出現(xiàn)了，就是在2010年當(dāng)蘋果介紹了一款iphone配備了Retina顯示。一個超級爽的屏幕因為在把每英寸上的像素雙倍顯示了。結(jié)果顯而易見，我們看到了一個更佳清晰的屏幕。
注意一下不同的清晰度尤其是郵箱圖標(biāo)的清晰度。
為了對用戶的界面保持相同的尺寸物理尺寸，像素的范圍加倍。一個44像素高的按鈕現(xiàn)在要變成88像素高了。為了適應(yīng)不同的設(shè)備， 設(shè)計者需要提供不同的圖片（比如按鈕）例如“1px”和“2px”圖片。但是有一個急需解決的難題，你不能直接說：“嗨，這個按鈕應(yīng)該是44px 高”，因為在不同設(shè)備上也同樣需要88px，沒有一個統(tǒng)一的像素設(shè)備獨立尺寸，解決方案是“點（point)”，Pt是的簡寫,一個點等于早期設(shè)備上的一個像素，或者兩個像素在現(xiàn)在的Retina屏幕上，這樣就允許設(shè)計者說“嗨，這個按鈕應(yīng)該是44pt的高度”，然后任何設(shè)備都可以渲染出它自己的像素尺寸例如1倍或者2倍以及在在蘋果PLUS上的三倍尺寸。
PT & DP
但是這不僅僅是為了蘋果設(shè)備，時至今日，每一個操作系統(tǒng)無論是桌面還是移動端都支持PPI/DPI 屏幕，谷歌已經(jīng)給它對于安卓 的命名設(shè)備獨立尺寸。他們不再被稱作“點”他們被稱作“DIPs”。代表設(shè)備獨立尺寸的首字母縮寫。簡稱DP。他們不再精準(zhǔn)的等同于IOS系統(tǒng)里的點，但是他們背后的思想是一樣的，他們是通用的度量衡的統(tǒng)一，已經(jīng)轉(zhuǎn)化成為設(shè)備的伸縮率（2x,3x等）。
你也許會驚奇設(shè)備的物理尺寸，但是實際上對于UI設(shè)計師幾乎沒有必要擔(dān)心他，因為我們已經(jīng)又了在特殊尺寸的選擇上的最少控制，設(shè)計師們因該相信設(shè)備生產(chǎn)商們已經(jīng)安放了適合那款設(shè)備的像素密度，集中我們的注意在在準(zhǔn)備射擊的圖標(biāo)1x 2x 3x圖上，活著其他的一些尺寸，但是如果你好奇，在蘋果的設(shè)備上在像素和點之間有沒有持續(xù)的變化，換句話說，有沒有獨立的像素密度來代表一個點，——他是獨立于任何尺寸設(shè)備的（可以看下一節(jié)的尺寸圖的理解）在一個IOS設(shè)備上，一個點的變化從132像素／英寸到163像素／英寸，在安卓上面通常DIPs是以160PPI為基準(zhǔn)的。
受控的混亂
準(zhǔn)備設(shè)備真實性的檢測，在早些移動設(shè)備演變的日子里，像素密度遍簡單看作1x和2x，但是這顯然是笨的 因為有那么多不同的像素設(shè)備需要來支持，安卓就是哥完美的例子，同時在這片文章寫的時候，有六種不同的根據(jù)不同設(shè)備生產(chǎn)商的不同像素設(shè)備，這意味著一個圖標(biāo)出現(xiàn)在不同屏幕上顯示同一個尺寸需要六個不同的尺寸，對于蘋果設(shè)備只需要兩到三個不同的設(shè)備。
矢量設(shè)計，用一倍圖來設(shè)計
在這個問題上分為兩部分來講，首先我們應(yīng)該用矢量工具來設(shè)計，這允許我們的界面，按鈕以及平面可以擴展到任何尺寸。
第二部分我們所有設(shè)計都應(yīng)該在1倍圖上，換句話說，設(shè)計應(yīng)該用點的范圍來為所有的設(shè)備來設(shè)計，然后當(dāng)?shù)钩龅臅r候他們擴展到不同高像素的尺寸。（譯者說，Sketch就是基于這個理念來設(shè)計的）作為設(shè)備最終尺寸范圍（2倍，3倍等）的設(shè)備對立面，把所有的問題規(guī)整到導(dǎo)出。因為把兩倍圖擴展到150%生成3倍圖，就會產(chǎn)生模糊的效果，但是把一倍圖變成擴展200%和300%仍然保持清晰。
制作一個標(biāo)準(zhǔn)Iphone的標(biāo)準(zhǔn)尺寸原型事375X667，而不是他們實際展示在設(shè)備上的尺寸750x1334。大部分設(shè)計工具不區(qū)分點和像素的區(qū)別。（Flinto這個工具區(qū)分了）所以對于設(shè)計師來說知道他們的實際系統(tǒng)的像素以及點來說是很重要的。然后可以彈性的導(dǎo)出2倍以及3倍圖。
假的嘛？
這有一點超前，但是這個需要提示：有一些設(shè)備偽裝了，他們假裝像素和點的比率是常見的，就像是3倍圖，實際上他們僅僅是2.61倍，為了方便把圖稱作3倍圖，這就是iPhone Plus實際的樣子，他們把一個1242×2208 的界面縮減到1080×1920的屏幕上，
因為圖像緊緊被縮放了一點（87%) 結(jié)果看起來挺像樣的， －一倍的線在三倍的屏幕上顯示很清晰?；蛟S將來蘋果公司將會制作一個真正的講3倍可視化在硬件上，現(xiàn)在的Iphone Plus 就是假裝已經(jīng)達到了這個效果。
這種不完整的擴展是否可以接近接受呢？細節(jié)的足夠放大是看不出來的，許多安卓的設(shè)備同樣使用擴展的方式來達到一個更佳標(biāo)準(zhǔn)的像素／點的比率，不幸的是，一些設(shè)備做的非常差，像這種的擴展是不容易接受的，因為所有你設(shè)計的東西都應(yīng)該是精細清楚的，像素的擴展將會變得模糊因為插值法（即1像素的線變成1.15像素）即使你不是完美的像素狂熱愛好者（中國的強迫癥英文說法。a fanatical pixel perfection nerd) 毋庸置疑的是設(shè)計元素應(yīng)該在像素級別對齊，從而在我們視野里是精細的。不幸的是像素設(shè)備輸入在變化范圍內(nèi)輸入四倍，不是整數(shù)倍的迷糊就會出現(xiàn)使得精細變的困難了，所以我預(yù)言隨著時間的遷移，設(shè)備生產(chǎn)商，將會越來越接近標(biāo)準(zhǔn)，我相信不同設(shè)備的擴展問題最終會被消滅。
你的眼睛對于擴展的感知
讓我們把像素設(shè)備的問題擱置一會，然后考慮這個問題：是否一個按鈕應(yīng)該在不同的設(shè)備航永遠保持同樣的物理尺寸？當(dāng)然，我們需要使用一個按鈕作為樣例，到那時我們可以談?wù)撘粋€按鈕一段文字活著一個工具條，這些跨設(shè)備的時候是否應(yīng)該是一致的尺寸呢？是否一致取決于一些條件。
-
取決于輸入方式的精細程度（即觸摸還是鼠標(biāo)點擊）
-
取決于屏幕的物理尺寸
-
取決于你和屏幕之間的距離
最后兩個類型是一個意思，因為桌面已經(jīng)有了一個比手機屏幕更大的尺寸，我們離它更遠 先是手提電腦然后是臺式機然后是電視，隨著屏幕尺寸的增加距離在增加。
一個在電視上的按鈕也許和你iPhone上的尺寸差不多大，因為從那個距離上來說大致是這樣的。
一個引人注意的并且是非常真實的例子是：一個在臺式機上的APP按鈕應(yīng)該是比你手機上的那些大，這是通過兩種方式來完成的，一個是實用更低像素級別的設(shè)備，改變按鈕的尺寸，（如點 ）
更低的像素設(shè)備
更大的屏幕我們在一定距離內(nèi)使用，傾向于更低的像素設(shè)備，電視可能低到40像素/英寸，典型的電視裝備這是允許的。一個IPAD retina顯示大約264PPI,蘋果的retina顯示326ppi，因為像素在IPAD上更大（屏幕更小的密集度）整個用戶界面就變得有一點大，他從IPAD的屏幕上考慮了額外的距離。
不同的尺寸
但是過一段時間，霍思燕難過低像素設(shè)備就不夠…一個特殊的設(shè)計元素需要變得更大，這在發(fā)生在iPad的APP按鈕上，在iphone上她們是60x60，但是在IPAD上屏幕更大提供一些更多的空間，
有一個可以思考的實際尺寸或者視覺上的提升到76X75App按鈕。
改變元素在不同設(shè)備上的尺寸創(chuàng)造了更多的對于設(shè)計師的工作，
在一些特殊的環(huán)境下，蘋果設(shè)備需要更多的比安卓的設(shè)備尺寸，幸運的是，這并不常見。
完整性檢查
我們剛剛討論了一堆的復(fù)雜性需要你來調(diào)停。幸運的事界面設(shè)計是關(guān)系設(shè)備獨立單位的設(shè)計（像PT或者DP）這對于一個APP圖標(biāo)設(shè)計來說是復(fù)雜的，但是這也是有模版的。下面關(guān)于這個主題又一些資源。（需要資源的可以聯(lián)系我獲取或者原文最下方找到）
