本文主要是分析Google、微軟、蘋果設(shè)計(jì)規(guī)范的異同點(diǎn)，來(lái)看看這些公司對(duì)設(shè)計(jì)規(guī)范的不同要求。

google

material design 由來(lái)

從2011年10月19日安卓4.0冰淇淋三明治正式發(fā)布后，11月Android Market上提交審核的應(yīng)用程序數(shù)量達(dá)到50萬(wàn)。開發(fā)者可以任意上傳自己的應(yīng)用，而不必通過(guò)審核；開發(fā)者可以隨意按照自己的想法設(shè)計(jì)應(yīng)用，Google方面不予任何限制。

可以說(shuō)，Android一開始就是一片Google開辟的荒地，他允許每個(gè)人都可以隨意使用，結(jié)果是所有人都各行其是，讓這塊荒地亂糟糟的。

拉里·佩奇成為Google CEO之后，佩奇大膽改變? Google“以工程師為主導(dǎo)”的文化。

2011年，公司啟動(dòng)代號(hào)為“肯尼迪”的項(xiàng)目，召集公司里所有重要的設(shè)計(jì)師，重新設(shè)計(jì)Google里的每一項(xiàng)產(chǎn)品，尋找一種共同的設(shè)計(jì)語(yǔ)言。

Google的設(shè)計(jì)師們通過(guò)整合Google現(xiàn)有的技術(shù)和能力，再加上對(duì)跨設(shè)備界面與交互思考，結(jié)合卡片式設(shè)計(jì)，終于設(shè)計(jì)出在不同設(shè)備上界面和體驗(yàn)都相對(duì)統(tǒng)一的產(chǎn)品。而這種跨界的設(shè)計(jì)經(jīng)驗(yàn)，經(jīng)過(guò)兩年的努力，復(fù)用在一致飽受割裂、碎片化困擾的Android平臺(tái)上。

直到從Palm跳槽到Google擔(dān)任Android用戶體驗(yàn)副總裁的馬蒂亞斯·杜瓦迪（Matias Duarte）上任后，才真正提出設(shè)計(jì)指導(dǎo)。

Google I/O 2014上著重展示的Material Design，以非常高調(diào)的方式，宣布了Google Design的存在。不欣賞設(shè)計(jì)，對(duì)設(shè)計(jì)毫無(wú)感覺的Google已是昨日。

從Android到衍生的Android Wear、Auto和TV，Material Design貫穿其中，成為溝通不同平臺(tái)、設(shè)備的靈魂，讓用戶在不同平臺(tái)上也有連貫的體驗(yàn)。

為了維護(hù)這種一致性，Google甚至不允許第三方修改Android Wear、Auto和TV的界面以及交互，十分強(qiáng)勢(shì)?？梢钥闯鰉aterial design是旨在解決跨設(shè)備界面和體驗(yàn)的統(tǒng)一，讓Android設(shè)備的界面設(shè)計(jì)不在是割裂、碎片化。

material design 介紹

google是這樣介紹的material design的：

它是一種將優(yōu)秀設(shè)計(jì)的經(jīng)典原則與科技創(chuàng)新相結(jié)合的視覺語(yǔ)言；開發(fā)一個(gè)統(tǒng)一跨平臺(tái)，設(shè)備和輸入方法的用戶體驗(yàn)的單一底層系統(tǒng)；可擴(kuò)展Material的視覺語(yǔ)言，為創(chuàng)新和品牌調(diào)性提供靈活的基礎(chǔ)。

material design 四大設(shè)計(jì)原則

Material Design受物理世界及其材質(zhì)的啟發(fā)，包括它們?nèi)绾畏瓷涔饩€和投射陰影。材料表面重新想象紙張和油墨的介質(zhì)。

（1）大膽、圖形、表象

料設(shè)計(jì)采用印刷設(shè)計(jì)方法——排版、網(wǎng)格、空間、比例尺、顏色和圖像來(lái)創(chuàng)造層次、意義和焦點(diǎn)，使觀眾沉浸在體驗(yàn)中。

（2）Motion提供了意義

運(yùn)動(dòng)通過(guò)微妙的反饋和連貫的過(guò)渡，來(lái)集中注意力并保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時(shí)，它們將轉(zhuǎn)換和重組環(huán)境，并通過(guò)交互生成新的轉(zhuǎn)換。

（3）靈活的基礎(chǔ)

材料設(shè)計(jì)系統(tǒng)旨在實(shí)現(xiàn)品牌表達(dá)，它集成了一個(gè)自定義代碼庫(kù)，可以無(wú)縫地實(shí)現(xiàn)組件，插件和設(shè)計(jì)元素。

（4）跨平臺(tái)

Material Design使用跨Android、iOS、Flutter和Web的共享組件維護(hù)跨平臺(tái)的相同UI。

結(jié)合material design由來(lái)的原因再看其內(nèi)容從圖形、動(dòng)效到基礎(chǔ)控件，明顯能分析出material design更希望通過(guò)規(guī)范去解決Android平臺(tái)設(shè)計(jì)碎片化的問(wèn)題，保證設(shè)計(jì)風(fēng)格的一致性。

所以在規(guī)范的詳細(xì)描述中，不論是界面還是控件都給出詳細(xì)的尺寸規(guī)范，希望設(shè)計(jì)師們遵循這些規(guī)范，從而保證設(shè)計(jì)的一致性。雖然早前的material design解決了產(chǎn)品設(shè)計(jì)中碎片化問(wèn)題，同時(shí)也帶來(lái)了新的問(wèn)題，使用material design產(chǎn)品設(shè)計(jì)風(fēng)格過(guò)于統(tǒng)一，不同類型的產(chǎn)品個(gè)性無(wú)法表達(dá)，設(shè)計(jì)同質(zhì)化。

Google I/O 2018大會(huì) material design迎來(lái)了自發(fā)布以來(lái)最大的更新，解決了設(shè)計(jì)規(guī)范過(guò)于單一，同質(zhì)化無(wú)法突出品牌調(diào)性的問(wèn)題。用戶自己可以擴(kuò)展material視覺語(yǔ)言，打造屬于自己的品牌調(diào)性。

同時(shí)也分享了7個(gè)不同類型的app，是如何運(yùn)用material design 保證界面設(shè)計(jì)的一致性下還能突出品牌調(diào)性，所以material design更偏向與設(shè)備界面的視覺設(shè)計(jì)規(guī)范。

對(duì)于視覺設(shè)計(jì)師、交互設(shè)計(jì)師深入學(xué)習(xí)material dseign是有必要的。

IOS設(shè)計(jì)規(guī)范

IOS設(shè)計(jì)規(guī)范介紹

Ios設(shè)計(jì)規(guī)范在首頁(yè)是這樣介紹的：

As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you’ll need to meet high expectations for quality and functionality.（作為一名產(chǎn)品設(shè)計(jì)師，你有機(jī)會(huì)推出一款出類拔萃的產(chǎn)品，并登上應(yīng)用程序商店排行榜的榜首。為此，您需要滿足用戶對(duì)產(chǎn)品的質(zhì)量和功能的高要求）

三大設(shè)計(jì)主題將使iOS與其他平臺(tái)區(qū)分開來(lái)：

• 清晰：在整個(gè)系統(tǒng)中，每個(gè)尺寸的文字都清晰可辨，圖標(biāo)傳達(dá)的含義精確，界面元素細(xì)膩而恰當(dāng)，界面元素的設(shè)計(jì)應(yīng)以突出功能（內(nèi)容）。弱化的空間、顏色、字體、圖形和界面元素巧妙地突出了重要的功能（內(nèi)容），傳達(dá)了交互性。
• 尊重：流暢的運(yùn)動(dòng)和清晰美觀的界面有助于人們理解并與內(nèi)容互動(dòng)，而不會(huì)與內(nèi)容競(jìng)爭(zhēng)。內(nèi)容通常填滿整個(gè)屏幕，而半透明和模糊往往暗示更多。最小化邊框，漸變和陰影的使用可保持界面輕盈通風(fēng)，同時(shí)確保內(nèi)容至關(guān)重要。
• 深度：獨(dú)特的視覺層次和逼真的動(dòng)效傳達(dá)界面層次結(jié)構(gòu)，賦予生命力，促進(jìn)理解。觸摸和發(fā)現(xiàn)提高了喜悅度，并且在不丟失上下文的情況下訪問(wèn)功能和附加內(nèi)容。在您瀏覽內(nèi)容時(shí)，轉(zhuǎn)場(chǎng)提供深度感。

當(dāng)你在設(shè)計(jì)產(chǎn)品時(shí)請(qǐng)記住以下設(shè)計(jì)原則：

（1）Aesthetic Integrity（形式服從內(nèi)容）

應(yīng)用程序的外觀和行為與其功能的整合程度。例如：幫助人們執(zhí)行嚴(yán)肅任務(wù)的應(yīng)用程序可以通過(guò)使用細(xì)微，不顯眼的圖形，標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來(lái)讓他們保持專注。另一方面，身臨其境的應(yīng)用程序（例如游戲）可以提供令人著迷的外觀，讓人感到有趣和興奮，同時(shí)鼓勵(lì)發(fā)現(xiàn)。

（2）一致性

一致的應(yīng)用程序通過(guò)使用系統(tǒng)提供的界面元素，眾所周知的圖標(biāo)，標(biāo)準(zhǔn)文本樣式和統(tǒng)一的術(shù)語(yǔ)來(lái)實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例，該應(yīng)用程序以人們期望的方式結(jié)合功能和行為。

（3）直接操作

直接操作屏幕上的內(nèi)容吸引人們并促進(jìn)理解，用戶在旋轉(zhuǎn)設(shè)備或使用手勢(shì)影響屏幕內(nèi)容時(shí)會(huì)遇到直接操作。通過(guò)直接操縱，他們可以看到他們行動(dòng)的直接，可見的結(jié)果。

（4）反饋

反饋意見確認(rèn)行動(dòng)并顯示結(jié)果以向人們通報(bào)，內(nèi)置的iOS應(yīng)用程序?yàn)槊總€(gè)用戶操作提供可感知的反饋。點(diǎn)擊時(shí)，互動(dòng)元素會(huì)突出顯示，進(jìn)度指示器可以傳達(dá)長(zhǎng)時(shí)間運(yùn)行的狀態(tài)，而動(dòng)畫和聲音有助于明確操作結(jié)果。

（5）隱喻

當(dāng)應(yīng)用程序的虛擬對(duì)象和動(dòng)作隱喻熟悉的體驗(yàn)時(shí)，人們可以更快地學(xué)習(xí)——無(wú)論是植根于真實(shí)還是數(shù)字世界。隱喻在iOS中運(yùn)行良好，因?yàn)槿藗兣c屏幕進(jìn)行物理交互。

他們移動(dòng)視圖以揭示下面的內(nèi)容，他們拖動(dòng)和滑動(dòng)內(nèi)容，他們切換開關(guān)，移動(dòng)滑塊，并滾動(dòng)選擇器值，他們甚至可以翻閱書籍和雜志。

（6）用戶控制

在整個(gè)iOS中，人們（而不是應(yīng)用程序）都在掌控之中。應(yīng)用程序可以建議采取行動(dòng)或警告危險(xiǎn)后果，但應(yīng)用程序接管決策通常是錯(cuò)誤的。最好的應(yīng)用程序在啟用用戶和避免不想要的結(jié)果之間，找到了正確的平衡。

通過(guò)保持交互元素的熟悉性和可預(yù)測(cè)性，確認(rèn)破壞性行為并使取消操作變得容易，即使它們已經(jīng)在進(jìn)行中，應(yīng)用程序也可以讓人感覺自己處于控制之下。

以上是蘋果為產(chǎn)品設(shè)計(jì)定下的設(shè)計(jì)原則：以內(nèi)容為中心，形式服從內(nèi)容，清晰的內(nèi)容呈現(xiàn)，信息層次結(jié)構(gòu)主次分明，保證交互、視覺的一致性，讓用戶主導(dǎo)產(chǎn)品。

在規(guī)范中的詳細(xì)描述中，蘋果更多的是在描述如何使用及應(yīng)用場(chǎng)景是什么？應(yīng)該怎么避免錯(cuò)誤？并沒有詳細(xì)的尺寸規(guī)范，同時(shí)蘋果每年都會(huì)公布Apple Design Awards獲獎(jiǎng)的產(chǎn)品，有興趣的同學(xué)可以到蘋果官網(wǎng)查詢獲獎(jiǎng)產(chǎn)品，同時(shí)可以下載下來(lái)體驗(yàn)一下。

可以看出蘋果更注重設(shè)計(jì)師們?cè)O(shè)計(jì)一款完美的應(yīng)用程序，這和蘋果的企業(yè)戰(zhàn)略有關(guān)。了解ios設(shè)計(jì)規(guī)范，可以幫助產(chǎn)品設(shè)計(jì)師們更好的設(shè)計(jì)一款產(chǎn)品。

fluent design

fluent design由來(lái)

微軟更希望解決多設(shè)備跨平臺(tái)的設(shè)計(jì)統(tǒng)一。無(wú)縫銜接pc、phone、VR、Xbox等一系列設(shè)備，打造流暢體驗(yàn)。微軟設(shè)計(jì)規(guī)范更新版本較多，但是改版內(nèi)容卻不大。從metro design 到ModernUI 再到fluent design 始終堅(jiān)持一個(gè)原則以內(nèi)容為中心，去除多余的界面元素。

雖然win8更新時(shí)，被無(wú)數(shù)人吐槽大卡片、大標(biāo)題、界面粗糙，和當(dāng)時(shí)的擬物化設(shè)計(jì)風(fēng)格對(duì)比太丑了。如今回頭看，微軟在設(shè)計(jì)規(guī)范方面領(lǐng)先其他公司至少3年。如今的扁平化、大標(biāo)題、去除界面多余的元素的設(shè)計(jì)準(zhǔn)則，應(yīng)用再了ios還有Android上，微軟提出了這些設(shè)計(jì)尊則而蘋果將這些準(zhǔn)則發(fā)揚(yáng)光大。

Metro Design是平面設(shè)計(jì)領(lǐng)域最經(jīng)典的案例，讓文字實(shí)現(xiàn)了近乎完美的視覺傳達(dá)。它最早應(yīng)用于瑞士的公共交通系統(tǒng)中，隨后這種完美的導(dǎo)航設(shè)計(jì)方法被廣泛應(yīng)用到對(duì)速度、視覺、信息傳達(dá)要求頗高的全球公交系統(tǒng)中。

微軟的設(shè)計(jì)師正是在乘坐地鐵的時(shí)候，注意到了地鐵中的各種設(shè)計(jì)元素，隨即將這些元素進(jìn)行加工形成了目前的Metro。最早用于微軟的Zune播放器，后在微軟的Windows phone 7 同樣使用了該設(shè)計(jì)，后來(lái)的windows 8也使用該設(shè)計(jì)來(lái)適應(yīng)平板觸控設(shè)備。

Metro作為一種文字導(dǎo)向（typography-based）的設(shè)計(jì)，比起其他UI設(shè)計(jì)風(fēng)格更加注重字體。以內(nèi)容為中心大標(biāo)題、去除界面多余的元素，現(xiàn)在已經(jīng)找不到當(dāng)初的截圖了，同學(xué)們可以看看Windows 8 的界面。

metro design 到ModernUI因?yàn)槟承┰蛐薷牧嗣Q，并無(wú)大多的內(nèi)容更新。

fluent design

在Build 2017大會(huì)上，宣布了全新的Microsoft Fluent Design System，并且展示了Win10流暢設(shè)計(jì)體系。

微軟全球執(zhí)行副總裁特里?梅爾森（Terry Myerson）說(shuō)到：

此次的微軟系統(tǒng)將帶來(lái)直觀、和諧、響應(yīng)迅速、兼容廣泛的跨設(shè)備體驗(yàn)與互動(dòng)操作。流暢設(shè)計(jì)讓開發(fā)者能夠設(shè)計(jì)出更具表現(xiàn)力的應(yīng)用程序，并且輸入方式不受限制，支持各種類型的設(shè)備。

設(shè)計(jì)要考慮多種因素，比如：材質(zhì)、摩擦等。微軟流暢設(shè)計(jì)體系分為五個(gè)元素，分別是Light（光感）、Depth（深度）、Motion（動(dòng)效）、Material（材質(zhì)）、Scale（縮放）。

（1）自適應(yīng)

自適應(yīng)每個(gè)設(shè)備上流暢的體驗(yàn)，是需要主動(dòng)的去自適應(yīng)用戶設(shè)備。對(duì)用戶使用的設(shè)備熟知，從平板電腦到筆電腦，從個(gè)人電腦到電視機(jī)。他們從辦公室到客廳到虛擬世界，布局上需要適應(yīng)各種尺寸屏幕的應(yīng)用。針對(duì)不同的社保進(jìn)行優(yōu)化，交互方式需要支持根據(jù)不同設(shè)備的特性。

（2）直觀而強(qiáng)大的

流暢的體驗(yàn)需要適應(yīng)用戶的行為和清晰的界面，理解并預(yù)測(cè)用戶需要什么，使用用戶熟悉的控件和交互模式來(lái)建立偉大的產(chǎn)品。產(chǎn)品的應(yīng)該具有包容性，讓全世界的人都能使用它。

（3）參與感和沉浸式體驗(yàn)

真實(shí)的物質(zhì)世界是我們的素材庫(kù)，流暢地運(yùn)用光與影、空間維度、基本材料的運(yùn)動(dòng)與折疊。它以一種輕松的方式與用戶交流，將亮點(diǎn)、深度和材質(zhì)添加到您的應(yīng)用中，創(chuàng)造一種運(yùn)動(dòng)的空間維度感。

對(duì)比設(shè)計(jì)規(guī)范重的詳細(xì)內(nèi)容

以日期選擇控件為例，蘋果設(shè)計(jì)規(guī)范對(duì)控件給出釋義，描述了應(yīng)用方法，沒有其他的信息，缺少尺寸的規(guī)范。

同樣以時(shí)間選擇控件為例，微軟則描述了使用場(chǎng)景、代碼實(shí)現(xiàn)日期控件、獲取示例代碼。

而material design 最為詳細(xì)給出了釋義、應(yīng)用方法、應(yīng)用場(chǎng)景、示例、尺寸規(guī)范、還有應(yīng)用案列。

總結(jié)

Material design 規(guī)范最為詳細(xì)，視覺設(shè)計(jì)師和交互設(shè)計(jì)師應(yīng)該重點(diǎn)關(guān)注material design ，將規(guī)范熟記于心，雖說(shuō)不必要處處都遵守規(guī)范，但是熟悉規(guī)范能讓我們避免低級(jí)錯(cuò)誤。在規(guī)范上面創(chuàng)新，猶如在巨人的肩膀上前進(jìn)。

Ios設(shè)計(jì)規(guī)范更多描述了內(nèi)容的應(yīng)用方法，怎么利用這些控件來(lái)打造一款完美的產(chǎn)品。產(chǎn)品經(jīng)理、開發(fā)工程師應(yīng)該重點(diǎn)關(guān)注一下。

微軟的Fluent Design 更偏向于開發(fā)，規(guī)范內(nèi)容更多描述的是應(yīng)用場(chǎng)景及代碼示例代碼獲取。從這點(diǎn)上我們就應(yīng)該能明白開發(fā)可以重點(diǎn)關(guān)注一下微軟的Fluent Design。

三家規(guī)范各有側(cè)重點(diǎn)，我們可以重點(diǎn)關(guān)注偏向于我們工作的范圍的規(guī)范，但是其他兩家的規(guī)范也要了解熟悉。如果三家規(guī)范都看一遍，你會(huì)發(fā)現(xiàn)大的設(shè)計(jì)原則是不會(huì)有不同的，都是大同小異。

微軟的設(shè)計(jì)規(guī)范很前衛(wèi)，從win8開始就提倡扁平化原則不被用戶所看好，然后現(xiàn)在到處都是扁平化的設(shè)計(jì)原則以及以內(nèi)容為中心，到先如今的fluent design提出各終端設(shè)計(jì)的統(tǒng)一。

就是因?yàn)槲④浱靶l(wèi)了才不被人們所理解，現(xiàn)在回頭看當(dāng)初微軟提倡的設(shè)計(jì)，實(shí)在是厲害。微軟一直默默的前行，被人們吐槽。

資料參考：

Android發(fā)展史

Material design 百度百科

Metro design 百度百科

Material design

Ios設(shè)計(jì)規(guī)范

fluent design

本文由 @?火炬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議