扁平化設計與Material Design區別在哪裡?

2020-11-25 站長之家

兩種相似的設計風格,一個基於另一個。一個是新熱事物,另一個,有人猜測,已經以自己的方式成為一種時尚。一個是自發的——適應設計的趨勢,另一個卻是有目標——專用的設計指導規範。

你可能明白了扁平化與Material Design之間的衝突了。

但是,他們之間不同是什麼呢,本質上是一個比另一個更好?在某些用途上更好?實際上,一些人想知道它們之間的差別有多大,讓我們從最基本的開始:擬物化設計的身影出現在每一個身上。

擬物化設計

擬物化設計, 在這個背景下,設計是為了模擬真實的物理世界。通常,這需要設計的在線應用的形式看起來像他們的真實世界的變體,比如像電子合成器軟體,做的像鍵盤。這種界面的設計方式,在大部分的時間裡佔據了主導的地位。

問題是,這不是基於數字設備可用性設計的,或者所有的旋鈕和按鈕可以用滑鼠或觸屏操作,它看著只是模仿真實事物的外觀。

實際上,設計圈得到的結論是,需要其他東西,這將去掉所有的復古的裝飾元素,然後給他們留下的東西是,可用性放在第一位。所以他們從界面設計移除所有痕跡的擬物化設計,創建了扁平化設計。

扁平化設計

扁平化設計,在許多方面,基於最基本的元素進行設計。它選擇刪除任何樣式,那些令人捧腹的三維表現方式,像投影,漸變與紋理。它只關注與圖標之間的聯繫,字體和顏色。

這是第一個在數字媒體設計上連貫的風格,一個利用網際網路的獨特的屬性和用戶的需求,快速發現的簡單按鈕,直接配色方案為了快速識別的元素,和簡潔的圖標。

外觀在扁平化設計裡面是次要的:重點是原始的功能。簡單的圖標隱喻甚至可以省略一些網站的內容, 引導用戶進行操作,僅僅基於它的顏色和圖片。此外,它加速加載時間和高或低解析度屏幕上看起來顯示一樣好,提供更加可靠的用戶體驗。正因為如此,對設計者和用戶來說它會讓事情更容易。

贊成的意見

它擁抱了屏幕的限制基於這些去工作,而不是嘗試去做別的事情。

流線型的設計,擺脫不必要的圖形和動畫元素,減少加載時間。

沒有擬物化元素,你的讀者能很快速度發現內容。

刪除所有不必要的設計選擇,使網站設計速度更多

扁平化設計的簡化網站不斷地適應瀏覽器,可以非常容易做出響應。

反對的觀點

扁平化設計可能限制、約束你去使用簡單的顏色,形狀和圖標。

如果走得太遠,很容易不小心創建一個毫無特色的和看起來一般的網站

一些網站,或應用程式,需要複雜的視覺線索來指導用戶來進行如何使用,這是扁平設計的一個主要的失敗點。一個常見的抱怨是,靜態的矢量圖形,它缺乏陰影,邊緣很難分辨是否可點擊按鈕

它的普遍性很難創建一個看起來很獨特的網站或應用程式。

有一點需要注意,這是一個2010年代中期獨特的審美,你的網站很快會過時,如何你不計劃去重新設計你的網站,時間相對會很快。

Material Design

扁平化設計的評論家,認為這走的太遠了,消除所有的擬物化比較激進,即使是有用的。進入,借用Material Design層的概念,使用陰影,將數不清的圖像進行編輯和分離;斜面和動畫,它利用自然交互關聯深度與重要性。

Material Design,是由谷歌開發的一套設計標準,在這個文檔中,它有無數獨特而有趣的特性,但也許是最明顯的是它提出了平面像素的Z軸概念。事實上,它在扁平化設計上面增加了一些擬物化,創造 了一種一群二維平面飛機浮動在對方指定的海拔印象。

想像一張紙,能夠隨意隨意擴展收縮,重塑自身,融合和分離。現在把它們一個個疊放起來(他們也可以漂浮空中),然後在每張上面畫一個網站要素。簡而言之,這就是Material Design的概念。

然而Material Design並不是完美的設計文檔的特徵。它也並非一成不變的鐵桿定律。試著更多的把它想成問我未來設計的物理框架和模板。它的設計具有普遍適應性,就像安卓穿戴手錶一樣,能響應屏幕的各種尺寸,甚至是不同形狀。Material Design的應用在其他app開發商中也在推廣。

Material Design是安卓應用設計的標準,因為它被應用到提及的穿戴設備上。它是否應該用到IOS上是引起不斷爭論的源頭。有人爭論說保持谷歌外形很有必要。其他人則認為它和剩下的作業系統相互衝突。孰對孰錯,全看你自己的決定。

贊成的意見

三維安排讓程序更易於互動:比如陰影被安排用來顯示分層。

和扁平化設計不同,Material Design都有詳盡明確的一套參考,沒有什麼需要你去猜測。

如果你想開發一個多平臺的東西,比如一個網站和一個安卓應用,Material Design對所有設備都提供統一的體驗。這樣的話就會增加用戶使用方便性,進而巧妙地促進你的品牌化。

如果你對動畫感興趣,Material Design是個不錯的方法因為它自帶了許多這一類型的動畫。沒有它們你就只能動手畫了。

反對的觀點

不管喜歡與否,Material Design不可避免的和谷歌關聯。如果你想使自己遠離這點,為你的網站或應用創造一個獨特的特性,使用谷歌指引來實現要困難的多。

不是所有的系統都能實現預期幀頻。而且你很難知道該怎麼做才能提高那些不可實現者的可用性。

動畫會耗盡手機用戶的電池。

強制開發者們遵守設計指南可能會進一步扼殺個體創造力,阻礙更多動畫和裝飾特點的發展。

總結

Material Design和扁平化設計真的沒有那麼大的天壤之別:兩個都用同樣乾淨和最低的美感。當扁平化界面被分割,你基本能從中想到質感界面。儘管Material Design動畫廣泛收到表揚,但是總結起來也不過是更加用戶友好化。事實上,沒有人說你不能把二者的美感相結合,用Material Design激活一成不變的扁平化網站。

在我看來,扁平化網站很實用。比起滿是動畫和複雜圖片的網站,它們的下載速度更快。如果你要設計一個極為簡單的網站,針對使用不同設備,技術經驗水平不等的各種用戶,或者只是重視用戶體驗多於形式,扁平化設計正適合你。如果你對在網站上放各種動畫或動態圖片無感,主要對原始的簡單化和可用性有興趣,毫無疑問我會推薦你選擇扁平化設計。但是如果你想創建一個有動畫的更加花哨的網站,當然要選擇Material Design。

(教程作者:designmodo)

相關焦點

  • 谷歌Material Design UI 真正美在哪裡?設計即功能
    和蘋果以前的擬物設計並不盡相同,Material Design更關心系統反應的質感、層次、深度,和其他物體的疊放邏輯,比如打開頁面時,新頁面不是像以往那樣直接跳轉,而是從一個中心點擴展開來,並且利用原頁面在底部的投影營造出立體空間感,告訴用戶,頁面從哪裡來、到哪裡去,形成一種操作邏輯。從某種程度上來說,Material Design更像是把交互界面變成了一張張有邏輯順序的卡片紙。
  • 關於在iOS當中實踐Material Design的訪談
    當我與界面上的元素進行互動時,我下意識的希望了解這些元素從何而來,又會去到哪裡。界面上的多數交互元素不能只是憑空的出現或消失 – 交互行為與觸發的結果之間沒有視覺上的關聯,用戶很快會迷失方向。交互元素自身的行為特質對於我們理解和記憶界面的交互方式非常重要。譬如我給你一個界面,上面有一個返回按鈕。當你點擊這個按鈕的時候,自然會期望有事情發生。
  • Material design與iOS Human Interface Guidelines對比分析
    本篇分析對比是基於各自官網最新的Material design與iOS Human Interface Guidelines文檔,官方文檔地址將在文末給出,供各位交流學習。如果說MD像一個事無巨細的媽媽,各個元素的分類,使用場景,大小,弧度,顏色風格都設計地清清楚楚,那麼HIG則更像是一個神經大條的爸爸,我這有挺多東西你拿去用,差不多就是這樣做,但你別那樣做。這是非常明顯的區別,但下面我將從設計思路以及設計目標的角度來說明兩者的不同。1.
  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • 解讀Material Design引領的UI設計趨勢
    顧名思義,這是一種考慮事物本質的設計,將電子屏幕裡的UI元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。
  • 「Material Design」的九大設計原則
    ,它的設計美學將會融入到谷歌所有的平臺之中,包括Chrome OS和網頁,它也將形成一個統一的外觀,將所有的產品捆綁在一起。除了在Google+社交媒體上發布了相關內容之外,谷歌還給與會者發送了一些藝術印刷套件,其中就包括一些極具特色的明信片,這些明信片很漂亮,也向人們展示了新設計語言的設計原則。谷歌是這樣介紹的:「設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • 分析Google、微軟、蘋果設計規範的異同點
    可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。material design 介紹結合material design由來的原因再看其內容從圖形、動效到基礎控制項,明顯能分析出material design更希望通過規範去解決Android平臺設計碎片化的問題,保證設計風格的一致性。所以在規範的詳細描述中,不論是界面還是控制項都給出詳細的尺寸規範,希望設計師們遵循這些規範,從而保證設計的一致性。
  • 擬物與扁平之間:Google的新設計理念Material Design
    這個聽上去有些天真的問題啟發了Google主管設計的副總裁Matias Duarte,也為Google未來的設計標準打下了基礎。 「卡片下面是什麼?」Duarte按照這個思路繼續思考下去,卡片的材質是怎樣的?卡片是什麼顏色的?人們是怎樣拿起卡片的?最終,Duarte帶領一群設計師按照這個方向探索,並將其稱為「Material Design」。
  • 設計即功能:淺析谷歌MaterialDesign特性
    在2014年的Google I/O大會上,谷歌發布了Android L即Android 5.0,並推出Material Design,重新統一了谷歌的設計語言,確立了谷歌設計的未來發展方向。Material Design字面之意為「材料設計」,但是更願意將之翻譯為「本質設計」,顧名思義,這是一種考慮事物本質的設計,將顯示屏裡的各種UI元素看成是一種不存在於現實世界的新的物質,並賦予它物理特性,因此Material Design並不是去擬物化的設計,可以稱之為抽象化設計。
  • 【史上最幹】Material Design複雜響應式設計
    Material Design2011年,Gmail郵箱的按鈕變得更加扁平化2012年,Google引入分層的卡片設計,使用更多的空白和精心設計的層次排版結構。經歷了幾年的迭代和提煉,Google尋找到了一種可以貫通的理論體系,即把系統內的各種設計都規範成一種變形的紙片,並套用現實中紙墨的物理模型進行交互,這就是2014年Google I/O大會隆重發布的Material Design。
  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • Google設計師談論Material Design
    本文轉載自愛範兒 扁平化設計是一個過度濫用的詞彙,但是,它的風行反映了設計界的一種趨勢,人們正在快速拋棄擬物化設計。有種觀點是,在觸控界面發展初期的時候,人們需要熟悉感,而模仿現實的界面能夠做到這一點。當人們已經習慣了觸控界面之後,就不需要現實世界的隱喻了。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    Material Design 風格 UI 框架Vuetify 是一個基於 Vue.js 精心打造 UI 組件庫,整套 UI 設計為 Material 風格。能夠讓沒有任何設計技能的開發者創造出時尚的 Material 風格界面。
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    這是 Google 自去年 Android 5.0 開始推廣的全新設計語言,而整個設計語言的暗喻基於 material——材料和質感。隨著 Android 5.0 的普及、國內第三方 ROM 的更新和跟進,相信 Material Design 會真正成為國內開發者們所面臨的產品抉擇——我們的應用要不要採用 Material Design?
  • Material Design設計語言-數據可視化
    本文總結了數據可視化設計的五個要點,分別為:原則、類型、樣式、行為、儀錶板。隨著5G時代的到來,物聯網的興起,可視化設計在移動端的應用越來越多了。在行業內還沒有一個標準的規範可參考之前,谷歌的可視化團隊於2019年6月率先開發了數據可視化設計指南。數據可視化:主要是藉助於圖形化手段,清晰有效地傳達與溝通信息。
  • 谷歌推出AllWhite視覺風格,這是MaterialDesign語言的新變化嗎?
    長徵工業設計中心設計的長徵從這裡開始!長徵工業設計中心是以工業設計為主題的園區,位於上海市普陀區同普路1412號。UI設計變化本次「All- White」在UI視覺設計上較之前有著明顯的區別。之前的Material Design 的設計風格是典型的卡片式設計,大色塊和帶有非常顯著的陰影。
  • 埃森哲收購設計諮詢公司designaffairs
    此次收購將提升埃森哲工業X.0部門為製造企業設計智能產品和服務的能力,並通過智能產品、智能服務、智能平臺和新商業模式,助力製造企業進行數位化變革。 designaffairs成立於1997年,在德國慕尼黑和埃爾蘭根、中國上海及美國波特蘭等地工作室共擁有100多名專業人員,能夠為客戶提供包括工業、用戶界面和材料設計,以及互動創新、機械和可用性工程、原型設計、設計研究、品牌戰略等服務。
  • 起亞迎來新LOGO : 採用扁平化設計 去除橢圓形外環
    日前,據媒體報導,起亞計劃於北京時間1月6日晚舉行新聞發布會 , 此次發布會有望發布全新設計後的品牌LOGO,同時官方還將公布未來的新車計劃和品牌戰略。與現在的LOGO相比,新LOGO的時尚感和連貫性更強。其採用了時下流行的扁平化設計,同時去除了橢圓形外環,這也是自1994年以來的最大變化。
  • 在外企把「設計圖紙」翻譯成design picture,被同事笑了好幾個月
    現在我們來重點學習如何表達「設計圖紙」。有同學翻譯成design picture,外企同事一聽,會心一笑,覺得你說的是中式英語,明顯缺少工作運用英語的經驗。「設計圖紙」正確的說法是design drawing。