Pi Store
更多

iOS 18 的图标自定义有什么问题?

06 月 21 日

千呼万唤始出来的图标变色功能,怎么就翻车了?


今年 WWDC 发布的新功能中,日常用户感知最明显、最能体现「响应民意」的,大概就属 iOS 支持应用图标「变色」了。在 iOS 18 中,应用可以额外提供深色(dark)和着色(tinted)版本图标;用户可以使之随系统亮暗模式自动切换,或让图标呈现为统一的主题色。

在过去,这是通过越狱或繁琐的快捷指令跳转才能实现的,却仍然引得 TikTok 和小红书上的用户趋之若鹜,甚至让桌面图标定制成为了一种生意;可以想见,官方支持在正式版上线后必然会引起新一波「美化」热潮。

然而,在最初的兴奋过后,人们很快发现图标变色功能并没有达到对「苹果级」设计水准的期望——至少目前测试版中的状态没有。社交网络上,能看到大量对未适配图标强行叠加变色的「翻车」案例;本应作为参考标准的内置应用图标,其深色版本设计也被指出不一致和欠考虑之处。此外,在这项功能上,iOS 也算是个后来者——Android 12 中引入的 Material You 功能就已经实现了壁纸取色和图标变色。

那么,iOS 18 的图标变色功能的实现水平到底如何?从使用者和设计者的角度,如何辨别(或做出)一个兼容各种主题色的图标?本文中,除了总结官方给出的指引,以及网上的现有评价,我们还请到少数派成员中的 Android 资深用户和设计师,一起聊聊 iOS 18 图标的不同侧面。

民意收集:大家都在批评什么

@PlatyHsu:目前的网友评论中,最主要的批评显然是未适配图标的着色效果太丑——关注 iOS 18 新功能的朋友或许这几天已经在社交网络上看到各种惨状实拍。与苹果过去竭力维护设计上的「专制」,为此不惜牺牲可定制性不同,iOS 18 似乎是「自由放任」和「一刀切」的奇怪结合:只要用户打开着色模式,无论应用图标是否专门适配,都强行为所有图标染色。(这么染色到底有什么问题请看后文讨论。)

那按照官方建议专门适配的图标想必会好些吧?并不尽然。很多观点批评苹果这一举动限制了图标的创作空间,事实上将一种单调、模板化的「极简」风格强加给所有图标。根据苹果更新后《人机界面指南》的建议,要在暗色和着色模式下有好的效果,应当「考虑可体现 app 基本功能的简化版图标」,其中着色图标则需要提供纯粹灰度(可以带垂直或层叠渐变)的模板。

来源:苹果 HIG

对此,Berkeley Graphics(设计了热门等宽字体 Berkeley Mono)批评道,「图标的全部意义就是提供具有识别和区分功能的符号,而不是变得同质化,遵循褪色的极简主义,全部设计成光滑的单色渐变。」他们还贴出了与苹果有深厚渊源的上古操作系统 BeOS 图标设计,表示这才是图标「该有的样子」。类似地,设计师Eli Schiff 评论道,苹果建议的是一种人为强加的范式,把图标设计困在「符号图案或少数易于做成透明效果(或者其他设计花招)」的狭窄范围内。

还有观点认为,通过引入深色和着色图标,苹果将确保「最低质量标准」的责任转移给了开发者和设计师;如果应用原本提供了换图标功能,还要考虑是否给每个定制图标都适配着色版本。这无疑是很大的负担。

最后,iOS 内置应用的适配质量也不令人满意。如 Parakeet(为 Overcast、1Blocker、Apollo 等知名独立应用设计过图标)在其官方博客中评论,「天气」的天空变成了「夜空」,但太阳却没有换成月亮;「设置」的浅灰换成了黑底,结果内部齿轮图案的边缘难以辨识,看起来就像小了一圈;相反,「查找」中的绿色圆环在黑色背景的衬托下格外膨胀;其他原本是彩色背景、白色图案的图标(例如邮件和 FaceTime)在换成黑色背景、彩色图案后,也有类似的视觉尺寸变小问题。

设计诊断:着色图标为什么看着别扭

@MMMMMMarcus(少数派设计师):着色图标的伟大之处,或许是所有人都统一战线,一致认为「不好看」。为了弄清其中缘由,下面容我斗胆诊断一下苹果出品的着色图标到底问题在哪儿。

病因一:着色方式

乍看之下十分奔放的着色图标,其实是有一定规则和限制的,通过对比即可看出端倪。彩色背景图标(截图中第一行)和纯色背景图标(截图中第二行)的处理方法并不相同。

对于彩色背景图标,看上去像直接叠加了一层彩色滤镜。我尝试在 Figma 中模拟这种效果,发现着色图标并非直接叠加颜色,更像是先将原本的图标调成黑白作为底层,然后把所选颜色以正片叠底(multiply)混合模式叠加上去,像这样:

这样处理的好处有两个:一是色彩统一,因为本质是都是在黑白上加颜色;二是无论原本图标是什么,着色后都能看得清。这是 multiply 模式的原理决定的。对于两个颜色分别为 (r1, g1, b1)(r2, g2, b2) 的像素点,其通过 multiply 模式叠加后的像素颜色是 (r1r2, g1g2, b1b2),即将色彩通道的值分别相乘。这样一来,如果下层像素原本偏暗(颜色值更接近 0),叠加后就更暗;如果下层像素原本较亮(颜色值更接近 1),叠加后就跟上层像素差不多。当然,因为乘数都小于 1,相乘结果比原来都更接近 0,multiply 模式总是会越叠越暗;这就解释了为什么看着比较「压抑」,不那么顺眼。

继续诊断纯色背景图标(下图中的第二行),处理方式和彩色图标大同小异,只是会分前景和背景分开处理。前景是用上述 multiply 方式叠上颜色,背景则无差别变成带有微妙渐变的黑色。值得注意的是,纯色图标的效果更加接近苹果认为的理想情况:如前文所述,系统内置的 app 和官方宣传图中都以纯色为例,开发文档的适配指引也是如此效果(开发者提供黑白的前景图并由用户设定颜色,背景统一为黑色)。

这套手法的意图也是保证色彩统一且能看清,但强制的黑色背景再次意味着许多着色图标都会比原版显得更暗,且白底图标着色后像极了胶卷负片。比如未适配的 Cubox 的图标十分闹鬼,飞书也变成了黑夜中的荧光鸟……不出意料的是,如果选择了一个黑底上不和谐的颜色,那么效果就会尤其诡异,而苹果提供的色彩选择器不知怎的,偏偏就不缺这样的颜色。

总结一下:取决于图标原始设计,在「染色」后,有些图标会变暗,有些图标会像负片,还有些原本变化不大;不仅整体效果比较混乱,并且高度取决于选择的颜色和图标本色是否匹配——一个运气问题。

病因二:刁钻的限制

我们知道,一个颜色要通过色相(是什么色)、饱和度(色有多浓)、明度(色有多亮)三个维度才能完整表达,但 iOS 18 着色图标的颜色选择器只有色相和饱和度两个滑块。

揣度苹果的理由,或许是担心用户选了一个明度太低的主题色,导致叠加结果黑漆漆一片。然而,把所有选项都锁在明度拉满的颜色范围内,意味着颜色被限制在了一个非常窄的区间中(色板上紧贴着上边缘的一小条,如下图白框中所示)。

会员专属文章,欢迎加入少数派会员。
优质内容
权益周边
会员社群
power+
评论区
精彩评论0
成为少数派会员方可评论,立即加入 。若已是少数派会员,点击登录
还没有评论,来发表第一个评论吧
精彩评论
还没有评论,来发表第一个评论吧
成为少数派会员方可评论,立即加入 。若已是少数派会员,点击登录
会员新功能
内容侧边栏
点击这里拉开侧边栏,即可查看会员内容列表,快速切换内容。