「devil in the details」谈谈 Firefox 57 中的设计细节

「devil in the details」谈谈 Firefox 57 中的设计细节

Firefox 57 或者说 Firefox Quantum 进入 Beta 通道后,一些新特性基本固定下来,我们可以根据 Beta 版本猜测一下正式版的最终形态。57 版本从外观,使用上就与之前的版本有诸多不同,很多用户第一眼觉得“变了”,但究竟“变在哪”,这些改变的目的是什么,可能很难说清。所谓「恶魔藏在细节里」,好木匠做柜子不会在背面使用胶合板而用好木料,即使没人看见,美观和质量必须贯穿始终,这篇文章主要介绍一些 Photon 界面方面带来的变化。

相关文章:代号 Photon,一些关于 Firefox 界面的传闻汇总

Firefox 57 最全面的设计通信�

1.Win10 与 Win7 系统下标题栏变成暗蓝色,直角标签页回归。

深色标题栏可以使用户更集中于当前标签页和内容。

2.定制中增加“可变空白”

Firefox 早期版本中“定制”的可变空白回归,增强定制功能,可以实现导航栏居中显示。

选择定制:

可以看到“可变空白”:

3.导入其他浏览器数据位置变为启动新标签页时

导入其他浏览器数据位置发生了变化,不再启动时询问,而出现在新标签页页面。

选择“立即导入”:

之前的版本中这个步骤会在第一次启动浏览器时询问,可以说减少了启动过程中的一个页面,便于用户直接开始浏览操作。

4.Activity Stream 取代新标签页和主页

Activity Stream,它相当于是我的足迹的概念图,可以显示书签、历史、下载项和标签页,会根据这些内容动态展现新内容给用户。用以替代当前的新标签页面(about:newtab)和主页(about:home)。

Activity Stream 中“常用网站”可以显示两行,点击新标签页右上角设置按钮。

或点击“常用网站”右上角编辑按钮,可以显示多行或添加网站。

5.工具栏的改变

后退前进按钮同时出现,作为对比当前版本的 Firefox 只有在“有可前进的页面时”(比如执行过后退操作)前进按钮才会出现。

6.新的汉堡菜单

三道杠(汉堡菜单)改变,增加了更多选项被取消了定制功能,定制功能在“折叠菜单”中体现。

工具栏中的按钮可以右键选择隐藏到折叠菜单中,另外如果折叠菜单中没有任何工具,则不会显示,只有在“定制”中才能看到。

7.地址栏右侧的点状菜单

这里是新加入的一个菜单入口,包含对页面的操作功能,之后也有些扩展会选择放在这里,Firefox 自带的截图工具默认也在这里。

在选项上右键可以添加到地址栏,省去点开菜单的步骤。

而地址栏已有选项则显示在分割线上方,右键这些选项时可以从工具栏移除。

也可以直接在地址栏按钮上右键移除。

8.侧边栏显示

这项功能在 55 版本中已经出现了,侧边栏可以切换分类,设置在左边显示还是右边显示,点击侧边栏按钮会弹出上一次关闭时的项目。

9.除了“明亮深邃”,还有“紧凑触控”

57 版本除了支持开启“明亮” 和“深邃”两个主题,还可以选择“紧凑”和“触控”两种排列密度,实现标签栏和工具栏区域大小变化。

10.选项中增加对“搜索框”的调整

一直有传闻称 57 版本默认会隐藏“搜索框”,而将地址栏作为搜索框使用,之前的几个版本的改变,例如地址栏默认显示搜索建议,Universal Search 的加入等等,不过至少在目前的 Beta 版上,搜索框还是默认显示的,当然不排除 57 正式版到来时 Mozilla 加入百分比测试,目前在“选项-搜索”中可以设置是否显示搜索栏,你也可以在定制中把搜索栏去掉。

相应的新标签页面的地址栏左侧图标改成一个搜索图标了。

11.内置的“新手上路”

作为一款工具型产品,Firefox 在用户引导(Onboarding)上是做得不够的,中国版我们增加了几个提示,比如使用介绍,新扩展的提醒,安装 Flash 的提醒等等……对于资深用户来说这些可能微不足道,但我们也碰到一些新手用户,在不了解但情况下犯过一些错误,这个提示建立的目的也是如此。目前在新标签页面添加一个新手上路的火狐图标,点击后可以进入向导快速查看一些火狐的功能。

对应的 about:config 参数是 browser.onboarding.hidden,改成 false 即可隐藏。如果想完全取消火狐脸图标和向导,可以将 browser.onboarding.enabled 改成 false。如果只是想隐藏新手向导,将 browser.onboarding.notification.finished 改成 false。

12.一些动画效果

添加书签时的动画效果,书签菜单。

标签页载入动画显示效果也统一起来了:

标签页载入动画和结束动画发生了变化,比原来转圈圈看上去更流畅了一些,据说是 60 帧的。工具栏的停止/刷新按钮的动画也发生了变化,browser.stopReloadAnimation.enabled -> false 可以禁用动画。

13.隐藏的下载按钮

更改了下载按钮样式,在没有下载任务时这个按钮不会显示,只有下载的时候才会在工具栏显示。平时需要到“我的足迹”里查看,或者按 CTRL+J 打开。about:config 里面,找到:browser.download.autohideButton,设置为 false 即可关闭隐藏。

14.Photon 主题插图

内部页面使用 Photon 主题插图显示,基本上一些 error 页面或不是严重错误的提示页面都被替换了,这点之前 Photon 设计通讯中有写。

15.固定标签页的蓝点显示

固定标签页的页面有变化时,会有蓝点显示。

16.内部页面的提示改变

内部页面是安全的,所以地址栏左侧不会显示权限等信息,只显示安全页面提示。

17.我的足迹中显示“近期焦点”

我的足迹按钮菜单出现“近期焦点”,可显示近期打开的历史记录或书签。

18.增加“恢复先前的浏览状态”选项

如果浏览器崩溃/意外退出,下次启动时会自动恢复上次的标签页,如果超过一次则显示“会话恢复”列表。选项中设置启动时显示主页或空白页的用户可以用此功能恢复上次的会话。


以上就是目前测试到的关于 Firefox 57 的新特性,有知友此前提了一个问题:如何评价将于11月14日正式发布的Firefox Quantum(原名Firefox 57)?

Mozilla 表示,换个名字后浏览器速度马上就上去了,此前有使用过 Firefox 57 的同学可以一起来谈谈感受~

发布于 2017-10-08

文章被以下专栏收录