起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識分析Google、微軟、蘋果設(shè)計規(guī)范的異同點
本文主要是分析Google、微軟、蘋果設(shè)計規(guī)范的異同點，來看看這些公司對設(shè)計規(guī)范的不同要求。
material design 由來
從2011年10月19日安卓4.0冰淇淋三明治正式發(fā)布后，11月Android Market上提交審核的應(yīng)用程序數(shù)量達(dá)到50萬。開發(fā)者可以任意上傳自己的應(yīng)用，而不必通過審核；開發(fā)者可以隨意按照自己的想法設(shè)計應(yīng)用，Google方面不予任何限制。
可以說，Android一開始就是一片Google開辟的荒地，他允許每個人都可以隨意使用，結(jié)果是所有人都各行其是，讓這塊荒地亂糟糟的。
拉里·佩奇成為Google CEO之后，佩奇大膽改變? Google“以工程師為主導(dǎo)”的文化。
2011年，公司啟動代號為“肯尼迪”的項目，召集公司里所有重要的設(shè)計師，重新設(shè)計Google里的每一項產(chǎn)品，尋找一種共同的設(shè)計語言。
Google的設(shè)計師們通過整合Google現(xiàn)有的技術(shù)和能力，再加上對跨設(shè)備界面與交互思考，結(jié)合卡片式設(shè)計，終于設(shè)計出在不同設(shè)備上界面和體驗都相對統(tǒng)一的產(chǎn)品。而這種跨界的設(shè)計經(jīng)驗，經(jīng)過兩年的努力，復(fù)用在一致飽受割裂、碎片化困擾的Android平臺上。
直到從Palm跳槽到Google擔(dān)任Android用戶體驗副總裁的馬蒂亞斯·杜瓦迪（Matias Duarte）上任后，才真正提出設(shè)計指導(dǎo)。
Google I/O 2014上著重展示的Material Design，以非常高調(diào)的方式，宣布了Google Design的存在。不欣賞設(shè)計，對設(shè)計毫無感覺的Google已是昨日。
從Android到衍生的Android Wear、Auto和TV，Material Design貫穿其中，成為溝通不同平臺、設(shè)備的靈魂，讓用戶在不同平臺上也有連貫的體驗。
為了維護(hù)這種一致性，Google甚至不允許第三方修改Android Wear、Auto和TV的界面以及交互，十分強(qiáng)勢?？梢钥闯鰉aterial design是旨在解決跨設(shè)備界面和體驗的統(tǒng)一，讓Android設(shè)備的界面設(shè)計不在是割裂、碎片化。
material design 介紹
google是這樣介紹的material design的：
它是一種將優(yōu)秀設(shè)計的經(jīng)典原則與科技創(chuàng)新相結(jié)合的視覺語言；開發(fā)一個統(tǒng)一跨平臺，設(shè)備和輸入方法的用戶體驗的單一底層系統(tǒng)；可擴(kuò)展Material的視覺語言，為創(chuàng)新和品牌調(diào)性提供靈活的基礎(chǔ)。
material design 四大設(shè)計原則
Material Design受物理世界及其材質(zhì)的啟發(fā)，包括它們?nèi)绾畏瓷涔饩€和投射陰影。材料表面重新想象紙張和油墨的介質(zhì)。
（1）大膽、圖形、表象
料設(shè)計采用印刷設(shè)計方法——排版、網(wǎng)格、空間、比例尺、顏色和圖像來創(chuàng)造層次、意義和焦點，使觀眾沉浸在體驗中。
（2）Motion提供了意義
運(yùn)動通過微妙的反饋和連貫的過渡，來集中注意力并保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時，它們將轉(zhuǎn)換和重組環(huán)境，并通過交互生成新的轉(zhuǎn)換。
（3）靈活的基礎(chǔ)
材料設(shè)計系統(tǒng)旨在實現(xiàn)品牌表達(dá)，它集成了一個自定義代碼庫，可以無縫地實現(xiàn)組件，插件和設(shè)計元素。
（4）跨平臺
Material Design使用跨Android、iOS、Flutter和Web的共享組件維護(hù)跨平臺的相同UI。
結(jié)合material design由來的原因再看其內(nèi)容從圖形、動效到基礎(chǔ)控件，明顯能分析出material design更希望通過規(guī)范去解決Android平臺設(shè)計碎片化的問題，保證設(shè)計風(fēng)格的一致性。
所以在規(guī)范的詳細(xì)描述中，不論是界面還是控件都給出詳細(xì)的尺寸規(guī)范，希望設(shè)計師們遵循這些規(guī)范，從而保證設(shè)計的一致性。雖然早前的material design解決了產(chǎn)品設(shè)計中碎片化問題，同時也帶來了新的問題，使用material design產(chǎn)品設(shè)計風(fēng)格過于統(tǒng)一，不同類型的產(chǎn)品個性無法表達(dá)，設(shè)計同質(zhì)化。
Google I/O 2018大會 material design迎來了自發(fā)布以來最大的更新，解決了設(shè)計規(guī)范過于單一，同質(zhì)化無法突出品牌調(diào)性的問題。用戶自己可以擴(kuò)展material視覺語言，打造屬于自己的品牌調(diào)性。
同時也分享了7個不同類型的app，是如何運(yùn)用material design 保證界面設(shè)計的一致性下還能突出品牌調(diào)性，所以material design更偏向與設(shè)備界面的視覺設(shè)計規(guī)范。
對于視覺設(shè)計師、交互設(shè)計師深入學(xué)習(xí)material dseign是有必要的。
IOS設(shè)計規(guī)范
IOS設(shè)計規(guī)范介紹
Ios設(shè)計規(guī)范在首頁是這樣介紹的：
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ī)會推出一款出類拔萃的產(chǎn)品，并登上應(yīng)用程序商店排行榜的榜首。為此，您需要滿足用戶對產(chǎn)品的質(zhì)量和功能的高要求）
三大設(shè)計主題將使iOS與其他平臺區(qū)分開來：
- 清晰：在整個系統(tǒng)中，每個尺寸的文字都清晰可辨，圖標(biāo)傳達(dá)的含義精確，界面元素細(xì)膩而恰當(dāng)，界面元素的設(shè)計應(yīng)以突出功能（內(nèi)容）。弱化的空間、顏色、字體、圖形和界面元素巧妙地突出了重要的功能（內(nèi)容），傳達(dá)了交互性。
- 尊重：流暢的運(yùn)動和清晰美觀的界面有助于人們理解并與內(nèi)容互動，而不會與內(nèi)容競爭。內(nèi)容通常填滿整個屏幕，而半透明和模糊往往暗示更多。最小化邊框，漸變和陰影的使用可保持界面輕盈通風(fēng)，同時確保內(nèi)容至關(guān)重要。
- 深度：獨特的視覺層次和逼真的動效傳達(dá)界面層次結(jié)構(gòu)，賦予生命力，促進(jìn)理解。觸摸和發(fā)現(xiàn)提高了喜悅度，并且在不丟失上下文的情況下訪問功能和附加內(nèi)容。在您瀏覽內(nèi)容時，轉(zhuǎn)場提供深度感。
當(dāng)你在設(shè)計產(chǎn)品時請記住以下設(shè)計原則：
（1）Aesthetic Integrity（形式服從內(nèi)容）
應(yīng)用程序的外觀和行為與其功能的整合程度。例如：幫助人們執(zhí)行嚴(yán)肅任務(wù)的應(yīng)用程序可以通過使用細(xì)微，不顯眼的圖形，標(biāo)準(zhǔn)控件和可預(yù)測的行為來讓他們保持專注。另一方面，身臨其境的應(yīng)用程序（例如游戲）可以提供令人著迷的外觀，讓人感到有趣和興奮，同時鼓勵發(fā)現(xiàn)。
（2）一致性
一致的應(yīng)用程序通過使用系統(tǒng)提供的界面元素，眾所周知的圖標(biāo)，標(biāo)準(zhǔn)文本樣式和統(tǒng)一的術(shù)語來實現(xiàn)熟悉的標(biāo)準(zhǔn)和范例，該應(yīng)用程序以人們期望的方式結(jié)合功能和行為。
（3）直接操作
直接操作屏幕上的內(nèi)容吸引人們并促進(jìn)理解，用戶在旋轉(zhuǎn)設(shè)備或使用手勢影響屏幕內(nèi)容時會遇到直接操作。通過直接操縱，他們可以看到他們行動的直接，可見的結(jié)果。
（4）反饋
反饋意見確認(rèn)行動并顯示結(jié)果以向人們通報，內(nèi)置的iOS應(yīng)用程序為每個用戶操作提供可感知的反饋。點擊時，互動元素會突出顯示，進(jìn)度指示器可以傳達(dá)長時間運(yùn)行的狀態(tài)，而動畫和聲音有助于明確操作結(jié)果。
（5）隱喻
當(dāng)應(yīng)用程序的虛擬對象和動作隱喻熟悉的體驗時，人們可以更快地學(xué)習(xí)——無論是植根于真實還是數(shù)字世界。隱喻在iOS中運(yùn)行良好，因為人們與屏幕進(jìn)行物理交互。
他們移動視圖以揭示下面的內(nèi)容，他們拖動和滑動內(nèi)容，他們切換開關(guān)，移動滑塊，并滾動選擇器值，他們甚至可以翻閱書籍和雜志。
（6）用戶控制
在整個iOS中，人們（而不是應(yīng)用程序）都在掌控之中。應(yīng)用程序可以建議采取行動或警告危險后果，但應(yīng)用程序接管決策通常是錯誤的。最好的應(yīng)用程序在啟用用戶和避免不想要的結(jié)果之間，找到了正確的平衡。
通過保持交互元素的熟悉性和可預(yù)測性，確認(rèn)破壞性行為并使取消操作變得容易，即使它們已經(jīng)在進(jìn)行中，應(yīng)用程序也可以讓人感覺自己處于控制之下。
以上是蘋果為產(chǎn)品設(shè)計定下的設(shè)計原則：以內(nèi)容為中心，形式服從內(nèi)容，清晰的內(nèi)容呈現(xiàn)，信息層次結(jié)構(gòu)主次分明，保證交互、視覺的一致性，讓用戶主導(dǎo)產(chǎn)品。
在規(guī)范中的詳細(xì)描述中，蘋果更多的是在描述如何使用及應(yīng)用場景是什么？應(yīng)該怎么避免錯誤？并沒有詳細(xì)的尺寸規(guī)范，同時蘋果每年都會公布Apple Design Awards獲獎的產(chǎn)品，有興趣的同學(xué)可以到蘋果官網(wǎng)查詢獲獎產(chǎn)品，同時可以下載下來體驗一下。
可以看出蘋果更注重設(shè)計師們設(shè)計一款完美的應(yīng)用程序，這和蘋果的企業(yè)戰(zhàn)略有關(guān)。了解ios設(shè)計規(guī)范，可以幫助產(chǎn)品設(shè)計師們更好的設(shè)計一款產(chǎn)品。
fluent design
fluent design由來
微軟更希望解決多設(shè)備跨平臺的設(shè)計統(tǒng)一。無縫銜接pc、phone、VR、Xbox等一系列設(shè)備，打造流暢體驗。微軟設(shè)計規(guī)范更新版本較多，但是改版內(nèi)容卻不大。從metro design 到ModernUI 再到fluent design 始終堅持一個原則以內(nèi)容為中心，去除多余的界面元素。
雖然win8更新時，被無數(shù)人吐槽大卡片、大標(biāo)題、界面粗糙，和當(dāng)時的擬物化設(shè)計風(fēng)格對比太丑了。如今回頭看，微軟在設(shè)計規(guī)范方面領(lǐng)先其他公司至少3年。如今的扁平化、大標(biāo)題、去除界面多余的元素的設(shè)計準(zhǔn)則，應(yīng)用再了ios還有Android上，微軟提出了這些設(shè)計尊則而蘋果將這些準(zhǔn)則發(fā)揚(yáng)光大。
Metro Design是平面設(shè)計領(lǐng)域最經(jīng)典的案例，讓文字實現(xiàn)了近乎完美的視覺傳達(dá)。它最早應(yīng)用于瑞士的公共交通系統(tǒng)中，隨后這種完美的導(dǎo)航設(shè)計方法被廣泛應(yīng)用到對速度、視覺、信息傳達(dá)要求頗高的全球公交系統(tǒng)中。
微軟的設(shè)計師正是在乘坐地鐵的時候，注意到了地鐵中的各種設(shè)計元素，隨即將這些元素進(jìn)行加工形成了目前的Metro。最早用于微軟的Zune播放器，后在微軟的Windows phone 7 同樣使用了該設(shè)計，后來的windows 8也使用該設(shè)計來適應(yīng)平板觸控設(shè)備。
Metro作為一種文字導(dǎo)向（typography-based）的設(shè)計，比起其他UI設(shè)計風(fēng)格更加注重字體。以內(nèi)容為中心大標(biāo)題、去除界面多余的元素，現(xiàn)在已經(jīng)找不到當(dāng)初的截圖了，同學(xué)們可以看看Windows 8 的界面。
metro design 到ModernUI因為某些原因修改了名稱，并無大多的內(nèi)容更新。
fluent design
在Build 2017大會上，宣布了全新的Microsoft Fluent Design System，并且展示了Win10流暢設(shè)計體系。
微軟全球執(zhí)行副總裁特里?梅爾森（Terry Myerson）說到：
此次的微軟系統(tǒng)將帶來直觀、和諧、響應(yīng)迅速、兼容廣泛的跨設(shè)備體驗與互動操作。流暢設(shè)計讓開發(fā)者能夠設(shè)計出更具表現(xiàn)力的應(yīng)用程序，并且輸入方式不受限制，支持各種類型的設(shè)備。
設(shè)計要考慮多種因素，比如：材質(zhì)、摩擦等。微軟流暢設(shè)計體系分為五個元素，分別是Light（光感）、Depth（深度）、Motion（動效）、Material（材質(zhì)）、Scale（縮放）。
（1）自適應(yīng)
自適應(yīng)每個設(shè)備上流暢的體驗，是需要主動的去自適應(yīng)用戶設(shè)備。對用戶使用的設(shè)備熟知，從平板電腦到筆電腦，從個人電腦到電視機(jī)。他們從辦公室到客廳到虛擬世界，布局上需要適應(yīng)各種尺寸屏幕的應(yīng)用。針對不同的社保進(jìn)行優(yōu)化，交互方式需要支持根據(jù)不同設(shè)備的特性。
（2）直觀而強(qiáng)大的
流暢的體驗需要適應(yīng)用戶的行為和清晰的界面，理解并預(yù)測用戶需要什么，使用用戶熟悉的控件和交互模式來建立偉大的產(chǎn)品。產(chǎn)品的應(yīng)該具有包容性，讓全世界的人都能使用它。
（3）參與感和沉浸式體驗
真實的物質(zhì)世界是我們的素材庫，流暢地運(yùn)用光與影、空間維度、基本材料的運(yùn)動與折疊。它以一種輕松的方式與用戶交流，將亮點、深度和材質(zhì)添加到您的應(yīng)用中，創(chuàng)造一種運(yùn)動的空間維度感。
對比設(shè)計規(guī)范重的詳細(xì)內(nèi)容
以日期選擇控件為例，蘋果設(shè)計規(guī)范對控件給出釋義，描述了應(yīng)用方法，沒有其他的信息，缺少尺寸的規(guī)范。
同樣以時間選擇控件為例，微軟則描述了使用場景、代碼實現(xiàn)日期控件、獲取示例代碼。
而material design 最為詳細(xì)給出了釋義、應(yīng)用方法、應(yīng)用場景、示例、尺寸規(guī)范、還有應(yīng)用案列。
總結(jié)
Material design 規(guī)范最為詳細(xì)，視覺設(shè)計師和交互設(shè)計師應(yīng)該重點關(guān)注material design ，將規(guī)范熟記于心，雖說不必要處處都遵守規(guī)范，但是熟悉規(guī)范能讓我們避免低級錯誤。在規(guī)范上面創(chuàng)新，猶如在巨人的肩膀上前進(jìn)。
Ios設(shè)計規(guī)范更多描述了內(nèi)容的應(yīng)用方法，怎么利用這些控件來打造一款完美的產(chǎn)品。產(chǎn)品經(jīng)理、開發(fā)工程師應(yīng)該重點關(guān)注一下。
微軟的Fluent Design 更偏向于開發(fā)，規(guī)范內(nèi)容更多描述的是應(yīng)用場景及代碼示例代碼獲取。從這點上我們就應(yīng)該能明白開發(fā)可以重點關(guān)注一下微軟的Fluent Design。
三家規(guī)范各有側(cè)重點，我們可以重點關(guān)注偏向于我們工作的范圍的規(guī)范，但是其他兩家的規(guī)范也要了解熟悉。如果三家規(guī)范都看一遍，你會發(fā)現(xiàn)大的設(shè)計原則是不會有不同的，都是大同小異。
微軟的設(shè)計規(guī)范很前衛(wèi)，從win8開始就提倡扁平化原則不被用戶所看好，然后現(xiàn)在到處都是扁平化的設(shè)計原則以及以內(nèi)容為中心，到先如今的fluent design提出各終端設(shè)計的統(tǒng)一。
就是因為微軟太前衛(wèi)了才不被人們所理解，現(xiàn)在回頭看當(dāng)初微軟提倡的設(shè)計，實在是厲害。微軟一直默默的前行，被人們吐槽。
資料參考：
本文由 @?火炬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
請問文章轉(zhuǎn)載如何聯(lián)系？
加我微信吧694130771
請問文章現(xiàn)在如何聯(lián)系？