从 Metro 到 Fluent

Fluent Design 发布

介绍

微软在昨(12)天的 MSBuild 2017 开发者大会上宣布了全新的统一设计语言 Fluent Design,经过了 Metro (Modern) 时代的前卫、Windows Phone 的全面溃败和 UWP / 传统 Windows 桌面的混沌后微软再一次试图打造一个整合的体验;这也是微软第一次系统性地将统一设计语言从幕后移到台前。「一鼓作气,再而衰,三而竭」,重新加入统一设计语言大混战的微软能否在产品中持续稳定地传达 Fluent Design,还需拭目以待。

这里可以看介绍视频。

草翻
Fluent Design 的五个价值取向

We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. ——Fluent Design

Fluent adj. 「流畅、流利」;但按微软由 Metro UI 开始以内容为主的设计导向、微软的官方介绍视频和 Fluent Design 发布所处的「物联」、「数据」热点来看,Fluent 翻译成名词「流体」,设计语言本身翻译成「流体设计」或许比较妥当。

Fluent Design 提出的五点价值取向倒是可以翻译成「光线、层级、动态、质感、尺度」。翻译出来的感觉倒是令人觉得与 Google 的 Material Design 形成了某种默契。

Aero 与 Metro

Longhorn 与 Aero

Longhorn 时代 Aero 毛玻璃视窗栏开始出现,Project Longhorn 从拥有透明任务栏的 Luna(Windows XP 默认风格)进化为 Windows Vista,开启了微软当代桌面 OS 视觉第二次大改革。Aero 让微软的桌面 OS 视觉体验有了质的飞跃,显得富有设计感而现代。Vista 的 Aero 和界面图标更倾向于「透明水晶」的质感,直到 Windows 7 发布,Aero 成为了大家昵称的「毛玻璃」质感。

Aero 因其独特的透明质感得到了消费者的喜爱,然而 Windows 8 中的 Aero 效果保持到了开发者预览版的中后阶段,随后为了迎合 Windows 8 的 Metro 被移除,直到现在发布的 Fluent Design 再度全面回归。

然而 Aero 实际上是微软传统 PC 时代的桌面系统设计语言(与很多人认为的桌面主题样式有别),其中很多的交互要素与「毛玻璃」半透明质感密不可分,只是并不明显。时过境迁,首次大改风格的 iOS 7 也采用了「毛玻璃」效果作为 iOS 用户体验中「内容感知」的一部分,iOS、Longhorn—7 与 Fluent Design 的毛玻璃效果有何区别,下文将会详细分析。

Metro UI 与 Zune

所谓「扁平化」的曙光在微软的 Zune 播放器上显现。那还是 2006 年,乔布斯追求现实投射的「拟物」的 iPhone OS 1.0 和 Android 1.0 两年后才孕育出来、旗舰价位的智能手机还是诺基亚 N 系列的天下。使用简洁鲜明的色块控件、专辑封面和清楚圆滑的文字排版,前卫大胆的视觉传达实在是「潮到出水」,每个界面的信息排版都像铅板海报一样前卫。

Zune 播放器产品宣传图 © Microsoft

那时虽然没有 Metro UI 这个代号,但 Metro 的烙印已经深深刻在了 Zune 的界面基因中。成为后来 Windows Phone 图形界面大放异彩的前奏曲。

Metro UI 与交通标识

其实 Zune 播放器的界面是后来补课的时候才知道的。Metro 其实就是城市公共交通(更狭义就是轨道交通了)的意思,作为美工交通迷第一次被 Metro UI 吸引就是因为它将公共交通的标识排印搬到了用户界面上,那种明确、清晰、规律、规范立刻将我俘获。

纽约大都会交通局(MTA,纽约地铁运营)标识系统规范手册

众所周知,交通机关的标识系统和移动界面不同,作为公共服务部门,面对不同受教育程度和生活习惯的居民,需要安全、清晰、直观、简洁的标识系统来疏导人流,提高整个交通系统的运转效率。所谓「扁平化设计」(原谅我真的不爱用这个词)就是受到交通系统标识的启发,以删除视觉细节来提高文字与其他信息之间的对比度,清晰地传达信息本身。Metro UI 不光是设计背后的理论,更进一步模仿交通系统的视觉样式本身进行设计。Windows Phone 版的图形界面成为了第一版标准版 Metro,犹如寓言一般预测了「关注信息本身」的设计风潮。

驾驭排版与视觉设计

Metro UI 因其独特的视觉风格培养了一批设计师簇拥。但严格来说相较于同时代或刻画或堆砌视觉元素的界面系统来说 Metro 虽然简化了设计师的绘图操作,却需要设计师更多地考虑从排版、图标设计以至于信息呈现等更多问题。在「重视信息本身」的设计还未成为显学的年代,少有制作精良的 Windows Phone 应用程序。大部分设计师觉得只要堆砌「磁贴」就能成为 Metro,事实则不尽然。(反而和现在很多国内习惯了 HIG 的设计师做 Material Design 一样?)

FD101

陈词滥调与历史包袱

统一设计语言大战热火朝天,Fluent Design 落入陈词滥调。设计思路五维中的两维,Light 与 Motion,主要集中阐述了 Fluent Design 对于交互动画与设计用光上的理解,虽然有心理学模型的支撑,但依照宣传视频中展示的一些控件动画和用光细节,实在无法看到什么让人眼前一亮的要素,只看到了陈词滥调地炫技。目前还没看到它的完整版设计指导手册,但弥合 UWP 与传统桌面撕裂的交互才是微软面临的当务之急。

这里就不得不提微软的历史包袱。作为大部分地球人使用的桌面操作系统,微软的传统桌面已经体现了它的效率,甚至成为了某种标准。代表「历史继承」的传统桌面与代表「融合平台」的 Metro / UWP 之间的整合已经欠下了太多债,交互撕裂、标准不稳:OS X 与 iOS 经过了 Yosemite 的大融合现在视觉风格已趋向统一,Android 和 Chrome OS 凭借着后发优势已经被 Material Design 一步拥入怀中,然而 Windows 还在内部混乱与推倒重来中永无止境地「欠债还债」,实在让人担忧。

质感非「材料」,层级非「深度」

Depth 作为 Fluent Design 的一维我实在难以将其翻译为「深度」。通过增加视觉上 Y 轴的深度体现的是层次感,进一步回到原先 Metro UI 的设计宗旨上考察则是突出信息间的优先级关系。所以思索再三还是「层级」比较适合。Material 这个非常「尴尬」的称谓恰巧与 Google 的 Material Design 撞车,然而两者所阐述的东西却南辕北辙。将 Depth 和 Material 合在一章阐述的原因恰恰是 Depth 某种程度上代表的才是 Google Material Design 的精神。而包含全新 Aero 的 Material 反而与 iOS 7 有异曲同工之妙。微软这个在视觉上失落的巨人,自己的两门看家本领被 Apple 与 Google 瓜分殆尽,唏嘘。

虽然 Depth 主要突出了立体层级关系,但依旧能看出其在平面空间内继承了某些 Metro 的元素。比如滚动时相异的位移动画就曾在 Metro 的功能标题和 Banner 图片中出现。Google Material Design 主要通过模拟真实材质的叠加质感来反映信息优先级:例如最典型的 Floating Button,用极其粗暴醒目的方式提示了用户执行一个界面中最主要的功能;而 Depth 的层级区分则期望能在它能逻辑上改善 Metro 「突出信息」的平坦。

新 Aero,即 Material,逻辑基本与老 Aero 告别。老 Aero 的毛玻璃代表的是「聚焦」,即让用户通过毛玻璃的重叠加深对当前窗口的认知,而新 Aero 更像是 iOS 7 的毛玻璃效果,让用户感知当前窗口背后的其他内容,配合 Depth 建立一种层级上的心理暗示。本文标题的质感非质感,层级非深度即是此意。

新字体

相较于 Roboto 与 SF 两个 Helvetica 系且紧凑的现代视觉,源于 Frutiger 的 Segoe 现在看或许显得臃肿肥硕。Segoe 作为微软系统级字体,和 Office 的默认字体 Calibri 一起出现在各种粗劣的设计中,产生了一种本非其意的廉价感。微软雅黑亦同。作为大部分中国人接触到的第一款现代屏显黑体,它虽然为提升简体中文汉字品味做出了不可估量的贡献,但它的 Hinting 和种种已经无法满足现代显示技术的需求。

新的西文字体,Twitter @bdsams

可喜的是在 MSBulid 2017 的演示中发现了天气界面可能的新西文字体(依旧是瑞士系、紧凑、但细节也许过于丰富),不知中文能否在思源黑体与苹方间带来一些新气象。

新 PC、新硬件的尺度

Scale 作为微软新 PC 与新硬件诸多硬件交互方式的看点(Surface Pen、Surface Dial、触摸屏、HoloLens 等),本意应该是打造一个面向设计师和工程师的,可以高效生产的使用环境,使得他们的生产对象都可以被轻松的掌控和调整,也包括硬件本身适应使用者的调整(Surface Studio 的转轴、Surface 的键盘盖等),与 Jobs 当初所说的「不是用户适应 iPad,而是 iPad 适应用户」有异曲同工之处。不过微软身负的历史包袱能否「坐着玩,躺着玩,还是微软设备好玩」,则依然存疑。不过 Scale 作为 Windows 打破屏幕与现实互动的方式,倒是 Fluent Design 一个非常有潜力的维度所在。

多说一点

不用 UI Kit 真的排点什么都是刷流氓。希望 Fluent 这张大饼能够「画好画满」,不要重蹈 Metro 与 UWP 朝令夕改的覆辙,变成微软的又一个历史负债。本文 13 日开始磨洋工,期间还不务正业跑去看漫展,写到什么时候算什么时候。本篇小结基于 MSDN 宣传材料和宣传视频所写,可能在完整交互指南出来之前有很大变动或出入。

期待 Fluent 的设计规范。「微软,生产力叫你回家还债。」