超全面!UI設計師如何適配2018新款iPhone
北京時間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小時的續航。
iOS 12正式版即將釋出
在經歷了很多個Beta版後,iOS 12正式版也將會在這次釋出會後亮相。相信經過精心設計的iOS 12會給使用者帶來更快速、更靈敏、更驚喜的體驗。
接下來我們重點說一下,新發布的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適配指南,還是熱騰騰的呢!裹上雞蛋液,沾上面包糠,各位小夥伴們及時享用哦~
畫素妹先去打個盹兒(o-ωq)).oO…