iPhone 12的UI如何適配設計呢？

Sponsor

前言：作為手機界的巨頭，每年等iphone新品的發布會已經別列入了日程表中。在今年10月份蘋果公司發布了iphone12。也帶了一些新的設計和新的功能特色。個人覺得這次的設計是iPhone5/iPad Pro機型的回歸，不過其無線充電技術可以讓未來的蘋果筆記本電腦（基于ARM）也同樣可以具備快捷充電方式。

作為一個設計師，相比最近幾代，iphone12的變化，我們更多看到的是一些設計上發生的變化。那么本文的重點也是針對這些變化以及應對方法進行分析。

適配難度正在發生變化

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

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

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

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

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

來到2020年

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

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

那應該要如何處理呢？

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

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

Ukiyo——我們正在開發的一款為創意人士量身打造的應用程序，可以在目前所有的iphone手機上看到。

所以要如何進行設計？

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

為特定的機器分辨率進行必要的調整，左邊只放大圖片是不可取的

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

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

但對于現在的新尺寸390和428的寬度呢？

我們應該簡單地把這些手機的設計放大嗎？

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

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

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

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

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

折疊線

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

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

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

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

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

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個關鍵點需要大家掌握，總結下：

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

2）適配規則也就是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）。

現在有很多設計師越來越不關注這些技術問題了，但是適配的重要性在真正做過一次之后就明白了。

一些讀者留言精選（僅作參考）

XiaoY：3x 圖不僅用在375的X上也用在414Xmax上。在X上大小合適，在Xmax上就會偏小。
2x圖不僅用在375的8上也用在414的XR和320的SE上。在8上大小合適但在XR上偏小，在SE上偏大。所以新出來的尺寸也沒比之前復雜。

作者回復：是的。

陳昱龍：團隊以X的尺寸為主，只選擇性的出SE和SR的稿子，不過現在大部分安卓加蘋果用X的尺寸更合適一些吧？比較困惑。

作者回復：我們這邊一般還是用x的尺寸為主。

設計西王啟?。?/strong>我覺得您最后的注解有問題：1.未發布ip12之前是只有3種邏輯分辨率寬度，但是新增的390pt和428pt也是算的，所以說現在其實是有5大種邏輯分辨率寬度了。
2.對于ip12的適配其實只有一種，您說的第二種等比放大其實是未適配ip12的app會在375×812的基礎上等比放大1.04倍以適應ip12。而且等比放大以后顯示的內容與之前是一樣的，并不會出現橫向上卡片變多的情況?？ㄆ兌鄬嶋H上是會伴隨縱向上內容的增加一起產生的，即按照ip12適配以后橫向和縱向上內容都會有所增加。

作者回復：你說的沒錯，是我疏忽了，謝謝提醒。

Dream：iPhone 8Plus( 1242*2208 px ) 1242/3=414pt 2208/3=736pt iPhone 8Plus 應是@3x像素倍率
作者回復：沒錯

作者 | 彩云Sky來源 | 彩云譯設計（id：caiyunyisheji）
原文鏈接：https://uxdesign.cc/iphone-12-vs-designers-ca8bac776dad

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。

贊助商鏈接

與 UI、UI設計、設計規范 相關的文章

• 
  網頁設計尺寸規范（簡易版）
• 
  獲得5家大廠的offer作品集長啥樣子？好多寶藏經驗！
• 
  起點讀書APP福利中心設計總結
• 
  表情設計與優化（雪球APP表情設計升級過程）
• 
  6個B端設計參考網站，解決B端設計參考太難找的難題
• 
  8年經驗UI設計師告訴你：UI設計主要工作流程是什么

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。