2021-11-28 资深UI设计者
图标在 UI 中扮演着重要的角色，并且已被证明是过去几十年 UI 设计趋势的象征。在图形用户界面的发展早期，图标在计算机的显示技术限制内尽可能仔细地模仿现实世界的物体；它们旨在将用户体验从现实世界链接到计算机世界。这可以从苏珊·卡尔 (Susan Kare)为第一台麦金塔 (Macintosh) 设计的图标和微软 (Microsoft) 在 Windows Vista 和 7 中的拟物图标设计中看到。
当用户界面从这种拟物风格转变为 Windows 8 和 iOS 7 的“扁平”风格时，图标设计也转变为单色、线性风格。随着 Android 12 的发布和谷歌新版设计系统—— Material You (或 Material Design 3) , 所有主要操作系统现在都使用这种风格。
但是为什么各大设计系统都使用这种风格的图标呢？设计师意识到图标不仅仅是风格统一、为功能补充说明的辅助图形——设计师制作的图标等同于印刷师制作的字体。 这让设计师意识到图标对于用户体验来说和字体一样重要。
图标的设计考虑与字体类似，并且经常出现在文本旁边。
— Material Design 3 指南Iconography [旨在] 与 San Francisco 系统字体无缝集成。
— Apple 人机界面指南
Apple 的 SF Symbols 就是最好的例子：它的图标与系统字体具有相同的九种权重，并与文本的大写高度对齐。这也意味着图标可以遵从用户对更粗的 UI 文本的可访问性设置。
Apple 的 SF Symbols 图标集设计为与系统字体相同的九种权重。资料来源：苹果
它们还与系统字体的大写高度对齐，以更好地补充文本。资料来源：苹果
Uber 的设计团队也绘制了字体图标来完善他们的 UI 字体 Uber Move，设置了三种不同的强调程度。
资料来源：优步
因此，为什么字体图标是单色的并用轮廓绘制的原因就很清楚了：它们不是模仿物理对象，而是模仿我们的书写系统。现代字母，尤其是拉丁字母，基本上是由线条而不是填充形状组成的。他们从类似物理对象（如埃及象形文字）的象形文字到更抽象的物理对象表示进行了类似的转变。例如，你不需要画一只鸟来谈论一只鸟；您只需写一组表示“鸟”的字母或符号即可。
通过设计类似于字体的图标，设计师认识到图标是向用户传达信息的重要媒介。图标可以打破语言障碍，而文本对于那些不熟悉图标的人来说仍然是必不可少的。将两者设计为看起来相似可以减少在阅读文本旁边的图标时的认知负担。
默认为字体图标的另一个好处是填充的图标现在可用于表示状态或强调，如粗体文本。例如，Material Design 3 中的“活动状态用填充图标表示” ，Apple 在他们的人机界面指南中建议“使用填充变体来表示选择”或“赋予符号更多视觉强调” 。Twitter 2021 年的重新设计更进一步，活动页面仅通过填充图标和粗体文本进行区分，没有任何颜色变化。
Twitter 仅使用填充图标和粗体文本来区分当前页面。陪审团仍然不确定这是否足够容易访问。
未来不一定能够被准确预测，但是看看字体系统的历史，已经有了明确的关于什么图形代表什么意思的规范：符号“a”总是表示“a”，字母“ant”表示蚂蚁。这些符号的绘制方式仍然存在差异（大写字母 A 可以有衬线或没有衬线），但它们在不同字体中的外观基本相同。
图标似乎也朝着这个方向发展——上面的“添加文件夹”图标在苹果、谷歌和微软的图标集上具基本相同的设计：一个带有“+”符号的文件夹。随着图标在 GUI 中变得越来越普遍，用户对于什么符号代表什么意思的认知越来越趋同，就像字体一样。
如何才能使用字体图标？在您的应用程序中使用图标时，您应该使用使用您正在使用的字体设计的图标集：如果您使用的是系统字体，这很简单，现在系统字体都具有系统图标字体。但是，如果您使用另一种 UI 字体，则可能没有专门为该字体设计的图标集。使用普通的线性图标集就足够了，例如开源Feather 图标或Iconic.app「1」。如果你像我们一样使用 Material 图标，你可以轻松切换到字体图标。（似乎 Google 现在已将此样式作为 Material Design 3 的默认样式。）
个性化正在成为 UI 设计中越来越重要的元素。虽然自 20 世纪 90 年代以来就存在自定义壁纸和主题，但设计人员现在正在寻找更多方法来个性化整个系统的 UI，主要是用户选择的壁纸。谷歌的 Material Design 博客说得最好：“用户在物理和数字世界中使用个性化的图像定制他们的桌面，并提供舒适和快乐。” 壁纸是用户首先看到的东西，并作为 UI 的背景。因此，让 UI 的其余部分适应此元素是轻而易举的事。
将壁纸融入 UI 的技术已经存在一段时间了，从 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜单到 Windows Vista 中的半透明窗口标题栏和 7 的 Aero Glass 主题。众所周知，iOS 7 为其 UI 的许多部分带来了模糊的背景，整个屏幕（如通知中心和控制中心）都使用了可以透出用户壁纸的毛玻璃效果。
最近，墙纸开始影响几乎整个 UI。当 Apple 在 macOS Mojave 中引入暗模式时，他们在基于壁纸的窗口背景中加入了一种色调，称为桌面色调。根据人机界面指南，它“帮助窗口与其周围的内容更和谐地融合在一起。”
后来他们在 Big Sur 的主要重新设计中扩展了这一点，将桌面着色也应用于光照模式：
Windows 11 在其 Mica material 设计系统中引入了类似的元素，他们的设计指南将其描述为“一种不透明的材料，它结合了用户的主题和桌面壁纸，以创建其高度个性化的外观。” 它还使用此色调作为当前活动窗口的标志。
将它提升到一个新的水平是 Android 12 中的 Material You，它为应用程序的背景、按钮和其他控件的明亮强调色以及更中性的文本颜色着色。整个调色板由每个用户的独特壁纸生成。
这是他们新设计理念的一个关键元素，“如果形式跟随感觉，而不是形式跟随功能呢？” 这是对 UI 设计现状的彻底拒绝，它寻求一种“通用”设计，具有技术上最先进的界面来满足用户需求。看看其他人是否效仿这种哲学会很有趣。
Material Design 团队在他们的公告中遗漏的是他们如何做到了这一点，尤其是因为他们说他们“必须找到一种方法，让任何颜色组合都具有可访问的对比度 [...]，而无需对每一种颜色进行测试。”深入了解 GitHub 上最近发布的Material color 实用程序存储库，揭开所有谜团：
Material 团队基于CAM16和CIELAB（或 LAB）颜色外观模型构建了自己的颜色系统：“色调、色度、色调”或“HCT” 。CAM16 是 LAB 的继任者，旨在匹配人类对颜色的感知方式。
这些模型的关键是“色调”或 L* 值，它描述了颜色的感知亮度或亮度，L* 值 0 表示黑色，100 表示白色。这在创建可访问的调色板时非常有用，可确保颜色根据感知亮度具有足够的对比度。
在网络上，WCAG 2 指南规定正文的最小对比度为 4.5:1。直接使用感知亮度作为描述颜色的值使这变得更加直接，正如材料团队解释的那样：“与对比度不同，测量 L* 中的对比度是线性的，并且计算简单 [...] 50 的差异保证了对比度比率 >= 4.5。”
有了这些知识，剩下的就是生成具有不同色调或 L* 值的颜色调色板，并对其应用任何色调。然后为 UI 元素使用足够对比的对。例如，一个按钮可以有一个 L* = 40 的背景色和白色文本 (L* = 100)，它很容易通过最低对比度要求（L* 差异 > 50）。
这是一种轻松生成可访问颜色的强大技术，但它不需要材质颜色实用程序。LAB 可以表示为 LCH（亮度、色度、色调），类似于 Material 的 HCT，其中 L 值可以用来计算对比度。（这比现有的 HSL 等表示更好，即使亮度值相同，HSL 的感知亮度也会有所不同。）您可以在本文中了解有关 LCH 的更多信息。
（此外，LCH 正在作为 CSS Color Level 4 的 一部分进入 Web 标准！因此您可以 lch (40% 44 49) 在 CSS 中编写而无需将其转换为 HSL 或 RGB，但目前仅在 Safari 中支持。Lea Verou，他编写了上面链接的文章是 W3C CSS 工作组的一部分，正在开发这个非常标准。）
因此，您只需要一个起始颜色，将其转换为 LCH，然后修改 L 值以制作调色板。然后使用一对亮度差为 50 或更多的颜色，以确保可获得的对比度。
我们可以在下面的材质颜色系统中看到这种技术是如何使用的：调色板中的色调与 LCH 亮度值相匹配。（他们还修改色度（类似于饱和度）和色调略微跨色调。）我制作了一个小型网络应用程序，显示由材料颜色实用程序生成的调色板，以获得下面的 LCH 值。
在 Material 的 HCT 之前，Lyft和Stripe的设计团队探索了同样的问题，Stripe 也最终使用了 LCH。我已经将他们的两个探索联系起来，这是极好的阅读。
有一些工具可以在 LCH 之间进行转换：
Lea Verou 制作了一个LCH 颜色选择器，
在Colord网站可以让你从LCH转换为十六进制或RGB，
如果您有 Mac，Sindre Sorhus 的System Color Picker非常棒，而且
Accessible Palette使用 LAB/LCH 生成调色板。
我使用这种技术为Rowy添加主题，允许用户选择自己的强调色，同时保持可访问性并为关键 UI 元素着色。源代码具有我使用的确切 LCH 值。
当你想要设计一个带圆角的“卡片套卡片” UI 时，内部的卡片应该具有较小的半径，区别在于间距的大小。如果使两者的角半径相等，则内部卡片看起来不合适。这种技术在数字设计中已经有一段时间了，甚至是 CSS3 规范的一部分。
这也存在于硬件设计中：屏幕的圆角与iPad Pro和 iPhone X 设计上的设备框架相匹配。在带有圆形屏幕的 iPhone 上，底座与屏幕的曲率相匹配——Apple 甚至在软件中提供了精确的点大小。您还可以在视频播放器中看到与屏幕曲率匹配的其他元素。
奇怪的是，这个原则不适用于使用单个圆角半径的 UI 元素。在 Material Design 2 中，对话框和内部按钮的圆角半径都是 4dp，尽管它们之间有 8dp的间隙。macOS 在优胜美地时代的设计中类似，Windows 10 几乎所有 UI 元素都使用方角。
但是，对于 Big Sur 和 Windows 11，通过增加较大 UI 元素的角半径来近似这种效果。在 macOS 中，按钮的圆角半径现在为 5pt，对话框窗口的圆角半径为 10pt，而且它们都使用“平滑角”来匹配 Apple 硬件的角。与此同时，Windows 11 以圆角以前的尖角而闻名，按钮为 4 像素，窗口为 8 像素。
总体而言，用户界面似乎也变得更加圆润：
Big Sur 增加了圆角半径，使用了平滑的圆角，看起来更圆润；
iOS 15 引入了带有全圆角的按钮样式；
Windows 11 移除了大多数 UI 元素上的尖角；和
与之前所有版本的 Material Design 形成鲜明对比的是，Android 12 增加了对话框、导航抽屉和完全圆角按钮的半径。
将最小的 UI 元素设置为某个基本圆角半径，然后将较大的包含元素（如对话框）设置为更大的圆角半径。尝试使它们与较小元素之间的距离成比例，或将较小的角半径加倍以进行简化。这是它在我们的应用程序中的外观，角半径加倍：
最初开发字体时，它们是用金属蚀刻的物理设计，具有固定的字体大小。当排版师为不同的尺寸设计相同的字体时，他们通过改变间距和比例等方面来将设计修改为最佳：这被称为光学尺寸。您可以在本文中了解有关光学尺寸的更多信息。
可变字体是一种基于 OpenType 的新字体格式，允许设计人员自定义字体设计的特定“变化轴”（或变量），例如非固定粗细、倾斜和光学尺寸。您可以在这个优秀的可变字体入门 中了解有关可变字体的更多信息，它使用Roboto Flex，这是谷歌 Roboto 字体的可变字体扩展。
2021 年，所有主要操作系统现在都使用这种可变字体技术来实现 UI 排版中的光学大小：
Apple 的系统字体 San Francisco于 2015年发布，具有两种光学尺寸：“显示”适用于 20 磅及更大的尺寸，“文本”适用于所有更小的尺寸。2020 年，Apple 将这些字体发布为单一可变字体 SF Pro，以光学尺寸作为变化轴。Apple 的系统图标 SF Symbols也使用可变字体技术。
对于 Windows 11，微软将其系统字体 Segoe UI 重新设计为Segoe UI Variable，具有自己的光学大小轴。
作为 Material Design 3 的一部分，Google 引入了GS Text 和 GS Variable，这是其企业字体 Google Sans 的演变。
另外值得注意的是：这些字体都是不同风格的无衬线字体。旧金山是新怪诞的，Segoe是人文主义者，而Google Sans是几何的。
可变字体是一项相对较新的技术，生产它们的成本很高，所以资源没有那么多，尤其是在免费和开源领域。到目前为止，我发现的唯一具有光学尺寸的开源可变字体是Roboto Flex，但它似乎还没有完成。Rasmus Andersson 被广泛使用的 Inter 字体正在进行 OpenType 的 Bata测试。同时，为突出的标题使用更具表现力的字体可以提升您的设计。对于Rowy，我在小文本中使用 Inter 作为字体，在品牌表达的标题中使用 Space Grotesk。
扁平化设计已经存在了十多年，它的主要目标是通过剥离 UI 元素的杂乱和装饰来专注于内容。在iOS的15设计指南状态，“明快，漂亮的界面帮助用户了解内容以及互动。”
最新的操作系统版本通过更少的层级来迭代这个概念。导航栏在iOS 15和Android 12 中是透明的，并在您滚动之前融入背景。
在桌面上，macOS Big Sur 混合了标题栏和工具栏，直到您滚动或悬停在栏上几秒钟。Windows 11 中的一些应用程序根本不区分标题栏，而是将内容放在一个独特的卡片式层中。
这些元素都实现了相同的目标：减少周围的视觉混乱并提升内容的视觉突出度。
如果您有一个停靠在边缘的导航栏，请在不需要区分时将其混合到背景中，例如当用户尚未滚动时。如果您有主要内容，请将其放置在与背景不同的微妙层中。我们使用了一个 React UI 库 MUI，它使我们可以轻松实现导航栏仅在滚动时区分的效果：
同样，更多的 UI 元素被插入，不再占据其容器的整个宽度。当 iPhone X 引入屏幕上的主页指示器代替主页按钮时，Apple 更改了他们的指导方针，规定带有圆角的嵌入式按钮，避开iOS 7 中引入的全角按钮。许多其他固定到的元素的最佳实践已更改屏幕底部适应新的 iPhone 设计。
在 iOS 15 中，Apple 正在更多应用程序（如“设置”和“邮件”）中插入“表格视图”。这似乎是为了应对 iPhone 屏幕尺寸不断增长的情况，指南指出，“在紧凑的环境中，插入的分组表格可能会导致文本换行，尤其是在内容本地化时。”
在 macOS Big Sur 中，他们将此设计扩展到邮件中的列表，与iPadOS 设计一致。它也出现在整个系统的菜单中，包括菜单栏。请注意，点击目标延伸到菜单的边缘，就像之前的全角设计一样。Windows 11 在其菜单和导航项中共享相同的样式。Android 12 的系统 UI 和应用程序通常也遵循这种风格。
这种风格可以提高可访问性，因为元素和它们的容器之间的分离现在扩展到所有四个方面，但我还没有发现任何支持这一点的研究。当搭配和谐的圆角时，它可以使菜单看起来更现代。
设计师们正在添加更多的方式来显示状态，而不依赖于颜色，这对于色盲的人来说是无法实现的。以下是我注意到的一些例子：
Spotify 在 shuffle 和 repeat 按钮下方添加了点，而不是在 2017 年仅仅依靠改变它们的颜色。
Material Design 3 显示一个药丸状指示器，并在导航栏中为活动页面使用填充图标。
Windows 11 向列表和导航窗格中的选定项目添加了一致、独特的行。
这决定了重新设计Rowy 的切换按钮：
在 Android 12 中，开关现在在主要操作系统中具有相同的基本设计。这使用户可以更轻松地在这些平台之间切换并减少认知负担。
我在所有这些设计决策中注意到的首要主题是设计师将用户界面设计置于透视之中。他们敏锐地意识到数字界面在哪些方面适合人类体验并与物理世界互动。
轮廓图标模仿文本的融合认识到图标在通信中的重要性。
越来越个性化的界面元素——尤其是你所采用的材料方向——承认人们喜欢用自己的方式制作东西，包括他们每天使用的技术。
和谐的圆角和插入元素的灵感来自实物和工业设计，因此我们的软件与硬件更紧密地匹配。
使用具有光学尺寸的可变字体可以追溯到排版的起源，并且与颜色以外的差异化元素一起，它们提高了所有人的可用性，尤其是残障人士。
更小的事情也有帮助：减少视觉混乱以提升内容使用户能够专注于他们想做的事情。并且使用标准的开关设计消除了确定 UI 元素功能所需的任何认知负担。
这种思维背后的UI设计使我们很好地起来为下一代对AR / VR计算为中心的虚拟实境，在虚拟实境一经验将不得不回答他们是如何改善人类的经验和交互与物理世界。设计人员已经在研究如何使设计系统适应这种变化。看看上面的决定，应用色彩科学（Material 的 HCT 考虑到观看条件）和提升内容的插入元素有助于这些 UI 元素从 2D 世界过渡到 3D 元世界。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务