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

2021-11-4 08:07| 查看: 578| 评论: 0

摘要: 苹果 13 香系列发布个把月了,已经都快被玩腻了,我的个人手机也早已经更换了,你们可以记一下,iPhone 13pro…… iPhone 更新的硬件提升对我们 UI 来说聊胜于无,iOS 15 更新步子也很小,感知不明显。但是 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 的话,那就只能老老实实用我上面提到的办法手动更新了。

今天分享到这里结束,大家周末愉快!

下回再贱……

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


鲜花

握手

雷人

路过

鸡蛋
此篇文章已有 0 人参与评论

请发表评论

全部评论

HTML素材网,HTML5模板,网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题