在iOS 13中,除了大家关注的深色模式(Dark),Apple还调整了大量原生App的设计细节。下面就让我们一起看看吧!
PS:此次用于对比的机型和系统信息如下:
![37f88d2323a89bc1b513a545c86e0269.png](https://i-blog.csdnimg.cn/blog_migrate/50ec9b0d5fd1c3e3ba0009c6fbab800c.jpeg)
- 设备1:iPhone6S,iOS 13 Developer beta 6
- 设备2:iPhone 7 ,iOS 12.4
- 设备3:iPhone X,iOS 12.2
本次iOS 13全局细节调整较多,我将之分为两部分进行阐述:
![90719d562051a321c4d59736c1d7d9f6.png](https://i-blog.csdnimg.cn/blog_migrate/d68981a9ae13795ca27be98b126dc8a8.jpeg)
第一部分-全局组件:Switch、分段控件、Sheet弹窗、Context Menu等;
第二部分-原生App:相机、Safari、短息、地图等
1.1 默认头像
![8106b7e96f153deccc4001ecc06ee1b8.png](https://i-blog.csdnimg.cn/blog_migrate/996f2b3d586e837b7589d30a578c40c8.jpeg)
在iOS 12系统中,“默认头像”都具有性别特征。比如通讯录的图标,就是由一男一女的剪影所组成。在其他位置,比如:通讯录详情页、短信列表、AppStore所用的默认头像均为“男性”剪影。而在iOS 13中,上述这些位置的头像,都变成了去性别特征的圆形头像。如下图:
![85ece033f4ce88f944e07410ab38b467.png](https://i-blog.csdnimg.cn/blog_migrate/6ac1770991d9d5aeaa8b7f79e45e50e9.jpeg)
PS:Apple没有根据账号性别显示男/女头像,而是采用“无性别头像”。我想这么做也许是为了更好的照顾到“跨性别群体”的感受。
![d87aa15946aaf4376bc21e224021a3fe.png](https://i-blog.csdnimg.cn/blog_migrate/a11f9efae865bece1421e0df21abfe33.jpeg)
此前跨性别群体曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等标志,这些眼下已出现在iOS 12.2的Emoji中。
1.2 开关(Switches)
自iOS 7发布以来,iOS的切换开关一直没有变化。其特点是,开关的投影延展到了“凹槽”外、且底色会有缩放动效。
![d42cf978724914baf55fb1cf56460778.gif](https://i-blog.csdnimg.cn/blog_migrate/adf80be26e7f46f03e2805b0a165a672.gif)
时隔五年,苹果对切换开关的细节做了调整。在最新的OS 13中,开关的投影缩到了“凹槽”内,并且取消了底色缩放的过渡,改用“渐隐渐显”的过渡方式。
1.3 图标
![683e279e0e4c615d9f9a91ab51f34c93.png](https://i-blog.csdnimg.cn/blog_migrate/26f618682b539e4ce89d788a19007898.jpeg)
一些长期保留直角的图标,在iOS 13中均改为圆角,线条也得到了加粗。
![4c6da801057dd8298e1c96b88138c0d6.png](https://i-blog.csdnimg.cn/blog_migrate/a465d789adb8f432ed8986f6b85d798e.jpeg)
Apple今年在Mac上推出了一款名为 SF Symbols 的软件。里面集成了约1500个官方图标,这些图标分别具有9种重量(粗细),可以与San Francisco字体无缝结合。设计师可以根据文字的字重,选配对应重量(粗细)的图标,如下图:
![5770c147414336ee8408b30988dfa5d6.gif](https://i-blog.csdnimg.cn/blog_migrate/bb136c689aa7f3d16636d64e212ea139.gif)
除了重量外,Apple还针对每个图标提供了三种不同的尺寸:Small、Medium、Large。如下图:
![0977a83ec6d11f306d2f9eb16237b7d9.png](https://i-blog.csdnimg.cn/blog_migrate/143adc0c8331b6181f0e7ce2a4152852.jpeg)
三种状态下文字字号相同,图标尺寸不同。官方对上述三种尺寸给出了对应的使用场景,如下图:
![487e17f5abd9e7ec2681dc8d1fb28075.png](https://i-blog.csdnimg.cn/blog_migrate/8b278885842f6a862eac4a154235fb7c.jpeg)
图片中三种场景下列表中文字字号相同,列表高度不同,图标尺寸随之发生变化。
具体细节,大家可观看官方介绍视频https://developer.apple.com/videos/play/wwdc2019/206/
1.4 分段控件 Segmented Controls
![87dcbc2875fdf820176238e229a3b188.png](https://i-blog.csdnimg.cn/blog_migrate/276aa05c21aa9bff19fbf39e96c586a1.jpeg)
新版的分段控件由过去的描边线,改为填充的形式。其中,选中状态的滑块含投影,投影效果和切换开关一样,投影只在“凹槽”内。
现在越来越多的App弃用描边按钮,改用面型按钮。在iOS 11苹果重做AppStore时,就将“安装/更新”的线性按钮改为填充,如下图:
![d6428eead76bf1def602d128a605dc4e.png](https://i-blog.csdnimg.cn/blog_migrate/42dd4b6b0a2bc8eda6d580252f24d6da.jpeg)
PS:留意手机中App,会发现“线转面”已然是近两年设计的小趋势~
1.5 弹窗视图(Sheet)
![7f7faeeb378b940b9665e746d81d7e74.gif](https://i-blog.csdnimg.cn/blog_migrate/42194e47b516b2491f7ce5d378fdd9cb.gif)
在iOS 13之前,模态展示的视图默认是全屏(Fullscreen)。
iOS 13新增了一种操作视图:操作的视图會被縮小,同時淡化置于新跳出视图的下方。
这样的弹窗视图在Human Interface Guideline(苹果设计指南)中被称为Sheet。新版的视图有助于用户明确信息的层级,便于用户找回此前被暂停的任务。
新版的视图弹窗(Sheet)提供三种关闭方式:
- 从屏幕顶部向下滑动
- 当卡片内容滚动到顶部时,从屏幕上的任何位置向下滑动 (单手操作的)
- 点击按钮
如果关闭新版弹窗时存在“修改为储存的内容”这类行为时,要提醒使用者是否要放弃编辑。还是以日历App为例:
![187d5c0903c196962d6b81f3fa8d505a.gif](https://i-blog.csdnimg.cn/blog_migrate/e030ae9c7291116633f0bc483e151c2f.gif)
iOS 12新建任务退出没有提醒,而在iOS 13中进行相同的操作,就会出现对应的提醒。
根据苹果在HIG中的建议,弹窗中的任务需要简单、简短,避免过于复杂,导致用户忘了此前他们所暂停的任务,进而导致用户“迷路”,以通讯录为例:
![c8e852b4405a64f8f5cae0a1f4777a6c.png](https://i-blog.csdnimg.cn/blog_migrate/5581782e4df9bf56af53964d5cfb9879.jpeg)
新建联系人可能会填写大量信息,适合采用全屏视窗,而添加照片、添加动话表情则非常适合使用新版弹窗。
![a109d27b244093297ec0b6149cab2665.png](https://i-blog.csdnimg.cn/blog_migrate/60cab1a4b2221afc2efede9adc10d9f1.jpeg)
此外,对于拍照、录像、照片编修、文件编辑等这类需要沉浸式、较复杂的使用场景,就适合维持过去全屏(Fullscreen)的呈现方式。
![3afa8229deaa60582db921521e0ba936.png](https://i-blog.csdnimg.cn/blog_migrate/32d882a44e15665320d11db6569e930a.jpeg)
PS:值得一提的是,新视图在iOS 12信息、邮件等App中早有应用(小范围测试)。更多有关Sheet的更多介绍,详见:https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/
1.6 HapticTouch
![6ed94aca41f82322b17b0f0e817bdf01.png](https://i-blog.csdnimg.cn/blog_migrate/0659da1e602844395bd7c96b4dd22a88.jpeg)
在iOS 13中,Apple取消了 3DTouch(又名 Force Touch),改用了HapticTouch
而所谓HapticTouch,我理解就是长按,囧…
![bc3bcec42bab52a32177b00e87603e27.gif](https://i-blog.csdnimg.cn/blog_migrate/e8ec84c546dc2d43c0c6af02b3a065df.gif)
此前,在支持3DTouch的机型上,轻轻长按桌面图标,图标会开始晃动,会进入重新排列桌面的状态。而“重按”某个图标,就可以通过3DTouch呼出菜单。在改用HapticTouch之后,原本的3DTouch也随之取消,系统不再区分轻按和重按。只能通过长按呼出菜单,“重新排列桌面”也变成了菜单中的一个选项。如下图:
![695bcb3fbc83fbb438bc1c2c453534df.png](https://i-blog.csdnimg.cn/blog_migrate/b1801fa83ed99fa9cce4ae162712cc59.jpeg)
PS:之前就觉得3DTouch嗷嗷难用,不想用时按重了,想用时又按轻了。啊啊啊啊…如今都现在改成“长按”,我看挺好~除了手机桌面,其他支持3DTouch的操作,也纷纷变成了HapticTouch,比如原本Safari可以通过3DTouch呼出预览:
![8d1acb2b1c38c37a3e88cfa38bebf11b.gif](https://i-blog.csdnimg.cn/blog_migrate/847daf16222e39541cf8ecbfde1f3871.gif)
现在也改为长按呼出预览。
1.7 Context Menu
![80e3c2018175f20b12487da411ab2bfa.png](https://i-blog.csdnimg.cn/blog_migrate/b05b764ed1bfde265911e19e941e9274.jpeg)
其实,Context Menu某种程度上可以看做是电脑上的鼠标“右键”操作。用户可以通过快速弹窗的菜单在页面中进行更多操作。
与电脑鼠标“右键”不同的是,Context Menu还携带了一个内容的预览画面。
![2f9de2373d5c7468cb28147ec963c779.png](https://i-blog.csdnimg.cn/blog_migrate/b601e460c566201ddbc69d24903cd383.jpeg)
在过去,这样的操作需要配合“3DTouch+上滑”才可以调起底部的互动,如下图
![ff25f9bf936004e61821effc6c372b4f.gif](https://i-blog.csdnimg.cn/blog_migrate/0d30fb6662428e60b585a106e7c03d14.gif)
而Context Menu则是通过长按一步调起预览画面和菜单。
1.8 音量调整视图
![9725d22f8c2b23efe6c2f91c20f0bd34.gif](https://i-blog.csdnimg.cn/blog_migrate/3e3d9e8ade43a94b7a8c04b3e7b44f55.gif)
在iOS12版本中,音量的调节图标是在屏幕中间显示一个巨大的铃铛,铃铛下面会有音量大小的进度条,严重干扰用户视线。
iOS13的音量控制图标也进行了全新的设计,音量大小的图标被设计在了屏幕左侧。在音量的调节过程中,喇叭图标也非常直观的显示了音量大小的变化。
![002612968bbd931993080729526a9e88.gif](https://i-blog.csdnimg.cn/blog_migrate/90c783b8c61ca9a86c25f3990e890b8c.gif)
另外,左侧的音量可以支持滑动调整,类似底部控制器弹窗的音量调节。
PS:在苹果着手改进之前,一些软件公司已经着手优化音量调节的视图,比如
![d9db634a7620a4c9437d2ab52164ce83.gif](https://i-blog.csdnimg.cn/blog_migrate/bb08d46ec99004e348a687f1b05b348e.gif)
快手、多闪、爱奇艺、开眼就把音量调节放到了不阻挡视线的角落上。
1.9 三指菜单
![0bab69b1c5eaa5781ac989d024019817.png](https://i-blog.csdnimg.cn/blog_migrate/322e62f1b24fbf5216aa34d757da53d6.jpeg)
过去,在iPhone上编辑内容时,如果删除了不该删除的内容,可以通过摇一摇手机,执行撤销操作。
如果想“取消刚执行的撤销”,需要再次摇一摇手机,选择“重新正在键入”。讲真,这套操作理解起来还真有点麻烦。
![f2bb2e72823ad3b80f58804b3c46d511.png](https://i-blog.csdnimg.cn/blog_migrate/3cdbbb48b476da557e90aad6571fa5d2.jpeg)
对此,在iOS 13中也有优化,只要用3个手指点击屏幕,就可以呼出一个全新的菜单。用来完成:撤销、剪切、复制、粘贴、重做这五个操作。
![50d40507213229ec030cb34af50d7854.png](https://i-blog.csdnimg.cn/blog_migrate/bb59f3da2e47bcb7d9cd4ada9be9d40c.jpeg)
值得一提的是,Edit Menu依然存在,可以和三指菜单同时出现。
1.10 深色模式对Safari的影响
网上已经有很多关于深色模式的介绍,这里想和大家说一个细节:此前,Safari在普通状态下界面为白色,在无痕模式下界面变为深色。
![05c9d32942a0d176940d72a950209e96.png](https://i-blog.csdnimg.cn/blog_migrate/204ac218f76b1a847ed571d0b0048234.jpeg)
如今,iOS 13可以切换为深色模式,在深色模式下,Safari普通状态就是深色,那无痕模式该如何显示?Apple对Safari做了相应的调整:依靠地址栏颜色和操作栏图标颜色进行区分。当系统为浅色模式时,两种浏览模式的界面如下:
![c5dba17eb2b63cf34315f7cbd6ae88c9.png](https://i-blog.csdnimg.cn/blog_migrate/cb1e9c853acc3c6533f216ba38dd1a5b.jpeg)
当系统为深色模式时,两种浏览模式的界面如下:
![07cbc3cd47d509670b9e54b011c91b9f.png](https://i-blog.csdnimg.cn/blog_migrate/aec9a3a493e0e477ce9367b02cac54d8.jpeg)
汇总对比如下:
![e2a72375972abda8a39ef905e5f71ea4.png](https://i-blog.csdnimg.cn/blog_migrate/382d0d3389784d911ed50c0ca7a5b92a.jpeg)
你负责的App,是否也有类似的特殊页面,需要重新设计?