超全面！UI設計師如何適配2018新款iPhone

任何產業鏈的發展都離不開CMF（色彩、材料、工藝）設計

北京時間9月13日凌晨1點，蘋果在美國加利福尼亞州的Apple Park園區召開了2018年蘋果秋季新品發布會。很多人對這次科技界的春晚充滿了期待，除了那些讓人「剁手」的新品，設計師關注的還有新手機發布後的設計適配工作。下面小編給大家全面梳理一下昨天凌晨發布會的主要內容，向大家娓娓道來。

新手機iPhoneXS、XS Max與iPhoneXR

發布的三款新iPhone包括兩款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分別為5.8英寸（解析度為1125*2436）和6.5英寸（解析度為1242*2688），第三款設備是iPhone XR，配備6.1英寸LCD液晶屏（解析度為828*1792）。三款新iPhone均採用「劉海屏」+Face ID設計，搭載了蘋果A12處理器，預售價分別為999美元、1099美元和749美元。

蘋果針對中國市場推出了支持雙卡的新iPhone，包括新款iPhoneXS Max和iPhoneXR。

更大屏幕的Apple Watch 4

Apple Watch 4屏幕全面升級，含全新的UI設計和錶盤，屏幕顯示面積佔比相較於舊款將增加30%，搭載了64位雙核S4處理器。新款的Apple Watch 4對健康功能進行了增強，最主要提高心率檢測能力，同時能夠保證最長18小時的續航。

接下來我們重點說一下，新發布的iPhone對UI設計師有哪些影響

一、設計如何進行適配？該使用幾倍圖？

大家最關心的應該就是如何進行新機型的適配了，目前在我們設計界面時，最主流的方式是基於iPhone8（解析度750*1334）來進行設計，以@2x為基準做設計稿，然後提供@2x、@3x的切圖給到開發人員。手機適配採用幾倍圖與PPI有關係，也就是像素密度，所以我們可以理解為什麼iPhone4、5、6之間解析度和屏幕尺寸不一樣，但是同樣採用@2x二倍圖的原因，是因為它們有同樣的PPI（326ppi）；

新發布的5.8英寸的iPhoneXS（458ppi），解析度為1125*2436px，與iPhoneX（三倍圖）的數據是一致的，所以我們可以得出iPhoneXS也是使用的三倍圖@3x。

6.5英寸的iPhoneXS Max（458ppi），解析度為1242*2688px，而iPhone8 Plus（三倍圖，401ppi），解析度為1242*2208px，iPhoneXS Max比iPhone8 Plus的PPI僅多了50多，跟iPhoneX（三倍圖）的PPI一致，可以推論出iPhoneXs Max使用的同樣是三倍圖@3x。

從頁面寬高比例來看：

iPhoneXS Max寬度1242/3=414pt，iPhone8 Plus寬度1242/3=414pt，兩者的寬度一致（大家看到寬度一致的時候是不是鬆了口氣呢？哈哈）；

iPhoneXS Max高度2688/3=896pt，iPhone8 Plus高度2208/3=736pt；

iPhoneXS Max比iPhone8 Plus長一截，多了160pt。

我們發現，iPhoneXS Max的適配，有些像去年設計師適配iPhoneX的套路（認真臉）。

最後我們來看6.1英寸的iPhoneXR（326ppi），解析度為828*1792px，可以看到iPhoneXR與蘋果二倍圖的PPI（326ppi）一致，可以推論出iPhoneXR使用的是二倍圖@2x。

從頁面寬高比例來看：

iPhoneXR寬度828/2=414pt，iPhoneXS Max寬度1242/3=414pt；

iPhoneXR高度1792/2=896pt，iPhoneXS Max高度2688/3=896pt；

我們神奇地發現，iPhoneXR與iPhoneXS Max寬高比是一致的！這意味著iOS開發者做完iPhoneXS Max的適配後，直接進行等比例縮放2/3就可以得到iPhoneXR了，不用重新進行修改布局（也可以先做iPhoneXR的適配，再等比例縮放到iPhone XS Max）。

我們來做一個小結：

iPhoneXS、iPhoneXS Max使用的是三倍圖@3x；

iPhoneXR使用的是二倍圖@2x。

小編給大家整理了當前iOS適配所用到的切圖及對應機型，便於大家記憶，是不是很貼心呢？（乖巧臉）

二、新尺寸對設計布局的影響

新發布的iPhoneXS、XS Max、XR都採用了全面屏設計，因此我們必須保證布局填滿屏幕，並且考慮到交互操作，要留出安全區域，才不會被圓角、劉海影響使用，布局的左右邊距可根據產品自定義，這些點與iPhoneX是相同的。

在上面提到過，iPhoneXS與iPhoneX尺寸大小完全一致，所以頁面布局也是一樣的。我們只需要懂得怎樣適配到iPhoneXS Max以及iPhoneXR的布局就可以了（兩者的的邏輯像素是一致的，均為414*896pt，區別在於一個是@3x，一個是@2x）。

方式有多個，接下來主要介紹兩種：

方法一：

如果我們在設計的時候以iPhone8（375*667pt）為基準做設計稿，先得到iPhoneXR：由於都是@2x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與我們做iPhone5到iPhone6的寬高變化處理是一樣的道理），狀態欄由20pt變高為44pt，在底部加上主頁指示器（Home Indicator）高度為34pt，導航欄以及標籤欄高度不變。我們發現iPhoneXR內容呈現的比iPhone8要多一些。

有了iPhoneXR後，直接等比例放大1.5倍就可以得到iPhoneXS Max。

方法二：

如果我們在設計的時候以iPhoneX（375*812pt）為基準做設計稿，先得到iPhoneXS Max：由於都是@3x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與方法一同理），狀態欄、導航欄、標籤欄、主頁指示器的高度均不用更改。有了iPhoneXS Max後，直接等比例縮小2/3就可以得到iPhoneXR，很簡單～。

還有很多適配的方式，在這裡就不一一贅述了。

最後給大家看一下今天凌晨發布會上的iPhone全家桶～

以上就是給大家整理出來的關於昨天凌晨蘋果發布會的內容和新iPhone適配指南，還是熱騰騰的呢！裹上雞蛋液，沾上麵包糠，各位小夥伴們及時享用哦～

推薦閱讀

iPhone XS震撼發布，依舊採用不鏽鋼中框，對手機金屬行業有何影響？

蘋果走高價精品新時代，供應鏈須加速非蘋布局

全面屏火爆趨勢將持續，2019年智能手機面板規格將呈現多元化

從iPhone1到iPhoneX結構拆解，看手機天線設計變遷

如何評價2018手機廠商審美水平？

淺談OPPO手機的色彩學，這一次或將引起行業新風潮

揭秘：oppo R17漸變色與水滴屏是如何設計並製造出來的

手機塑膠|玻璃外殼加硬、AG、AF全製程工藝詳解

素材來源

 | 新像素UI教育

作者

 | 像素妹兒

編輯整理

 | CMF設計軍團

THE  END

歡迎在文章後面留言

年度重磅 活動推薦

2018年11月28日～29日

中國.廣州.會展中心

人數規模：1000+

會議信息

主辦機構：

國際CMF設計大會組委會

發起機構：

國際CMF設計大會組委會、CMF設計軍團、薩米設計研究、廣州設計周、色哲色彩顧問、CMF設計研究院

承辦機構：

深圳薩米設計研究有限公司、CMF設計軍團

支持機構：

廣東省工業設計協會、深圳市設計聯合會、廣東工業設計創新服務聯盟、廣州工業設計促進會、華中科技大學機械科學與工程學院、南京藝術學院工業設計學院、北京服裝學院色彩設計研究中心（BIFTcolor）、武漢理工大學藝術與設計學院、成都大學中國－東盟藝術學院、美的生活電器、錦湖日麗、TCL電子控股、深圳市真空技術行業協會。（排名不分先後）

參會人群：

品牌終端、材料、設備、加工製造、耗材、工程、設計、研究機構、高校、機構

關於CMF設計軍團：

CMF行業第一平台，由Samy團長黃明富創辦，致力於推動CMF行業發展，專註於CMF探索研究與分享傳播。為主機廠提供CMF創意資源支持；為供應商提供精準業務對接；為高校提供CMF教學支持；為設計師提供交流平台。分享對CMF的踐行與感知，詳詢可加軍團微信：CMFDESIGN999（請備註姓名、需求）

為探索CMF深度與廣度，提升行業水平，軍團邀請到：

海爾、美的、格力、西門子、奧克斯、小天鵝、海信、康佳、TCL、松下、奧馬、長虹、飛利浦、創維、萊克、科沃斯、蘇泊爾、史密斯、美菱、九陽、海派、仁寶、羅技、華碩；Apple、華為、小米、三星、OPPO、聯想、中興、vivo、酷派、魅族、樂視、Motorola、傳音、努比亞、奇酷360、一加、美圖；微軟、intel；寶馬、大眾、廣汽、北汽、上汽、一汽、長安、長城、吉利、海馬、江淮、比亞迪、奇瑞、現代、中車、陝汽、東風、濰柴、蔚來、泛亞、小鵬、寶沃、伊狄達、開雲、同捷科技；佳普、老闆、正大、模德、奧普、櫻花、歐普、歐派、顧家、華帝；杜邦、庫爾茲、巴斯夫、陶氏、PPG、蘇威、阿克蘇諾貝爾、3M、艾文德、LG；武漢大學、天津大學、東南大學、湖南大學、吉林大學、江南大學、東華大學、同濟大學、中央美院、天津科技、天津工業、廣州大學、南京藝術學院、浙江理工、浙江工業、中國地質、南京理工、南京航空航天、北京理工、西南交通、廣東工業、華南理工、華南工業、華南農業、安徽農業、哈爾濱理工大學；北京服裝學院色彩設計研究中心、中國流行色協會、中國色彩中心、愛色麗&潘通、新材料在線、麗華創新製造、艾邦高分子、江南大學&卡秀堡輝聯合創新實驗室、榮格、YANG DESIGN等諸多業界同仁，分別來自家電、3C、汽車、家居、資源方、學術界、第三方平台、設計企業等，共同探索CMF，助力行業發展。

用心研究分享

設計、材料、工藝、趨勢、文稿、資訊

CMF設計軍團免責說明：

本文僅代表作者本人對於行業的個人看法，作為分享交流。本文引用的圖文、數據等其它內容，來源於網路或公開資料，版權歸原作者及原出處所有，僅用於學習之用。任何商業盈利目的均不得使用，否則產生的一切後果將由您自己承擔。如需轉載，請與軍團聯繫。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 CMF設計軍團 的精彩文章: