【精簡版】iPhone 12 APP設計適配指南

2022-01-20 APP設計學堂

自從iphone 12上市以來，想必很多有條件的小夥伴們已經更新換代了，拿到了最新的iphone 12 或者是 iphone 12 MAX手機。

作為APP移動設計師，第一時間想到的就是 我們又要多適配一個機型了。

今天學堂君就簡單來跟大家分享下 iPhone 12 系列產品的移動APP設計適配指南吧~  算是真正的乾貨帖。值得大家收藏。

iPhone 12 系列屏幕尺寸的變化

新版iPhone 12 發布了4款不同屏幕尺寸的手機：

5.4寸 iphone12 mini ， 

6.1 寸的 iPhone 12、iPhone 12 pro,

6.7 英寸的 iPhone 12 pro Max ，四款機型都採用了 Super Retina XDR 顯示屏，相比 iPhone 11 像素點的數量，提升了2倍，完成了從 LCD 屏到全系 OLED 屏的更新換代。

具體的每個手機的解析度尺寸如下：

同時，我們也來看看 iphone 12 和iphone 11 的對比圖，有哪些不一樣的地方？

所以，學堂君給出的建議是：

新的 iPhone 12 機型中完美運行 APP ，就需要研發同學進行適配，我們APP設計師只是配合輔助。比如，可以通過場景定義不同控制項的不同適配方案，設計師和研發確定好不同控制項之間的約束關係及布局方式，就可以使用一套方案適配不同尺寸的屏幕即可。

看到上圖當中，是不是還有一款手機尺寸：iphone 12 mini

新發布的iPhone 12 mini 的屏幕解析度為 1080*2340px @3x ，PPI 為 476 ，通過已發布的 Xcode 模擬器可以看到 iPhone 12 mini 的渲染解析度為「1125*2436px」，比官方標稱的解析度「1080*2340px」放大了 1.04 倍，同當年的 iPhone 6 Plus 屏幕變化一樣，蘋果公司為方便開發者，在屏幕渲染時用的是「1125*2436px」@3x 的素材，然後再縮放到「1080*2340px」@3x （準確來講是@2.88x）上。

所以在圖像被實際顯示在顯示屏之前，它被整體縮小到了更低的一個解析度，也就是說整體縮小了1.04倍。而「1125*2436px」對應的邏輯解析度為 「375*812pt」@3x，與 iPhone 11 Pro 的邏輯解析度一致，這樣的話適配 iPhone 12 mini 就完全無需再進行額外的適配工作。

所以， iPhone 12 mini可以按照iphone  11  pro的尺寸適配即可。切圖是3倍圖。

設計尺寸適配解決方案

當我們了解了最新iphone 12系列手機產品解析度尺寸之後，

那麼，iPhone 12 系列的屏幕解析度均可使用@3x的設計稿進行適配，所以APP UI設計師作圖時可以跟之前一樣不變，以 iPhone 11 pro 的@2x二倍圖「750*1624px」375*812pt 的 尺寸為設計基準，依然提供@2x、@3x兩套切圖就可以。

但是，需要注意的一點：

目前來說，UI設計適配稿是APP UI設計師和研發工程師之間溝通中常見的問題，有一些小細節需要我們去注意。我們的UI設計尺寸是以2倍圖為基準，然後切3倍圖對解析度更大的機型進行適配，3倍圖適配是我們的重點，所以經常有設計師忽視對 iPhone SE 以及更早之前的 iPhone 5 代機型去做適配。針對屏幕去適配時是按比例的縮放，還是固定的間距，是公用一套規則，還是在大屏下有特殊的布局，都需要有明確方式傳達給客戶端開發同學。

這裡總結了一般常見的布局方式，方便大家在研發溝通時能夠快速達成一致：

固定間距：在不同尺寸下，兩個控制項之間的間距總是固定。

流式布局：文字，圖片等在不同屏幕下流式排布，比如大屏下一行顯示四張圖片，小屏一行三張。

圖片尺寸固定比例放大：間距，文字大小，圖片大小等比例放大。

保持比值：兩個UI元素或者圖片的長寬等屬性保持一定的比值。

對齊：元素間按某個方向對齊。



簡單總結一下：

APP UI界面設計的適配設計建議（4種機型）：

iPhone 12 和 iPhone 12 pro ：是新增的一種邏輯解析度「390*844pt」，對比 iPhone11&11pro，理論上橫縱方向顯示的內容變少了，但是PPI像素密度提升，畫面更細膩；使用「750*1624px」 尺寸為界面設計基準，切圖輸出規格@3x

iPhone 12 pro Max ：新增的一種邏輯解析度「428*926pt」，對比iPhone12pro，橫縱方向顯示的內容變多；使用「750*1624px」 尺寸為界面設計基準，切圖輸出規格@3x。

iPhone 12 mini：⽆需再進⾏額外的適配工作，使用「750*1624px」 尺寸為界面設計基準，切圖輸出規格@3x。

以上就是學堂君想要跟大家一起分享的【精簡版】iPhone 12 APP設計適配指南。

希望對大家有所幫助。

相關焦點

  • 【Xposed】抖音精簡版+Adaway=完美
    不說了抖音卡出翔，老機器噩夢這個精簡版是官方發的版本，因為包名相同不能和卡出翔版共存，只能安裝一個精簡版除了不能發布視頻
  • iPhone 12來了,設計師們準備好適配了嗎?
    適配難度正在發生變化如果設計師有做過移動端應用或響應式網頁設計的話，可能會知道，有越來越多的蘋果設備尺寸需要適配。在iPhone12和12Pro的情況下，根據下面這條twitter，我們得到了新的390寬度。
  • iPhone 解析度終極指南以及檢測 iPhone X 設備的幾種方式
    適配新的 iPhone X 設備此外，我們發現，對於未進行新屏幕尺寸適配的工程，直接編譯，在新設備 iPhone XR 和 iPhone XS Max 上運行，它們是以放大模式自動適配的（以 5.8 寸的 iPhone X 屏幕為基準等比例放大），此時在代碼中獲取到的屏幕寬高都為 375pt * 812pt。
  • APP適配IOS8,iPhone6和Plus截圖簡要說明
    所以在真機上研究了下蘋果官方在不同解析度下對系統APP所做的適配。-正文：首先我們先看一下iphone5，iphone6和iphone6 plus的一些數據對比： 這裡是給前端參考的：iPhone 6與 iphone 5一樣，像素比都是2，但是另一方面 iPhone 6 plus 401的dpi真實的像素比值應該大約是2.60。
  • Android 12正式版即將發布,如何快速適配新系統?
    自5月19日，谷歌I/O開發者大會發布Android 12 Beta 1系統以來，OPPO開放平臺持續推動新系統適配工作，定期分享適配指引，幫助開發者節約「學習成本」；7月，舉辦「OTalk」適配交流專場，以線上交流的形式，幫助開發者快速解決適配「疑難雜症」。
  • UI設計切圖規範指南!
    因為在開發中由於各機型的屏幕解析度不同，需要針對一些大屏機型進行適配。為了適配大解析度手機（例如iphone 7plus）圖標在切圖的時候需要輸出@2x和@3x的切圖，其中@2x的切圖可以滿足雙平臺大部分機型的適配要求，@3x是用來適配iphone手機的各種plus版本的手機（後邊會有文章專門講解關於適配的問題）。
  • 案例分析:跨平臺UI適配方法
    對於設計師而言，這隻意味著一件事情——應用的UI和UX需要適配到另一個平臺，以確保產品設計語言的一致性。跨平臺UI適配有三種不同的情景：1.保持品牌的一致性；2.符合平臺特性；3.尋求兩者之間的平衡。這篇文章通過最熱門的app分析這三種方法，讓你了解什麼方法最適合你。
  • 如何設計小程序?UI設計師必看的超全實戰指南
    小程序能夠通過一套設計來適配 2 端的，比如 iOS 與 Android 的改版是分別適配了 2 端使用體驗來獨立設計完成的，而小程序則不同，只需要設計一套設計稿，然後適配，節省了適配的很多複雜工作，比如安卓端（據我所知目前市面上有大概 3000 種安卓手機，可想而知適配比 iOS 相對要複雜很多）。
  • 海報工廠app iPhone版
  • Unity+ iPhone X適配方案
    隨之而來的還有其不同於以往任意一代iPhone的劉海設計。一時間，iPhone X的適配問題迅速在產品圈流傳開。而作為一個線上手遊的客戶端工程師，我在和團隊共同歷經了為iPhone X適配的艱難歲月後，終於在產品上市之日，獲得了商店首批適配推薦。那麼iPhone X適配到底有什麼需要注意的點，又應該採取什麼方案呢？
  • 如何設計小程序?設計師必看的超全實戰指南
    小程序能夠通過一套設計來適配 2 端的，比如 iOS 與 Android 的改版是分別適配了 2 端使用體驗來獨立設計完成的，而小程序則不同，只需要設計一套設計稿，然後適配，節省了適配的很多複雜工作，比如安卓端（據我所知目前市面上有大概 3000 種安卓手機，可想而知適配比 iOS 相對要複雜很多）。
  • 不懂如何設計小程序?來看這份超全面指南!
    設計小程序，需要避免的問題點7.做設計必須要了解所對應的平臺特性8.設計小程序的，使用1倍圖設計即可9.切圖標註部分幾個推薦的高效共享的平臺10.「添加到我的小程序」視覺引導11. 核心場景APP導流12.
  • 更新您的 widget 以適配 Android 12
    Android 12 更新了已有的 Widget API，重塑了微件的設計來契合 "Material You" 設計語言。這些更新可以幫助您使用設備的主題顏色和圓角來構建更加美觀的微件，從而提升微件在搜索和擺放時的可發現性和視覺觀感。△ 對比更新之前 (Android 11) 和更新後的淺色和深色主題 (Android 12)在這個系列中，我們將帶您更新微件來適配 Android 12。
  • 三分鐘弄懂iPhone X 設計尺寸和適配
    適配、指南、設計稿」 內容卻是發布會回顧和手機介紹的標題黨。索性自己寫一篇只針對iPhone X適配的貼子，與適配無關的內容通通不要。通俗的說，iPhone X可看做是iPhone 4.7'' 的加長版然而，事情並不是設計圖加長這麼簡單。
  • Google 相冊推出的＂圖庫精簡版＂應用
    應用推薦欄目旨在給大家介紹新的應用，這個欄目不對應用內部功能和設計做過多的說明，僅通過應用介紹、截圖等方式提供對其簡單的認識，具體的應用功能需要用戶自己去探索和發現
  • 高效的iPhone X適配技術方案(UGUI和NGUI)
    適配來源：按照蘋果官方人機界面指南 ： https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/在iPhone X 異形屏幕上，蘋果提出了Safe Area安全區的概念，這個安全區域的意思是，UI在Safe Area能夠保證顯示不會被裁切掉
  • 移動端適配小結
    idealviewport: 為瀏覽器定義的可完美適配移動端的理想 viewport，固定不變，可以認為是設備視口寬度。比如 iphone 7 為 375px, iphone 7p 為 414px。rem 適配方案結合 2、3 部分可以實現 1px 的物理像素這一最小屏幕單位，那在此基礎上如可讓設計通常提供的 750px 設計稿來完美的適配到多種機型上，使用 rem 是一種解決方式。3.1 rem 如何設置rem 是相對於根元素 html 的 font-size 來做計算。
  • 谷歌相機2020年12月更新,最新8.1適配小米/一加/三星/OPPO等超多型號
    Oneplus7, Mi9TPro, Mi 10 ultra, Mi Note 10 pro, Mi Note 10 lite, Mi 10, Redmi Note 9 Pro, Oppo Find x2 Pro, Realmex2pro③：Pixel5,Pixel4a(5G),Pixel4a,Pixel4XL,Pixel4,Pixel3aXL,Pixel3a, Pixel3XL, Pixel3
  • 談談Mobile Web App的設計方法
    store和google play中的app數量均已接近70萬，marketplace的app數量接近13萬。所以需要關注Web app在不同屏幕下的界面適配問題。1.1 適配不同解析度通過響應式網頁的設計方法提升頁面在不同解析度下的兼容性：
  • UI設計師如何適配2018新款iPhone
    iOS 12正式版即將發布在經歷了很多個Beta版後，iOS 12正式版也將會在這次發布會後亮相。相信經過精心設計的iOS 12會給用戶帶來更快速、更靈敏、更驚喜的體驗。 大家最關心的應該就是如何進行新機型的適配了，目前在我們設計界面時，最主流的方式是基於iPhone8（解析度750*1334）來進行設計，以@2x為基準做設計稿，然後提供@2x、@3x的切圖給到開發人員。