相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

iOS 13 隐秘的细节——(二)原生APP的细节变化

GJYW发布于:2019-8-29 09:51 |原作者: 海边来的设计师|
GJYW
黑龙江省 哈尔滨市 平面设计师
发私信 + 关注
简介: 0.前言 从这篇开始,开始讲述iOS 13原生APP的设计细节,以及对设计师的影响。 开始前,依旧先明确下文中用到的机型和系统版本: 设备1:iPhone 7,iOS 12.4 设备2:iPhone X,iOS 12.2 设备3:iPhone 6S,iOS 13 Developer beta 6 - 下面开始原生APP的相关内容: 2.1 计时器 i ...


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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

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

2.4 画笔

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

对此,我看到有网文将之称为拟物风格的回归

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

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

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

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

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

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

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

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

-

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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

iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

既然简单的线/面不能解决问题,那剩下的解决方案就是让画笔变得"立体":iOS 13 隐秘的细节——(二)原生APP的细节变化 飞特网 设计理论

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


121

好评
123

差评

刚表态过的朋友 (244 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

GJYW
黑龙江省 哈尔滨市 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计