新出的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隐秘的细节》系列的结束语:
这些几乎不会被大众在意的设计细节,不止是设计本身那么简单,许多都承载着设计师的理念和想法,它们隐秘,但是伟大。
原文地址:海边来的设计师(公众号)
评论0