莫b

本篇文章是承接上一篇《iOS 13 隐秘的细节:细数iOS13视觉交互变化》内容,本章主要讲解原生APP的细节变化。从手机自带的APP出发对比不同时期的APP来讲解,如闹钟、计时器、备忘录和画笔。

 

0.前言

在上一篇《iOS 13全局组件》中,主要讲述了新版系统中的分段控件、Switch、Sheet弹窗、Context Menu等组件的细化及影响。

从这篇开始,开始讲述iOS 13原生APP的设计细节。

开始前,依旧先明确下文中涉及的机型和系统版本:

设备1:iPhone 7           系统:iOS 12.4

设备2:iPhone X           系统:iOS 12.2

设备3:iPhone 6S         系统:iOS 13 Developer beta 6

下面开始原生APP的相关内容:

 

1.计时器

iPhone的计时器是个特别好用的功能。

日常生活中,类似“小睡一会”、“蒸煮东西”、“女友敷面膜”这些场景都能用到计时器。过去4年,我平均每天使用8次以上计时器。

虽然iPhone的计时器已经非常好用,但在某些场景下,尚有不足:

比如,设置一个80分钟的计时,中途看时间,虽然屏幕上显示还剩28分钟。但却无法直观掌握计时的进度(百分比)。有时睡迷糊了,忘了最初设置的总时长,导致不清楚睡了多长时间…

在iOS 13新版计时器中,Apple做了一些调整,很好的解决了上述问题:

变化1:新增圆形的进度条,如下图:

进度条可以方便用户掌握计时进度。

 

变化2:新增到点的时间(几点几分)

用户不用自己换算,就能知道计时结束的具体时间是几点几分。

 

变化3:铃声入口位置下移:

一般而言,用户在使用计时器时,通常的操作是:第一步:选择时长、第二步:点击开始。

并不会出现调整铃声这步操作,可以说,过去铃声放在中间的布局就很鸡肋。要么碍事、要么被忽略…

PS:过去四年,我从未察觉到有设置铃声的功能。囧😓……显然这个经常出现,但又不用的功能,已经被我“屏蔽”了。

 

变化4:铃声入口样式调整:

新版的铃声入口采用了非通栏的列表设计,个人认为在视觉上这比旧版通栏列表更加突出,更容易被察觉。

你觉得呢?

 

2.就寝

变化1:时间设置、闹钟开关等低频设置收起,点击时间进入编辑状态。

在我个人看来,就寝的初始页面,应该和闹钟一样,主要用于查看信息,而不是编辑信息。

比如,旧版默认处在可编辑的状态下,就经常导致我的误操作:

想查看底部睡眠分析,但上滑过程中却经常误触圆圈,导致改变就寝的提醒时间。

 

变化2:把星期设置和时间设置放到了一起。

此前,Apple将“星期”折叠在选项中,着实很难用。每次调整完时间,还需要专门去另一个页面去设置星期。费解~

新版将“星期”和时间放到一起,也方便用户快速完成相关设置。

 

变化3:调整底部“更多”文案,由“更多历史”改为“在“健康”中显示更多”。

看似细小的跳槽,可以解决两个问题:

1. 调整预期;

2. 明确路径。

 

一般而言,点击“更多”是在当前APP打开新页面展示相关信息。而此前点击“就寝”中的查看更多,会毫无预兆的调起一个新的APP——健康,如下图:

这样无疑打破了用户的“预测机”,难免让用户产生违和感。

另外,跳转APP属于复杂操作,很容易导致用户忘了此前他们所暂停的任务,进而导致用户“迷路”。调整后的文案,在一定程度上可以降低“迷路”的风险。

 

3.备忘录

变化1:表格新增“行/列多选”功能

过去表格每次只能选择单行,新版增加了“圆点控制器”,用户可以通过拖拽进行多选。

值得一提的是,备忘录表格多选功能也出现在最新的macOS Catalina中:

变化2:菜单颜色调整

过去备忘录菜单选中状态用深灰表示,新版改用备忘录主色,让选中态更加明显。

不过,我想更主要的原因,是因为iOS 13新增深色模式(Dark Mode):

很多过去用黑白灰表示状态的组件,不得不为此做出调整。比如我在《iOS 13上篇》末尾提到的Safari,也针对Dark Mode对隐私模式(Private)做了一系列的样式调整。

 

变化3:缩进图标调整

iOS 13文本编辑中的“缩进”图标发生了变化。看似不起眼,其实影响蛮大。

苹果产品设计一直都保持高度的统一性。以“缩进”按钮为例,苹果的产品线中,比如Pages、Keynote、Numbers、备忘录。但凡涉及到“缩进”操作,都采用以下图形(与Mac端一致):

我们把旧版的图标语义理解为“拉”、新版图标语义理解为“推”:

新版采用的图标,正是其他软件公司常用样式。

现在苹果突然改变备忘录的缩进图标,很可能在日后延展到Apple的其他产品中,也未可知。

 

4.画笔

在iOS 13中,画笔由过去的“扁平”变成了“微立体”:

对此,我看到有网文将之说成“拟物风格的回归”。

我的看法是,画笔变成微立体,多半还是受到Dark Mode的影响。

在分析原因之前,先了解下深色模式下图形设计的难点:

根据我以前做深色界面的经验,图标在深色界面下处理起来,真的好难……

即便是Apple,在深色图标的设计上,也在不断探索和调整。比如,苹果原生键盘中的Emoji Key按钮。

在iOS 9上,苹果公司采用的是办法是将浅色模式下的线性图标颜色反转,就拿到深色界面下使用。等到了iOS 11,苹果公司将这个图标在深色模式下改成了面性图标。

你有没有觉得iOS 9中图形的形状感和体积感都损失了很多?

这是因为白色背景可以更好的表现出形状,人的大脑可以将白色脑补成图形的一部分。然而在深色模式下,这种作用消失了,人脑更倾向于认为这些空白的部分是镂空的。所以在深色模式下建议把线性图标反转为面性图标。

不过凡事都有例外,比如Emoji键盘的底部菜单:

在深色模式下,苹果将浅色模式下的线性图标都改成了面性图标。不过键盘最右侧的删除,却依然采用线性图标。

在Apple今年推出的SF Symbols中,所有的图标都有“线”与“面”两种状态:

我想深色模式下,删除按钮用线性图案,也许是苹果刻意为之。毕竟在深色键盘中,诸如地球、麦克风这个两个图形,也都是线性图标。也就是说,深色模式下采用面性图标并非一招鲜的解决办法。最终还是需要设计师根据具体效果进行选择。

PS:我觉得最难画是深色页面下的各类空状态插画。如果图形再复杂些,颜色只有黑白灰,就怎么画都不对。用“线”感觉不妥、用“面”看着诡异…

 

了解上述内容后,再看Apple画笔的设计:

如果你是设计画笔的设计师,如今画笔要适配深色模式,你会怎么设计?

要知道,笔头的颜色可以变成各种颜色。过去,Apple采用描边线的设计来区分背景和笔头。如下图:

但是,在深色模式下,这个办法变的不再适用,如下图:

那如果画笔变成面,则更不可取,因为笔头可能在特定颜色下和背景融为一体,如下图:

既然简单的线/面不能解决问题,那剩下的解决方案就是让画笔变得“立体”:

这也是我为什么说,画笔变立体和“拟物”没有任何关系,而是适配深色模式的一种解决方案。

 

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

作者:海边来的设计师

转载请注明:学UI网 » iOS 13 隐秘的细节2:原生APP的细节变化

登录收藏
 
你可能喜欢的:
独家 | 2020年交互设计趋势独家 | 2020年交互设计趋势
需求落地之信息架构设计需求落地之信息架构设计
Behance 年度好文!2020年设计趋势全方位分析Behance 年度好文!2020年设计趋势全方位分析
设计沉思录|租房业务全流程体验设计设计沉思录|租房业务全流程体验设计
2019中国用户体验行业调查报告2019中国用户体验行业调查报告
交互设计中让人困惑的三大组件你会用了吗交互设计中让人困惑的三大组件你会用了吗
微信的12大“反人类”设计微信的12大“反人类”设计
Material Design Layout Responsive layout grid  响应式布局网格Material Design Layout Responsive layout grid 响应式布局网格
如何正确制作用户画像如何正确制作用户画像
网格列表,没有你想的那么简单网格列表,没有你想的那么简单