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

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

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

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

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

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

PT&DP

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

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

混亂的管理

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

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

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

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

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

失之毫厘并不差之千里

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

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

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

眼睛的規(guī)模感知

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

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

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

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

最后兩點(diǎn)尤為重要，;因?yàn)槠桨咫娔X屏幕比手機(jī)更大，所以我們會(huì)拿到較遠(yuǎn)的地方。然后你有一臺(tái)筆記本電腦，有一臺(tái)臺(tái)式機(jī)電腦，有一個(gè)電視機(jī)……眼睛到屏幕的距離隨著屏幕尺寸的增加而增加。電視屏幕的按鈕實(shí)際上有可能是你手機(jī)的大小，因?yàn)樗歉鶕?jù)距離來決定的。

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

1.較低的像素密度

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

2.不同尺寸

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

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

完整性檢查？

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

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián) 

標(biāo)簽：創(chuàng)新互聯(lián),手機(jī)建站,企業(yè)建網(wǎng)站,響應(yīng)式網(wǎng)站

名稱欄目：像素的起源和如何影響設(shè)計(jì)的
網(wǎng)頁路徑：http://www.bm7419.com/news33/172133.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站維護(hù)、微信小程序、外貿(mào)建站、響應(yīng)式網(wǎng)站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)