德州app软件[系统] #原创# 扁平与拟物相融,苹果 macOS 11.0 Big Sur Beta 2 图标设计初探

文章正文
2020-07-28 03:29

说明:#原创# 标签为IT之家在IT圈所设的投稿栏目,德州app软件具体投稿规则点此查看。

一、 分析

我使用 macOS 有 3 年多了。虽然这算不上很久,但是我被 macOS 精致的界面和关注细节的态度所震撼。其中一个方面就是哪怕和 iOS 的应用图标相似,macOS 的图标也总是有自己的特色。

就应用界面设计来说,我特别喜欢这次整体的风格替换,边栏和工具栏上的小图标使用了进一步优化的 SF Symbol 2 图标。整体效果非常清爽统一,边栏的整体高度也调整为了整个窗口的高度,这个效果期待了挺久的。

旧版:

新版:

这次更新包含了非常多的内容,但这篇文章主要关注图标 (App Icons) 风格的变化。说实话,新版的应用图标让我有些摸不着头脑,或者说有一些图标看起来非常奇怪。虽然整体结合了 iOS 图标和 macOS 写实的特点,但是在细节和光影表达上都有着明显的差异。

macOS图标圆角矩形化的主要目的是什么?

In macOS 11, the design language for app icons promotes consistency with all platforms while retaining the lifelike rendering style typical of macOS icons. App icons combine a rounded-rectangle shape, a front-facing perspective, and a consistent drop shadow to provide a unified visual experience.

来自 What's New in macOS

"在 macOS 11 中,应用图标的设计语言在保留 macOS 图标写实风格的同时提升了图标设计语言跨平台的一致性。通过应用圆角矩形背景,正面透视以及统一的投影这些特性,新设计的图标提供了统一的视觉效果。"

由此可见,本次图标的更新主要目的在于提升 macOS 和其他平台图标之间的统一性,让用户从其他平台迁移到 Mac 上时,也能够轻松识别出各种应用。但是我对此表示怀疑,新版本兼顾了和 iOS 的统一性但是自身却缺乏统一性。根据粗略的统计,Big Sur 中大约有 4 种不一样的图标风格。我将在下文分析每一种风格所对应的图标,同时参考开发者网站的指南并给出自己的看法。


1. 特别立体的图标

通过观察可以发现以下的图标都是原来的 macOS 独有的或者首先出现在 macOS 平台的应用。这些图标的特点是将渲染的物体作为装饰附着在简单扁平的主体图标之上。

Although the design language strongly encourages visual consistency, it doesn’t preclude judicious expressiveness. For example, the Preview, Xcode, and TextEdit icons continue to combine depictions of the physical objects that best convey the app’s core purpose, while incorporating the new shape, perspective, and shadow.

来自 What's New in macOS

根据开发者指南,Apple 并不想因为圆角矩形的应用而限制合理的表达。在Apple 看来,开发者应该将最能表达应用核心功能的元素作为写实的装饰物,但也要和背景很好地融合。

新的图标的绘制方式为取消旋转角度,并圆角化背景,把写实物体摆放在右侧。这些图标的背景用来解释说明应用的目的,而装饰的写实物品用来突出核心功能。

和旧版图标对比,新版图标显得被圆角矩形约束住了,像纸张被生硬地截取了一块,摆放角度的修正缺少了灵活,优雅的感觉。这是统一使用圆角矩形的带来的弊端之一。

类似的图标可能还包括:Grapher,钥匙串访问,系统信息,启动转换助理,数码测色器,色彩同步实用工具,自动操作,图像捕捉,国际象棋等。

旧版文本编辑:

新版文本编辑:


2. 基于真实物体的扁平化图标

说真的,我挺喜欢这样的风格的。他们既保留了所代表物品的真实细节,包括光影和纹路,但是又没有做得太过复杂,整体保持了扁平,看起来比较协调。我觉得这是几个风格里面最符合 macOS 更新后的样式的图标。

此类图标的绘制过程为取消旋转角度,压缩到圆角矩形的尺寸,保留边缘的细节用来表达应用的功能。

不过我认为此类图标协调的原因可能是因为他们代表的物品很容易找到并联系到圆角矩形图标上,不像消息或者应用商店,现实中是没有的。另外这些实物本身就可以填充整个图标而无需借用背景。不过我不知道为什么"词典"和"便笺"是带有透视角度的,而另外两个却没有。🤔

没有其他类似的图标。

旧版通讯录:

新版通讯录:

3. 扁平图标加上过重的投影

我觉得这些图标是最奇怪的并且阴影的效果有些过度了。第一眼看上去就感觉很冗余、繁重,因为增加了太多的投影。

他们的绘制方式注重理解图标内的元素,把他们想像成立体的形态。这些图标强化了原有元素的立体效果,搭配材质的反光营造较强的视觉冲击力。

FaceTime 和信息带有绿色的反光,看起来就像是吹起来的光滑气球,不知道是不是想要和信息的聊天气泡联系起来。这些图标和其他相比差异太大,过度的投影和反光让这几个图标看起来非常奇怪甚至有些"脏兮兮的"。

类似的图标可能还包括:股票,计算器家庭,QuickTime 和设置等。

旧版信息:

新版信息:


4. 扁平图标加上淡淡的阴影

这些图标看起来和 iOS 或者 iPadOS 上的差不多。要不是仔细观察,很难看出和 iOS 的区别。

他们的绘制方式是在 iOS 图标的基础上考虑来自上方的光线,并把原有的元素当作材料移除后塑造出的形状。以 Safari 为例,新版图标在白色背景上移除了一个带有深度的圆,然后嵌入了一个指南针。

因为光线在图标上方,所以这些图标在上边缘的背光面加上了浅浅的阴影来增加立体感。或者也可以说每个图标都是好几层彩色纸片叠起来的,然后最上面的一层剪去了图案露出了下面的背景。这些图标努力用光影细节体现立体风格,但是在小尺寸下(放在 Dock 栏上时)和 iOS 的图标基本无异,在一定程度上丧失了 macOS 的特性。

类似的图标还可能包括:日历,提醒事项,备忘录,查找,博客,视频语音备忘录,时间机器等。

旧版 Safari:

新版 Safari:

5. 非圆角包裹的图标

目前系统中我找到了这两个明显不是以圆角矩形为轮廓的图标,不过说实话,看起来还可以,至少没有呆呆的样子。

二、展望

当然,通过上述的不同风格的图标案例,我觉得其实指南中所说的统一性并没有达到。在 macOS 上使用圆角矩形图标可能能够提升 macOS 和 iOS 的统一性,但是也在一定程度上丢失了 macOS 的统一性。Mac 毕竟和移动设备不同,macOS 包含了大量的专业软件和工具,许多工具的不同外观和特性在圆角矩形下很难得到体现。从主观的层面来说,我认为圆角矩形的使用让原本多样、灵活的图标变得有些呆板、束缚。

之前Apple图标设计指南指出 macOS 图标设计需要考虑以下几点(只列举了部分):

Consider giving your app icon a realistic, unique shape. In macOS, app icons can have the shape of the objects they depict. A unique outline focuses attention on the object and makes it easy to recognize the icon at a glance.

If you’re creating a macOS version of an iOS app, design a new version of your app icon. Your macOS app icon should be recognizable, but not an exact copy of your iOS app icon. In particular, the macOS icon shouldn’t use the same rounded rectangle shape that the iOS icon uses.

来自 App Icon

考虑给你的图标真实而独特的外观

如果你想要构建基于 iOS 版本的 macOS 应用,应当给 macOS 版本的应用设计新的图标

因此这一次 Apple 对于跨平台统一性的态度我有以下两点质疑:

统一性的提升是否一定要基于轮廓形态的统一?毕竟 watchOS 的图标还是圆形的呢

统一性的提升是否指的是照搬部分其他平台的图标?和 iOS 类似的图标但带有 macOS 的自身特色真的违背了统一性吗?同样 watchOS 和 iOS 图标的差异是否真的影响了统一性?


👆富有特色的 macOS 旧版图标

结合开发者网站上的指南,我想谈谈自己对理想状态下对 macOS 图标的期待

1. 保持圆角矩形的图标风格

找到一个在图标相似性和保持 macOS 写实风格特色之间的平衡点。总体上可以更像 macOS ,就像上面列举的的第二种风格,在圆角矩形的基础上绘制 macOS 独特的图标并加上恰到好处的光影纹理细节。这样就要求每一个图标去考虑采用怎样的背景,因为某些元素不能填充整个圆角矩形。另外可以增加原本 macOS 的细节,比如旧版圆形图标四周的一圈金属环,在新版上可以改成圆角矩形的边框。总之,需要更多地从 macOS 的角度去考虑 macOS 特有的细节和特性而不是在 iOS 图标上一味应用投影和反射。

2. 回归更加多样化的图标排列方式

之前版本的 macOS 有不少图标都是呈一定角度倾斜的。这样的设计让图标看起来更加自然有活力,同时没有圆角矩形的限制,图标绘制有了更大的发挥空间,元素也不用担心如何填充背景。但是为了形态上的统一性,可以让特定类型的应用使用某一种图标形状。比如基于纸张的应用(像邮件、日历、提醒事项、备忘录)统一使用倾斜的长方形;媒体相关的应用(新闻、音乐、博客、应用商店)使用圆形的图标;系统工具相关的使用无倾斜正方形的图标;专业软件用倾斜长方形搭配写实装饰物。

之前在圈子里也看到了很多关于 Big Sur 图标设计的优质文章,其中一个有意思的观点就是如果这一次融合了扁平和写实风格的图标是为了增强现实做准备呢?虽然新的图标虽然风格上有差异,但是如果都是为了增强现实做探索,那意义是很大的。如果在交互的时候根据相对移动表现出类似旋转的动画和光影效果,结合材质的表达,效果可以非常惊艳!但是如何将更多的图标统一为这种风格,并把应用界面融入增强现实的交互就要拭目以待了。

非常感谢大家耐心阅读!以上是我对 macOS Big Sur 应用图标的个人看法,其中难免带有一些主观色彩。图标设计当然无法用量化的标准去衡量好坏,但是上文给出的多种风格的分类是有据可依的。我希望这篇文章可以让大家对理解图标更新背后的原因和设计理念的转变有一些帮助,也欢迎大家在评论处说说自己的看法。

文章评论