微軟、谷歌、蘋果的設計語言分別有何優劣?

Modern UI 所擁護的Tile元素,在windows 10中加入了方塊式的旋轉效果,似乎從win8時代的完全去擬物風格稍稍妥協了;
而Material Design是以卡片為基本元素,強調卡片的深度與變換;
蘋果則大量採用模糊和毛玻璃來表現深度,並使用精細的圖標和清新的色彩。
微軟的Modern UI、谷歌的Material Design、以及蘋果從iOS7後奉行的設計風格,這三種設計語言分別有什麼優勢和劣勢呢?


長文多圖預警。

其實題目下的描述關鍵字抓得不錯,我在此將更細緻地分析下三個平台的設計。
本文針對的系統版本分別為 Windows 10 (Modern UI)、Android L (Material Design)、Mac OS X Yosemite 及 iOS 8。
我將用儘可能通俗的語言來描述,希望不是 UI 設計師的朋友們也能看懂,並喜歡上這個有趣的職業。好了,讓我們開始罷~

一、Windows 10:Modern UI 真的是最好的選擇嗎?

在談界面之前,先要說明 Win 10 會支持 PC、平板、手機以及 Xbox One。系統還能夠自動識別設備的類型,傳統 PC 或觸屏設備,並自動對界面進行相應的調整,以方便鍵鼠或觸控操作。
這是非常重要的一個點,而我認為 Win 10 的最大價值不是設計的改變,而是改變了微軟家全設備的互聯體驗,也彰顯其磅礴的野心。你軟體用得爽嗎?遊戲玩得嗨嗎?我可以讓你又爽又嗨~

(支持全設備,微軟家大大滴)

了解了這個大前提,我們來說下更細節的,關於 Modern UI 的磁貼。
要想全設備的軟體體驗打通,就必須要有特殊的元素成為系統的招牌,並且它能貫穿全設備,對設備尺寸、輸入方式的兼容性要好,而這就是磁貼的任務了。並且磁貼還能夠非常方便的直接展示信息,比如天氣 App 可以直接顯示具體天氣信息,而不需要再打開查看。
另外,磁貼的設計也符合微軟整體的設計語言,那就是方方正正,好像上面 Windows 的 LOGO。

(磁貼設計)

然後我想說個有趣的東西,不知有多少設計師聽過這個:Universal Windows Platform (UWP) App。基於 Modern UI 設計風格的 App 叫 Universal Windows App,就是運行在這個 UWP 上的。UWP 可以運行於手機、PC或其他設備上,以此來實現一次開發,App 跨設備運行。當然,你也可以簡單理解為 Material Design 和 Android 的關係。

但顯然 Modern UI 的設計風格並沒有打動太多人。整個平台下的 App 質量和數量更是沒辦法與 Android 和 iOS 相抗衡的。
不能怪各家廠商們,因為 Win 8 / Win Phone 時的這玩意兒真的沒有讓我們想去這個平台發展的衝動。單調的背景,充斥著文字的枯燥的圖形界面,還有市場佔有率低等各種大問題。我覺得這也是導致三家在今天,移動端發展差距越來越大的一個重要因素。(當然,Win 10 在視覺上已優化了許多)

(Win Phone 時單調的背景和界面,都在冷冰冰地拒絕人們)

最後為 Modern UI 做下總結吧。
它絕對不是最好看的,但是是結合了歷史與未來最適合當下微軟的設計。如果順利的話,將來我們對微軟產品的學習成本將大幅降低,低至你會認為所有的計算機界面都該如此,這就是最自然,最真實的體驗。

Modern UI 最大優點:一套軟體系統,全設備打通,媽媽再也不用擔心我玩不轉。
Modern UI 最大缺點:相比另兩家顏值較低,我只想說一句請繼續治療。

二、Android L:在二次元里描繪三次元的 Material Design!

與微軟的 Modern UI 一樣,Material Design 也瞄準了跨設備的設計。但它更多對移動端的觸控體驗做文章,要說鍵鼠搭配工作,可能還有很大要優化的地方。因此這兒暫且只談手機、平板等移動設備的體驗。

(Android 的跨設備體驗)

Material Design 的核心設計思想是把物理世界的體驗帶進屏幕。

· 空間
提出z軸的概念,深度不僅僅是裝飾。利用z軸的深度,更好的打造空間的感覺,並且使界面元素層級鮮明,便於理解、使用整個軟體。

(通過引出z軸來打造界面的空間概念,將二維設計規範到三維)

· 動效
動畫也要貼近真實世界。物理世界中的運動和變化都是有加速和減速過程的,忽然開始、忽然停止的勻速動畫顯得機械而不真實。
比較典型的案例有:按鈕的按下效果會有「觸控漣漪」、點擊漢堡菜單圖標會優雅的變成返回圖標、優雅的轉場效果等。
具體有興趣的朋友可以看這:響應式交互 - Material Design 中文版
這些動效一方面可以加深設計理念,另一方面可以起到很好的過渡和反饋作用。

· 卡片/紙片
卡片也是 Material Design 非常大的一個亮點。它解決了很多內容不一,雜亂顯示的問題。通過一張張卡片將內容有序地整理在卡片內,以達到簡潔乾淨的視覺效果。另外,這種卡片式的設計對響應式處理也非常容易,並且視覺上也很自然。在這就能體現 Android 對多尺寸設備設計優化的深厚功底。

(卡片與紙片的設計,更好地規划了對內容的設計)

另外還有一點,Material Design 非常注重版式和色彩設計。版面更像傳統的版面設計,擁有嚴謹的柵格系統,而色彩也經常搭配了非常理性的對比色,但總覺得「沒錯,卻缺少人情味兒」。還有就是高明度高純度的顏色看久了眼睛非常容易疲勞。

(理性的色彩搭配)

關於 Android Wear。整體視覺與 Android L 非常統一,若搭配使用體驗應該不錯。(我未體驗過,在此不多說了。不過我確認可以說一點:它比國內任何一家智能手錶廠商的軟體設計要好得多得多得多!)

(Android Wear)

Material Design 最大優點:新穎的設計理念,優秀的多尺寸適應,還有精細的設計規範。
Material Design 最大缺點:理性的版式、色彩設計挑戰著人的情感。

三、iOS 7 / 8:基情四色。

扁平 VS 擬物??
一般認為扁平化設計更簡約,更能聚焦內容。
這是對的,但視覺扁平只是最淺顯的系統表現層的變化。其實更大的變化是整個系統的框架結構。比如加入控制中心,豐富了通知中心、流暢的交互動效、Siri更加智能等。請記住這些,這些才是 iOS 7 改版最大的價值所在。
扁平化設計只是手段,絕不是目標。我舉個極端點的例子吧:如果人能不需要任何其他輔助媒介,就能直接獲取信息,那麼別說扁平化設計,就連整個系統都會不需要。系統的建立也好,設計的表現也好,都是為了讓人更好的獲取信息、解決問題。
所以千萬別本末倒置了。

(為內容服務的設計。去掉冗餘的設計元素,比如漸變、陰影等,讓人更專註內容。另外將狀態欄與地址欄打通,Tool Bar 瀏覽時消失,則是在節省空間以展示更多內容。)

理解了扁平化的重心,我們可以來談談關於 iOS 7 的「基佬色」了。其實我這個「基佬色」的說法並非貶義。與上面的 Material Design 的色彩不同,蘋果在設置這些顏色的時候更加巧妙。
首先蘋果鼓勵 App 選擇一個顏色作為品牌色,貫穿整個 App。其次,iOS 7 系統的按鈕多為細線圖標按鈕、無邊框的文字按鈕(這兩類按鈕多出現在 Tool Bar 或 Navigation Bar 上),另外較多出現的是描邊的「幽靈按鈕」,而重顏色的一整塊按鈕相對用得很少。感覺沒什麼,其實這點很重要。它不會讓顏色過重,而是不被察覺地隱藏在界面中,通過顏色簡化了 UI。這也能體現 iOS 7 以內容為核心的設計理念。

(通過顏色來建立 App 形象,也讓按鈕簡單更簡單)

iOS 7 更新也挺長時間了,相信這個風格已經被大家接受,國內各家 Android Rom 從淺至深的模仿可見一斑。在這我也不多談了,最後有必要說下另一個重點,「毛玻璃」效果。
當然,這也不是為了做效果而做的效果。如 Material Design 提出的z軸的設計概念,「毛玻璃」其實也是從z軸維度出發的設計,令界面元素更有層級。各種 Bars 常用它製造出覆蓋在內容之上的感覺,當然還有其他各種臨時視圖(例如彈窗)。

(一時間風靡全球的「毛玻璃」效果)

而且你知道比較有趣的是什麼。我前段時間看到了 Ive 在設計 iMac(問世於1998年的台式電腦)時的這段描述:「我們想要傳遞一種感覺,就是計算機能夠根據我們的需求而改變,就像變色龍那樣。」「這就是我們喜歡半透明的原因。雖然有固定的顏色,卻又不呆板,可以一眼看到裡面,有種調皮的感覺。」
哈哈,這也算是「毛玻璃」效果的另一個優點:有趣。(真調皮~)

(1998年5月發布的 iMac,最大的亮點是擁有半透明和圓潤外形的機身)

iOS 7 最大優點:相較前兩個廠商設計更具情感,也是最能被廣泛受用的。
iOS 7 最大缺點:保守,反應慢半拍。

四、番外:蘋果大家族,Mac OS 與 iOS 與 Watch OS 的聯袂演出!(CarPlay是什麼能吃嗎)

關於這個番外,我有個非常有趣的東西先推薦給大家,美劇《摩登家庭》第6季的第16集。本集全集用蘋果設備拍攝,比如 Macbook、iPhone、iPad(可惜沒趕上 Apple Watch)。

(大膽的拍攝創意!)

軟體的跨平台跨設備運行在今天是個已成的格局,上面三大廠商無一不在為此努力,並且已見成效。Windows 和 Android 的做法是使用一個系統,全設備覆蓋。它能達到較高的體驗一致性,令人們切換其他設備上手更容易。但有個缺點,就是鍵鼠與觸控的切換工作還不能令人滿意。
Win 10 可能在今年表現會更好,但依舊有很多問題。最大的擔心就是 Universal Windows App 與原桌面系統的軟體會衝突。比如我裝了 Win 版的 QQ,又裝了 UWP 版本的 QQ,這兩個版本的軟體將在系統上同時被裝上,這簡直就像穿了兩條內褲一樣奇怪。而當今大部分 PC 還是不支持鍵鼠切換觸控,這也就意味著很多 PC 上的 UWP App 非常雞肋,因為人們很少使用它,想想當初對 Win 8 初始頁面的厭惡吧。另外,視覺設計上的巨大差異,也令人無法直視。我們能看到微軟在為此努力,與 Win 8 相比新版本好了許多,但可惜的是它依舊還是個起點。(當然微軟的 office 軟體套裝除外。那傢伙,幾十年的積累可不是開玩笑的~)

(Universal Windows App 的界面元素較大,使用觸控方式工作。上面的界面和下方的 Windows 系統圖標產生明顯對比。App 上的一個返回按鈕甚至都比下方的軟體圖標要大,體驗合理,畫面詭異。)

而蘋果與他們不同,蘋果為不同的設備新建一套操作系統,針對不同的設備有更多不同的特徵存在,它多在設計(交互與視覺)上達到統一。因此如果你想開發一款軟體,你無法只開發一次而在蘋果的全設備運行,你必須為不同的系統做不同的開發。雖然對開發人員工作量更大,但我認為就當下而言蘋果家族在多設備同步相應上做得最好。

(蘋果大家族,左起分別為:Apple Watch、iPhone、iPad、Macbook、iMac,對應的操作系統分別為 Watch OS、iOS、iOS、Mac OS、Mac OS)

蘋果基本上是依靠 iCloud 來實現設備間的信息同步的。如果你是蘋果的用戶,你肯定會少不了創建一個 Apple ID,就這樣,你進入了蘋果的圈~

(異常便捷的 iCloud)

你可以打給我的 iPhone 電話,然後我的 iPhone 和工作中的 iMac 都會響起來。我極有可能使用 iMac 接聽這通電話,因為這樣我就不需要停下手上的工作,而一邊舉著手機一邊用電腦。另外,FaceTime 真的是個不錯的東西,可惜國內似乎大家並不習慣用它。如果你有蘋果的設備的話,真心推薦你和你的親朋們使用它。效果正如《摩登家庭》拍攝的那樣,它真的非常好用!
當然,我還用 Safari 來上網。其實我以前一直用 Chrome,直到 iOS 8 和 Mac OS X Yosemite 的更新,然後我嘗試體驗了下,嗚,真的離不開了。我在家,正用我的 Macbook Pro 上網,不用做任何操作,iCloud 自動會將當前打開的標籤同步到網路。也許突然有事我出門了,我只需要將筆記本合上(Macbook 不需要經常關機,合上它就行)。然後我在外,只需要打開 iPhone 上的 Safari,就能找到之前用筆記本在看的網頁。我甚至還能看到昨晚用 iPad 看到一半的視頻:)
當然,還有很多同步的美事~比如我可以用我的 iPhone 查看要緊的郵件,其他郵件我也許會到公司了用電腦慢慢查看。白天我在 iMac 上新建了一條備忘錄記得買什麼什麼菜。下班到了菜場,打開手機備忘錄查看就行。還有很多很多例子。自然、省心的多設備同步與相應正在改變我們的生活。

(蘋果自帶的瀏覽器 Safari 越做越好,無憂的同步更是我用它的理由)

另外,最新加入大家族的 Apple Watch,擔當起了減輕手機任務的角色。有些朋友可能經常被手機 App 的各種推送煩惱,有了 Apple Watch,雖然它還會煩你,但不至於一定要喚醒手機查看。收到推送,手錶給你反饋(優秀的震動反饋,像有人碰下你的手),你只需要抬起手看下錶,不感興趣,就放下你的手。就這樣,你對一條信息的處理就完成了。Apple Watch 還有更多任務可以為你和你的手機分擔,並且它會越來越擅長這些。它成了這個大家族的一員,但作為新成員,它的一些特性註定了不會成為像 iPhone 那樣大眾消費的產品。我喜歡它,但我不會買它。

(有待考驗的新成員 Apple Watch)

最後說下 CarPlay。它顯然是個大坑,比手錶大得多的坑,它的出發點是對的,可惜是個坑。首先,喬布斯理想的軟體和硬體應該是渾然一體的,iPhone 和 iPad 上就該運行 iOS 系統,其他廠商的設備,對不起不管你歷史多悠久硬體有多好,都不允許運行我們的 iOS。硬體和軟體應該是一體的,就像你的身體和你的靈魂一樣,你不能將你的靈魂賣給其他人!
CarPlay 顯然違背了這個原則,它作為蘋果開發的操作系統卻將運行於其他汽車廠商的汽車中。不知泉下有知的喬布斯先生會怎樣,我反正為蘋果捏著一把汗。至於蘋果會自己造車是另外一回事,現在苗頭有,但具體信息在下完全不知,就不說下去了。
CarPlay 是為了讓蘋果的影響力更廣,設備覆蓋面也更廣,駕駛人的通訊、軟體體驗更好,這本是應運而生的。但這坑的開始,著實讓人憂慮......

五、總結下三大平台最重要的趨同的點吧。

1. 全設備全平台同步與響應
在 [第四部分,番外] 說得比較詳細了。在這講下對我們軟體開發者有什麼啟發。
今天,雲同步已經不是什麼新穎的概念了。如果需要加入,我們必須讓同步這個功能作為基礎功能優化得非常好。優秀的比如 Microsoft Office 、Wunderlist、Evernote 等,國內比如百度雲同步盤。
但就是這個基礎功能,有很多軟體做得很糟糕。比如有道雲筆記的 Mac 版和 iOS 版,經常出現同步衝突、同步不了、離線不了等問題。QQ 也會是,電腦上發的聊天記錄,到手機里查看卻丟失了一截。
因此我希望諸位對各平台各設備都能重視,要麼不做,做了就做好。

(Wunderlist 全平台覆蓋。優秀的軟體設計,優秀的同步處理,令我離不開它)

2. 趨同的軟體界面設計
· 為內容服務的設計理念
· 豐富的色彩設計
· 模擬物理世界 / 自然的動效

3. 探索新的交互方式
· 語音
為什麼今天我還提語音呢,是因為語音真的是當下最重要並且最能泛用的人機交互方式,並且它尚不能令人滿意。
我理想的語音聲音,必須和真人一樣,而不是一字一頓地「念」出來,她能夠有語氣地「講」出來。當然現在已經好了很多,尤其是微軟家的 Cortana,簡直有愛了~但還是很明顯地能感受到她是機器,理想的是,我只聽她的聲音,是分辨不出她是機器的。
我願望的語音機器人,是我們無時不刻在與她對話,並且樂於與她對話的。因為我們人類之間就在不停對話。對話,是最重要的。
當下,語音識別已經不是大問題,最大的問題是怎麼處理我們發出的語音信息,然後回復我們什麼。也就是涉及軟體智能方面的事,這點讓我們在 [第六部分,人工智慧] 再慢慢談吧。

(後起之秀,Cortana)

· 個人身份識別:指紋、面部識別、虹膜識別、聲紋識別等
iPhone 加入指紋識別後,開始讓人們感覺輸密碼是件很繁瑣的事。是的,這些科技廣泛應用後必將改變我們的生活。
也許將來乘坐地鐵不需要公交卡。入站,我不需要掏公交卡也不需要付錢,什麼事都不用做。往前走的過程中面部自動被識別。它能知道我是誰,然後安心讓我通過。到站後出去,我也什麼都不需要做,只要徑直往出口走就行。那兒也有面部識別的機器,它知道我是剛入站的人,並且是個可放行的人。
也許將來下班到家,再也不需要從包里翻出鑰匙,選出家門的那把,對準鑰匙口,然後插♂入。我要做的只是把手指放到指紋識別的地方,又或許是盯著「虹膜識別」的識別區看。2秒,啊不,可能不需要1秒就能進家門了。
到了這個時候,你再回想現今,可能會覺得現在掏公交卡、掏鑰匙都是件無比愚蠢又折騰人的事。(其實是,我現在就這麼覺得-_-)

(我需要做的只是走過去,看一眼識別區。「哐」,門為我而開。)

· 新的輸入方式,代表:Force Touch
可能很多人知道在 Apple Watch 上輕按和重重按下屏幕會有不同的效果,這就是 Force Touch。但其實 Force Touch 最大的價值不在「重按」與「輕按」的區別,而是能感應按壓力度。實際比如可以做到這樣的功能:
視頻播放的時候,以前我們需要點擊畫面,然後拖動進度條來實現快進。但現在可以直接對播放中的畫面進行【按壓】,根據按壓力度,越輕,快進的越慢,越重,快進的越快。這點在新 Macbook 上已經實現(通過觸控板上的 Force Touch)。
再比如賽車遊戲。也許可以在屏幕右下角放個「剎車」按鈕。輕輕按下,就是現實世界的輕輕踩下剎車,可以實現「點剎」來漂移。慢慢地用力按下,就是慢慢地踩剎車,也就能實現慢慢地剎住車。再或者你直接使勁按下,就是快速剎住汽車。這樣,就能將物理世界的體驗帶入觸控屏幕啦。
對開發者而言這是個機會和挑戰,開啟你的腦洞吧~

(Force Touch 可以感知按壓力度)

· AR 與 VR
AR 全稱 Augmented Reality,是指增強現實技術。簡而言之就是在物理世界的基礎上,額外增加可感知的信息。現階段 AR 技術在生活中多被用來做廣告營銷用。
案例:Smart Highway By Roosegaarde

(雖然是概念設計,但可以通過 AR 技術實現可視化部分的功能)

案例:Microsoft Hololens By Microsoft

(這不是夢,這是真的)

VR 全稱 Virtual Reality,是指虛擬現實技術。與 AR 最大的不同是必須佩戴硬體使體驗者完全沉浸在虛擬構造的世界中。
案例:Project Morpheus By Sony、Oculus Rift By Oculus

(帶你完全進入虛擬世界,探索開發者創造的一切!)

技術在不斷發展,作為設計師我們應該開啟我們無限的腦洞,充分利用這些技術。未來無限好啊!

六、番外2:人工智慧才是最屌的(杰倫臉)

嗯,最屌的來了~
(不過個人知識有限,內容不會涉及技術方面的討論。)

首先希望大家了解一點,人工智慧並非就是科幻片里未來的機器人。機器人只是「身體」,而人工智慧指代的是大腦。這具「身體」可以是「人形」,也可以是機械手,還可以是一部手機。
事實是,人工智慧已經處處存在於我們的生活中。比如電商網站為你推薦商品、地圖軟體給你導航、人們和 Siri 聊天等等,都是人工智慧,只是它並不那麼強大,還是「弱人工智慧」。

另一方面,很多科學家們相信會在幾十年內出現「強人工智慧」,也就是和人類「處於同一水平的智能」。但這樣描述其實並不準確,因為電腦比人具有很多優勢,比如持久性、可編輯性等。而且就「處理速度」而言,現在的電腦已經超過了人腦的速度。當下世界電腦處理速度排名第一的,是令我們自豪的「天河二號」,它就坐落在廣州,佔地720平方米,功耗達到24兆瓦,它真的非常巨大!ps,「天河一號」就距離前段時間天津爆炸現場的幾千米內。
但根據摩爾定律(認為全世界的電腦運算能力每兩年翻一倍,且有一定的歷史數據支持)推測,我們到了2025年就能花1000美元買到可以和人腦運算速度抗衡的電腦了。
至少在這方面,我們已經夠及強人工智慧了,而且在十年後,我們很可能就能以低廉的價格買到能夠支持強人工智慧的電腦硬體。

(運行速度排名世界第一的天河二號。我國擁有全球 Top500 的超級計算機數量位居全球第二。第一的美國擁有半數以上)

當然,強人工智慧的出現意味著什麼,將給人類帶來什麼,我實在談不了,在這也就此打住,有興趣的朋友可以自己查閱更多文章。我們還是先談談現在,蘋果、微軟、谷歌這三家巨頭在這方面做了什麼。

· 蘋果:Siri、Proactive Assistant
Siri 可謂開創了語音助手的先河。但這位先驅一直飽受爭議,並且被人調侃。我想它最大的作用就是指明了數字語音助手的這條路,讓微軟在今天通過 Cortana 大顯身手了一把......嗯,目前為止它的最大貢獻就是這了......
但是隨著 iOS 9 的發布,蘋果推出了 Proactive Assistant 功能。它將整合 Siri 和 Spotlight,讓查詢和搜索更加智能精確。並且它將記錄用戶行為到設備,以此主動預判用戶意圖。
而 Proactive Assistant 的真實表現會怎樣,還是等待今年秋天蘋果的正式版推送吧。

(iOS 9 上終於更智能的 Siri)

· 微軟:Cortana
Cortana 的成功絕不是僥倖,而是有微軟常年累計的技術在,有種厚積薄發的味道。因為微軟本身就非常重視科研,而且在語音合成上也饒有建樹,這也是為什麼我們會覺得 Cortana 聲音非常自然的原因。
Cortana 相比現在的 Siri 智能許多。它除了像 Siri 那樣能幫我們完成諸如查詢天氣、發簡訊、創建任務等基礎工作,還在一定程度上比 Siri 更能與我們交談。經常調侃的方式比如讓它「唱歌」,和它玩成語接龍等,並且它與我們對話的語氣不那麼機器,更加友好調皮,卻不惹人生氣(這是很重要的)。
並且 Cortana 還將集成在 Win 10 中,讓 PC 也能更好地使用語音助手。就宣傳片來看,它做得實用又方便。我們能感受到蘋果和微軟都在企圖將用戶行為通過語音助手來實現,讓語音助手擔當私人助理,打通人與機器的交互。

(Win 10 上的 Cortana)

· 谷歌:Google Now、無人駕駛汽車、對 DeepMind、DNNresearch 的收購
最神的谷歌來了。Google Now 早已實現許多今秋 iOS 9 上 Siri 的新功能。谷歌家也和微軟家一樣,重視研究,比如眾所周知的 Google X,還有今年對 DeepMind、DNNresearch 的收購。而 Google Now 則利用 Google 積澱已久的工程技術和語意理解處理技術以及語義數據集,讓 Google Now 的服務更精準,成為三家之最。另外,Android 平台的大面積覆蓋也讓谷歌獲得了用戶數據的寬度和維度。
在大數據和人工智慧方面,谷歌似乎已經領先其他兩家了。當然贏得並不是全方位的,可能各家都會有個優勢在:
Google Now:擁有一流的技術積累和一流的產品實現,令查詢與搜索最為精確,進入人們生活;
Cortana:擁有最強的科研水平,在人工智慧交流上領先,並且能夠依託 Windows 系統實現大面積覆蓋;
Siri:你們都太屌了,我還是做個安靜的小秘書吧......

(Google Now)

最後要提下谷歌無人駕駛汽車。這貨也是集各種「弱人工智慧」於一身的大作,這些弱人工智慧能夠感知周圍環境並作出反應。
谷歌對人工智慧的大力投入,以及對產品的把控,令我感覺若干年後谷歌是否會代替今天蘋果的位置。因為人工智慧,真的是未來科技之所向。(看看下面這個可愛的傢伙吧~)

(谷歌無人駕駛汽車)

圖片來自網路,侵權刪。

-----------------------------------------

歡迎關注我的專欄:UIcircle - 知乎專欄

我還開了同名微信公眾號「UIcircle」,會同步推送文章,歡迎訂閱哦 :)


我真心希望,不懂Modern UI或者Metro UI的iOS或者Android用戶可以不要來強答Modern/Metro UI的優劣。連我特么用了這麼多年Metro和Modern我都不敢瞎嗶嗶,你們拿著一堆陳芝麻爛穀子瞎答啥啊。


另外看了某答案,我覺得不懂Android Design和Material Design的iOS用戶/設計師也可以不要強行評價Android Design和Material Design。

另外就我個人角度而言,Modern UI還是個沒成型的設計,與另兩家幾乎不具備可比性,優劣全看開發者自己的設計功底;而Material在諸多地方顯著強於iOS。

換言之,Modern會用的才能用得能看(或者很好看),iOS和Material就算不會用也一般不會太糟,而且必須要學會克服掉Modern現在一些缺點。過去的Modern很難應付複雜頁面(如8和8.1),而新Modern(從10開始)則極好地補全了過去這一劣勢。

重要的事兒要說三遍:
Modern/Metro UI最開始就有的一個顯著缺陷是,微軟當時還不知道該如何讓Modern UI優雅地展示複雜信息。
Modern/Metro UI最開始就有的一個顯著缺陷是,微軟當時還不知道該如何讓Modern UI優雅地展示複雜信息。
Modern/Metro UI最開始就有的一個顯著缺陷是,微軟當時還不知道該如何讓Modern UI優雅地展示複雜信息。

這是Zune HD當時應用程序的界面:

當時Zune Team為Zune設計的新郵箱應用。深刻影響了後來的WP郵箱。不過你也能看出這個應用界面非常簡陋,無法承載較多信息。

這是Zune當時的天氣應用。顯示的不錯對吧……那是因為天氣信息本來就很簡單……

這是Zune當時的facebook。你已經可以看出這種排版帶來的局促感了。甚至還有兩層額頭(頂部tab,和緊挨著它的pivot)。。。

而到了WP7,情況是這樣的:

你可以看到,雖然頁的概念被擴展了,但是每個屏幕(頁)所能顯示的信息依然不多。

有兩個原因造成了上述情況:
1.當時大家都不知道該怎樣用Metro UI去承載複雜信息,包括微軟
2.手機上顯示複雜信息,在當時本來也不是很必要


於是到了Windows 8的時候,情況也比較相似。

我們可以對比下Windows 8時代的Modern應用常見設計:橫向滾動。以此為例而已。

這一設計已經被證明是不科學/反直覺的了,最重要的原因就是這種設計不利於閱讀。因為長久以來我們已經習慣了橫排的文字(就像我們現在讀的這些文字一樣)。在橫排時,橫向滾動的體驗是很糟糕的。因為它會製造一種「視野受限」的感覺。

如果你不能理解我說的話,那麼請用手遮住屏幕,然後留出一道手指縫,從手指縫來閱讀本段文字。在你不斷移動手指的過程中……你就明白我所說的「視野受限感」是怎樣的體驗了……

而這項設計在10中被基本拋棄了。最直觀的對比就是Windows 8版新聞,和Windows 10版新聞應用。可以說,後者的提高不是一點半點。

首先在Windows 10版新聞應用中,橫向滾動被大幅弱化——尤其是在閱讀文字時。如圖:

這個界面里其實有橫向和縱向兩種滾動方式。對於圖片,微軟選擇的是橫向滾動,其暗示的意義在於切換頁面 ,而對於右側的文字,微軟選擇的是縱向滾動,其暗示的意義是顯示餘下頁面。


這樣一來,關於橫向、縱向滾動的操作邏輯就明晰了。我們可以在其它頁面里得到印證, 比如首頁:

在這個頁面里,左右滑動可以切換Interest Section頁面(即切換All Top Stories US World這些),而上下滾動則是顯示當前頁沒顯示全的內容。

正文頁面也是如此的操作邏輯。左右滑動切換文章,上下滑動顯示剩餘內容。

在Windows 8的新聞應用里則不行。左右滑動是顯示下一頁內容,上下滑動完全被忽略了……顯示的內容、展示的信息量也遠遠不如10的新聞應用豐富。(如果你沒升級win10的話,現在還可以看看你的新聞應用。。。)

所以Windows 10的新設計毫無疑問增強了Modern UI對複雜信息的承載能力。


==


那麼微軟為什麼要這麼做?因為微軟希望把新界面推廣到平台的所有應用。不僅僅是新界面,其最終目的是希望把新技術(尤其是Windows Runtime)狠狠地推出去。


首先在Windows 10上微軟希望基於桌面用戶體驗,找到一套同樣適合觸控的界面解決方案。並配套以Metro/Modern的視覺風格。這和Windows 8的思路可以說是完全相反的。因而產生的結果也完全不同。在大多數新界面里,你會發現雖然視覺風格變化了,但是鍵鼠操作的體驗並沒有下降。滑鼠的移動距離也不再像8時那麼誇張。所有界面首先都是滑鼠友好的。

然後在這個基礎上,進行認真的圖標設計和排版考量,實現對觸控和小屏幕的優化。依然拿新聞應用來說,這個套界面對於平板也是一樣適用的。因為它的圖標、按鈕大小適中,不論鍵鼠還是觸屏都可以用的很舒服。

那麼到了手機上,由於屏幕尺寸差異實在是太大,就不得不進行重新排版了。好在微軟推出了無縫的UI reflow方案,我們可以在電腦上進行手機尺寸屏幕的模擬。

這是平板模式時的界面。注意標題欄被自動隱藏了。頭條部分被凸顯,有特大幅圖片。新聞列表編輯按鈕和搜索欄被默認顯示了。同時Drawer菜單以縮略圖形式顯示。頭條下方的圖片新聞則是卡片式展示。注意這裡的圖片新聞是四欄的。

這是顯示空間十分充足時的應用界面。因為是窗口化的,所以顯示了標題欄。然後頭條新聞和下面的卡片式圖片新聞都變成了雙欄設計。

這是非常近似手機尺寸的News應用界面。界面變化很明顯。首先新聞列表編輯按鈕被完全隱藏到了省略號菜單中。這是因為這個功能不是很常用,所以乾脆隱藏起來,緩解屏幕空間不足。然後搜索欄也縮略成了單一的搜索按鈕,同樣是為了節約屏幕空間。

而目前的手機版是怎樣的呢?還很不成熟,不過也可以稍微介紹一些。
首先為了繼續節約屏幕空間,Drawer菜單的縮略圖也不再默認顯示了。漢堡按鈕不再單獨佔有一欄。而上下左右滑動的切換邏輯仍保持與PC一致。為了便於手機單手操作,編輯按鈕被移到了屏幕底部。


不得不說,在一套UI體系下滿足非移動端和移動端的需求,這是一件很難的事。但你可以發現,經過這麼多年的努力,微軟似乎很快就要做到了。這是相當厲害的成就。

微軟正在逐漸扭轉外界「桌面移動UI水火不可相容」的舊觀念。

==
TL;DR版:新Modern UI解決了大量舊Modern UI的棘手重要問題,而且只新帶來了一點點相對而言很容易解決的小問題。在未來兩到三年左右應該就可以達到真正比較成熟的狀態了。

Modern之路,道阻且長!


作為用過iOS,用過WP,用過Win8到10的,覺得該答一下這個問題。(MD不太了解,安卓2.3之後用的就少了)鑒於其它人對iOS和安卓都給出了很高的評價,那就主要談WP和Win了。
實際上,就算不吹,以手機UI的角度看,WP都不知道高到哪裡去了。
首先,WP的菜單位置,在屏幕下方。這意味著什麼呢?絕大多數時候,都可以單手使用絕大多數的功能。這點比把返回放在左上角的iOS不知道好多少倍,如果沒有返回手勢在下覺得iOS根本用不下去。
第二,Hub,就是左右側滑。很多人覺得這東西不好,但是實際上只有用過才知道。左右滑動切換意味著什麼?可以少做一個層級,少一個層級的意義是很巨大的。打個比方我給你做個菜譜軟體,按照其它系統的邏輯得先點山東菜,然後突然打算看看川菜就要先返回,再點川菜。然而在hub里,側滑就行了。這是個巨大的優勢。
然而可惜的是,按照目前的狀況來看,Win10Mobile里微軟要把這兩個都砍了,那就說說別的吧w
微軟的設計語言有一大好處:沒有圓角。
這時候一定有人要說喜歡圓角了。
問題是,在邊框相等的前提下,圓角形狀的可使用面積要直角小。
換句話說就是,直角形狀能更好地利用屏幕空間,或者讓字更大一點。這點意義很重大,特別是寸土寸金的手機屏幕。而且,圓角的繪製需要更多的系統資源。還一個問題出在觸控區域判定上,這也是為什麼iOS7拋棄了返回按鈕邊框的原因。(順便一提,WP的鍵盤是手機上用起來最舒服的)
第二:動態磁貼。很多人說這個功能沒什麼用,那是肯定的,這玩意被用來顯示(您今天還有一個價值888元的超值大禮包尚未領取)那絕對是毫無意義。但是拿它看天氣,收郵件,絕對是神器。和安卓的桌面天氣插件或者桌面郵件插件異曲同工,但是省資源而且體積更小。有人要說桌面上都是動態磁貼信息密度太大,但是真正用過的才會知道,動態磁貼是不會全屏同時翻轉過來的。
第三:簡單的動畫效果。個人一向是很反對iOS那種拖泥帶水的動畫效果的。(其實iOS7以前沒這麼嚴重)簡單來說,iOS7之後多了個毛病,一定要播放完一個動畫效果才能進行下一步操作。iOS3裡面可以解鎖動畫沒放完,順手切到第二屏,然而iOS7之後反而不行。相較之下,WP和安卓就沒有這個毛病。而且,更多的動畫會消耗更多的系統資源。
前面好幾個答主都提到Modern設計不適合顯示複雜信息。問題是,誰告訴你們Modern只有那個一塊一塊的版式的。


不得不說三家的設計語言整體趨勢是一致的,除了都是由擬物轉向扁平之外,還有一點很重要的是動效的進化。

(網圖侵權刪)

微軟

可能三家之中最讓人覺得沒有設計感的是微軟,那麼果真如此嗎?不是的,甚至可以說微軟的設計語言是三家中最有先鋒意識的。扁平化這股趨勢是微軟所帶領起來的,當然在此之前北歐也有一些扁平化的萌芽,但並不是針對UI這個領域。那麼來看現在它的影響有多大?大範圍的電腦界面上全新的設計語言對於整個設計領域的影響力是難以估量的,介由此而產生的在眾多設計分類別中扁平化設計的應用層出不窮,UI設計、網頁設計、甚至平面設計VI設計的行業審美趨勢都有了極大的變革,傳統的評價方式也相應的有了變化。
而在工業設計方面,微軟雖然沒有apple那麼嚴苛獨到的設計思維,但是自己的設計也是相當優秀的。

(網圖侵權刪)

蘋果

可以很明顯的了解到蘋果ios7之後的設計風格是受到扁平化的影響的,但是又沒有像微軟那樣的大膽激進,可以說是在扁平的基礎之上加入了一些獨特的風格,譬如毛玻璃,流暢美觀的動效,以及色彩的灰度關係。其實與安卓類似,ios上也有著一些潛在的層級關係,但並不是通過z軸和陰影來表現,而是顏色與模糊,也就是明暗與毛玻璃。而這種風格也被各個設計的分類別所接受,網頁、版式的設計等。
而且蘋果的工業設計與界面的設計能夠很自然流暢的交融在一起這是微軟和谷歌所無法企及的一點,畢竟蘋果有能力去控制這一切。

谷歌

安卓5.0之後的設計規範逐漸成熟,也是受到扁平化的影響,但是有沒有拘泥於單純的平面,通過平面與z軸的縱向關係來表達現實世界,既迎合了當下的主流審美觀念,又對現實世界的物理關係進行了合理的表達,可以說是三家中最有想像力的一種設計語言,而且自由度也是比較高的,被運用在插畫設計、平面設計各個領域也是很廣泛的。綜上呢,三家設計語言的大致走向的行業趨勢其實都是類似的,只不過在這種趨勢下大家又各自有自己的一些風格。


UI即User Interface(用戶界面)的簡稱。
UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。

視覺和操作邏輯其實可以分開的,視覺方面只要不是違反大多數人的審美,可以自由發揮,操作邏輯盡量在尊重原有系統操作邏輯的基礎加入自己的創新。

使用Modern UI的Windows Phone比較悲劇,我覺得這個鍋80%是Modern UI的。從小習慣了各種形狀交織GUI,曾經的諾基亞:

當我看到Modern UI滿世界方形的時候,時間長了我渾身難受。難道世界就只能是方的嗎?

Modern UI從視覺和操作邏輯上都變化太大,特別是操作邏輯給人和磁帖一樣飄忽起來的不穩定感。每當安裝新程序或是解析度變化的時候,應用圖標的位置就變化了。。。豈不蛋疼乎。。。

再上兩圖對比感受一下Modern UI的不合理之處吧 (PS:彈幕不是我發的..)

再看看Mac上的Launchpad:

反正我的表情是:

可能是微軟想突破但走了歪路,畢竟Windows7是那樣的完美了。
現在的Windows10儼然是一個妥協的產物了。。。Modern UI被收起來當起了花瓶。你可以提Windows10的平板模式,然而Windows平板那銷量。。。。 其實大多數人是去買PC的。

谷歌的Material Design就沒框的那麼死。然而谷歌的Material Design操作邏輯上並沒有做強制限制。因為Material Design是一套跨平台的設計語言。只強調了如何做好動畫過渡,讓使用者能更好的理解操作的含義。安卓系統上的app,大家還在為了是用底欄還的側欄還是頂部tabs撕逼中。。這其實也是谷歌的鍋,操作邏輯谷歌自己都飄忽不定的,自己家的Launcher都經常變來變去,更不提第三方。。再來看看Android TV:

這。。。。谷歌牛人很多其實是很任性的。。。 所以大家一起任性好了。。。

由於蘋果的在移動端的影響力,安卓app不會全部上Material Design的,但是Material Design是一套跨平台的設計語言,比如網頁的Design。

最大的開源ERP新版本的Odoo v9的截圖:

將來會有越來越多的網頁出現Material Design的身影。。

蘋果嘛。。。

蘋果的設計語言更多是一套操作邏輯。。
比如home鍵、側滑返回、list itme上滑動出刪除鍵等等。
iOS和OSX系統的操作邏輯很有一套的。。大家也比較自覺的遵守。。
換安卓,list itme的刪除方法可以是iOS那樣的,也可以是長按出刪除dialog的等等各種各樣。。。

視覺上只有大的方向,比如扁平化以及什麼才是蘋果的扁平化風格。。剩下的自由發揮。。
反正用iPhone沒有哪個app的UI讓我不爽的,我覺得倒不是因為蘋果就真的那麼優秀了,而是因為App Store的原因,對app的質量有良好的管控以及排名機制的大浪淘沙作用。。 另外,天天用著OSX這樣的系統的工程師設計師,審美水平普遍高點,做的產品也普遍好點。。 (:引戰了,逃。。。

總結:

Modern UI。不優秀。風格另類且略死板(和主流的在一起太違和就不能叫別樹一幟了)。容易限制設計師發揮。移動端沒有好的app也是該,微信支付寶的UI想照搬過去都覺得和系統風格太違和。當你上升到系統系統級別的設計語言的時候,從大多數人的第一直覺它就輸了,不大改那大方塊的主界面,WP永無翻身的可能。。。 其他系統用Modern UI風格只能小用,慎用。總結就是不堪大用。大多類Modern UI風格的電視盒子UI,主要功能塊位置其實比較搞定的。。 他們只是套了個殼的菜單而已。每個塊面積一般比Windows的Modern UI占屏幕比例大的多。。。

Material Design。風格鮮明。跨平台。從具體規範說明文檔到實現都是良好的支持。UI水平有限的安卓程序狗表示大愛。

蘋果。UI設計靈活。系統交互邏輯明確(這點很重要)。不會有安卓那樣的礙事的虛擬機按鍵(使用底欄不會擔心下巴問題),設備種類少,做設計的時候限制就少了很多。蘋果優秀的第三方app們,其實主要還是他們各自優秀的UI設計師用心的功勞。

不同的風格只是一個選項而已。不能用好的看自己的能力。
---------------------------------------------------------------------

以上的都是個人看法,希望能拋磚引玉。如果你要客觀的結論的話,上dribbble等知名的設計網站看看搜索結果都是啥就知道了。

從搜索結果的數量比例上看:

Modern UI就是一個戰鬥力不足5的渣渣(作品數量上太可憐了)
Material Design後起之秀,有立足之地,而且風格很鮮明,辨識度很高。
iOS 搜索結果最多,多到爛大街的水平。。


@可可蘇瑪 說的東西我也有同感,Metro UI 1.0 給我一種很強的視覺衝擊力,讓我對 MS 的態度有了變化(也就是說成了半個粉)。有點像一見鍾情。然而也正如他所說,這種 UI 很難承載複雜的邏輯和功能。隨著移動互聯網的發展,小而美的應用漸漸被大而全的應用取代,再抱守這種設計不放就很難跟上時代的步伐。

同時,Metro 1.0 有很多設計上的問題。譬如:

  • 手機版和PC版標準不統一(更深層次原因的是 API 的不統一,WinRT 到 Win10 才可以真正稱得上是跨平台);
  • PC 版的 AppBar 默認隱藏是一個很大的敗筆,可發現性完全為零啊;
  • 手機版的頁面導航非常依賴 Panorama、Pivot 等左右滑動的控制項,導致這兩個控制項被濫用嗎,缺乏新意的同時這兩個控制項的缺點因為無處不在而被成倍放大。

類似的問題還有很多,所以 Metro 1.0 不是一個非常系統的、考慮周全的規範

而 Metro 2.0 或者說 Modern 2.0 在設計之初的立足點就是跨平台,可以說這是第一次從全局的角度來考慮問題。需要兼顧4英寸到40英寸的屏幕,要兼顧鍵盤滑鼠、觸控板、觸筆、電容式觸摸屏、Xbox 手柄等多種輸入設備(主要矛盾是鍵盤滑鼠和觸摸)。我們發現,特立獨行的元素明顯少了,WP 上經典的大標題左右滑動成了歷史。

雖然如此, MS 固執地堅持了扁平到底的原則。iOS 有花哨而又各不相同的高斯模糊效果,MD 則大量使用飽和色、對比色以及Z軸和陰影。與之對比的是, Modern 2.0 什麼都沒有,只有線條以及黑白二色的背景。從我個人的角度來說,有時候顯得有點粗糙和單調,有些時候卻又顯得簡潔雅緻、帶著濃濃的深沉和莊重感。這種極致可算是拋棄 Metro 1.0 之後的一點剩餘的特色。

下面補充 可可蘇瑪 沒有發的手機上效果圖。可以發現橫置時的界面和 PC 採用了相同的設計(反過來說,PC 上窗口受限的設計參考了手機、小尺寸 ARM 平板)。而對各種尺寸窗口的適配,無論是手機應用還是桌面應用都是較少考慮的。這樣做可以保證無論窗口怎麼變化。內容和功能總是被合理地組織,而非一成不變地簡單拉伸。並且由此引申出了 PC 和手機的 Continuum 功能,模糊了設備的界限。要說這樣做的問題,那也不是沒有。在 PC 上,界面元素的尺寸略微偏大,可能會讓人有些不舒服。

①左下角的新聞帶有 LiveTiles,上面的即時推送引誘你點擊它

②常規持握時左側沒有導航欄

③橫置時的界面和平板一致

④上圖是帶有 status bar 的應用,橫置時同樣復用了 PC/平板的布局(注意只是復用了設計以及相關代碼,其實並不相同)。有趣的是橫置時 status bar 保持在原位,沒有重新定位到頂部,有點像蘋果 CarPlay 的設計。我很高興這個設計被保留了下來。


我只說一下Modern UI。Modern UI說到底是「畫冊/雜誌彩頁」風格,這個相對傳統的「UI Chrome + Rich Control + Data View」式桌面GUI軟體風格是個巨大的背離。這有幾個問題

  1. 由於過度弱化UI Chrome和Control,使得很多需要Rich Control來密集交互的軟體很難用Modern UI來做。比如全功能的字處理軟體、電子表格、圖像處理軟體、CAD/CAM類軟體。結果就是,幾乎所有的Modern UI軟體都給人功能貧乏的感覺。Mac那邊就好很多,因為人家Desktop GUI仍然走UI Chrome + Rich Control + Data View的路數
  2. 「畫冊/雜誌彩頁」風格設計難度高,因為要求仔細考慮配色、(大面積)配圖、背景底紋、留空和字體大小設定。程序員一般很難靠自己就能設計出優質的Modern UI,其中設計出好的配圖/背景底紋是程序員最弱一項
  3. 「畫冊/雜誌彩頁」風格對於用戶來說也很陌生,有高冷感,很容易叫好不叫座(同時覺得好看和不好用),就像普通用戶逛美術展的感受一樣

用戶體驗來說吧。
安卓原生和蘋果各有千秋。
而微軟的非常丑,反人類。除了在知乎有人喜歡以外。銷量基本狠狠的打了知乎某些人的嘴臉。


微軟的設計語言還在完善中吧……乍一看炫酷,還是禁不起推敲,完全是沒把工作重心放在這裡。md目前相對完善了,apple的…雖然是果粉,但感覺md層級上好一點,apple色彩上好一點。


蘋果的風格像是妖艷的年輕女子,堪稱人間尤物,但最是禁不起歲月的洗禮。

谷歌的風格像是明媚的氣質美女,歲月會改變她,但風韻久存。

微軟的風格像是相貌平平的少女,在歲月開始動刀之前,她會給自己找一條新的出路。

審美的興衰是一件特別值得回味的事情。


你確定微軟有(統一的)設計語言?現在Win10下已經從Win8的兩種風格割裂成三種風格了(遺留的老舊風格完全沒改,win10隻做了一半,win8還剩了些殘留)……還好我的主力機是Mac,否則肯定逼瘋我。
拋開這些不說,Win10新引入的毛玻璃效果還是非常驚艷的,然而只有Notification Center和System Tray圖標點開後應用了這種風格。Start Menu這麼好的機會不適用什麼心態?


駁某個認為win10 uwp不適合鍵鼠操作的答案
1.uwp設計規範是考慮過鍵鼠和觸控兩種設計,控制項大小(返回鍵,tab等)比原win88.1小,比傳統桌面應用大,大小算適中,鍵鼠操作也能很舒服
2.標準的win10 uwp應用所有元素會根據系統dpi縮放,適應不同dpi,不同設備微軟會推薦不同的默認dpi(如v8p官方推薦125%),以優化顯示效果和操作


推薦閱讀:

作為一名交互設計師應該如何學習 Processing?
為什麼 Mac (OS X) 沒有剪切文件和右鍵新建文件功能?
從交互設計的角度為一座1000層的大樓設計電梯按鈕?

TAG:iOS | 設計 | 交互設計 | 用戶界面設計 | MaterialDesign |