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

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

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

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

在規范組件庫內，可以通過查看 Design Templates + Components + Guides 這個文件的 UI Components - iPhone 頁面，來檢索 iPhone 新的官方素材。

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

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

390 這個寬是 12、12pro、13、13pro 的標準尺寸，而 375 是從 iPhone6 時代開始，一直延續到今天 iPhone mini 的屏幕寬度。

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

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

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

對我們來說，也就是未來創建設計稿，可以使用 390 * 844，忘掉 375 * 812 吧。

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

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

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

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

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

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

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

下回再賤……

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