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

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

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

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

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

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

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

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

來到2020年

看看上圖中一堆復(fù)雜的尺寸，我甚至還沒有把第一代的iPhone SE(320x568)放進(jìn)來

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

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

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

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

Ukiyo——我們正在開發(fā)的一款為創(chuàng)意人士量身打造的應(yīng)用程序，可以在目前所有的iphone手機(jī)上看到。

所以要如何進(jìn)行設(shè)計？

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

為特定的機(jī)器分辨率進(jìn)行必要的調(diào)整，左邊只放大圖片是不可取的

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

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

但對于現(xiàn)在的新尺寸390和428的寬度呢？

我們應(yīng)該簡單地把這些手機(jī)的設(shè)計放大嗎？

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

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

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

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

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

折疊線

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

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

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

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

一個44pt高（1@x下等同于44px高）的按鈕在2@x時為88px高，在320x480視口中統(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é)下：

1）蘋果目前屏幕邏輯分辨率只有 3種：320pt，375pt和414pt。

2）適配規(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個卡片擴(kuò)充到現(xiàn)實3個卡片。（符合這個規(guī)則的有 iPhone 5s 到 iPhone6、iPhone 6 Plus，從 iPhone X 到 iPhone Xs Max、iPhone XR）。

相關(guān)素材：

原文：https://uxdesign.cc/iphone-12-vs-designers-ca8bac776dad

作者：Michal Malewicz

譯者：彩云Sky