分析Google、微軟、蘋果設計規範的異同點

2021-01-21 人人都是產品經理

本文主要是分析Google、微軟、蘋果設計規範的異同點,來看看這些公司對設計規範的不同要求。

googlematerial design 由來

從2011年10月19日安卓4.0冰淇淋三明治正式發布後,11月Android Market上提交審核的應用程式數量達到50萬。開發者可以任意上傳自己的應用,而不必通過審核;開發者可以隨意按照自己的想法設計應用,Google方面不予任何限制。

可以說,Android一開始就是一片Google開闢的荒地,他允許每個人都可以隨意使用,結果是所有人都各行其是,讓這塊荒地亂糟糟的。

拉裡·佩奇成為Google CEO之後,佩奇大膽改變  Google「以工程師為主導」的文化。

2011年,公司啟動代號為「甘迺迪」的項目,召集公司裡所有重要的設計師,重新設計Google裡的每一項產品,尋找一種共同的設計語言。

Google的設計師們通過整合Google現有的技術和能力,再加上對跨設備界面與交互思考,結合卡片式設計,終於設計出在不同設備上界面和體驗都相對統一的產品。而這種跨界的設計經驗,經過兩年的努力,復用在一致飽受割裂、碎片化困擾的Android平臺上。

直到從Palm跳槽到Google擔任Android用戶體驗副總裁的馬蒂亞斯·杜瓦迪(Matias Duarte)上任後,才真正提出設計指導。

Google I/O 2014上著重展示的Material Design,以非常高調的方式,宣布了Google Design的存在。不欣賞設計,對設計毫無感覺的Google已是昨日。

從Android到衍生的Android Wear、Auto和TV,Material Design貫穿其中,成為溝通不同平臺、設備的靈魂,讓用戶在不同平臺上也有連貫的體驗。

為了維護這種一致性,Google甚至不允許第三方修改Android Wear、Auto和TV的界面以及交互,十分強勢。可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。

material design 介紹

google是這樣介紹的material design的:

它是一種將優秀設計的經典原則與科技創新相結合的視覺語言;開發一個統一跨平臺,設備和輸入方法的用戶體驗的單一底層系統;可擴展Material的視覺語言,為創新和品牌調性提供靈活的基礎。

material design 四大設計原則

Material Design受物理世界及其材質的啟發,包括它們如何反射光線和投射陰影。材料表面重新想像紙張和油墨的介質。

(1)大膽、圖形、表象

料設計採用印刷設計方法——排版、網格、空間、比例尺、顏色和圖像來創造層次、意義和焦點,使觀眾沉浸在體驗中。

(2)Motion提供了意義

運動通過微妙的反饋和連貫的過渡,來集中注意力並保持連續性。當元素出現在屏幕上時,它們將轉換和重組環境,並通過交互生成新的轉換。

(3)靈活的基礎

材料設計系統旨在實現品牌表達,它集成了一個自定義代碼庫,可以無縫地實現組件,插件和設計元素。

(4)跨平臺

Material Design使用跨Android、iOS、Flutter和Web的共享組件維護跨平臺的相同UI。

結合material design由來的原因再看其內容從圖形、動效到基礎控制項,明顯能分析出material design更希望通過規範去解決Android平臺設計碎片化的問題,保證設計風格的一致性。

所以在規範的詳細描述中,不論是界面還是控制項都給出詳細的尺寸規範,希望設計師們遵循這些規範,從而保證設計的一致性。雖然早前的material design解決了產品設計中碎片化問題,同時也帶來了新的問題,使用material design產品設計風格過於統一,不同類型的產品個性無法表達,設計同質化。

Google I/O 2018大會 material design迎來了自發布以來最大的更新,解決了設計規範過於單一,同質化無法突出品牌調性的問題。用戶自己可以擴展material視覺語言,打造屬於自己的品牌調性。

同時也分享了7個不同類型的app,是如何運用material design 保證界面設計的一致性下還能突出品牌調性,所以material design更偏向與設備界面的視覺設計規範。

對於視覺設計師、互動設計師深入學習material dseign是有必要的。

IOS設計規範IOS設計規範介紹

Ios設計規範在首頁是這樣介紹的:

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.(作為一名產品設計師,你有機會推出一款出類拔萃的產品,並登上應用程式商店排行榜的榜首。為此,您需要滿足用戶對產品的質量和功能的高要求)

三大設計主題將使iOS與其他平臺區分開來:

清晰:在整個系統中,每個尺寸的文字都清晰可辨,圖標傳達的含義精確,界面元素細膩而恰當,界面元素的設計應以突出功能(內容)。弱化的空間、顏色、字體、圖形和界面元素巧妙地突出了重要的功能(內容),傳達了交互性。尊重:流暢的運動和清晰美觀的界面有助於人們理解並與內容互動,而不會與內容競爭。內容通常填滿整個屏幕,而半透明和模糊往往暗示更多。最小化邊框,漸變和陰影的使用可保持界面輕盈通風,同時確保內容至關重要。深度:獨特的視覺層次和逼真的動效傳達界面層次結構,賦予生命力,促進理解。觸摸和發現提高了喜悅度,並且在不丟失上下文的情況下訪問功能和附加內容。在您瀏覽內容時,轉場提供深度感。

當你在設計產品時請記住以下設計原則:

(1)Aesthetic Integrity(形式服從內容)

應用程式的外觀和行為與其功能的整合程度。例如:幫助人們執行嚴肅任務的應用程式可以通過使用細微,不顯眼的圖形,標準控制項和可預測的行為來讓他們保持專注。另一方面,身臨其境的應用程式(例如遊戲)可以提供令人著迷的外觀,讓人感到有趣和興奮,同時鼓勵發現。

(2)一致性

一致的應用程式通過使用系統提供的界面元素,眾所周知的圖標,標準文本樣式和統一的術語來實現熟悉的標準和範例,該應用程式以人們期望的方式結合功能和行為。

(3)直接操作

直接操作屏幕上的內容吸引人們並促進理解,用戶在旋轉設備或使用手勢影響屏幕內容時會遇到直接操作。通過直接操縱,他們可以看到他們行動的直接,可見的結果。

(4)反饋

反饋意見確認行動並顯示結果以向人們通報,內置的iOS應用程式為每個用戶操作提供可感知的反饋。點擊時,互動元素會突出顯示,進度指示器可以傳達長時間運行的狀態,而動畫和聲音有助於明確操作結果。

(5)隱喻

當應用程式的虛擬對象和動作隱喻熟悉的體驗時,人們可以更快地學習——無論是植根於真實還是數字世界。隱喻在iOS中運行良好,因為人們與屏幕進行物理交互。

他們移動視圖以揭示下面的內容,他們拖動和滑動內容,他們切換開關,移動滑塊,並滾動選擇器值,他們甚至可以翻閱書籍和雜誌。

(6)用戶控制

在整個iOS中,人們(而不是應用程式)都在掌控之中。應用程式可以建議採取行動或警告危險後果,但應用程式接管決策通常是錯誤的。最好的應用程式在啟用用戶和避免不想要的結果之間,找到了正確的平衡。

通過保持交互元素的熟悉性和可預測性,確認破壞性行為並使取消操作變得容易,即使它們已經在進行中,應用程式也可以讓人感覺自己處於控制之下。

以上是蘋果為產品設計定下的設計原則:以內容為中心,形式服從內容,清晰的內容呈現,信息層次結構主次分明,保證交互、視覺的一致性,讓用戶主導產品。

在規範中的詳細描述中,蘋果更多的是在描述如何使用及應用場景是什麼?應該怎麼避免錯誤?並沒有詳細的尺寸規範,同時蘋果每年都會公布Apple Design Awards獲獎的產品,有興趣的同學可以到蘋果官網查詢獲獎產品,同時可以下載下來體驗一下。

可以看出蘋果更注重設計師們設計一款完美的應用程式,這和蘋果的企業戰略有關。了解ios設計規範,可以幫助產品設計師們更好的設計一款產品。

fluent designfluent design由來

微軟更希望解決多設備跨平臺的設計統一。無縫銜接pc、phone、VR、Xbox等一系列設備,打造流暢體驗。微軟設計規範更新版本較多,但是改版內容卻不大。從metro design 到ModernUI 再到fluent design 始終堅持一個原則以內容為中心,去除多餘的界面元素。

雖然win8更新時,被無數人吐槽大卡片、大標題、界面粗糙,和當時的擬物化設計風格對比太醜了。如今回頭看,微軟在設計規範方面領先其他公司至少3年。如今的扁平化、大標題、去除界面多餘的元素的設計準則,應用再了ios還有Android上,微軟提出了這些設計尊則而蘋果將這些準則發揚光大。

Metro Design是平面設計領域最經典的案例,讓文字實現了近乎完美的視覺傳達。它最早應用於瑞士的公共運輸系統中,隨後這種完美的導航設計方法被廣泛應用到對速度、視覺、信息傳達要求頗高的全球公交系統中。

微軟的設計師正是在乘坐地鐵的時候,注意到了地鐵中的各種設計元素,隨即將這些元素進行加工形成了目前的Metro。最早用於微軟的Zune播放器,後在微軟的Windows phone 7 同樣使用了該設計,後來的windows 8也使用該設計來適應平板觸控設備。

Metro作為一種文字導向(typography-based)的設計,比起其他UI設計風格更加注重字體。以內容為中心大標題、去除界面多餘的元素,現在已經找不到當初的截圖了,同學們可以看看Windows 8 的界面。

metro design 到ModernUI因為某些原因修改了名稱,並無大多的內容更新。

fluent design

在Build 2017大會上,宣布了全新的Microsoft Fluent Design System,並且展示了Win10流暢設計體系。

微軟全球執行副總裁特裡•梅爾森(Terry Myerson)說到:

此次的微軟系統將帶來直觀、和諧、響應迅速、兼容廣泛的跨設備體驗與互動操作。流暢設計讓開發者能夠設計出更具表現力的應用程式,並且輸入方式不受限制,支持各種類型的設備。

設計要考慮多種因素,比如:材質、摩擦等。微軟流暢設計體系分為五個元素,分別是Light(光感)、Depth(深度)、Motion(動效)、Material(材質)、Scale(縮放)。

(1)自適應

自適應每個設備上流暢的體驗,是需要主動的去自適應用戶設備。對用戶使用的設備熟知,從平板電腦到筆電腦,從個人電腦到電視機。他們從辦公室到客廳到虛擬世界,布局上需要適應各種尺寸屏幕的應用。針對不同的社保進行優化,交互方式需要支持根據不同設備的特性。

(2)直觀而強大的

流暢的體驗需要適應用戶的行為和清晰的界面,理解並預測用戶需要什麼,使用用戶熟悉的控制項和交互模式來建立偉大的產品。產品的應該具有包容性,讓全世界的人都能使用它。

(3)參與感和沉浸式體驗

真實的物質世界是我們的素材庫,流暢地運用光與影、空間維度、基本材料的運動與摺疊。它以一種輕鬆的方式與用戶交流,將亮點、深度和材質添加到您的應用中,創造一種運動的空間維度感。

對比設計規範重的詳細內容

以日期選擇控制項為例,蘋果設計規範對控制項給出釋義,描述了應用方法,沒有其他的信息,缺少尺寸的規範。

同樣以時間選擇控制項為例,微軟則描述了使用場景、代碼實現日期控制項、獲取示例代碼。

而material design 最為詳細給出了釋義、應用方法、應用場景、示例、尺寸規範、還有應用案列。

總結

Material design 規範最為詳細,視覺設計師和互動設計師應該重點關注material design ,將規範熟記於心,雖說不必要處處都遵守規範,但是熟悉規範能讓我們避免低級錯誤。在規範上面創新,猶如在巨人的肩膀上前進。

Ios設計規範更多描述了內容的應用方法,怎麼利用這些控制項來打造一款完美的產品。產品經理、開發工程師應該重點關注一下。

微軟的Fluent Design 更偏向於開發,規範內容更多描述的是應用場景及代碼示例代碼獲取。從這點上我們就應該能明白開發可以重點關注一下微軟的Fluent Design。

三家規範各有側重點,我們可以重點關注偏向於我們工作的範圍的規範,但是其他兩家的規範也要了解熟悉。如果三家規範都看一遍,你會發現大的設計原則是不會有不同的,都是大同小異。

微軟的設計規範很前衛,從win8開始就提倡扁平化原則不被用戶所看好,然後現在到處都是扁平化的設計原則以及以內容為中心,到先如今的fluent design提出各終端設計的統一。

就是因為微軟太前衛了才不被人們所理解,現在回頭看當初微軟提倡的設計,實在是厲害。微軟一直默默的前行,被人們吐槽。

資料參考:

Android發展史

Material design 百度百科

Metro design 百度百科

Material design

Ios設計規範

fluent design

 

本文由 @ 火炬 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • 微軟Surface剛出來那會,蘋果和Google是怎麼說的?
    它是一款配備了實體鍵盤的平板,而這種情況我們也似曾相識,因為在9號的蘋果發布會上,它也發布了一款帶鍵盤的iPad Pro。突然之間,配鍵盤的平板就流行起來了,而當年Surface剛出那會,蘋果和Google都嘲笑過它呢。
  • 微軟戰Google 軟體一對一 - 網易學院
    微軟到底想做什麼?當11月3日比爾·蓋茨宣布Windows Live和Office Live同時發布的時候,開啟了所謂的軟體「在線時代」。整個微軟帝國最大的一場核心遷移運動也同時開始了。打造網際網路帝國?那Google呢?詳細  讓我們看看,微軟如何面對這位強大的網際網路的王者。
  • 微軟HoloLens與Google Glass固然好 但在AR上還將敗給蘋果
    除了這兩家公司之後,蘋果在AR領域內也是積極布局,庫克不止一次的公開表示,未來看好AR技術,蘋果還在最新的iOS11系統增加了對AR技術的支持,為開發者提供ARKit。  可以說蘋果在AR領域內下了一盤很大棋,在未來的AR競爭中,蘋果很大可能上還會佔領上風,碾壓微軟和谷歌。  其實,這樣說並不是沒有道理。  首先,蘋果一直都是後來居上者。
  • 噴錫與沉錫異同點及化學沉錫常見問題分析
    打開APP 噴錫與沉錫異同點及化學沉錫常見問題分析 電子設計 發表於 2019-04-24 15:21:33 PCB沉錫工藝是為有利於SMT與晶片封裝而特別設計的在銅面上以化學方式沉積錫金屬鍍層,是取代Pb-Sn合金鍍層製程的一種綠色環保新工藝,已廣泛應用於電子產品、五金件、裝飾品等。
  • GooglePlaystore蘋果版
    GooglePlaystore蘋果版遊戲玩法:非常受歡迎的應用市場軟體《Google Play Store》推薦給大家,包含了大量的熱門最新應用,非常受廣大用戶的喜歡,功能非常的全面,只需下載APP即可獲取到各種免費的最新應用和遊戲,非常的好用,對此感興趣的話不妨下載Google Play StoreAPP試試哦!
  • 脈衝彌霧機與煙霧機的的異同點分析
    兩種設備的異同點體現在哪些方面呢?這就是今天我們要來為大家介紹的一個問題,下面我們就來了解一下這個問題吧!
  • 程式設計師:想去google英語不行可以麼?google員工:有免費外教!
    當然也有一些程式設計師把目標放在了google,微軟,facebook這些公司。 圖片來之網際網路最近就有一名c++程式設計師,他想去google,微軟,facebook這些公司,但是他有一點擔心的是自己的英語水平不行,他對自己的技術沒什麼擔心,就是怕平時與同事交流時,會有溝通障礙,這點是他最擔心的,那麼接下來
  • 電解蝕刻和化學蝕刻的異同點
    我們在製作鈦金獎牌、不鏽鋼門牌的時候,通常使用蝕刻的工藝進行製作,而化學蝕刻和電解蝕刻是經常使用的兩類蝕刻方式,對於很多新手朋友往往不是很了解二者之間的區別和聯繫, 現將將兩種蝕刻方式的異同點以表格的形式做一詳細介紹。有不明白的朋友可以留言。
  • 微軟反擊蘋果? 顯示器色彩管理必要性
    作為一個初入攝影專業或者是設計製圖專業朋友,關於必須使用蘋果設備的聲音不絕於耳,諸如:「蘋果顯示器的色彩好」或者「使用蘋果讓人覺得有文藝範兒」之類的使用建議。那麼作為一個初入攝影專業或者是設計製圖專業朋友,到底是聽從上面的建議花大價錢買蘋果,還是使用微軟系統PC的顯示器呢?
  • APP設計總結:蘋果vs谷歌系統差異
    編輯導語:蘋果與谷歌系統一直以來都非常重視聆聽用戶的聲音,做符合用戶體驗的設計。作為兩大科技巨頭,蘋果與谷歌這二者之間的競爭也很激烈,在設計領域不斷突破。本文作者比較了二者的區別,看看蘋果與谷歌系統在設計的方法上究竟有何差異。
  • 與蘋果分羹:微軟將於11月推iPad版Office
    資深撰稿人 Dan Frommer 今年早些時候曾提出,如果微軟只是將Office應用在Windows個人電腦或Windows平板電腦中,希望以此來突出Windows的與眾不同,那麼微軟的發展將會出現問題。而在今年一月份,國外創業公司CloudOn發布了一款Office同名iPad應用,允許用戶通過iPad設備訪問和創建MS Office文檔。
  • 福布斯:冤冤相報何時了 蘋果微軟廣告戰(圖)
    賽迪網訊4月8日消息,蘋果歷年推出了很多攻擊了IBM、英特爾和微軟的廣告,而對手們,比如微軟,也適時做出了有力回擊。冤冤相報何時了!不知這場廣告戰會不會因賈伯斯的病情而有所緩解呢?以下為整理出蘋果及微軟回應的攻擊性廣告列表:  1.
  • 蘋果高管:Apple Silicon 上的 Windows 取決於微軟
    11月21日消息在最新的一次採訪中,包括 Craig Federighi 在內的蘋果高管透露了有關於 Apple SiliconM1 設計的更多信息,並討論了 M1 平臺上 Windows 的未來等。眾所周知,自從發布首款搭載定製 Apple Silicon M1 的 Mac 以來,蘋果高管幾周內一直非常活躍在各大採訪現場。蘋果 M1 處理器是取代英特爾計劃重要的第一步,負責此項目的高管則表示對未來充滿信心。在 YouTube 和傳統媒體的採訪詞之間,蘋果一直在重複關於努力推動其 M1 的內容。
  • DNA和RNA的異同點
    這篇文章介紹DNA和RNA的異同點一、DNA和RNA異同點1.核酸是攜帶遺傳信息的物質
  • 蘋果Face ID與微軟Hello比拼
    在9月的新品發布會上,蘋果公司重點介紹了其最新產品iPhone X,尤其是使用了最新的生物識別技術——人臉識別。不過,尷尬的是,現場第一次嘗試人臉識別時,居然沒有成功,這也讓許多人擔心蘋果人臉識別的效果。除了個人隱私,一些人擔心FaceID(人臉識別)不可靠或者不夠快。實際上,這些擔心太多餘。
  • 鋼-混凝土組合梁負彎矩區設計方法的中、歐、美、日規範對比分析
    鋼-混凝土組合梁負彎矩區設計方法的中、歐、美、日規範對比分析 1.浙江省交通規劃設計研究院有限公司浙江杭州323000 摘要:鋼-混組合梁負彎矩區的計算方法對於連續組合梁設計是重難點,國內外關於該區域的計算方法有較大差異。通過對比中歐組合梁相關技術規範,發現國內規範均未考慮混凝土拉伸剛化引起的鋼筋應力增加。
  • 蘋果M1電腦上還能運行Windows嗎?蘋果:留了路,看微軟
    此次「會晤」的目的非常明確:造出第一臺自己定製設計、基於ARM晶片,且能運行MacOS的蘋果電腦。而就在本周,蘋果終於邁出了這一大步——第一批在蘋果M1晶片上運行的Mac誕生。而蘋果的位置比較特殊,我們設計晶片,不是作為商家、供應商或者解決方案,而是為了讓軟體、系統和產品緊密結合。這就是我們所需要的。對於這個問題,Federighi給出了一個非常「蘋果式」的回答:Mac是蘋果的靈魂,是它把我們帶入了計算機領域。
  • 蘋果3D視覺報告:3D視覺深度拆解與分析 (中篇)
    蘋果3D視覺結構光方案分析結構光先驅PrimeSense(蘋果收購)方案分析以色列公司PrimeSense創立於2005年,於2006年研發出3D傳感器,在當年的 E3 大展上與微軟建立了聯繫,在2009年E3大展時,微軟發布了內置PrimeSense 3D傳感器的Kinect一代。
  • 蘋果執行力爆表,微軟:將再次擴充自家Windows系統生態
    前段時間蘋果發布的M1晶片讓業界為之一振,自研能力確實讓友商汗顏,甚至還有消息稱蘋果將在2022年之前再推出桌面級PC自研晶片,到時候在蘋果電腦產品中將再也見不到任何英特爾的影子,而M1晶片更大的意義在於讓蘋果軟體生態實現了大一統,如今在MacBook中已經可運行原生iOS應用,蘋果硬體產品互聯互通性已經達到前所未有的高度
  • 騰訊高級設計師:交互知識樹系列之平臺規範
    說到設計規範,這可能是很多設計師會忽略的一個東西,或者就算注意到了,也並沒有引起足夠的重視,今天咱們就來講講,為什麼設計規範甚至是平臺規範對我們來說很重要?你覺得蘋果、谷歌、微軟的設計團隊怎麼樣?或者你有什麼嚮往的設計公司或團隊呢?