解密像素
像素如何工作以及它如何影響你的設(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)系我獲取或者原文最下方找到)