ios布局 分为左右两块_iOS 13 隐秘的细节④:系统组件·下

news/2025/2/14 7:33:49/

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

前言

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

本次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隐秘的细节》系列的结束语:

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


http://www.ppmy.cn/news/333242.html

相关文章

算法之分治算法

定义 将一个大规模的问题分解为若干规模较小的相同子问题,分而治之。如《孙子兵法》所云“凡治众如治寡,分数是也”,即将军队分为各级组织,将帅只需通过管理少数几个人就可以统领全军。 适用标准 原问题可被分解为若干规模较小…

广东 - 012 - 汕头南澳岛

Hello 小伙伴们早上、中午、下午、晚上好啊,我是 jsliang,一个喜欢折腾自我娱乐大家的斜杠程序员~ 本次出行主要是为了庆祝家妹读书 20 几载,有幸上岸,故来场南澳岛旅游小记,主要内容有: 经历攻略建议 对这…

再不玩AI,就真的要失业了,如何用AI实现建筑设计?

在社交媒体上很多人都在发布关于AI建筑设计的效果图,也有很多设计师对AI进行了尝试,而神采PromeAI在经过2个月的时间也进行算法优化,已经可以将草图一键生成出非常棒的设计成果了,新的AI设计为建筑设计领域注入新的活力和创意&…

看完这些治愈的VR全景风景,相信你一定会心驰神往

快过年啦,大家伙早就期待春节假期了吧,而又有多少人渴望着春节出去玩呢? 什么时候能任性一把,来一场说走就走的旅行?如果还不够勇敢,那么,看完这些治愈的VR全景作品风景,相信你一定…

第三十九章、PyQt显示部件:OpenGL Widget部件功能简介及使用其显示图片

专栏:Python基础教程目录专栏:使用PyQt开发图形界面Python应用专栏:PyQt入门学习老猿Python博文目录老猿学5G博文目录一、概述 OpenGL Widget部件是一个OpenGL(Open Graphics Library,开放图形库)图形渲染的部件,可以在PyQt和Qt的应用中显示图形(包括2D和3D图形),对…

和一群程序猿的旧金山优胜美地之旅

每年的五月六月去美国旧金山San Francisco的年轻小伙伴中,多半都是去参加Google I/O或者苹果WWDC大会的。缘于Google I/O,我也是三次去到旧金山了。因为机票比较贵,航班来回要20多个小时,所以每年去的时候都会呆两周左右&#xff…

【rmzt】云海边xp主题

云海边电脑桌面壁纸下载《鼠标右键另存为本地》 风景主题云海边电脑桌面主界面效果图 云海边电脑桌面开始菜单效果图 云海边电脑桌面图标效果图 云海边电脑鼠标效果图 云海边xp主题下载内容:云海边电脑桌面壁纸下载《鼠标右键另存为本地》 云海边电脑桌面主界…

这五部关于海洋的纪录片,每一帧都犹如壁纸!

全世界只有3.14 % 的人关注了 爆炸吧知识 虽说读万卷书不如行万里路,但现在足不出户也能让你见识到世界各地的奇特风景。 今天小编要推荐几部关于海洋的纪录片,这些纪录片从不同方面揭示了深海下面的奥秘,带你领略不一样的神秘景色。 &#x…