10月13號，蘋果舉辦了年度的發布會并發布了四款新iPhone，發布會的重頭戲是介紹新的設計和新的功能特色，這里簡單總結下：

我覺得這次的設計是iPhone5/iPad Pro機型的回歸，我個人是非常喜歡那套設計的，喜歡它的小巧和功能。無線充電技術可以讓未來的蘋果筆記本電腦(基于ARM)也同樣可以具備快捷充電方式。

適配難度正在發生變化

如果設計師有做過移動端應用或響應式網頁設計的話，可能會知道，有越來越多的蘋果設備尺寸需要適配。下圖是目前sketch和Figma上的畫板預設。

但這些新款的iPhone讓手機尺寸變得更加復雜，還記得喬布斯介紹帶視網膜屏幕的iPhone4嗎?

他當時特別提到的一點是，iPhone4手機的基礎分辨率和其他iPhone手機都是一樣的，都是320×480，只是像素密度高了2倍。

那是一個偉大而又純粹的時期，只需要設計320×480的設計稿，輸出2x的視網膜屏幕尺寸就滿足要求了。

這是非常“蘋果”的——一條清晰，容易遵循的道路，完全是為了消除不必要的復雜性。

來到2020年

看看上圖中一堆復雜的尺寸，我甚至還沒有把第一代的iPhone SE(320×568)放進來(點開可以看大圖)

因為有了這些各異的分辨率，增加了非常多的復雜性，對吧?

那應該要如何處理呢?

在iPhone12和12Pro的情況下，根據下面這條twitter，我們得到了新的390寬度。

但iPhone 12 Mini的分辨率降到了375×812，和iPhone x一樣。這種里的問題是，它的實際分辨率不再是3x，而是2.88x。當然，對于更小的屏幕，它不會造成太大的問題，因為如何顯示對象的大多數實際計算都是在代碼中完成的。

所以要如何進行設計?

下面的設計示例，它并不理想，特別是頂部和底部的間距需要單獨適配。在一些手機上，主按鈕需要滾動，所以我們必須調整整個卡片和字體大小，以使得這些設備也能很好的兼容。

當然，對于程序員來說，直接使用Swift代碼來調試UI會簡單很多，但在設計階段，我們還是想比較直觀的看在不同的設備上會是什么樣子。可以使用sketch mirror在手機上預覽它，設計側其實能做更多的工作。

到目前為止，我們需要做2個尺寸的設計稿，分別是375×812的iPhone X大小以及更大的414×896。它覆蓋了大多數手機，開發簡單調整布局，就能適配其他少數設備上更多的內容。

• 但對于現在的新尺寸390和428的寬度呢?
• 我們應該簡單地把這些手機的設計放大嗎?

答案是視情況而定。在相同的內容量情況下，UI可以保持相同的尺寸，而內容本身可以被放大，質量會更高。

但是僅僅是把每一個設計都放大可能會失去我們在畫面中做好的版式設計，畫面可能會失去平衡。設計元素可能開始變得太大、太小、太寬。

另外，一些上下縮放會導致非常細的線條出現不好的鋸齒效果，因為這都是基于像素近似的，所以如果你使用的是非常細/很淺的字體，可能會丟失一些易讀性。

蘋果在iOS7之后解決了這個問題，它引入了更粗的字體，并去掉了大多數太細的字體。但是有些設計師喜歡這些細字體，因為他們把它們理解為“精致的”和“好的設計”。

如果我們試圖將同樣的“滾動高度”對應到這些手機上，那么我們會得到一些未使用的空間，當然這不是最佳適配策略。直接這樣拉通對比有點夸張，因為有些手機有不同的長寬比，這只是為了顯示一個普遍的縱向適配原則。

折疊線

折疊線是一個比較經典的概念，一條無形的線將我們通常在一個屏幕上看到的東西(沒有滾動)和其他設計分開。其理念是，所有最重要的元素都應該“放在最上面”以便更容易地被看到。

有一些觀點認為“人們不會滾動”，這在現代聽起來有點傻(數據顯示，我們平均每天在手機上能滾動300米)。

但它可能會影響到一些電商項目，在這些項目中，首屏是需要精心設計的，以便在一個屏幕上顯示盡可能多的相關信息和提高購買率。當然，我們可以創建一個覆蓋按鈕，但這并不能解決中斷特定手機信息的問題。

所以我想對于電商來說，通過將同樣的設計升級到更大的尺寸，實際上可能更容易測試體驗，因為這將使我們對人們在所有設備上看到的東西有一個更一致的看法。

一個44pt高(1@x下等同于44px高)的按鈕在2@x時為88px高，在320×480視口中統一44pt渲染。

彩云注：我覺得這里需要給大家稍微解釋下pt這個單位的意義：

pt是專門為蘋果操作系統設計的一個單位，它與屏幕上的像素密度無關，只與屏幕上的內容多少有關。在第一代 iPhone 到 iPhone 3GS 的非 Retina 屏幕上，一個點就等于一像素，可以表示為 @1x;而在 iPhone 4 到 iPhone 4s 的 Retina 屏幕上，一個點等于兩個像素，可以表示為 @2x。而日后發布的一些設備(如 iPhone 6 Plus、iPhone X)還會出現一個點等于三個像素的情況，可以表示為 @3x，這種 @1x、@2x、@3x 可以稱之為「比例因子」。

總結

我錯過了兩個基于同一個視口的分辨率時期。它使體驗設計變得更容易，而且也很好測量。

隨著界面的碎片化，iOS正慢慢地變成Android的樣子——大量的分辨率、高寬比和設備增加了復雜性。

彩云注：我覺得隨著iPhone12的到來，屏幕尺寸越來越碎片化，也越來越難記，這里面有2個關鍵點需要大家掌握，總結下：

• 蘋果目前屏幕邏輯分辨率只有 3種：320pt，375pt和414pt。
• 適配規則也就是2種方式：一種是直接垂直方向邊長，即在垂直方向上可以看到更多的內容(符合這個規則的有iPhone 4s 到 iPhone 5，從 iPhone 8 到 iPhone X，從 iPhone 8 Plus 到 iPhone XR、iPhone Xs Max，從 iPhone SE 第一代到 iPhone 12 );另一種是等比放大，即直接在橫向界面上漏出更多內容，比如2個卡片擴充到現實3個卡片。(符合這個規則的有 iPhone 5s 到 iPhone6、iPhone 6 Plus，從 iPhone X 到 iPhone Xs Max、iPhone XR)。