蘋果 13 香系列發(fā)布個(gè)把月了，已經(jīng)都快被玩膩了，我的個(gè)人手機(jī)也早已經(jīng)更換了，你們可以記一下，iPhone 13pro……

iPhone 更新的硬件提升對我們 UI 來說聊勝于無，iOS 15 更新步子也很小，感知不明顯。但是 iOS 15 的設(shè)計(jì)規(guī)范，卻一聲不響的迎來一波重大更新！

更新的內(nèi)容不是我們前面分享過的 iOS 文字規(guī)范，而是規(guī)范附帶的組件庫內(nèi)容。首先官網(wǎng)的資源頁面就迎來了一波更新，終于從混亂不堪的排版改成 “人看” 的信息架構(gòu)了。

·

前往查看：https://developer.apple.com/design/resources/

在規(guī)范組件庫內(nèi)，可以通過查看 Design Templates + Components + Guides 這個(gè)文件的 UI Components – iPhone 頁面，來檢索 iPhone 新的官方素材。

·

新版和老版 iOS 13 的對比，多了一些奇怪的（不痛不癢的）更新，你可以通過打開兩個(gè)版本查看相同的模塊來認(rèn)識它們的區(qū)別。

·

真正的重頭戲，在于這次更新中蘋果終于更新了默認(rèn)的畫布尺寸。由原來的 375 變更成了 390。

·

390 這個(gè)寬是 12、12pro、13、13pro 的標(biāo)準(zhǔn)尺寸，而 375 是從 iPhone6 時(shí)代開始，一直延續(xù)到今天 iPhone mini 的屏幕寬度。

·

在軟件行業(yè)中，為了滿足適配需要的設(shè)計(jì)稿，通常從中間尺寸開始設(shè)計(jì)，然后向兩側(cè)兼容。所以長期以來 375 款的設(shè)備一直是中間尺寸的設(shè)備，包括 iphone6、X、mini。

但隨著 13 系列發(fā)布，iPhone8 下架，SE 無人問津，mini 成為 iPhone 主流機(jī)型中的的最小尺寸了。

并且，12、12pro、13、13pro 做為中間尺寸和構(gòu)成了目前市面占比最高的設(shè)備。自然而然這個(gè)尺寸就成為了蘋果官方的選擇。

·

對我們來說，也就是未來創(chuàng)建設(shè)計(jì)稿，可以使用 390 * 844，忘掉 375 * 812 吧。

雖然在實(shí)際項(xiàng)目里變更尺寸不是一夜之間就能完成的，但這是遲早要面對的問題，所以，如何完成老版本界面的適配？

給大家一個(gè)簡單的思路，那就在下一個(gè)版本逐步替換設(shè)計(jì)元素。先對版本涉及到的界面創(chuàng)建 390 的畫布完成設(shè)計(jì)，再逐一修改涉及到具體寬度的組件元素。

如果對手機(jī)元素尺寸的適配沒有太清晰的認(rèn)識，可以看看下面的幾個(gè)簡單的示例：

·

·

·

這些都是最簡單的適配原則，終于畫布奇數(shù)變偶數(shù)，雙列設(shè)計(jì)的間距可以使用偶數(shù)了！！

如果你們用 Figma 做界面，使用了 Frame 和 Auto layauto 功能，那么適配就非常的輕松，把原設(shè)計(jì)畫布拉寬就完事了，最多再變更下雙列設(shè)計(jì)的間距。

·

但如果你是用 Sketch 或 XD 甚至是 PS 的話，那就只能老老實(shí)實(shí)用我上面提到的辦法手動更新了。

今天分享到這里結(jié)束，大家周末愉快！

下回再賤……

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」