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

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

適配難度正在發(fā)生變化

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

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

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

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

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

來到2020年

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

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

那應(yīng)該要如何處理呢?

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

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

所以要如何進行設(shè)計?

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

當然，對于程序員來說，直接使用Swift代碼來調(diào)試UI會簡單很多，但在設(shè)計階段，我們還是想比較直觀的看在不同的設(shè)備上會是什么樣子?？梢允褂胹ketch mirror在手機上預(yù)覽它，設(shè)計側(cè)其實能做更多的工作。

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

• 但對于現(xiàn)在的新尺寸390和428的寬度呢?
• 我們應(yīng)該簡單地把這些手機的設(shè)計放大嗎?

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

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

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

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

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

折疊線

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

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

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

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

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

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

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

總結(jié)

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

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

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

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