iPhone XR、XS、XS Max釋出後,UI設計師如何
iPhone XR、XS、XS Max釋出後,UI設計師如何做適配?
北京時間9月13日凌晨1點,蘋果在美國加利福尼亞州的Apple Park園區召開了2018年蘋果秋季新品釋出會;釋出的三款新iPhone包括兩款OLED螢幕的iPhone XS和iPhone XS Max,螢幕尺寸分別為5.8英寸和6.5英寸,和iPhone XR,配備6.1英寸LCD液晶屏。
新機型的釋出,必然會對UI設計師的適配產生一些影響,下面U妹帶大家一起來看看都有哪些變化?
一、 螢幕尺寸與解析度
二、如何進行適配?
手機適配採用幾倍圖與PPI是有關係的,也就是所謂的畫素密度,現在,我們都是以750x1334px的尺寸作為設計稿進行設計,以@2x為基準做設計稿,有一種情況現在非常普遍,那就是一稿兩用;設計師都是做IOS版本的設計稿,同時適配安卓,這樣既節省了開發時間和並減少了專案成本。
1、對於iPhone XS
新發布iPhone XS(458ppi),5.8英寸,解析度為1125x2436px,與iPhone X(三倍圖)是一致的,所以我們可以得出 iPhone XS也是使用的三倍圖@3x 。
2、對於iPhone XS Max
iPhone XS Max(458ppi),6.5英寸,解析度為1242*2688px,而iPhone8 Plus(三倍圖,401ppi),解析度為1242x2208px,iPhoneXS Max比iPhone8 Plus的PPI僅多了50多,跟iPhoneX(三倍圖)的PPI一致,可以看出 iPhoneXs Max使用的同樣是三倍圖@3x 。
從螢幕寬高比例來看:
iPhone XS Max寬度1242/3=414pt,iPhone8 Plus寬度1242/3=414pt,兩者的寬度一致
iPhone XS Max高度2688/3=896pt,iPhone8 Plus高度2208/3=736pt;
iPhone XS Max比iPhone8 Plus長一截,多了160pt。
我們發現,iPhone XS Max的適配,和去年設計師適配iPhoneX差不了多少。
3、對於iPhone XR
iPhone XR(326ppi),6.1英寸,解析度為828x1792px,可以看到iPhone XR與iOS二倍圖的PPI(326ppi)一致,可以看出 iPhone XR使用的是二倍圖@2x 。
從螢幕寬高比例來看:
iPhone XR寬度828/2=414pt,iPhone XS Max寬度1242/3=414pt;
iPhone XR高度1792/2=896pt,iPhone XS Max高度2688/3=896pt;
對比發現, iPhone XR與iPhone XS Max寬高比是一致的 !這意味著 UI設計者做完iPhone XS Max的適配後,直接進行等比例縮放2/3就可以得到iPhone XR了,不用重新進行修改佈局(也可以先做iPhone XR的適配,再等比例縮放到iPhone XS Max)。
三、佈局與安全區域
在為iPhone X做設計時,由於之前的直角螢幕變為了圓角,所以我們必須確保佈局覆蓋到整個螢幕,不會被裝置螢幕上的圓角、感測器和指示燈所遮蔽。
對於應用程式中大多數使用標準化的、系統提供的UI元素(如導航欄、表格等)會自動適配iPhone X。背景延伸到顯示器邊緣。
以上是官方提供的佈局指南,這個佈局有助於內容的定位,對齊和間距安全區域可以防止內容覆蓋狀態列,導航欄,工具欄和標籤欄。
豎直時的安全區可延伸至螢幕左右兩側, 上部留44pt給狀態列;佈局邊距通常左右再內縮15pt。
橫向時的安全區左右兩側皆內縮44pt;佈局邊距通常左右再內縮15pt。
需要特別注意的是,將手機橫向展示時,需要注意“劉海”區域,做設計時儘可能左右對稱內縮,可達成體驗的一致性。
四、總結
對於新發布的3種機型,我們還是以750x1334px為設計稿尺寸,切圖資源正常輸出@2X、@3X為切圖資源,設計稿尺寸不變,在適配上, iPhone XR使用的是二倍圖@2x切圖資源,iPhone XS、iPhone XS Max使用的是三倍圖@3x切圖資源 。