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

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

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

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

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

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

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

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

來(lái)到2020年

看看上圖中一堆復(fù)雜的尺寸，我甚至還沒(méi)有把第一代的iPhone SE(320x568)放進(jìn)來(lái)（點(diǎn)開(kāi)可以看大圖）

因?yàn)橛辛诉@些各異的分辨率，增加了非常多的復(fù)雜性，對(duì)吧？

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

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

但iPhone 12 Mini的分辨率降到了375x812，和iPhone x一樣。這種里的問(wèn)題是，它的實(shí)際分辨率不再是3x，而是2.88x。當(dāng)然，對(duì)于更小的屏幕，它不會(huì)造成太大的問(wèn)題，因?yàn)槿绾物@示對(duì)象的大多數(shù)實(shí)際計(jì)算都是在代碼中完成的。

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

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

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

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

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

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

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

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

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

但是僅僅是把每一個(gè)設(shè)計(jì)都放大可能會(huì)失去我們?cè)诋?huà)面中做好的版式設(shè)計(jì)，畫(huà)面可能會(huì)失去平衡。設(shè)計(jì)元素可能開(kāi)始變得太大、太小、太寬。

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

蘋(píng)果在iOS7之后解決了這個(gè)問(wèn)題，它引入了更粗的字體，并去掉了大多數(shù)太細(xì)的字體。但是有些設(shè)計(jì)師喜歡這些細(xì)字體，因?yàn)樗麄儼阉鼈兝斫鉃椤熬碌摹焙汀昂玫脑O(shè)計(jì)”。

如果我們?cè)噲D將同樣的“滾動(dòng)高度”對(duì)應(yīng)到這些手機(jī)上，那么我們會(huì)得到一些未使用的空間，當(dāng)然這不是最佳適配策略。直接這樣拉通對(duì)比有點(diǎn)夸張，因?yàn)橛行┦謾C(jī)有不同的長(zhǎng)寬比，這只是為了顯示一個(gè)普遍的縱向適配原則。

折疊線

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

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

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

所以我想對(duì)于電商來(lái)說(shuō)，通過(guò)將同樣的設(shè)計(jì)升級(jí)到更大的尺寸，實(shí)際上可能更容易測(cè)試體驗(yàn)，因?yàn)檫@將使我們對(duì)人們?cè)谒性O(shè)備上看到的東西有一個(gè)更一致的看法。

一個(gè)44pt高（1@x下等同于44px高）的按鈕在2@x時(shí)為88px高，在320x480視口中統(tǒng)一44pt渲染。

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

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

總結(jié)

我錯(cuò)過(guò)了兩個(gè)基于同一個(gè)視口的分辨率時(shí)期。它使體驗(yàn)設(shè)計(jì)變得更容易，而且也很好測(cè)量。

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

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

蘋(píng)果目前屏幕邏輯分辨率只有 3種：320pt，375pt和414pt。

適配規(guī)則也就是2種方式：一種是直接垂直方向邊長(zhǎng)，即在垂直方向上可以看到更多的內(nèi)容（符合這個(gè)規(guī)則的有iPhone 4s 到 iPhone 5，從 iPhone 8 到 iPhone X，從 iPhone 8 Plus 到 iPhone XR、iPhone Xs Max，從 iPhone SE 第一代到 iPhone 12 ）；另一種是等比放大，即直接在橫向界面上漏出更多內(nèi)容，比如2個(gè)卡片擴(kuò)充到現(xiàn)實(shí)3個(gè)卡片。（符合這個(gè)規(guī)則的有 iPhone 5s 到 iPhone6、iPhone 6 Plus，從 iPhone X 到 iPhone Xs Max、iPhone XR）。

歡迎關(guān)注譯者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」