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