CE认证的周期:Chrome桌面版重设计 像素的价值

日期:2017-12-11 / 人气: / 来源:原创

作为一名Google新员工(原文noogler,即New Googler,Google内部用语),这次经历告诉了我Chrome浏览器设计是如此复杂之又复杂。也给我迄今为止所有涉及的决策上了一课。

CE认证的周期:Chrome桌面版重设计 像素的价值

这个九月初,新的Chrome核心UI或者说“Chrome MD”(for Material design)在windows上的第53次更新中上线了。这项新设计经历了三步发展过程,先是在Chrome OS和Linux上的51版本上,接着是macOS上的52版本,windows上的53是最后一步。最后一步是这个过程的迭代高峰,但是chrome的迭代从不会停止。对于我来说,偶尔回过头拿出来看下这个过程,原来恍然已经过了接近两年的时间。在这里我提供一些设计上的细节和经验希望对你有所帮助。

如果你读过我的上一篇文章Redesigning Chrome for Android,那么这篇跟上一篇是有些类似的,虽然我尝试在保持技术细节轻量化上有点失败……当然这次它只是其中的一部分。如果你还没有阅读上一篇文章,那么我建议你可以去阅读一下,因为它也是桌面版Chrome思考过程中的一个完整部分。

A bit of background

我负责Chrome和Chrome OS的视觉设计快5年了,在过去的一年里,我越来越趋向专注于Chrome OS的浏览器和操作系统了。时间回溯到2012年,作为Chrome团队新成员,第一个大项目就是使新的Chrome核心UI在高分辨率显示上也能兼容,比如第一代Macbook Pro Retina和Google版本的retina显示——第一代Chromebook Pixel。Chromebook Pixel预计是在2013年2月发布,比Macbook Pro稍晚了一点。

作为一名Google新员工(原文noogler,即New Googler,Google内部用语),这次经历告诉了我Chrome浏览器设计是如此复杂之又复杂。也给我迄今为止所有涉及的决策上了一课。

当时我们的目标不仅仅是要给即将推出的新屏幕分辨率和密度比(1x和2x)带来新设计,还要重新思考通过组织我们的工作流程和资源库使我们与工程开发的合作更容易。

这种需求在为了使Chrome设计过程变得面向未来中的必要性逐渐增加。Chrome自从诞生起,快节奏的迭代让我们没有太多时间去整理一些东西,我们越是前进(更新版本),越是难于遍历之前我们的工作结果,导致了创建延迟和设计债。

经过了几个月的工作,带有正规屏幕分辨率的闪亮✨高识别度新设计出炉,下面是他们的样子:

CE认证的周期:Chrome桌面版重设计 像素的价值

我趁机把我们整个资源库存(大约1200张位图)整理一下以便以后使用更快捷。这应该会在将来会派上什么用场。这种设计或多或少大概存在了4年,直到2016年4月为Chrome OS设计的Material Design风格的Chrome推出。

Timing and planning

现在Chrome支持高分辨率屏幕,我们的流程问题已经解决,团队正在变得相当有效率,是时候向移动端转向注意力了。

2013年刚开始的时候,Chrome还不是Android系统的默认浏览器,没有平板版本,只是刚刚在iOS上发布。也是从那开始,移动端成为我主要的关注焦点,Android上的MD样式Chrome也是2015年才开始做的,但是这不意味着(这几年中)从未在桌面版Chrome浏览器上发生过什么改动。

有意思的是,我们看到台式机/笔记本电脑都转换到一个新的使用场景,即触摸屏不再是移动端平台的专属,而是出现在更多平台上比如笔记本电脑。虽然前几年也有一些尝试,但这还是第一次笔记本电脑拥有触摸屏看起来比一些所谓噱头和探索更现实一点。

对于Chromebook Pixe我有很密切的经验,但是win8则让我失去了很多兴趣,它们强有力的承诺却传达给我们一套自以为是的UI在一款新的,混血的,作为一款hero级别的设备Surface上。

CE认证的周期:Chrome桌面版重设计 像素的价值

第一代带有高分辨率触摸屏的Chromebook Pixel

CE认证的周期:Chrome桌面版重设计 像素的价值

第一代微软surface和win8的“Metro mode”

操作系统的双重性,以及为所有可触摸和不可触摸设备设计一个易于触摸行为的UI,使我对Chrome UI在这种环境下的位置和方向产生了思考。由于Chromebook Pixel带有触摸屏,我们已经着手面对这类问题了,但依赖触摸操作的只有内容滚动和一些次级操作,触摸并不是主要的输入方式。而Pixel的定位作为一个实验性的“发烧友”级的设备允许我们花时间去思考,我们的UI为什么和怎么受到了哪些影响?

一段时间后,我们决定做出一种成为今天“混合模式”(Hybrid mode)的先导设计——Touch-view。

CE认证的周期:Chrome桌面版重设计 像素的价值

Touch-view是在正常核心UI上做的改进,让核心元素之间的间距更大,以控制用户错误触摸操作次数,并部署在Chromebook和win8系统上。

作者:PTC


马上致电 021-68061963 OR 查看更多联系方式 →

Go To Top 回顶部