像素的起源和如何影響設(shè)計的

2016-07-15

3019

作為設(shè)計師，無論如何做設(shè)計，都要被束縛在有限的尺寸之內(nèi)，平面設(shè)計用厘米毫米，互聯(lián)網(wǎng)設(shè)計師用像素，分辨率等等來力求在有限的空間內(nèi)設(shè)計出滿意的作品。

即便像“像素”這么高頻出現(xiàn)的詞匯，也依然有很多設(shè)計師不明白它真正的由來和使用考慮的因素。

像素密度是指一個指物理空間（通常是英寸）有多少個像素。第一臺Mac，每英寸有72個像素，這可能聽起來很多，但實際上它要求的圖形清晰度需要這些龐大像素的支持。

自那時以來，屏幕技術(shù)有了極大的發(fā)展，連現(xiàn)在最基礎(chǔ)的電腦屏幕每英寸的像素（“PPI”）范圍都介于115到160了。但是，當(dāng)蘋果推出帶有視網(wǎng)膜顯示屏的iPhone手機(jī)——一個每英寸增加了一倍像素的超級清晰屏幕。結(jié)果就是圖形比我們之前見過的所有圖形都要清晰。

為了保持用戶界面相同的物理尺寸，像素尺寸進(jìn)行了加倍，比如一個高度為44像素的按鈕現(xiàn)在變?yōu)?8像素。為了適應(yīng)不同的設(shè)備，設(shè)計師需要在原有“1倍”圖形的尺寸下同時提供新的“2倍”尺寸圖形（如圖標(biāo)）。但有一個新問題，你不能再說：“嘿，這個按鈕應(yīng)該是44像素高”，因為在不同設(shè)備上它也有可能是88像素高。也有與像素密度無關(guān)的單位——“點”或簡稱“PT”。 1點等于視網(wǎng)膜顯示器誕生前顯示器的1個像素，等于2倍的視網(wǎng)膜顯示器上的2個像素。它們允許設(shè)計師說：“哎，這個按鈕應(yīng)該是44點高”，然后在任何設(shè)備可以直接乘上其自身的像素密度比…比如1倍、2倍或蘋果iPhone Plus 3倍。

PT&DP

但是這當(dāng)然不只適用于蘋果設(shè)備，現(xiàn)在所有的操作系統(tǒng)：臺式機(jī)、手機(jī)——支持高PPI / DPI屏幕。谷歌為了Android系統(tǒng)已經(jīng)確定了自己的獨立密度單位。他們不把單位叫作“點”，他們稱之為“DIPs”，它代表設(shè)備無關(guān)像素，縮寫為“DP”?！癉IPs”不完全等同于iOS的點，但他們背后的想法是一樣的。它們是測量的普遍單元，可與使用縮放比率（2倍，3倍等）設(shè)備的像素進(jìn)行轉(zhuǎn)換。

你可能想知道一個點的物理尺寸，但實際上UI設(shè)計師不用擔(dān)心這個問題，因為我們有對超過特定設(shè)備變化的縝密控制。設(shè)計師只需要堅信設(shè)備制造商已經(jīng)解決了每個設(shè)備適用不同的像素密度，以及注意力應(yīng)集中在準(zhǔn)備1倍、2倍、3倍或其他比例的設(shè)計資源上。但是如果你真的很好奇在蘋果設(shè)備上英寸和點之間沒有固定的轉(zhuǎn)換，換句話說沒有固定的像素密度表示1點，因為這是依賴于特定的設(shè)備。在iOS上，一個點從每英寸132個像素到每英寸163個像素發(fā)生變化。在Android上，DIPs始終是每英寸160個像素。

混亂的管理

在高分辨率移動設(shè)備的初期，像素密度還僅僅為1倍或2倍。但是現(xiàn)在的設(shè)備有許多的像素密度。 Android就是一個很好的例子：在寫這篇文章的時候不同的設(shè)備廠商就提供了六種常見的像素密度。這意味著，一個icon在所有屏幕上尺寸相同但實際上需要六種尺寸的切圖。對于蘋果設(shè)備來說，則是兩個或三個不同尺寸的圖形。

用1倍尺寸進(jìn)行矢量設(shè)計

這有幾個實踐經(jīng)驗教訓(xùn)：第一個教訓(xùn)是，我們一開始應(yīng)該用矢量圖形來設(shè)計，這樣我們的界面，icon和圖形可以擴(kuò)展到任意大小。

第二個教訓(xùn)是，我們應(yīng)該用1倍的尺寸來進(jìn)行設(shè)計。換句話說，在所有的測量尺寸下，設(shè)計單位使用的是點，然后導(dǎo)出時擴(kuò)展到各種高像素密度而不是設(shè)計最終設(shè)備的像素尺寸，比如2倍、3倍等。而且這樣也會在導(dǎo)出過程中遇到各種麻煩，比如縮放2倍的圖形到150％產(chǎn)生的3倍圖形會模糊，但縮放1倍圖形到200％和300％卻保留了視覺清晰度。

IPhone原型的標(biāo)準(zhǔn)尺寸是375×667像素，750×1334像素實際上是顯示器的分辨率。大多數(shù)設(shè)計工具不辨別像素和點（Flinto是我所知道的唯一的例外），所以它的設(shè)計師假裝單位像素實際上是點，這樣就可以靈活地導(dǎo)出兩倍或三倍尺寸的圖。

失之毫厘并不差之千里

這是很先進(jìn)的一種做法，但它更值得一提的是：有時設(shè)備廠商假裝像素到點的比例是常見的一種，比如3倍，但它實際上是2.61倍，然后圖像被縮放到更為方便的3倍。這就和目前的iPhone Plus一樣。它收縮1242×2208的界面以適應(yīng)放在1080×1920的屏幕上。

由于圖像只被縮小了一點點（87％），所以圖像看起仍然可觀—— 一個1像素的直線在3倍屏幕上看起來仍然清晰。可喜的一個消息是，在未來蘋果可能會發(fā)布一款真正的3倍iPhone Plus，批量生產(chǎn)也是可行的?，F(xiàn)在的iPhone Plus只是模仿他直到它生產(chǎn)出來。

非整數(shù)的比例是否可接受？許多Android設(shè)備也使用比例來達(dá)到更標(biāo)準(zhǔn)的像素點到點的比例，但不幸的是其中一些做真的很差。這樣縮放是不可取的，由于插值（即1像素的線變?yōu)?.15像素），你設(shè)計得清晰又完美的像素在縮放后都將變得模糊。即使你不是像我一樣是狂熱的像素完美主義者，但不可否認(rèn)的事實是設(shè)計元素需要全像素對齊以清晰的出現(xiàn)在我們的眼中。不幸的是像素密度在4X和4X以上范圍時，所造成的非整數(shù)縮放模糊會變得更易察覺，所以我預(yù)測，隨著時間的推移設(shè)備制造商將變本加厲的使用這種方法。我們只能希望，縮放的性能缺陷會阻止他們！

眼睛的規(guī)模感知

讓我們把所有有關(guān)像素密度的東西放在一旁并考慮這樣一個問題：一個按鈕跨設(shè)備情況下總應(yīng)該是相同的物理尺寸嗎？當(dāng)然我們只是用一個按鈕作為一個例子，但我們可以談?wù)搱D標(biāo)、文字或工具欄。這些應(yīng)該在所有設(shè)備上使用統(tǒng)一大小？普遍的共識是它依賴以下：

·它取決于輸入方法的精確度（即觸摸與光標(biāo)）

·它取決于屏幕的物理尺寸

·它取決于你與屏幕之間的距離

最后兩點尤為重要，;因為平板電腦屏幕比手機(jī)更大，所以我們會拿到較遠(yuǎn)的地方。然后你有一臺筆記本電腦，有一臺臺式機(jī)電腦，有一個電視機(jī)……眼睛到屏幕的距離隨著屏幕尺寸的增加而增加。電視屏幕的按鈕實際上有可能是你手機(jī)的大小，因為他是根據(jù)距離來決定的。

下面是一個沒有什么戲劇性并且非?，F(xiàn)實的例子：在平板電腦上的應(yīng)用程序圖標(biāo)必須比在手機(jī)上的大。這通過兩種方式來完成：一個是通過使用較低的像素密度，另一個是通過改變按鈕的尺寸。

1.較低的像素密度

我們使用的較大屏幕往往像素密度較低。一臺電視每英寸可能會低至40像素！對于基本的電視觀看這是允許的。一個iPad的視網(wǎng)膜顯示屏是264ppi，而iPhone的視網(wǎng)膜顯示屏是326ppi。因為iPad的像素都較大（屏幕的密度較?。?，所以其全部界面變得稍大。

2.不同尺寸

但并不總是這樣，使用較低的像素密度是不夠的，比如一個特定的設(shè)計元素需要更大。舉個例子：iPad上的應(yīng)用程序圖標(biāo)，在iPhone上它是60×60像素，但iPad的大屏幕提供了更多的空間，所以有相當(dāng)大的實際和視覺可能性使用76×76像素的應(yīng)用程序圖標(biāo)。

為不同的設(shè)備更改元素的尺寸給設(shè)計師增加了更多的工作。蘋果設(shè)備比Android設(shè)備需要更多的尺寸，幸運的是，這在應(yīng)用程序圖標(biāo)領(lǐng)域之外并不是非常的普遍。

完整性檢查？

幸運的是，界面設(shè)計僅僅是一個使用密度獨立單元（如PT或DP）的問題。它比應(yīng)用程序圖標(biāo)更復(fù)雜，但也有模板來幫助你解決這一問題。下面是關(guān)于這些主題的資源列表。

本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技

標(biāo)簽：縱天,手機(jī)建站,企業(yè)建網(wǎng)站,廣州響應(yīng)式網(wǎng)站

關(guān)注我們：在查找公眾號中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號