Firefox 57 最全面的设计通信?

Firefox 57 最全面的设计通信?

随着即将到来的 57 版本 Photon 主题的上线,Mozilla 上线了一个 Photon Design System 的网站,和 iOS 的 HIG 与 Material Design 一样。对 Firefox 来说将来设计新功能都会遵循,对用户来说,开发者可以根据这套规范设计出更加能够融入 Firefox 的扩展,或者如果想重新编译 Firefox 版本,设计上有哪些可以参考等等。目前这套标准还待完善,我简单选出一些对用户来说变化比较大的介绍。

有关 Photon 主题的详细介绍可参考:代号 Photon,一些关于 Firefox 界面的传闻汇总

Photon 的设计原则:

这里列举了六条原则,每条原则分别用了 emoji 代表(不得不说近些年 emoji 真是火啊)这六条原则是:

  1. ? 普适的
  2. ? 友好的
  3. ? 有意识的
  4. ? 快速的
  5. ? 可支持的
  6. ? 异想天开的

这些原则表示,Firefox 产品应该能让任何人使用,从新用户(操作简单的控件,注重使用过程中的帮助/激励),到经验丰富的 Mozillians(能够定制/控制整个浏览器体验)。产品开放和包容,Firefox 能够理解用户,并提供有效的工具来保护上网安全,同时获得更好地浏览。最后添加了些许创造性元素。

设计规模

这里谈到设计语言对 Firefox 产品或功能的重要性,以及在设计语言有冲突时是否遵循平台惯例。

提倡「重复使用」

如果在构建新功能时可以使用之前已有的框架,则最好不要重新构建,这里可以理解为“改进”优于“改良”,举个例子:之前曾用到一个扩展,这个扩展的功能对书签结构进行了改变,但它在地址栏新建了一个书签按钮,也就是说安装扩展后,工具栏会出现两个书签按钮,而原来的书签按钮仍会打开默认的书签。这会让一部分用户感到困惑,这里提倡的就是尽可能的对原有功能进行改变。

先确定更高的可见性的内容

预期可见性越高,符合 Photon 设计就越重要。如果预期的可见性比较有限,则完全匹配的优先级较低。可以先使用平台组件,直到有时间更好地完善。

举个例子:Android 上添加书签的操作,第一步是点击“星号”图标。 最后一步是用户在保存前更改书签名称,位置和关键字。

对于点击“星号”图标(具有很高的可见性)的第一步,这项操作的各个方面(图标、点按效果等)都需要符合 Photon Design System。 但对于最后的步骤(可见性较低,用户不一定能接触到),可以先使用 Android 系统对话框(如上图所示),因为它实现起来更容易,并且与 Android 平台保持一致。

平衡 Firefox 风格和平台惯例

做平台适应性(意为更符合平台原有设计)太多和太少都会让用户感觉操作不便。

这张图纵坐标为“用户是否熟悉操作”,横坐标为“更符合 Firefox 还是平台的设计”,区域 1 可用性较差,区域 2 是比较平衡的点(Sweet Spot),平台设计过多则会造成区域 3 这样用户难以感受到产品风格,最后区域 4 完全无法体现产品品牌。

使用 Firefox 的设计风格,视觉外观以及色调,并遵循平台操作规范。这样的原则将使产品或功能让既能够让新用户熟悉,又能体现 Firefox 的风格。在使用平台设计元素方面,比较推荐的是使用原平台的字体,UI 模式(比如 Windows 和 macOS 三大金刚键左右的区分),颜色搭配上(Windows 的纯色,macOS / iOS 的模糊效果)体现。

而一些原有平台不常见的 UI 元素,则以 Firefox 的设计体现,例如“汉堡菜单”,它并不算是平台的原生元素,但同时又在其他平台上有所体现(PC,Android,iOS 都使用了这个 UI 元素),而且与其他平台的设计也没有冲突,那么这时我们最好使用 Firefox 的设计。

相关平台的设计参考:

字体和元素留空

网格基于4像素的倍数,用来控制每个组件的比例,平衡和垂直对齐。

字体上 Firefox 各平台使用平台本身的标准字体:

其他则用 Open Sans 作为补充,Open Sans 是非常全面的一个字符集,这里吐槽一下新的 MDN 设计就是因为全面采用了 Zilla 字体没有设置 fallback 导致东亚语系的显示效果非常差……

内容和选项字号做了要求,可以实现天然分隔:

Error 页面:

内建菜单:

选项页面:

注意部分字体大小的变化。

强调风格:

当需要从常规内容中突出一部分内容时,使用强调风格。(又是 emoji)

颜色:

Firefox 给自己的定位是:大胆,充满活力和有吸引力。在视觉颜色上选择了比较跳跃的色彩,其实太过鲜明的颜色对比会干扰网页阅读,Firefox 也提供了不同对比度等级,用于区分不同使用场合。


蓝色是主色之一,Firefox 使用蓝色作为突出显示按钮,链接和活动状态的强调。

图标

Firefox 对自己图标的定位是信息丰富,有趣且友好。

目前默认的图标库已经给出来了:Firefox Icons,扩展作者也可以重复利用现有图标。其余关于栅格设计和 Android 以及 iOS 相差不大。

图标颜色需要根据主题进行区分,详细参考颜色的说明:

插图

(是的规范里还有这种东西……)

Firefox 插图应该是平易近人,可支持说明文本和异想天开的。

使用场景:

插图是视觉和情感上强大的工具。因此更应该谨慎使用,并仔细区分使用情况。如果插图仅作为装饰元素,可能会使用户放弃文字上的交互分散他们的注意力。

插图应该用来鼓励那些(因为操作失败)沮丧或失落的用户。如果是异常操作,用户处于某个危险的状态(账号丢失,安全页面),则请勿使用图示。

错误页面:

使用插图来介绍功能:

动效

对动画曲线的要求。

这里讲的比较常规,例如控制在150毫秒至250毫秒之间,感知性能优于技术基准,对用户有导向性等等,此外建议使用曲线速率而不是刚性直线,这样看起来更自然。曲线变化可以参考:cubic-bezier.com

文字说明:

“更多” vs “了解更多”

使用“更多”来指示展开的文本区域,使用“了解更多”来指向另一个界面或网页的链接。

“按钮” vs “链接”

使用“带超链接的文本”指向到另一个界面或网页的链接,使用“按钮”表示刷新当前屏幕或将信息发送到应用程序的用户操作,例如提交,更新首选项等。

触摸屏手势

在设计 Android 应用时,优先使用 Android 术语:touch, swipe, drag, pinch in, pinch out

在设计 iOS 应用时,优先使用 Apple 术语:tap, swipe, drag, pinch

分别在这两个设计文档中查看。

人称说明

优先使用第二人称(你)来对 Firefox 用户进行说明,避免使用第一人称(我),因为它可能会使用户对“当前谁在处理操作”产生混淆。这一用法加强了“Firefox 是为你服务”的信息。

PC 版对文字的大小写的要求:

按钮标题单词的首字母大写:

规定了一些场景下句子和链接是否加点号:

Android 与 iOS 遵循原生规范:

Android:

iOS:

此外还对逗号,破折号,省略号等其他符号的使用场景进行了说明。

以上就是 Photon 主题在 11 月即将发布的 Firefox 57 和之后版本在各大平台的设计说明,可以看出 Firefox 在很多地方都变得更加“轻盈”,另外在一些位置上采用了之前少有的趣味性元素,例如插图,emoji 等等。总体来说 Mozilla 可能希望通过这种方式在用户引导时更易于让新用户理解,喜欢上 Firefox,这种设计是否能在使用效率上得到更好的体现我们可以期待一下。

此外 Firefox Nightly 56 版本已默认开启了 Photon 主题的语言,有兴趣的同学可以下载尝鲜下。

参考资料:Photon Design System

编辑于 2017-07-21

文章被以下专栏收录