微软 Fluent 设计语言:杯水车薪

在经历了 Windows 8 开始的用户界面(UI)设计大幅度倒退以后,微软终于打算着手改进 Windows 的 UI 设计了。内部代号 Project NEON,微软已经为这次翻修准备了一段时间,终于在 Build 2017 大会亮相。

Fluent 设计语言的五个核心元素

Light(光):通过光点、光斑等效果,引导用户的焦点,并提供操作反馈。你可以看到一个光斑跟随指针移动,并在点击后产生涟漪效果。这个效果在 Windows 7 的任务栏和 Google Chrome 标签栏上有运用。通过光点来吸引用户注意力是常见的交互手法,如果你有幸用过微软 HoloLens,也能体验到这个效果。

Depth(深度):通过视差(Parallax)效果来为用户界面引入深度差。你现在打开 Windows 10 自带的天气应用,上下滚动能看到这个效果。根据视频中的演示,微软打算在应用商店中引入视差。iOS 7 也大量应用了视差效果,只是在后来的版本中删掉了绝大部分。

Motion(动感):通过非线形的动画,让转场更和谐,元素间关系更清晰。微软在 Windows Phone 7 时代的 Metro UI 设计准则中,就强调要用“世界级的动画”来让系统更灵动,随后发布的 Windows 系统动画的确变得更多更丰富,但却少了和谐统一感。Google 在 Material Design 设计语言中也强调动效的重要性,但是也明确不能滥用。

Material(质感):这里提到的质感主要是指微软重新推出的“丙烯酸纤维(Acrylic)”材质。和 Windows Vista 时代磨砂玻璃(Aero Glass)效果的区别在于,新的质感去掉了高光效果,加入了细微的纹理,看起来更像是一片半透明塑料。Acrylic 材质和 macOS 上使用的 Vibrancy 效果非常相似,并且都推荐用于侧边栏、导航栏等辅助 UI 元素上。

Scale(收放自如):大到 80 英寸的 Surface Hub,小到 5 寸的智能手机;无论是混合现实的隔空指点、平板电脑上的笔触输入,还是键盘鼠标、多点触摸。新的设计语言能在不同设备上收放自如,贯穿整个生态圈。

这其中,除了炒冷饭,就是玩概念

就像我上面解释的一样,微软拿出的这 5 个概念里,前 4 个在其他设计语言(甚至微软自己的前代操作系统中)都早已有应用,而最后的一个说了等于没说。在微软最近更新的开发者网站中,关于 Fluent 设计语言唯一的提及就是新增了 4 个特效:Acrylic、Parralax、Connected Animation 和 Reveal。这些特效的加入,只是改进了一些不痛不痒的缺点,而在更大的范畴上,并没有对 Windows 的整体设计语言进行统一。

我们来回顾一下 Windows 是怎样一步一步沦落到现在这个模样的

微软第一次在 UI 设计上有所动静,是在 Windows XP 时代。当时的 Luna 主题一改 Windows 9x 的灰暗色调,变得鲜艳、友好。Windows XP 也大量加入了动画,虽然这些动画在如今的眼光看来不值得一提,但是对于当时的计算机操作系统,已经算是质的飞跃了。

随后微软开始探索全新的设计语言,并在 Windows Vista 时代将其推向高潮。Windows Aero 用户界面可以说是当时的尖端设计,并且非常具有前瞻性:全局 GPU 加速、漂亮的磨砂玻璃效果、丰富且考究的动画和优雅的字体设计。

唯独可惜的是,当时的硬件水平还无法承载如此高要求的用户界面,导致大量用户将其怪罪于微软的渣优化。Windows Vista 也顺利成为史上最失败的 Windows。

随后微软改进 Windows Aero,并在 Windows 7 上使用。与此同时,另一股“瑞士设计”的潮流也开始发芽,在 Windows Media Center 和 Zune 上尝到甜头后,进化成为 Windows Phone 上的 Metro UI。

Metro UI 的特点是:注重字体的美学,减少冗余的装饰,大胆、流畅的动画和转场效果,以及“信息优先”的设计理念。

Metro UI 对行业带来的影响是深远的。高傲如苹果也在 iOS 7 中借鉴其精髓,大幅度简化 UI 元素,并随后引领了整个行业追逐所谓“扁平化”的潮流。这之中作为先驱者的微软,很显然是步子迈得太大扯着蛋了:Windows Phone 7 的 UI 中去掉了很多重要的系统交互元素,比如状态栏;也为了过分追求简洁,而把设置界面完全简化成“一首诗”,一个图标都没有;至于全部直角方块的元素,要不是还有动画撑场面,真的很容易让人觉得整个系统就是个半成品。

但是微软没有停止。Metro UI 在整体的趋势上来说是正确的,所以微软将其整合到了桌面的 Windows 8 中,导致了另一次灾难。微软想得很好:Windows 8 要兼容键鼠和触摸操作,为二者都提供合适的界面。最终的结果显然是二者都没有合适的界面,两头得罪。Windows Aero 也在这个过程中惨遭拍扁,窗口阴影、磨砂玻璃,完全消失。

所以 Windows 10 就是一个补救措施。在 Windows 10 上,微软首先尝试统一桌面和手机(Windows 10 Mobile)的控件设计。随后的周年更新,应用户强烈反馈,在开始菜单和操作中心上带回了磨砂玻璃效果,但仍然和其他的系统元素格格不入。在经历了 Windows 8、Windows 8.1 和 Windows 10 的三重打击后,Windows 的 UI 已经严重割裂。举最简单的例子:你随随便便就能点出三种完全不同的下拉菜单。

Windows 在这个节点上,整个系统已经遍布“不走心”和“随便画”的 UI,甚至出现暗色模式用“#000”纯黑的这种低级临时工设计,其他系统在最丑的时候也没丑到这个地步。

此时,“推到重做 Windows UI”的呼声前所未有得强烈,这也最终导致微软决定启动 Project NEON,改进 Windows UI 设计。根据之前软粉圈的消息,Project NEON 可能会配合新的 Composable Shell(通用 Shell)一同发布,后者是一套可以根据设备形态而自动变形的通用图形用户界面,完全取代现有 Windows 的用户界面。但是根据 Build 2017 的消息来看,微软并不打算“推倒重来”,而是选择在已有的第二代微软设计语言(MSDL2)上进行改进。

Project NEON 泄露概念设计,至今没有一个软件有这么好看

时间拉回现在,Fluent 设计系统就是微软拿出的答卷。而这张答卷,我只能给 40 分。

Windows 的 UI 设计问题远不是加点模糊、来点动画能解决的

稍微研究一下 Windows 10 的 UI 现状,你就能发现它的问题比“没有透明效果”深刻的多。以截稿时最新的 Insider Build 16193 为例:

应用内层次混乱

在这个界面,我按左上角那个丑陋的返回按钮会发生什么?答案是从“专辑”跳转到“歌曲”。【黑人问号】我明明刚刚打开这个软件,打开就是这个界面,为什么要让我“返回”到一个同层级的界面?

这是微软在发布会上大说特说的“照片”应用。四周都是实体,却只有中间一行导航栏莫名其妙得透明,能看到桌面。整个软件像是中间掏了个洞,明显是在设计时就没有考虑层次逻辑。

设计时只考虑小屏幕

比如这个 15.6 英寸的计算器

和这个莫名其妙的全屏音乐播放器

以及右侧疑似预留广告位的天气应用

更多的(字体渲染、不同缩放等级屏幕间的切换、操作反馈不清晰)就不再一一举例了。我不是针对某一个或者某几个应用,我是说这些问题是典型的“没规划”、“没图纸”的后果。这些临时工一样的 UI 不是加个透明就能变好用的,也不是一句“需要时间”就能糊弄过去的。用户给微软的时间已经够多了,要知道这段时间里 iOS 和 macOS 双双完成了 UI 现代化过度,Material Design 已经非常成熟,甚至锤子手机都已经有一套完整的设计语言了。微软是缺人还是缺钱?

苹果一直有完整的人机交互准则,这个准则中详细讲述了设计一个 macOS、iOS 生态应用,应该怎样设计交互逻辑和 UI。这套准则在 iBooks Store 上提供,任何人都可以免费下载。谷歌在 Android 5.0 时代也发布了完善的 Material Design 设计指导,从元素间距到字体细节再到动画效果,都有明确的规则,这套准则甚至有一个专门的网站来介绍,供任何人参考。微软只有 MSDN 上混乱的分布着几个假大空的页面,然后就没有然后了。我甚至怀疑微软内部都没有一套明确的设计准则,不然 Windows 10 的 UI 怎么能乱成这样。

相对于这些深层次的问题,一套只有 5 个单词、4 个特效的“设计系统”显然是杯水车薪的。

微软需要做的,是忘记所有已有的用户界面,重新开始、从零开始,打造一套设计语言出来。一套从字体到尺寸、从交互到逻辑的完整设计语言,才有可能拯救 Windows 10。现在这个烂摊子,可以说已经没救了,不要再研究补救措施了。

好在距离秋季创作者更新正式发布,还有三五个月的时间。假如微软像老罗一样重新定义秋季,能一直拖到年底。在这半年的时间内,如果微软能拿出苹果和谷歌的办事效率,是完全可以对 Windows 10 的 UI 进行一次大翻修的。哪怕最终结果并不成熟,至少框架已经搭好。

只是我真的不看好它

一个操作系统上的 UI 设计从来都不是一家公司的问题。macOS 之所以能有更美观的 UI 是因为苹果非常擅长教育开发者,每年的 WWDC 都会有若干场会议来讲述 UI 设计,相对应的开发者就会花更多时间揣摩新的设计语言,并在自己的应用中反应出来。当苹果和开发者齐心协力向着一个设计语言发力时,最终的结果就是 macOS 上更统一的视觉风格,很少有哪个应用非常突兀。

反观微软阵营,UI 的美感显然不如代码的美感重要。微软一直所强调的也是“通用 Windows 平台”、“写一次代码在所有设备上运行”、“让云端来增强代码的能力”等等。到了用户每天都打交道的 UI 上,最先拿出来说的居然是“你现在能用触摸笔拖动网页了”。

荒唐。

当开发者都不确定哪种设计语言才是微软想要的设计语言时,用户看到的就是乱作一团、乌烟瘴气的 UI 。微软在开发届的号召力,前所未有得低。Windows 应用商店开业已经有 5 年了,你现在从里面连 100 个高质量的应用都数不出来。开发者不愿意响应微软的号召,这里面和钱没什么关系(QQ UWP 那么垃圾),更多的原因可能是开发者已经怕了微软了。

Windows Phone 7 不兼容 Windows Mobile 时代的软件、Windows Phone 8 换了新的软件架构、Windows Phone 8.1 再度更换、Windows 10 Mobile 再度更换; 桌面 Windows 8 提出了 Metro 应用、Windows 8.1 改架构、Windows 10 再改架构…… 这样一轮一轮地艹下去,开发者到底还有没有动力给 Windows 再设计软件?天知道微软会不会突然变脸,之前的设计全都白费了?

等等,微软好像已经变了,这不是又双叒叕拿出了新的设计语言。问题是,你能保证你不再变吗?

我看悬。

One reply to “微软 Fluent 设计语言:杯水车薪”

发表评论

电子邮件地址不会被公开。 必填项已用*标注