苹果 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 的话，那就只能老老实实用我上面提到的办法手动更新了。

今天分享到这里结束，大家周末愉快！

下回再贱……

欢迎关注作者的微信公众号：「超人的电话亭」

复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。