在 iOS 上彰显品牌风格

品牌形象对你来说可能是重中之重， 它是传达信息 和区分产品的有效方式。 但是，如何在 iOS 上 表达你的品牌身份， 同时又保持 熟悉范式的完整性呢？ 我是 Sarah，一名设计布道师， 今天我来为大家解答这个问题。 我将分享如何以在重要之处 保持熟悉感的方式进行设计， 同时在需要时加入定制化元素。

品牌有一个审美层面， 例如精致而令人印象深刻的 排版运用， 富有表现力的色彩运用， 以及图标的视觉语言。 我将分享与 iOS 应用相关的 实用指南。 但品牌也是一种感受， 是你如何看待一款产品的延伸， 并渗透到你 体验产品的方式之中。 这一点不那么具体， 但在许多方面更有意义。 你的产品可能有网站、 数字营销、零售店， 甚至在其他平台上有应用。 你可能会想让你的品牌 在所有这些体验中保持一致， 完全相同。 但每一个展示场合 都应该考虑其所在的情境。 它们不应该默认保持完全相同。 使用 iPhone 的用户 期望手机上的应用 在外观和感受上像 iOS。 这由专门为 iPhone 精心打磨的 组件、模式和功能构成， 经过了精心的打磨与完善。 用户通常没有体验过 你的应用在 Apple 生态系统之外的其他版本。 今天我分享的技巧 都围绕着品牌如何服务于 你的应用体验。 这并不意味着你的应用 需要看起来和 Apple 应用一样。 在操作系统的边界内， 有很多方式 来精炼你的品牌。 我将分享一些来自开发者的 优秀案例， 他们在保持鲜明品牌的同时 不牺牲原生的感受。

首先，你将了解如何 在保留原生系统感受的同时 对应用的 UI 和组件进行定制。 我将介绍让你的内容 更加出彩的方法， 在界面中使用颜色的 合适场景， 使用自定义字体时的注意事项， 以及优秀图标的案例 和可用的资源。 让我们先建立基础， 思考品牌应该归属何处。

随着 iOS 26 中 Liquid Glass 的引入， 我们开始以一种略有不同的方式 思考界面。 将你的应用想象成两个不同的层次：

UI 层， 作为全局导航， 以及内容层， 位于这些控件之下， 包含使你的应用 独具特色的所有功能。 从概念上讲， 内容层是表达 品牌身份的最佳机会。 这使你应用的 UI 层 能够作为基础， 帮助用户导航 并找到他们所需的内容。 UI 层是应用的 导航和操作。 通过标签栏和顶部工具栏 等组件来呈现， 它们悬浮在内容层之上， 便于快速访问。

尽量依托 iOS 上 用户已经熟悉的内容， 而不是重新发明轮子。

Gentler Streak 是一款 帮助你保持动力、 建立健身习惯的应用。 一眼就能看出 该应用具有独特的身份： 俏皮的插图 和详细的数据可视化。

但其导航——标签栏 和顶部工具栏的操作——都是原生的。 他们并没有过度定制 UI 或偏离这些模式。

建立平台熟悉度的基线 非常重要。 否则用户将需要学习 如何使用你的应用。

标准组件，如 网格视图和分组表格， 具有高度的灵活性和功能性。 如果你借助 人们已经理解的内容， 他们就会凭直觉知道 如何使用你的应用。

当然，有时组件 需要进行定制 以满足你的应用需求。 消息应用 Slack 构建了一个自定义顶部工具栏， 其中间操作区域 显示频道信息。 但该组件的整体外观—— 如按钮大小、 浮动操作的位置， 以及弹出框的行为—— 都非常符合 iOS 风格。

另一个我非常喜欢的案例 来自应用 Moonlitt。 这款应用用于追踪 月相周期，服务于摄影和月相观测。 UI 简洁，采用扁平的层级结构， 不需要标签栏。

月相周期日历 是一个自定义组件， 可以一目了然地显示 整个月的月相变化。 但它借助了 iOS 的设计语言。 采用 Liquid Glass 背景， 一个用于关闭的主操作， 以及与硬件边缘相匹配的 同心圆弧形卡片边缘。 这款应用完全独特。 然而，它明显属于 iOS 的范畴。

自定义组件需要精心打磨。 因此，你应该将时间 集中在应用中影响最大 或最能突出内容的区域 构建自定义组件。 然后，审视你的应用， 找出使用标准组件的机会， 用于应用中 功能性的部分。 例如，在导航之外， 一个经常被忽视的 标准组件是上下文菜单。 它们通常通过 顶部工具栏中的按钮显示， 包含与整个屏幕相关的操作， 而不是内联操作。 它们提供对常用项目 的便捷访问，只需轻点一下。

而且非常灵活。 你的操作可以带有图标。 可以按带有可选标题的 分区进行分组。 或者呈现一个二级菜单或模态框。

Moonlitt 使用上下文菜单 来展示设置。 注意控件中内置的动画， 从被点击的操作 自然地变形而来。 使用 SwiftUI，你可以 开箱即用地获得这些组件和交互。

这只是一个示例， 说明创建自定义组件 需要付出构建和维护的代价。 这类自定义元素， 那些仅服务于 非常实用目的的元素， 通常并不能强化品牌形象。 事实上，它们可能会让产品 显得不够原生，甚至过时， 因为它们在复刻 已有的成熟方案时显得格格不入。

在 UI 设计上， 可能性是无穷无尽的， 但请尝试在用户已知的基础上构建。 对于常规任务 使用平台组件， 并定制组件 以满足你的特定需求。

以这种对 UI 的理解为基础， 将内容层视为你的画布。 这可以包括图像、 视频，甚至文字—— 这是你的应用 为用户提供的信息。

例如，Crumbl 应用 使用全出血视频 来展示他们每周的新口味。 这些视频不只是通用素材， 它们帮助与产品建立更深的联系， 因为它们每周都会更新。 有效融合内容的关键 在于确保内容有明确的目的。 Moonlitt 采用了不同的方式： 其内容是边缘到边缘的色彩， 模拟夜空中的渐变。 3D 元素动态呈现 你相对于月亮的位置。 让内容给人一种沉浸感 对于他们来说非常契合， 并占据整个界面。 但内容也可以是 贯穿你信息传递的文字。 文字之所以强大， 是因为它们能影响我们的感受。 我鼓励你探索 语气和语调如何塑造你的品牌。 有时一款应用 针对的是特定的情感， 例如营造俏皮有趣的感觉， 或值得信赖、安全可靠的感觉。 要非常用心地考虑 你想让用户产生什么样的感受。 关于这个话题还有很多可以说， 如果想了解更多 关于内容文案写作的知识， 请观看视频：《通过 UX 写作 为你的应用注入个性》。 请记住，用户体验应用 并非看静止的屏幕。 这是随着用户滚动、点击和互动 而展开的动态体验。 因此，过渡和动画 是用户体验内容的方式。

一个例子是 NYT Cooking 应用。 在菜谱详情视图中， 评论是内容的 重要组成部分。 该应用使用 SwiftUI 的缩放过渡 来呈现与菜谱相关的评论。 这类过渡效果令人愉悦， 感觉流畅自然， 但它们也改善了交互体验， 将点击目标 与过渡状态连接起来。

对于 Gentler Streak， 动效让应用感觉充满活力、 引人入胜且平易近人。 当你滚动浏览月度回顾页面时， 你的活动记录感觉几乎像魔法一样， 弹性动画 让内容真正跃然而出。 动效有助于强调层级关系， 并将注意力引向重要的内容。

但加载延迟或掉帧 会让用户对你的应用 产生负面印象， 即便他们无法说清楚 确切的原因。

用户会记住 一款产品带给他们的感受—— 设计一种令人满意、 丰富且充满乐趣的体验。

现在你已经意识到 应用的基础 应当遵循平台规范， 让我们来聊聊颜色。

在 iOS 26 之前，应用通常会在 顶部工具栏和标签栏上 使用纯色背景。 但这些 UI 元素过于笨重， 会为内容区域添加黑边， 将其限制在 屏幕更小的一部分内。

随着我们引入的 新设计语言， 我们建议将颜色移入 应用的内容区域， 即滚动视图内。 这样，Liquid Glass 控件 就能悬浮在内容层之上， 并动态地吸取你的品牌颜色。 另一个需要考虑的点是， 颜色可能会令人分心， 让界面感觉令人不知所措。 应以能够创造意义的方式使用颜色， 例如表达层级关系、 分组，或指示交互。 这就是为什么颜色经常出现 在控件和操作上。 这被称为应用的 强调色或着色颜色。 Slack 克制地使用颜色。 他们将着色用于主要操作，例如： 带有新信息的区块， 显示未读消息的徽章， 新建消息， 以及标签栏中的选中状态。 有意识地使用颜色 来传达状态、 反馈和选择状态， 帮助用户专注于重要内容。

他们将纯色的顶部工具栏颜色 移入了内容区域， 使其随滚动消失， 让内容延伸至屏幕边缘。 不要害怕在应用中使用颜色！ 它可以增强沟通效果， 唤起品牌感， 并提供视觉连贯性。

请记住，iPhone 是一款极具个人特色的设备。 深色模式等功能是用户 根据自身舒适度和需求设置的偏好。 Gentler Streak、Slack 和 NYT Cooking 在低光环境下 都有精致的配色方案。 如果你的应用不支持深色模式， 用户可能会产生负面体验， 进而影响对你产品的印象。 此外，还有各种接触点， 你的品牌身份 可以延伸到应用之外。 例如，如果用户认为 应用中的数据很有价值， 他们可以选择使用你的小组件。 这是 Crumbl 小组件的一个示例， 以其柔和的色调和 独特的图像呈现品牌形象。 它们不仅看起来令人垂涎， 而且辨识度极高。

在使用颜色时， 要保持克制—— 少用且有目的地使用， 以发挥最大效果。

在所有可用的工具中， 排版往往是最受青睐的。 它可以富有表现力、大气磅礴或优雅精致， 但始终应当具备功能性。

让我们重新看看 Crumbl 应用。 他们打造了自己的字体 Crumbl Sans， 并在整个营销素材中使用它， 以及 iOS 应用中 令人印象深刻的关键时刻。 这在饼干口味等大标题中 尤为明显。

在 iOS 上使用自定义字体时， 最需要注意的是它们如何缩放。 动态字体（Dynamic Type） 是辅助功能中的一项设置， 用于在整个操作系统中 增大字体大小。 考虑到有视觉和认知障碍的用户， 这一点非常重要， 但动态字体也是一项偏好设置， 许多人都依赖于此。

这已内置于 Apple 系统字体中， 但当你使用自定义字体时， 你需要自行构建支持 并进行测试。

请注意，当用户通过动态字体 增大系统字体大小时， Crumbl 应用仍然清晰易读。 随着字体大小增大， 布局不会截断标签， 而是根据需要 将文字折行显示。

动态字体同样适用 于标准组件。 当字体设置为较大的 无障碍尺寸时， 标签栏标签和图标会在 屏幕中央以更大的尺寸显示。

努力让你的应用 尽可能地服务于更多用户。 这听起来很简单， 但当用户能清楚地看到 UI 并阅读应用中的文字时， 他们将获得 更积极的体验。

San Francisco 是 所有 Apple 平台的系统字体。 这款字体提供了一致、 清晰易读、 亲切友好的排版风格， 支持超过 150 种语言。 SF Pro 是默认字体， 但还有其他变体： SF Compact 针对小字号 进行了优化， SF Mono 专为行列对齐而设计， 非常适合编程使用， New York 则是一款 用于传统阅读的衬线字体， 也可作为图形展示字体。 部分应用，如 Gentler Streak， 完全使用系统字体。 通过混合不同的字重 和 SF Rounded 等变体， 他们实现了多样性和层级感， 同时仍然保持独特风格。

排版是表达品牌身份 的有力方式。 尽量将界面中的字体 设计得灵活且能适应用户需求。

最后，谈谈图标设计。 在大多数情况下， 你可以使用自己的图标， 遍及应用的各个位置， 从内容视图到控件。 一个自定义图标 效果非常出色的案例， 是 NYT Cooking 应用。 他们的图标边缘更尖锐， 通常采用线条粗细的变体。 我喜欢它们独特于该应用， 却又不过分精细， 因此在小尺寸下 依然缩放良好。

他们的图标用于 标签栏、顶部工具栏， 以及内容层中的内联操作。 它们一致、和谐， 是对品牌的简洁致敬。 他们图标设计中 我非常欣赏的一点是对平台的考量。 这是分享图标在 iOS、Android 和 Web 上的三个不同版本。 尽管他们创造了 自己风格的图标， 但每个操作都忠实于 各平台的分享模式。

图标不需要 过度风格化。 它应当易于识别， 并服务于明确的目的。 而且……并非每款应用 都需要自定义图标。 SF Symbols 是一款 Mac 应用， 拥有超过 7,000 个符号， 你可以免费使用。 SF Symbols 像字体一样构建， 因此能像文字一样动态缩放。 它们被设计为中性风格—— SF Symbols 的风格旨在适用于 Apple 平台上 各种类型的应用。 它们具有多种线条粗细， 并支持无障碍和本地化。 最棒的是？ 它们直接内置于 Xcode 中， 无需设计团队导出图标库 和管理文件交接。

谈到图标， 让我们简单聊聊Logo。 在 iOS 的语境下， 用户不需要被提醒 他们正在使用哪款应用。 而标志会占用 宝贵的屏幕空间， 这些空间最好留给 更重要的信息。

在 NYT Cooking 中，标志只在 主页标签上显示，并在滚动时淡出。 这种低调的处理方式 有种别具一格的优雅。 应将品牌元素以这种方式 精炼、低调地融入， 不打扰用户的体验。 如果你选择使用自定义图标， 请确保它们易于识别、 一致，并在小尺寸下 缩放良好。

今天我介绍的所有应用， 都以一种 补充体验而非分散注意力的方式 来处理品牌形象。 它们具有可预测的导航模式， 帮助用户快速理解 如何使用应用。 但他们以微妙而有意义的方式 融入了自己的品牌身份。

我们鼓励你在 iOS 应用中 探索品牌的表达。 只是请记住，iOS 是一个拥有 成熟交互规范的平台， 强行植入品牌 可能会损害用户体验。 注意品牌元素何时 与系统行为产生冲突， 或使熟悉的惯例 变得令人困惑。 我们为人们将品牌身份 融入应用的创意方式感到欣喜， 请继续发挥你的创造力。