iOS 15 设计规范近年来最大更新！来看看有哪些变化！

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

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

下回再贱……

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