作為設(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了。但是，當蘋果推出帶有視網(wǎng)膜顯示屏的iPhone手機——一個每英寸增加了一倍像素的超級清晰屏幕。結(jié)果就是圖形比我們之前見過的所有圖形都要清晰。

為了保持用戶界面相同的物理尺寸，像素尺寸進行了加倍，比如一個高度為44像素的按鈕現(xiàn)在變?yōu)?8像素。為了適應(yīng)不同的設(shè)備，設(shè)計師需要在原有“1倍”圖形的尺寸下同時提供新的“2倍”尺寸圖形（如圖標）。但有一個新問題，你不能再說：“嘿，這個按鈕應(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

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

你可能想知道一個點的物理尺寸，但實際上UI設(shè)計師不用擔心這個問題，因為我們有對超過特定設(shè)備變化的縝密控制。設(shè)計師只需要堅信設(shè)備制造商已經(jīng)解決了每個設(shè)備適用不同的像素密度，以及注意力應(yīng)集中在準備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倍尺寸進行矢量設(shè)計

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

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

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

失之毫厘并不差之千里

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

眼睛的規(guī)模感知

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

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

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

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

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

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

1.較低的像素密度

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

2.不同尺寸

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

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

完整性檢查？

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

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

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

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

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

廣告

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