設計文章 - 原創/自譯教程 - GUI? 人郵社藝術設計作者團 人郵社藝術設計作者團 團隊
文章版權：風尾竹 原創，如需商業用途或轉載請與 風尾竹 聯系，謝謝配合！
http://www.zcool.com.cn/article/ZMzgxNjEy.html
為什么iPhone的屏幕看起來那么精細，而電腦的屏幕貼近看全是顆粒點。市面上那么多奇奇怪怪尺寸的屏幕，我是不是每一個屏幕都需要做設計？讀完下面文章你一定會找到答案。
智能手機的屏幕
我們經常在手機介紹的時候看到一堆參數介紹。例如：手機是多少寸的屏幕，手機的分辨率是多少，這個手機是否高清視網膜屏幕，為了更好的了解顯示APP的手機，我們先去了解一下手機屏幕的相關的概念。
【英寸Inch】
英寸是我們常用的長度單位。英國是工業革命發源地，英寸在工業領域被廣泛使用，很多圖紙，銘牌上使用英寸作為長度單位。顯示設備特別是電視機使用英寸來表示大小。手機屏幕也繼承了這個計量單位。在顯示設備中，例如描述iPhone4S的屏幕是3.5寸，表示屏幕斜對角線的長度。
喬布斯認為3.5寸是人類單手持設備的最佳尺寸（如圖1-7所示）。隨著時代的發展，手機這一智能終端的使用發生了很大的變化，它漸漸變成了內容消費和娛樂的主要平臺，人們每天愿意花幾個小時的時間在上面雙手操作。快速溝通和效率工具只是占用時間比例很小的一塊兒功能。作為內容消費和娛樂的窗口， 3.5寸的屏幕已經滿足不了人們的需求了。所以現在手機屏幕都以4.7寸以上尺寸為主流。
手機常見屏幕尺寸有3.5寸、4.3寸、4.7寸、5.5寸。為什么會選擇這幾個尺寸，因為手機屏幕使用的玻璃是一整塊生產的，然后切割成一塊塊。利用率與成本直接相關。為了最優化的玻璃切割利用率，避免切割余料浪費，所以有了以上相應尺寸。
【像素Pixel】
我們用放大鏡看顯示屏，發現圖像是由一個個小點組成的，這些小點就是像素點。（如圖1-8所示）像素是圖像的基本采樣單位。像素不是一個確定的物理量，因為像素點的物理大小是不確定的。像素也不是一個具體的點或者小方塊（盡管可以用點和小方塊來呈現），而是一個抽象概念。
圖1-8像素構成了完整的圖像
【分辨率Resolution】
分辨率是屏幕像素的數量。一般用屏寬像素數乘以屏高像素數表示。（如圖1-9所示）描述iPhone6的屏幕分辨率是750×1334。就是由750列、1334行的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。在PC時代，分辨率越高，意味著屏幕越大，因為PC具有固定的PPI。在智能手機的屏幕就不是如此了，因為手機的像素密度是不一樣的。
?網點密度與像素密度
我們看手機屏幕的時候，發現有的低端手機屏幕有很強的顆粒感，能看到明顯的一顆顆像素點。而有的高端手機屏幕顯示非常順滑，湊近屏幕看，也幾乎看不到屏幕的像素點。為什么屏幕會有這樣的顯示差別？下面我們介紹一下造成這種差別的原因。
【網點密度DPI】
在紙質媒介時代，我們常用網點密度(Dot Per Inch)來描述印刷品的打印精度。DPI常用于“設備參數”描述（比如掃描儀、打印機），例如，我設置了打印分辨率為96DPI，那么機器在打印過程中，每英寸（inch）的長度，打印了96個點（dot），打印機在每英寸內打印的墨點越多，圖片看起來越精細。這種概念也帶入到PC時代的Windows，Windows的默認DPI為96。
【像素密度PPI】
像素密度(Pixel Per Inch)常用于“屏幕顯示”的描述，用來表示每英寸像素點數量。（如圖1-10所示）在Photoshop中設定某圖的分辨率為72PPI，那么，當圖片對應到現實尺度中，屏幕將以每英寸72個像素（pixel）的方式來顯示。PPI數值高的顯示屏幕，畫面看起來也更加細膩。
【DPI與PPI】
當DPI的概念用在手機屏幕上時，表示手機屏幕上每英寸可以顯示的像素點的數量。這時候我們用PPI來描述這個屏幕。屏幕生產工藝越高，每平方英寸就能容納更多的像素。例如iPhone 3GS的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。兩款手機屏幕的物理尺寸都是3.5英寸，但像素密度（PPI）不一樣。（如圖1-11所示）iPhone 4s的Retina屏幕把2×2個像素當1個像素使用。在同樣的物理面積內填充了更多的像素，所以顯示效果更加精細。
【邏輯分辨率與像素倍率】
物理分辨率是硬件所支持的分辨率，邏輯分辨率是軟件可以達到的分辨率。邏輯分辨率乘以一個倍率得到物理分辨率，這個倍率叫做像素倍率。例如，蘋果Retina屏定義了2倍率（iPhone 6plus為3倍后面章節會具體分析）以iPhone4S為例，邏輯分辨率為320×480倍率為@2x，得到物理分辨率640×960。
在iOS系統的資源圖片中，同一張圖通常有兩個尺寸。（如圖1-12所示）你會看到文件名有的帶@2x、@3x字樣，有的不帶。其中不帶的用在普通屏上，帶@2x、@3x的分別用在2倍率和3倍率的Retina屏幕上。
【視網膜屏幕】
手機屏幕距離你的眼睛10-12英寸(約25-30厘米)時,它的分辨率只要達到300PPI（每英寸300個像素點）以上，你的眼睛已經無法分辨出像素點了，這樣的屏幕被稱為“視網膜屏幕”。由于其具備超高的像素密度,因此屏幕顯示異常清晰、銳利。一般電腦顯示屏幕的分辨率為72PPI。如果想了解你的手機是否擁有“視網膜(Retina)屏幕”，就要計算手機屏幕的PPI了。（如圖1-13所示）
例如iPhone 4s屏幕分辨率為640×960像素，（如圖1-14所示）屏幕尺寸為3.5英寸。代入公式PPI=√(6402+3602) / 4，結果為326PPI，大于300PPI，符合“視網膜屏幕”的特征。
常見手機屏幕規格
了解了手機屏幕的相關概念后，我們來關注一下市面上手機的屏幕參數。市面上的手機型號種類繁多，我們只需要選取具有代表性的、使用人數比較多的手機型號進行研究。以下數據來源于應用統計分析平臺友盟。
【熱門手機規格】
說明：友盟將一個獨立的設備視為一個用戶。例如一個手機用戶，打開了手機上的應用，這時候就被統計為一個活躍用戶。（如圖1-15所示）通過統計活躍用戶，可以很直觀的看到市面上哪些手機型號是熱門機型。
結論：從以上數據來看（如圖1-16所示），目前國內絕大多數熱門手機都已經使用視網膜（Retina）屏幕。大部分手機屏幕都在4寸以上。大屏幕、高分辨率的手機已經成為市場的主流。
【熱門手機分辨率】
說明：通過統計熱門手機，我們進一步可以統計到熱門手機分辨率的分布。然后我們可以知道哪些分辨率在我們設計時需要考慮。
結論：從以上的數據統計來看，（如圖1-17；1-18所示）有如下分辨率是需要考慮設計。
iOS系統：640×1136、640×960、750×1334、2208×1242，iPad的分辨率是2048×1536，不在本書的討論范圍內。
Android系統：720×1280、480×800、480×854、540×960、1080×1920這么多分辨率都需要考慮，是不是要出多套界面設計方案？答案是不用，我們只需要考慮設計適配即可。在后面的第10章《設計適配》章節中，會介紹如何設計一套方案適用與多個分辨率。
注：本章節數據來源于2015.1-2015.6友盟指數榜
