前段時間，微軟收購tiktok消息甚囂塵上。微軟、蘋果和谷歌作為硅谷三巨頭，我們對于蘋果的iOS和谷歌的MD設計更加熟悉，之前我也寫過文章分析過。

今天我們來說說一下微軟的設計。

△ 硅谷三巨頭

一提到微軟的設計，大家或許會立刻想到充滿爭議的磁貼設計風格。在聊磁貼之前，我希望大家可以明白：設計語言從來不是領導拍腦袋拍出來的。分析一個設計語言，我們應該代入當時的行業(yè)背景。因為設計語言反映了產品方對于未來人機交互方式乃至整個互聯(lián)網(wǎng)行業(yè)的預判。現(xiàn)在我們覺得很「腦殘」的一些做法，在當時的時代背景，站在他們的角度，或許就是最優(yōu)解。所以在聊磁貼設計之前，我先簡單介紹一下磁貼設計問世前的微軟。

后PC時代的微軟

1999年，微軟以6000億美元成為全球市值第一的企業(yè)。微軟發(fā)家于PC時代，憑借著Windows操作系統(tǒng)的壟斷地位，以及我們熟悉的Office系列產品，是當之無愧的PC互聯(lián)網(wǎng)時代的霸主。

彼時，電腦是用戶唯一的上網(wǎng)設備。雖然越來越多的數(shù)碼產品問世，但是電腦依然是用戶數(shù)碼生活的中樞，負責鏈接起所有的數(shù)碼產品。數(shù)碼相機里拍了一些照片，我們習慣于上傳到電腦里；歌曲必須通過電腦才能下載到mp3上。喬布斯在2001年1月提出了電腦是用戶數(shù)據(jù)中樞（digtal hub）的概念。

而隨著3G網(wǎng)絡的普及，智能手機和平板的出現(xiàn)，越來越多的設備可以直接連接網(wǎng)絡。電腦鏈接所有數(shù)字產品的模式漸漸玩不轉了。如果我在iPhone上拍了一張照片想傳到iPad上，怎么辦？用air drop？對不起，air drop是2013才有的功能。

△ 電腦是數(shù)據(jù)中樞

我們必須先把照片傳到Mac上，再把照片傳到iPad上。整個流程非常的麻煩。2011年喬布斯發(fā)布iCloud，正式將電腦從數(shù)據(jù)中樞的定位降低至跟手機、平板一樣的普通上網(wǎng)設備終端。后PC時代，或者說移動互聯(lián)網(wǎng)時代來了。

△?Windows Phone 7

2007年蘋果推出了iPhone，2008年谷歌發(fā)布了安卓1.0系統(tǒng)。移動互聯(lián)網(wǎng)時代的到來使得之前風光無限的微軟感受到了挑戰(zhàn)，微軟也開始將戰(zhàn)略中心轉移到移動端。2010年，微軟發(fā)布了Windows phone 7系統(tǒng)，微軟使用了磁貼設計風格。

△?微軟媒體中心

這不是微軟第一次使用磁貼設計，微軟使用磁貼設計，最早可以追溯到2005年的媒體中心里，再到后面的zune。從這里我們也能看出，微軟使用磁貼設計是經(jīng)過長時間的反復論證，不是頭腦突然發(fā)熱做出的決定。

△?Zune HD

什么是磁貼設計？

磁貼設計風格又稱Metro design/modern design，其靈感來自于機場和地鐵的指示系統(tǒng)。微軟自己對磁貼設計理念的解釋是「glance and go」，用戶看一眼就能獲得足夠的信息，不需要停留。

△?公共交通設計是磁貼的靈感來源

機場和地鐵的指示牌，行人看一眼就明白了，不會停下來思考這個指示牌到底代表著什么意思。磁貼設計中規(guī)則的形狀、高飽和度配色、扁平化的圖標，這些元素我們都可以在公共交通的指示系統(tǒng)找到。那么微軟為什么要在自己旗下的產品中大力推行磁貼設計呢？這里我總結了三個原因：1 保證多設備體驗的一致性；2 提升信息獲取效率；3 重新定義桌面；

多設備體驗一致性

磁貼設計是微軟為了迎合移動互聯(lián)網(wǎng)的發(fā)展勢頭而做的一次改變。與圖標相比，磁貼中色塊的交互面積更大，方便用戶手指在觸摸屏設備上直接進行交互。

△?大色塊方便用戶觸摸交互

此外，隨著智能手機、平板電腦還有后面iwatch的出現(xiàn)，越來越多的設備可以直接連接網(wǎng)絡。那么問題來了，如何保證你的產品在不同尺寸的設備上依然保持一致的操作體驗呢？

磁貼中的矩形易于大小縮放、移動與任意組合，可以保證用戶在不同尺寸的設備上保持一致的體驗。后面谷歌推出的MD設計中卡片式設計跟這個思路很類似，不知道谷歌有沒有借鑒這一點。

△?矩形可以任意組合、縮放

這里強調一下，任何一個設計語言都有自己最適用的交互模式，鼠標指針交互、鍵盤交互和觸摸交互等。磁貼設計無疑最適用的就是觸摸交互，而Windows系統(tǒng)最主要的場景是鼠標指針交互。在win8上采用磁貼，鼠標用戶會覺得磁貼造成了空間浪費，鼠標移動距離增加。

微軟的愿景是統(tǒng)一的one Windows。但是讓鼠標用戶和觸摸用戶使用同一個UI，這種做法是否過于激進呢？

△?新版Mac OS圖標采用扁平風

蘋果也一直倡導多平臺體驗一致性，但是直到今年，Mac OS圖標才拋棄擬物風格，采用類似iOS的大圓角扁平風格。為什么說類似？因為Mac OS還保留了一些原來的立體質感。

△?Mac OS依然保留原來的立體質感

提升信息的獲取效率

很多人無法忍受磁貼設計滿屏的大色塊，覺得很丑，微軟官方直接回應了。我知道你們會覺得丑，但是我們的目的不在于此，我們的目的是提升用戶的信息獲取效率。

不管是電腦還是手機，可以給用戶提供內容和服務的是應用。長久以來，我們的思維是「想干什么就去打開某個應用」。傳統(tǒng)的圖標僅僅作為快捷方式，你想要獲取信息必須點擊圖標進入應用。Windows phone 7的廣告很好的體現(xiàn)這一點，他把每一個應用都比做一個房間。

△?磁貼是快捷方式和通知中心的組合

而用戶打開應用，可能只想查看更新的內容。例如，你打開郵箱是想查看最新的郵件，你打開b站就是想看爭哥有沒有更新視頻。磁貼中有一個動態(tài)磁貼功能，用戶可以在不打開應用的前提下查看信息。這相當于將快捷方式和消息通知結合起來，提供了一個更加高效的信息查閱方式。

磁貼不再僅僅是內容的入口，磁貼本身就是內容。為了讓用戶的注意力可以聚焦于內容，磁貼刪減一切不需要的裝飾性元素，例如高光、陰影、紋理和圓角等。

△?圓角的視線內聚作用

圓角這里說一下。微軟去除圓角是擔心用戶的視線被圓角所吸引，但是有人提出了反對意見，認為圓角不僅不會分散用戶注意力，還有視線內聚的作用。用戶視線接觸圓角，圓角會將視線引導至圓心。

不管怎么說磁貼所代表著內容大于形式的設計理念，內容本身為視覺主體。Content before chrome。是不是覺得這個說法很熟悉？這不就是扁平化設計嗎？沒錯，在硅谷三巨頭中，微軟最先嘗試扁平化設計的。蘋果是在2013年的iOS7中才大面積使用扁平化設計，谷歌更不用說了，2014年才推出了統(tǒng)一的設計語言material design。

更美觀的視覺效果還是更高的信息獲取效率？在這個問題上，微軟選擇了后者。這讓我起來之前做體檢的時候，每一個科室門口都有一個顯示屏，展示當前排隊的人。我發(fā)現(xiàn)有的人前面有咖啡圖標，有的人沒有。

我很好奇，就問護士咖啡圖標是什么意思。護士說，咖啡圖標代表這個人已經(jīng)做完了空腹項目，可以去吃早餐了。咖啡圖標或許會更好看一點，但是我覺得這里直接放「可食早餐」四個字可能更加合適，最起碼我能看懂。

重新定義桌面

第三點跟第二點很類似，但是為了防止第二點太冗長，這里我拆成第三點。傳統(tǒng)意義上的桌面，只是APP的入口，用戶在桌面上找到對應的圖標，點擊進入應用，用戶并不會在桌面上停留過多時間。這種以圖標啟動應用的模式反映了「以app為中心」的設計思想。這種設計思想在app數(shù)量激增的情況下，會帶來兩個問題：1 很難定位具體的app；2 app的孤島化；

我們先說第一點，例如，你手機里安裝了40個app，但是最常用的就是b站、微信、Chrome和知乎等。與此同時，你的手機里還會有一些app我們很少打開，但是又不能卸載。比如你辦了房貸車貸。你要安裝貸款銀行app，你只會在還款日期間打開這款app，其余時間基本都是在吃灰。這些低頻應用和上面提到的高頻應用的入口都是桌面上的圖標，它們形狀和大小都很相似。用戶的訴求是，希望可以快速找到那些高頻的應用。

△?磁貼設計，用戶可以自定義桌面

磁貼設計可以通過大小和位置來改變磁貼權重，對于一個設計師來說，PS、sketch是常用的軟件，可以放大尺寸、放在界面中央位置讓我們更容易找到。iOS 14的桌面組件里，用戶可以自定義尺寸，我們看到了磁貼的影子。

△?iOS 14桌面組件

此外，前面Windows phone 7的廣告還反映了一個現(xiàn)象那就APP的孤島化。每個app都是一個獨立的房間，我要享受不同的服務，就要打開不同的房間。打開app，享受服務，這個模式我們已經(jīng)習以為常。但是習以為常，就是正確的嗎？

買火車票，我要做的就是告訴系統(tǒng)「買一張明天上午8點左右到上海的高鐵票」；而不是「打開XXapp，買一張明天上午8點左右到上海的高鐵票」。

△?iOS 14 畫中畫

磁貼設計讓用戶在桌面上就可以查閱新聞、郵件。讓用戶不打開app就可以享受服務，iOS 14的畫中畫功能，用戶在桌面就可以觀看視頻。他倆的共同點就是弱化APP的定位，桌面不再僅僅是APP的入口，用戶也不需要在APP里才能享受服務。或許在不久的將來，場景式交互成熟，手機可以根據(jù)不同的場景給用戶切換不同的服務，而不是讓用戶自己主動去打開一個個APP。

微軟，等一等你的用戶

磁貼是微軟針對現(xiàn)有交互模式做的一次大膽的改革，提出了很多新的理念。在現(xiàn)有的話語體系中，我們一直被教育創(chuàng)新是正確的。我們好像忘了創(chuàng)新意味著對現(xiàn)有模式的顛覆，改革是需要支付成本的。那么誰來支付成本？微軟愿意投入大量的資源去研發(fā)一套新的設計語言，有沒有問過他的用戶是否愿意支付學習成本來適應這套新的設計語言？

△?從開始菜單到開始桌面

Windows 7 之前的開始菜單位于桌面左下角，空間很小，找個應用還要翻來翻去。Windows 8把開始菜單改成了開始桌面，start menu變成了start screen，讓用戶可以更快的找到應用。但是長久以來的操作習慣，讓用戶離不開開始菜單。微軟在第二年又拿回開始菜單了。

創(chuàng)新是必要的，也是值得鼓勵的。但是創(chuàng)新必須發(fā)生在合適的時間節(jié)點并且配輔以正確的執(zhí)行手段。太過于超前和激進，先鋒很容易成了先烈。

歡迎關注作者的微信公眾號：「王M爭」