解密像素

 

像素如何工作以及它如何影響你的設(shè)計(jì) 

像素的容量指的是在一個(gè)無(wú)力空間里（通常是英寸）有多少像素被放里面，在最開(kāi)始的蘋(píng)果電腦里，有72像素/英寸，(也許聽(tīng)起來(lái)很多，但是實(shí)際上平面上需要這么多的像素)

 

為最開(kāi)始MAC設(shè)計(jì)的圖標(biāo) Susan Kare設(shè)計(jì)的。

自從那時(shí)候開(kāi)始屏幕的發(fā)展技術(shù)很快。現(xiàn)在，即使最基本的電腦屏幕也達(dá)到了在115到160像素每英寸。但是一個(gè)新的角色這個(gè)演變的過(guò)程中出現(xiàn)了，就是在2010年當(dāng)蘋(píng)果介紹了一款iphone配備了Retina顯示。一個(gè)超級(jí)爽的屏幕因?yàn)樵诎衙坑⒋缟系南袼仉p倍顯示了。結(jié)果顯而易見(jiàn)，我們看到了一個(gè)更佳清晰的屏幕。 

注意一下不同的清晰度尤其是郵箱圖標(biāo)的清晰度。

為了對(duì)用戶(hù)的界面保持相同的尺寸物理尺寸，像素的范圍加倍。一個(gè)44像素高的按鈕現(xiàn)在要變成88像素高了。為了適應(yīng)不同的設(shè)備， 設(shè)計(jì)者需要提供不同的圖片（比如按鈕）例如“1px”和“2px”圖片。但是有一個(gè)急需解決的難題，你不能直接說(shuō)：“嗨，這個(gè)按鈕應(yīng)該是44px 高”，因?yàn)樵诓煌O(shè)備上也同樣需要88px，沒(méi)有一個(gè)統(tǒng)一的像素設(shè)備獨(dú)立尺寸，解決方案是“點(diǎn)（point)”，Pt是的簡(jiǎn)寫(xiě),一個(gè)點(diǎn)等于早期設(shè)備上的一個(gè)像素，或者兩個(gè)像素在現(xiàn)在的Retina屏幕上，這樣就允許設(shè)計(jì)者說(shuō)“嗨，這個(gè)按鈕應(yīng)該是44pt的高度”，然后任何設(shè)備都可以渲染出它自己的像素尺寸例如1倍或者2倍以及在在蘋(píng)果PLUS上的三倍尺寸。

  

PT & DP

 

但是這不僅僅是為了蘋(píng)果設(shè)備，時(shí)至今日，每一個(gè)操作系統(tǒng)無(wú)論是桌面還是移動(dòng)端都支持PPI/DPI 屏幕，谷歌已經(jīng)給它對(duì)于安卓 的命名設(shè)備獨(dú)立尺寸。他們不再被稱(chēng)作“點(diǎn)”他們被稱(chēng)作“DIPs”。代表設(shè)備獨(dú)立尺寸的首字母縮寫(xiě)。簡(jiǎn)稱(chēng)DP。他們不再精準(zhǔn)的等同于IOS系統(tǒng)里的點(diǎn)，但是他們背后的思想是一樣的，他們是通用的度量衡的統(tǒng)一，已經(jīng)轉(zhuǎn)化成為設(shè)備的伸縮率（2x,3x等）。

你也許會(huì)驚奇設(shè)備的物理尺寸，但是實(shí)際上對(duì)于UI設(shè)計(jì)師幾乎沒(méi)有必要擔(dān)心他，因?yàn)槲覀円呀?jīng)又了在特殊尺寸的選擇上的最少控制，設(shè)計(jì)師們因該相信設(shè)備生產(chǎn)商們已經(jīng)安放了適合那款設(shè)備的像素密度，集中我們的注意在在準(zhǔn)備射擊的圖標(biāo)1x 2x 3x圖上，活著其他的一些尺寸，但是如果你好奇，在蘋(píng)果的設(shè)備上在像素和點(diǎn)之間有沒(méi)有持續(xù)的變化，換句話說(shuō)，有沒(méi)有獨(dú)立的像素密度來(lái)代表一個(gè)點(diǎn)，——他是獨(dú)立于任何尺寸設(shè)備的（可以看下一節(jié)的尺寸圖的理解）在一個(gè)IOS設(shè)備上，一個(gè)點(diǎn)的變化從132像素／英寸到163像素／英寸，在安卓上面通常DIPs是以160PPI為基準(zhǔn)的。

 

受控的混亂

 

準(zhǔn)備設(shè)備真實(shí)性的檢測(cè)，在早些移動(dòng)設(shè)備演變的日子里，像素密度遍簡(jiǎn)單看作1x和2x，但是這顯然是笨的 因?yàn)橛心敲炊嗖煌南袼卦O(shè)備需要來(lái)支持，安卓就是哥完美的例子，同時(shí)在這片文章寫(xiě)的時(shí)候，有六種不同的根據(jù)不同設(shè)備生產(chǎn)商的不同像素設(shè)備，這意味著一個(gè)圖標(biāo)出現(xiàn)在不同屏幕上顯示同一個(gè)尺寸需要六個(gè)不同的尺寸，對(duì)于蘋(píng)果設(shè)備只需要兩到三個(gè)不同的設(shè)備。

 

 

矢量設(shè)計(jì)，用一倍圖來(lái)設(shè)計(jì)

 

在這個(gè)問(wèn)題上分為兩部分來(lái)講，首先我們應(yīng)該用矢量工具來(lái)設(shè)計(jì)，這允許我們的界面，按鈕以及平面可以擴(kuò)展到任何尺寸。

 

第二部分我們所有設(shè)計(jì)都應(yīng)該在1倍圖上，換句話說(shuō)，設(shè)計(jì)應(yīng)該用點(diǎn)的范圍來(lái)為所有的設(shè)備來(lái)設(shè)計(jì)，然后當(dāng)?shù)钩龅臅r(shí)候他們擴(kuò)展到不同高像素的尺寸。（譯者說(shuō)，Sketch就是基于這個(gè)理念來(lái)設(shè)計(jì)的）作為設(shè)備最終尺寸范圍（2倍，3倍等）的設(shè)備對(duì)立面，把所有的問(wèn)題規(guī)整到導(dǎo)出。因?yàn)榘褍杀秷D擴(kuò)展到150%生成3倍圖，就會(huì)產(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ū)分了）所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)知道他們的實(shí)際系統(tǒng)的像素以及點(diǎn)來(lái)說(shuō)是很重要的。然后可以彈性的導(dǎo)出2倍以及3倍圖。

 

假的嘛？

 

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

因?yàn)閳D像緊緊被縮放了一點(diǎn)（87%) 結(jié)果看起來(lái)挺像樣的， －一倍的線在三倍的屏幕上顯示很清晰。或許將來(lái)蘋(píng)果公司將會(huì)制作一個(gè)真正的講3倍可視化在硬件上，現(xiàn)在的Iphone Plus 就是假裝已經(jīng)達(dá)到了這個(gè)效果。

 

這種不完整的擴(kuò)展是否可以接近接受呢？細(xì)節(jié)的足夠放大是看不出來(lái)的，許多安卓的設(shè)備同樣使用擴(kuò)展的方式來(lái)達(dá)到一個(gè)更佳標(biāo)準(zhǔn)的像素／點(diǎn)的比率，不幸的是，一些設(shè)備做的非常差，像這種的擴(kuò)展是不容易接受的，因?yàn)樗心阍O(shè)計(jì)的東西都應(yīng)該是精細(xì)清楚的，像素的擴(kuò)展將會(huì)變得模糊因?yàn)椴逯捣ǎ?像素的線變成1.15像素）即使你不是完美的像素狂熱愛(ài)好者（中國(guó)的強(qiáng)迫癥英文說(shuō)法。a fanatical pixel perfection nerd)  毋庸置疑的是設(shè)計(jì)元素應(yīng)該在像素級(jí)別對(duì)齊，從而在我們視野里是精細(xì)的。不幸的是像素設(shè)備輸入在變化范圍內(nèi)輸入四倍，不是整數(shù)倍的迷糊就會(huì)出現(xiàn)使得精細(xì)變的困難了，所以我預(yù)言隨著時(shí)間的遷移，設(shè)備生產(chǎn)商，將會(huì)越來(lái)越接近標(biāo)準(zhǔn)，我相信不同設(shè)備的擴(kuò)展問(wèn)題最終會(huì)被消滅。

你的眼睛對(duì)于擴(kuò)展的感知

讓我們把像素設(shè)備的問(wèn)題擱置一會(huì)，然后考慮這個(gè)問(wèn)題：是否一個(gè)按鈕應(yīng)該在不同的設(shè)備航永遠(yuǎn)保持同樣的物理尺寸？當(dāng)然，我們需要使用一個(gè)按鈕作為樣例，到那時(shí)我們可以談?wù)撘粋€(gè)按鈕一段文字活著一個(gè)工具條，這些跨設(shè)備的時(shí)候是否應(yīng)該是一致的尺寸呢？是否一致取決于一些條件。

• 取決于輸入方式的精細(xì)程度（即觸摸還是鼠標(biāo)點(diǎn)擊）

• 取決于屏幕的物理尺寸

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

最后兩個(gè)類(lèi)型是一個(gè)意思，因?yàn)樽烂嬉呀?jīng)有了一個(gè)比手機(jī)屏幕更大的尺寸，我們離它更遠(yuǎn) 先是手提電腦然后是臺(tái)式機(jī)然后是電視，隨著屏幕尺寸的增加距離在增加。 

 

 

一個(gè)在電視上的按鈕也許和你iPhone上的尺寸差不多大，因?yàn)閺哪莻€(gè)距離上來(lái)說(shuō)大致是這樣的。

一個(gè)引人注意的并且是非常真實(shí)的例子是：一個(gè)在臺(tái)式機(jī)上的APP按鈕應(yīng)該是比你手機(jī)上的那些大，這是通過(guò)兩種方式來(lái)完成的，一個(gè)是實(shí)用更低像素級(jí)別的設(shè)備，改變按鈕的尺寸，（如點(diǎn) ）

 

更低的像素設(shè)備

更大的屏幕我們?cè)谝欢ň嚯x內(nèi)使用，傾向于更低的像素設(shè)備，電視可能低到40像素/英寸，典型的電視裝備這是允許的。一個(gè)IPAD retina顯示大約264PPI,蘋(píng)果的retina顯示326ppi，因?yàn)橄袼卦贗PAD上更大（屏幕更小的密集度）整個(gè)用戶(hù)界面就變得有一點(diǎn)大，他從IPAD的屏幕上考慮了額外的距離。

 

不同的尺寸

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

有一個(gè)可以思考的實(shí)際尺寸或者視覺(jué)上的提升到76X75App按鈕。

 

改變?cè)卦诓煌O(shè)備上的尺寸創(chuàng)造了更多的對(duì)于設(shè)計(jì)師的工作，

在一些特殊的環(huán)境下，蘋(píng)果設(shè)備需要更多的比安卓的設(shè)備尺寸，幸運(yùn)的是，這并不常見(jiàn)。

 

完整性檢查

 

我們剛剛討論了一堆的復(fù)雜性需要你來(lái)調(diào)停。幸運(yùn)的事界面設(shè)計(jì)是關(guān)系設(shè)備獨(dú)立單位的設(shè)計(jì)（像PT或者DP）這對(duì)于一個(gè)APP圖標(biāo)設(shè)計(jì)來(lái)說(shuō)是復(fù)雜的，但是這也是有模版的。下面關(guān)于這個(gè)主題又一些資源。（需要資源的可以聯(lián)系我獲取或者原文最下方找到）