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

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

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

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

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

PT&DP

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

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

混亂的管理

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

用1倍尺寸進行矢量設計

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

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

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

失之毫厘并不差之千里

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

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

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

眼睛的規模感知

讓我們把所有有關像素密度的東西放在一旁并考慮這樣一個問題：一個按鈕跨設備情況下總應該是相同的物理尺寸嗎？當然我們只是用一個按鈕作為一個例子，但我們可以談論圖標、文字或工具欄。這些應該在所有設備上使用統一大?。科毡榈墓沧R是它依賴以下：

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

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

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

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

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

1.較低的像素密度

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

2.不同尺寸

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

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

完整性檢查？

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

本文來自成都品牌網站建設網站設計制作公司-創新互聯 

標簽：創新互聯,手機建站,企業建網站,響應式網站

名稱欄目：像素的起源和如何影響設計的
網頁路徑：http://m.kartarina.com/news33/172133.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、網站維護、微信小程序、外貿建站、響應式網站、定制開發

廣告

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