BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

设计 Widget - Logo 与品牌识别

设计 Widget - Logo 与品牌识别

今晚熬个夜呗。那上次聊过了避免功能化的问题,今天简单聊下 logo 与品牌识别,这也是在实践当中非常容易出现状况的小地方。

首先,关于 logo,主要涉及两个点:

  • 要不要加 logo?
  • 如果要,如何加?

官方的内容资源对这两个问题都给到了明确的指导建议。对于第一个问题,WWDC20 “设计绝妙组件” 视频(注1)的 14:58 处:

“仅当你的 app 聚合了来自不同来源的内容时,才应该在 widget 中使用 logo,例如下列案例:”

注意目前的 beta 版本样式已有所变化,例如“音乐”。

图中包括音乐、播客、新闻和 Twitter,均属于聚合了来源不同之内容的产品;通过明确地放置平台自身 logo 来帮助用户快速识别这个 widget 本身的所属,就很 make sense。

另外这里的“内容”在实践当中不止适于上述几种类型;任何涉及第三方作者 / 来源的内容媒介都可以自行判断。

对于第二个问题,“如何加”,仍是“设计绝妙组件”视频 15:10 处:

“Logo 应始终位于 widget 的右上角。”

另参考 HIG 的描述(注2):

“如果需要在 widget 里显示 logo、文字商标或 app icon,则应以不会干扰主要内容的形式进行整合。”

参考上图所有范例当中的 logo 风格,结合目前已知的指导标准(WWDC、HIG)来判断:

  • 一律位于 widget 右上角,无论小、中、大。
  • 尽可能以白色/浅色的图形形状来呈现,而非 app icon 形式。
  • 如果 logo 本身由文字组成,则不排除“文字商标”图形的使用。

而对于不适合使用 logo 的 widget,在品牌传达方面则需要注意:

  • 尝试从 app icon 中提取颜色作为 widget 的前景/背景色。系统 widgets 的范例包括“播客”、“音乐”等。
  • 尝试从 app icon 中提取典型的设计元素作为 widget 的设计元素。例如系统“备忘录”。
  • 尝试从 app 实际界面中提取典型的前景/背景色。例如系统“日历”、“天气”等。
  • 不要在 widget 里添加 app 名称(除非 logo 本身是文字形式,且确实有必要添加 logo),因为用户将 widget 放置在系统主屏后,系统会自动为其添加名称。

细节中的设计原则与注意事项建议详细阅读参考 HIG 的相关章节(注3)。

本文仅代表 C7210 个人观点。

  • 注1:通过 Apple “开发者” app 观看,或访问https://developer.apple.com/videos/play/wwdc2020/10103/
  • 注2、3:https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/