小纽扣

新出的IOS13系统应该让非常多的设计师非常头疼,对比之前的系统存在哪些改变,设计师应该如何调整?本文从IOS13系统的隐秘细节出发,讲解了该系统的不一样,更好的帮助设计师快速了解新系统的调整,从而更好的调整设计规范。

 

前言

这是《iOS 13隐秘的细节》第四篇,没看过前文的同学可通过以下链接查看:

第一篇 · 《iOS 13 隐秘的细节:细数iOS13视觉交互变化

第二篇 · 《iOS 13 隐秘的细节2:原生APP的细节变化

第三篇· 《iOS 13 隐秘的细节③:原生APP的细节变化·下

本次iOS 13全局细节调整较多,我将之分为两部分进行阐述:

第一部分 – 全局组件:Switch、分段控件、Sheet弹窗、Context Menu等;(第一篇、第四篇)

第二部分 – 原生App:相机、Safari、短息、地图等。(第二篇、第三篇)

本文继续讲述全局组件。

 

系统设置

以下是“设置”中相关模块的设计变化:

 

1.屏幕时间

 

1.1 “今天、过去7天”两处文案变成更加常见的“每天、每周”。减少文案带来的歧义,比如过去我还和朋友讨论,iOS 12中的“过去7天”是否包含“今天”…

1.2 新版iOS调整了“每天”、“每周”的排列顺序。难道是使用“每周”的用户占比最大?

过去优先展示“每天”,而在iOS 13中,优先展示“每周”。

 

1.3 还有一个细节,新版屏幕时间支持左右切换时间:

如上图所示:页面上滑后,出现左右切换的浮层。

 

2. 图标去投影

iOS 13控制中心去掉了“删除”和“添加”两处图标的底部投影。图形中间的加号、减号也由直角变圆角。

 

3.壁纸设置

过去壁纸设计界面底部,采用了吸底的矩形大按钮。如下图:

在iOS 13中变成了非吸底的“胶囊按钮”。这样的设计更加适合自带圆角的全面屏,如下图:

 

此外,像“静止”、“透视”这类原本清晰的文字按钮,变成抽象的图标。如下图:

 

在我看来,新图标的含义着实不好理解。

谁能想到这个类似“放大”的小图标居然表示透视?

 

4.视图

操作路径:设置→显示与亮度→视图

通过切换不同的视图,可以调整手机分辨率(截屏可获得不同分辨率的尺寸)。

 

我们可以把iOS中的视图切换,看成是电脑端的分辨率调整。

分辨率低,则视觉层面图像变大、分辨率高,则视觉层面图像变小。

不过在此前版这个页面设计的不是很好,用户需要切换页面,并细心对比不同页面中的静态图片,才能察觉出两种视图模式下手机界面的差别。

 

我曾问过好几个朋友,他们都不知道有这个功能。

 

Apple在iOS 13中对这个页面做了重新设计:将两种模式放在同一页面中进行展示,并增加动效展示。如下图:

新设计,有助于用户更直观的了解两种视图下手机界面的差别,从而选择自己需要的视图。

 

PS:下面附上各机型,标准视图和放大视图对应的分辨率:

 

控制中心

 

等了7年,iPhone终于可以和Android手机一样,通过长按底部控制中心的Wifi和蓝牙,进行快速链接或跳转到对应设置页。如下图:

 

底部弹窗

此次系统弹窗可谓是大变样,下面逐一说明:

 

1.布局变化

最明显的一个变化是,Apple在弹窗上放弃了使用多年的十字交互,改用列表进行展示。

我想这么做主要是为了便于信息的直接展示。让功能更好的触达用户。并为日后系统功能拓展做准备。

有关十字交互的利弊,可详见我在2016发布的内容《iOS 10新设计的弊端》。

简单来说,TV端很早就开始使用十字交互,旦如今越来越多的TV端放弃了十字交互,除了顶部分类导航外,都在尽可能减少横滑,改成清一色的上下滑动。其中最主要的原因就是横向的信息触达率太低,而竖向的瀑布流便于用户查看信息。

试想一下,如果你想查看AppStore榜单的前十名,你会选择横滑?还是点击全部进入列表模式进行查看?

总之我都是进去列表模式进行查看。

 

所以在我看来,变成列表不仅更有助于信息展示(结合弹窗上拉变大),也便于Apple日后在弹窗中推广新功能。

不过可惜的是,Apple在取消十字交互的同时,过去长按调整按钮位置的功能也被取消了,如下图:

好遗憾……目前,iOS 13只能通过”更多“和”编辑操作“调整按钮位置。

 

2.文案调整

旧版中的”更多“按钮,在新版中改为更加具体的”编辑操作“。

过去光看”更多“两个字,以为点进去是更多功能入口,结果却是进入了一个编辑操作页面。真是一脸懵,吓得我赶紧关闭返回上一页。

虽然底部的更多发生了变化。但横滑右侧入口依旧是”更多“。

 

3.AirDorp折叠

 

过去一打开弹窗,弹窗顶部AirDrop区域占据了1/3弹窗的高度。点击使用的话,自己想要隔空投送的设备一开始未必会加载出来,等后面加载出来,又未必出现在开始或结尾的位置。需要一直左右滑动查看等待需要连接的设备是否出现。

新版则将Airdrop变成一个普通的图标入口,在用户要使这个功能时,在调起一个弹窗页面,专门展示所扫描到设备。这无疑解决了上述提到查看设备的问题,大大提高了操作效率。

 

4.左上角增加APP缩略图

 

弹窗上滑后,以标题栏的形式常驻。对此,我的理解是,由于新版弹窗支持上滑,这样一来多个APP都可能处于全屏弹窗的界面。如下图:

此时如果缺少顶部的APP标识,那么当用户在多个APP中调起弹窗时,很难分辨当前所处的软件。

 

5.底部取消按钮

旧版弹窗底部有一个明显的取消按钮,而新版弹窗的因为采用Sheet弹窗*的形式,所以关闭按钮转移到了右上角。另外,新版弹窗还支持下拉关闭的操作,这样一来也解决了关闭按钮在顶部不易点击的问题。

Tips:Sheet弹窗,我在《iOS 13:第一篇中有做专门介绍。

 

三指交互

最后再说一下三指交互

在《第一篇》中提到,iOS 13中新增了一个三指菜单。只要用3个手指点击屏幕,就可以呼出一个全新的菜单。用来完成:撤销、剪切、复制、粘贴、重做这五个操作。

 

其实,用户可以不呼出菜单就完成上述五种操作,分别是:

拷贝:三指捏合,可以快速拷贝;

剪切:连续三指捏合两次,即可剪切;

粘贴:三指外扩,即可粘贴;

撤销:三指向左轻扫,即可轻松撤销;

重做:三指向右轻扫,即可重做;

讲真,我看一次,就记住了如何快速拷贝,其他四个都没记住😓……

也许不久之后,国内软件上也会兴起类似的多指交互,也未可知。让我们拭目以待吧~

 

默认头像

在《第一篇》中,我曾提及iOS 13中默认头像的变化:

在iOS 12系统中,“默认头像”都具有性别特征。比如通讯录的图标,就是由一男一女的剪影组成。

在其他位置,比如:通讯录详情页、短信列表、AppStore所用的默认头像均为“男性”剪影。

而在iOS 13中,上述这些位置的头像,都变成了去性别特征的圆形头像。如下图:

 

当初我对此的理解是:Apple可以根据账号中的性别设置,提供男/女两套头像,而是采用“无性别头像”。我想这么做也许是为了更好的照顾到“跨性别群体”的感受。

 

此前跨性别群体曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等标志,这些眼下已出现在iOS 12.2的Emoji中。毕竟苹果的CEO库克,自己就是一位好同志。

 

最近在公司内分享到这段时,同事杨新坤提及一段有关Facebook的设计细节:

在2015年时,Facebook有一段时间也对带性别剪影的图标作了调整:原本男性剪影在前的图标,且“男大女小”的好友图标,被改成了女性剪影在前,并将男女的大小进行了统一。

 

而发起这一改动的,正是一位Facebook的女设计师 Caitlin Winner

她曾经就读于女子学院的女性,这让她很难忽略图标中所代表的性别意义,她就想女性必须一直处于“男性的阴影”中么?于是他对Facebook的图标作了上述的调整。并获得认可,应用到公司的新产品以及更多的平台之上。

 

不过对与这个改动,也有很多人认为Caitlin Winner的做法过于女权主义:

 

目前,Facebook当前的版本,也采用了去性别化的图标的设计:

一劳永逸的解决了性别谁占主导的争议。如今苹果也采用了相同的做法,弱化了APP中的性别特征。

 

END 

最后,套用Caitlin Winner的一句话作为《iOS 13隐秘的细节》系列的结束语:

这些几乎不会被大众在意的设计细节,不止是设计本身那么简单,许多都承载着设计师的理念和想法,它们隐秘,但是伟大。

 

原文地址:海边来的设计师(公众号)

作者:海边来的设计师

转载请注明:学UI网 » iOS 13 隐秘的细节④:系统组件·下

登录收藏
 
你可能喜欢的:
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律
​iOS 13 做了哪些体验升级​iOS 13 做了哪些体验升级