2018年10月,微软发布了新的Office 2019,界面总体设计基本上没有太大变化,但这版UI的变动算是十几年来最差的一届。
缺乏分界线的选项卡
微软从Office 2007 (Win Vista)起引入了功能区(Ribbons),取代了原先的菜单设计。典型的功能区包括用来切换不同功能组的选项卡(Tabs)和包含各种命令按钮的工具区域。
功能区设计相当成功,至今已经沿用了十多年。
留心观察Office 2007-2016的功能区设计就会发现,这些版本的选项卡和工具区域都有全宽的分界线或颜色界限。但Office 2019却只有当前选项卡有下划线,其他选项卡由于背景颜色的关系并未与工具区域分隔开。缺乏分界线造成的问题是,用户点击选项卡时会感觉有些困扰,生怕不小心点到下面的命令按钮。
与此相反,虽然以前版本的选项卡上面也没有分界线却并不会造成困扰,因为即使点到上面标题栏也很少会误点到其他按钮(除了快速访问工具栏按钮)。
更糟糕的是Office 2019鼠标滑过选项卡的响应设计。之前版本鼠标滑过选项卡时,选项卡的边框或者背景色会发生明显变化,然而Office 2019鼠标滑过选项卡时,仅仅是选项卡文字变成粗体。其实背景色也会变,但变化幅度太小几乎无法察觉。和前面的选项卡分界线问题一起,这选项卡显然设计得很差劲。
神秘的功能区高度
其实这算不上问题。不过既然前面提到了功能区选项卡问题,那就顺带一提功能区高度。
并排比较Office 2016和2019的功能区(点击放大)
仔细看上图的并排比较。两者的上边缘一样高,Office 2019选项卡的下边缘比2016高约2像素,功能区的下边缘比2016低约4像素(显示比例200%)。也就是说Office 2019的选项卡更矮、工具区域更高、主工作区更矮。
原因好像是因为新设计的命令按钮需要更多空间。不过我个人还是愿意牺牲按钮大小换取更大的主工作区域。
为特殊人士设计的按钮图标
界面最大的变化显然是功能区上的命令按钮图标,之前版本的线条与形状风格改成了轮廓与填充风格。
第一眼看到的时候我还以为不小心开了高对比度模式,然后才反应过来是Office界面更新了(我用的是Office 365订阅,所以会自动静默更新)。
这里解释一下,高对比度选项是为有视觉障碍的用户设计的轻松访问功能,实际上早在Win98就有高对比度的窗口配色方案。
高对比度模式下,许多矢量图标都会切换成轮廓模式,细微的背景色变化改成了深背景色或者粗下划线(就像新的功能区选项卡那样)。
之前倒是请说过微软近期在采用“Fluent Design”设计语言,只是没想到会有这种奇葩的设计。查了下相关文档才发现……好吧,Fluent Design还真建议这种设计。
Fluent Design建议Be Inclusive(要考虑到特殊人士)
关注特殊人士的需求是很人性化不假,问题是这种轮廓风格图标对普通人来说就比较差了。
第一,比起线条与形状风格,轮廓与填充缺乏表现力和灵活性。新设计的图标看起来都很雷同,没有之前版本的图标那样的区分度。
第二,轮廓风格势必要更粗的线条(200%比例下2像素),而线条与形状风格可以使用更细的线条(200%比例下1像素)。Office 2019功能区比老版本高可能也是因为这个原因。
这两点放在一起就设计出了很2B的图标,比方说左对齐/居中/右对齐/两端对齐图标,线与线之间的距离就宽了很多,乍一看还以为是八卦图。好多个4条横线的图标聚在一起,看起来一点非常混乱都没有区分度。
虽然Office 2019的线条变得更加醒目,但奇怪的是功能组下面的文字颜色反而变浅了。原因可能是为了和线条颜色保持一致,但却与降低辨识难度相违背。
总而言之,Office 2019的新设计有点奇葩而且降低效率。作为生产力工具,在有之前版本的成功设计作为参考的情况下,这种界面设计显然是非常失败。