充满争议的磁贴设计：微软，请等一等你的用户！

前段时间，微软收购tiktok消息甚嚣尘上。微软、苹果和谷歌作为硅谷三巨头，我们对于苹果的iOS和谷歌的MD设计更加熟悉，之前我也写过文章分析过。

今天我们来说说一下微软的设计。

△ 硅谷三巨头

一提到微软的设计，大家或许会立刻想到充满争议的磁贴设计风格。在聊磁贴之前，我希望大家可以明白：设计语言从来不是领导拍脑袋拍出来的。分析一个设计语言，我们应该代入当时的行业背景。因为设计语言反映了产品方对于未来人机交互方式乃至整个互联网行业的预判。现在我们觉得很「脑残」的一些做法，在当时的时代背景，站在他们的角度，或许就是最优解。所以在聊磁贴设计之前，我先简单介绍一下磁贴设计问世前的微软。

后PC时代的微软

1999年，微软以6000亿美元成为全球市值第一的企业。微软发家于PC时代，凭借着Windows操作系统的垄断地位，以及我们熟悉的Office系列产品，是当之无愧的PC互联网时代的霸主。

彼时，电脑是用户唯一的上网设备。虽然越来越多的数码产品问世，但是电脑依然是用户数码生活的中枢，负责链接起所有的数码产品。数码相机里拍了一些照片，我们习惯于上传到电脑里；歌曲必须通过电脑才能下载到mp3上。乔布斯在2001年1月提出了电脑是用户数据中枢（digtal hub）的概念。

而随着3G网络的普及，智能手机和平板的出现，越来越多的设备可以直接连接网络。电脑链接所有数字产品的模式渐渐玩不转了。如果我在iPhone上拍了一张照片想传到iPad上，怎么办？用air drop？对不起，air drop是2013才有的功能。

△ 电脑是数据中枢

我们必须先把照片传到Mac上，再把照片传到iPad上。整个流程非常的麻烦。2011年乔布斯发布iCloud，正式将电脑从数据中枢的定位降低至跟手机、平板一样的普通上网设备终端。后PC时代，或者说移动互联网时代来了。

△ Windows Phone 7

2007年苹果推出了iPhone，2008年谷歌发布了安卓1.0系统。移动互联网时代的到来使得之前风光无限的微软感受到了挑战，微软也开始将战略中心转移到移动端。2010年，微软发布了Windows phone 7系统，微软使用了磁贴设计风格。

△ 微软媒体中心

这不是微软第一次使用磁贴设计，微软使用磁贴设计，最早可以追溯到2005年的媒体中心里，再到后面的zune。从这里我们也能看出，微软使用磁贴设计是经过长时间的反复论证，不是头脑突然发热做出的决定。

△ Zune HD

什么是磁贴设计？

磁贴设计风格又称Metro design/modern design，其灵感来自于机场和地铁的指示系统。微软自己对磁贴设计理念的解释是「glance and go」，用户看一眼就能获得足够的信息，不需要停留。

△ 公共交通设计是磁贴的灵感来源

机场和地铁的指示牌，行人看一眼就明白了，不会停下来思考这个指示牌到底代表着什么意思。磁贴设计中规则的形状、高饱和度配色、扁平化的图标，这些元素我们都可以在公共交通的指示系统找到。那么微软为什么要在自己旗下的产品中大力推行磁贴设计呢？这里我总结了三个原因：1 保证多设备体验的一致性；2 提升信息获取效率；3 重新定义桌面；

多设备体验一致性

磁贴设计是微软为了迎合移动互联网的发展势头而做的一次改变。与图标相比，磁贴中色块的交互面积更大，方便用户手指在触摸屏设备上直接进行交互。

△ 大色块方便用户触摸交互

此外，随着智能手机、平板电脑还有后面iwatch的出现，越来越多的设备可以直接连接网络。那么问题来了，如何保证你的产品在不同尺寸的设备上依然保持一致的操作体验呢？

磁贴中的矩形易于大小缩放、移动与任意组合，可以保证用户在不同尺寸的设备上保持一致的体验。后面谷歌推出的MD设计中卡片式设计跟这个思路很类似，不知道谷歌有没有借鉴这一点。

△ 矩形可以任意组合、缩放

这里强调一下，任何一个设计语言都有自己最适用的交互模式，鼠标指针交互、键盘交互和触摸交互等。磁贴设计无疑最适用的就是触摸交互，而Windows系统最主要的场景是鼠标指针交互。在win8上采用磁贴，鼠标用户会觉得磁贴造成了空间浪费，鼠标移动距离增加。

微软的愿景是统一的one Windows。但是让鼠标用户和触摸用户使用同一个UI，这种做法是否过于激进呢？

△ 新版Mac OS图标采用扁平风

苹果也一直倡导多平台体验一致性，但是直到今年，Mac OS图标才抛弃拟物风格，采用类似iOS的大圆角扁平风格。为什么说类似？因为Mac OS还保留了一些原来的立体质感。

△ Mac OS依然保留原来的立体质感

提升信息的获取效率

很多人无法忍受磁贴设计满屏的大色块，觉得很丑，微软官方直接回应了。我知道你们会觉得丑，但是我们的目的不在于此，我们的目的是提升用户的信息获取效率。

不管是电脑还是手机，可以给用户提供内容和服务的是应用。长久以来，我们的思维是「想干什么就去打开某个应用」。传统的图标仅仅作为快捷方式，你想要获取信息必须点击图标进入应用。Windows phone 7的广告很好的体现这一点，他把每一个应用都比做一个房间。

△ 磁贴是快捷方式和通知中心的组合

而用户打开应用，可能只想查看更新的内容。例如，你打开邮箱是想查看最新的邮件，你打开b站就是想看争哥有没有更新视频。磁贴中有一个动态磁贴功能，用户可以在不打开应用的前提下查看信息。这相当于将快捷方式和消息通知结合起来，提供了一个更加高效的信息查阅方式。

磁贴不再仅仅是内容的入口，磁贴本身就是内容。为了让用户的注意力可以聚焦于内容，磁贴删减一切不需要的装饰性元素，例如高光、阴影、纹理和圆角等。

△ 圆角的视线内聚作用

圆角这里说一下。微软去除圆角是担心用户的视线被圆角所吸引，但是有人提出了反对意见，认为圆角不仅不会分散用户注意力，还有视线内聚的作用。用户视线接触圆角，圆角会将视线引导至圆心。

不管怎么说磁贴所代表着内容大于形式的设计理念，内容本身为视觉主体。Content before chrome。是不是觉得这个说法很熟悉？这不就是扁平化设计吗？没错，在硅谷三巨头中，微软最先尝试扁平化设计的。苹果是在2013年的iOS7中才大面积使用扁平化设计，谷歌更不用说了，2014年才推出了统一的设计语言material design。

更美观的视觉效果还是更高的信息获取效率？在这个问题上，微软选择了后者。这让我起来之前做体检的时候，每一个科室门口都有一个显示屏，展示当前排队的人。我发现有的人前面有咖啡图标，有的人没有。

我很好奇，就问护士咖啡图标是什么意思。护士说，咖啡图标代表这个人已经做完了空腹项目，可以去吃早餐了。咖啡图标或许会更好看一点，但是我觉得这里直接放「可食早餐」四个字可能更加合适，最起码我能看懂。

重新定义桌面

第三点跟第二点很类似，但是为了防止第二点太冗长，这里我拆成第三点。传统意义上的桌面，只是APP的入口，用户在桌面上找到对应的图标，点击进入应用，用户并不会在桌面上停留过多时间。这种以图标启动应用的模式反映了「以app为中心」的设计思想。这种设计思想在app数量激增的情况下，会带来两个问题：1 很难定位具体的app；2 app的孤岛化；

我们先说第一点，例如，你手机里安装了40个app，但是最常用的就是b站、微信、Chrome和知乎等。与此同时，你的手机里还会有一些app我们很少打开，但是又不能卸载。比如你办了房贷车贷。你要安装贷款银行app，你只会在还款日期间打开这款app，其余时间基本都是在吃灰。这些低频应用和上面提到的高频应用的入口都是桌面上的图标，它们形状和大小都很相似。用户的诉求是，希望可以快速找到那些高频的应用。

△ 磁贴设计，用户可以自定义桌面

磁贴设计可以通过大小和位置来改变磁贴权重，对于一个设计师来说，PS、sketch是常用的软件，可以放大尺寸、放在界面中央位置让我们更容易找到。iOS 14的桌面组件里，用户可以自定义尺寸，我们看到了磁贴的影子。

△ iOS 14桌面组件

此外，前面Windows phone 7的广告还反映了一个现象那就APP的孤岛化。每个app都是一个独立的房间，我要享受不同的服务，就要打开不同的房间。打开app，享受服务，这个模式我们已经习以为常。但是习以为常，就是正确的吗？

买火车票，我要做的就是告诉系统「买一张明天上午8点左右到上海的高铁票」；而不是「打开XXapp，买一张明天上午8点左右到上海的高铁票」。

△ iOS 14 画中画

磁贴设计让用户在桌面上就可以查阅新闻、邮件。让用户不打开app就可以享受服务，iOS 14的画中画功能，用户在桌面就可以观看视频。他俩的共同点就是弱化APP的定位，桌面不再仅仅是APP的入口，用户也不需要在APP里才能享受服务。或许在不久的将来，场景式交互成熟，手机可以根据不同的场景给用户切换不同的服务，而不是让用户自己主动去打开一个个APP。

微软，等一等你的用户

磁贴是微软针对现有交互模式做的一次大胆的改革，提出了很多新的理念。在现有的话语体系中，我们一直被教育创新是正确的。我们好像忘了创新意味着对现有模式的颠覆，改革是需要支付成本的。那么谁来支付成本？微软愿意投入大量的资源去研发一套新的设计语言，有没有问过他的用户是否愿意支付学习成本来适应这套新的设计语言？

△ 从开始菜单到开始桌面

Windows 7 之前的开始菜单位于桌面左下角，空间很小，找个应用还要翻来翻去。Windows 8把开始菜单改成了开始桌面，start menu变成了start screen，让用户可以更快的找到应用。但是长久以来的操作习惯，让用户离不开开始菜单。微软在第二年又拿回开始菜单了。

创新是必要的，也是值得鼓励的。但是创新必须发生在合适的时间节点并且配辅以正确的执行手段。太过于超前和激进，先锋很容易成了先烈。

欢迎关注作者的微信公众号：「王M争」