MXD

取消

从微软Fluent设计体系和谷歌Fuchsia系统看UI发展趋势

mxder

mxder

2017.5.26

一周前,微软在它的年度开发者大会Microsoft Build 2017上,对外公布了它们最新的设计语言:Fluent Design System。微软将Fluent Design描述为“Metro的演进”,一种“现代设计语言”,最终会成为微软的标志性设计语言。

微软Fluent Design System官方视频

本月初,早在去年8月就开始测试的代号为“仙女座”(Andromeda)的google的全新操作系统fuchsia,也曝光了最新的运行视频。

谷歌fuchsia系统运行视频

从当前公布的内容来看,两者都面向未来,希望拉通多终端场景,并提供了更强的实时、3D渲染的能力。

虽然微软Fluent design和谷歌Fuchsia在定位上并不对等(微软Fluent design是一套基于现有系统的新设计语言,谷歌Fuchsia是一个从内核就完全颠覆的全新系统);适用场景也不尽相同,并且都还未经受市场和用户的检验,但从当前透露出的有限信息中,已经能够看到两家巨头在操作系统交互体验构建中的一些新思路,以及在未来交互界面发展方向上的引领和判断。

1. 为全终端场景而设计

交互框架和视觉语言需要适应更多设备

不管是用设备“武装”世界(周边环境中布满传感器和能与人交互的设备),还是用设备“包裹”人(设备也许不必布满世界,用于增强人的感官和能力就够了),一个能明确看到并被业界普遍认可的趋势是,借助各类设备,真实世界和虚拟世界间将建立起越来越多的联系。不仅是加入的VR/AR/MR新设备,即便是手机、平板和PC之间的联系也更紧密了。

多终端场景综合决定了应用的交互方式,而很难再以某个场景优先,最终再适配到其他设备的方式来设计。

所以微软在Fluent设计体系中,也将纵深、光等更适用于大屏幕甚至虚拟空间交互的视觉语言作为它整套设计体系的核心理念。

而谷歌Fuchsia最初的预览版即同时考虑手机和平板上的布局和呈现方式。

任务优先

移动优先还是AI优先?答案是用户的任务优先。多年来,巨头们一直都在试图构建一个更为立体的设备与人的互动场景,但由于google几乎缺席了PC操作系统,而微软早早在移动OS上掉队,只有苹果有较强的实现多终端协同的诉求和能力,它的Continuity功能也正是这样做的,让用户能用当前最顺手、方便的那个设备完成任务。

Continuity支持在Mac 上接打 iPhone 电话

随着谷歌、微软、亚马逊等在更多新设备上的发力,并开始支持跨操作系统平台的互通之后,这种从用户任务出发的多设备协同才有了更重大而实际的意义。

设计关注点

1. 真正以UX的角度思考UI ,设计的核心是更好的完成任务的过程。

将来,在用户的任务思考路径中,我得在哪个设备上才能继续任务或是否安装了客户端等制约因素一定是逐渐被解除的,用户不需要先考虑客观限制,再决策如何解决问题。产品设计流程正摆脱从前那种分而治之的设计思路,向真正以用户任务流为导向的整体性设计流程的方向发展,这是一种更加健康的方式。

2. 设计兼容性交互框架和视觉体系。

即便不是设计操作系统,设计app UI或是运营设计,任何需要运行在设备上的交互界面都需要在框架设计之初就同时考虑一个兼容性的框架和视觉语言,因为往往单个功能需求都有可能出现需要跨终端运行的情况,使用场景已经不能按设备截然划分开了。

2. 信息层级更简化

弱化固定框架,减少各种bar

以outlook为例,无论是xp还是win10上,它的信息层级从上至下,从左至右,都有4个,而新的设计语言将其简化为3个,并且阅读的视线流也更简单了。

win10 outlook
更新为Fluent design设计体系后的outlook

大道至简(大刀自剪)

谷歌Fuchsia并没有一个以app图标聚合成的home,取而代之的是一个类似多任务的卡片式信息流,每一个app就是一个小窗口,并且屏幕顶部也不再有状态栏,而是将时间、电量等信息与底部导航栏合一。home和多任务合一;状态栏与导航栏合一。这些大胆而颠覆的修改不知道是否会完全落地到发布版,但至少能看到google想进行的改变:减少固定框架,还内容以更大空间。

google Fuchsia的主页

设计关注点

1. 某著名产品经理的论断,极简方能不被超越。

极简即是让用户以最低的成本使用产品,而这里的成本有两个:认知成本和操作成本,两者很多时候并不是完美统一的,但引入一些更自然的交互升级往往能使两个成本同步降低,比如语音交互或是摇一摇。

2. 打破惯性思维,存在不一定合理,是否还能再精简。

当然简化能达成的前提是对用户的使用行为摸得够透,这样才能正确的切分场景,从而在某个沉浸场景中,去除掉不必要的噪音。

3. 信息承载的框架更灵活

会有越来越多的状态而不是一个个解耦的界面

谷歌Fuchsia的主页中,头像所代表的控制中心存在三种互相转化的状态:头像连同时间和电量一同显示的普通入口状态(下图1);点击头像展开控制中心的操作态(下图2);及首页下滑时,头像和时间、电量被收到底部,头像缩成小圆点的收起态(下图3)。三态并不是跳转切换的关系,而是适应当前场景以不同的状态呈现。

从谷歌Fuchsia的主框架交互可以看到,系统功能与app间的联动和转化更为普遍,已经不能按照一个个静态页面的方式来设计一套交互框架。

不再有无中生有的容器

比起微软以往的设计体系,微软Fluent design明显更加重视对于信息承载容器从哪来、到哪去的来龙去脉的交代,而这一点也正是早期android上手体验上不如iOS流畅舒适的一个重要原因。

微软Fluent 天气
微软Fluent timeline

设计关注点

1. 模态转化的关键不是进场,而是退场。

当任务进入到新阶段之后,哪些信息是不再需要的?那就尽快赶下舞台吧。

2. 让静态布局动起来。

人的视觉对于信息的捕获是连贯的,不会有物体无故出现或消失,连贯的画面为人提供了丰富的辅助信息并指导一些潜意识的行动。

4. 视觉层次更丰富

纵深、Z轴、视差等方式强化空间层次

显然,微软这次已经为全设备体验统一做好了准备,纵深层次在移动设备上也许不是最关键的,但在大屏幕和虚实结合的设备上,就变得必不可少。

 微软Fluent 日历
微软Fluent 应用市场

进一步提高信噪比

简化界面颜色,使内容更突显;更大更突出的标题字体;大面积留白;更简洁、纤细的图标。这些视觉优化都在促成一件事:提高信噪比。

微软Fluent 计时器
 微软Fluent 商店

而这这些提高信噪比的方式,又和之前硅谷设计师Michael Horton在其文章《Complexion Reduction: A New Trend In Mobile Design》中总结的非常一致,从去年开始,一批主流app都在演进中选择了几乎相同的设计美学。

半扁平

微软Fluent design这次核心理念中的光影、材质,都在把metro带来的纯扁平视觉演化到一个新的方向。

微软Fluent 联系人
微软Holographic桌面

设计关注点

纵深空间和光感、质感的运用并不是拟物的回潮,而是兼顾2D与3D场景的新的表达。拟物是希望把用户在物理世界中的经验能复用到屏幕交互中,而如今的变化是希望把用户从虚拟空间带回到物理世界或是混合的世界。

小结

不管是交互方式上还是视觉语言上,所有的这些演变都遵循一个逻辑:让人能用他最自然和熟悉的方式完成任务。

1. 设计者跨越边界为用户解除限制

从命令行到图形用户界面,再到肢体语言、自然语言即可交互的人机交互方式,技术在不断降低人机互动的门槛,也让设计流程的发展方向可以回归到它最健康的状态:以用户任务场景为核心。

2. 只有抽象到极简才能公用

如果希望一套代码,一个公式,一个设计体系能放之四海而皆准的话,那一定就需要它做到极简。

3. 形式追随功能

交互界面设计风格虽在一定程度上,会如时尚和审美一样,可能存在一些不可预见性甚至是轮回,但它不同于纯审美的变化,有其更重要的内在发展规律。曾经我们用拟物把物理世界的人带入虚拟世界,现在开始,我们可能需要创造一个虚实结合的世界,再往后呢?

部分图片来自

arstechnica

https://arstechnica.com/gadgets/2017/05/googles-fuchsia-smartphone-os-dumps-linux-has-a-wild-new-ui/

agilebits

https://discussions.agilebits.com/discussion/51735/feature-request-address-book-section-in-1password

《Complexion Reduction: A New Trend In Mobile Design》:

https://medium.com/swarm-nyc/complexion-reduction-a-new-trend-in-mobile-design-cef033a0b978

本文原创 转载需联系