在網絡的早期，你在640×480和800×600像素之間的某個地方設計。當然，我們可以追溯到更遠的地方–第一臺Macintosh或施樂的第一臺桌面用戶界面，但這些用戶界面，但讓我們假設老式的彩色CRT作為我們的基礎。那也是我開始為網絡設計的時候（1998年）。但那是90年代末的事情，之后開始迅速變化。那個時代的顯示器大多分辨率范圍相似，超級重，不能顯示太多顏色。此外，它們的刷新率也很低，導致滾動體驗不理想。那個時代的顯示器往往限制了網站所能達到的視覺效果。既然我們現在生活在一個百萬像素和百萬色彩的科技世界里，我們就需要了解我們今天設計的屏幕。從早期的互聯網時代開始，技術就在飛速發展。如今，你手中拿著的手機，其分辨率在二十年前是不存在的。典型的90年代后期CRT顯示屏的分辨率約為當前iPhone的1/6，后者的尺寸要小得多。 

PPI或每英寸像素

在某些時候，每英寸72個像素成為了那些CRT顯示器的顯示標準，并且在很長很長的一段時間內都是如此。現在我們的筆記本電腦和移動設備都有更高的分辨率和像素密度。

但是兩者的區別是什么呢？

分辨率就是顯示屏的單個像素數。例如，第一部iPhone的基本分辨率是320 x 480。蘋果公司決定，這個分辨率應該足以提供一個舒適的界面，所以它為這個平臺設定了1倍密度的基準。

這一切都隨著iPhone 4的推出而改變，它的視網膜顯示屏。前提是像素太密集了，你不容易再看到單個的像素。基本(或1x)分辨率與之前的iPhone相同，但像素密度是該分辨率的倍數，從而使文字和圖像更加清晰。iPhone 4將像素數量增加了一倍，達到了640×960，但實際設計的元素保持在320×480，并在設備上進行了放大。

好吧，但為什么還是表現得像320×480？為什么他們不干脆使用640 x 960作為 “可視的分辨率”？

為較舊的設備設計的項目將比較新的設備小2倍。這將使其無法舒適地使用。

在iPhone 4的2倍像素數之后，我們開始在手機、平板電腦和筆記本電腦上看到3倍、4倍以及更大的像素密度。

例如，現代的iPhone X使用了375×812的基礎分辨率，但其實際像素數是3倍（3x），為1125×2436。

舉個例子–如果你要設計一個按鈕，你需要讓它至少有44p高。這意味著在1x下設計它將是44個像素（在1x下，一個像素相當于一個點），而在2x下，它將是88個像素，但在你的設計中仍然是44點。

由于我們設計的UI都是在基于矢量的工具里面，我們不需要再擔心實際的分辨率。1倍的基本分辨率作為模板，在低密度的屏幕上可以使用，在高密度的屏幕上則更加清晰和精確。

但你不需要記住這一點

大多數設計工具都為你提供了一個1x的模板，適用于所有流行的屏幕尺寸。你只需在1x處進行設計，編碼界面就會自動放大。真是省心啊!

但要記住，有碎片化。

什么是碎片化？

可悲的是，越來越多的屏幕分辨率最終導致了一個非常碎片化的屏幕顯示環境。我們為電視、筆記本電腦、平板電腦、手機、手表和物聯網設備進行設計，這就需要進行大量的規劃和針對設備的修改，才能讓設計發揮作用。

在開始設計時，首先要問的問題是它要在什么樣的屏幕上工作，典型的觀看距離是多少。

一個電視應用應該比手機應用有更高的對比度和更重要的UI元素，這主要是因為它經常在房間的對面使用，而手機應用離臉只有幾英寸的距離。

但碎片化最傷人的地方是來自一個設備類別內。最普遍的一種–手機–有這么多潛在的分辨率和長寬比，沒有辦法讓一種設計適合所有的設備。在基于Android的移動設備的Google Play商店中，勾勒出了幾十種屏幕分辨率。幾年前蘋果曾經有一套比較一致的，但此后放棄了這條道路，幾乎所有的設備都走向了單獨的分辨率。

如何對抗碎片化？

與這一趨勢抗爭(并取得勝利)的唯一方法是以盡可能小的分辨率進行設計，至少在它在法律上過時之前。然后再切換到下一個最小的分辨率。

用更簡單的話來說。不要專門為iPhone Pro Max設計。而是為 iPhone Pro 設計。

范圍和覆蓋率

在移動設備中，也必須考慮到平均觸手可及的問題。隨意拼湊的界面，單手使用起來會很復雜，會導致挫敗感。

我們假設典型的手機使用模式是單手拿著手機，同一只手的拇指在屏幕上做大部分的工作。

觸手可及也有助于確定產品的導航是否容易。流行的漢堡包菜單設計模式對于右撇子用戶來說，處于可以想象的最不利的位置。

在大多數情況下，底部對齊的標簽是最簡單的菜單設計方式，幾乎所有產品都應該考慮將其作為首選。

以下是你需要記住的關于為所有類型的屏幕設計的注意事項：

• 始終以1倍的像素密度來設計
• 所有的設計工具都內置了正確的屏幕尺寸（無需記憶）。
• 讓您的主導航在移動設備上更容易到達。