這是扁平化設(shè)計(jì)（Flat design）與質(zhì)感設(shè)計(jì)（Material Design）的對(duì)比，以發(fā)現(xiàn)哪種界面設(shè)計(jì)有利于可用性并擁有更好的用戶體驗(yàn)！

扁平化設(shè)計(jì)與質(zhì)感設(shè)計(jì)——哪個(gè)更好？我們深入探討了 Material Design 以及近年來(lái)席卷 UX 設(shè)計(jì)社區(qū)的另一種設(shè)計(jì)趨勢(shì)：扁平化設(shè)計(jì)。這些設(shè)計(jì)系統(tǒng)以其極簡(jiǎn)主義方法和鮮明的 UX 設(shè)計(jì)相似性而聞名，讓我們發(fā)問(wèn)：哪些因素會(huì)影響它們之間的設(shè)計(jì)選擇？

扁平化設(shè)計(jì)與材料設(shè)計(jì)：起源

什么是扁平化設(shè)計(jì)？

將扁平設(shè)計(jì)為相反skeuomorphic設(shè)計(jì)，它采用三維肖像模仿現(xiàn)實(shí)生活中的對(duì)象。在許多方面，扁平化設(shè)計(jì)是對(duì)擬物化設(shè)計(jì)的直接反應(yīng)。

其范圍是，將東西還原到2D將提高可用性，改善UI的美學(xué)，并減少設(shè)計(jì)時(shí)間。這一切都證明是對(duì)的。它有進(jìn)一步的連鎖反應(yīng)，減少了應(yīng)用程序和網(wǎng)站的加載時(shí)間。

蘋(píng)果從擬物化到扁平化的演變

當(dāng)然，Skeumorphic設(shè)計(jì)達(dá)到了它的目的，我們將在下面詳細(xì)介紹，但我們可以說(shuō)扁平化設(shè)計(jì)更真實(shí)地體現(xiàn)了數(shù)字景觀。為什么？因?yàn)槿藗儾辉傩枰[喻和現(xiàn)實(shí)主義來(lái)理解如何使用技術(shù)。極簡(jiǎn)主義和平面設(shè)計(jì)是相輔相成的，所以很多平面設(shè)計(jì)看起來(lái)都是有意的。

然而，對(duì)于那些不希望使用扁平化設(shè)計(jì)的人來(lái)說(shuō)，在skeumorphic設(shè)計(jì)和前者之間確實(shí)存在一個(gè)中點(diǎn)：neumorphic設(shè)計(jì)。

Neumorphism采用了扁平化設(shè)計(jì)的許多極簡(jiǎn)主義影響，同時(shí)通過(guò)使用顏色并將其與背景混合，為圖像增加了些許深度。話雖如此，neumorphic和flat設(shè)計(jì)之間的差異非常微妙

扁平化設(shè)計(jì)的好處

• 整潔、無(wú)干擾的設(shè)計(jì)
• 排版清晰，可讀性高
• 輕松調(diào)整響應(yīng)式設(shè)計(jì)
• 在瀏覽器和應(yīng)用程序中加載速度更快

扁平化設(shè)計(jì)的缺點(diǎn)

• 缺乏深度使元素看起來(lái)不太可點(diǎn)擊
• 創(chuàng)意設(shè)計(jì)和脫穎而出更難
• 沒(méi)有像其他設(shè)計(jì)系統(tǒng)那樣的設(shè)計(jì)指南

什么是質(zhì)感設(shè)計(jì)？

Material Design 在所有 Android 設(shè)備中無(wú)處不在，它是 Google 的誕生產(chǎn)物，其目的是創(chuàng)造一種連貫、實(shí)用且易于訪問(wèn)的視覺(jué)語(yǔ)言。目的是設(shè)計(jì)基于并充分利用觸覺(jué)屏幕的網(wǎng)絡(luò)和移動(dòng)體驗(yàn)，從紙和墨水中汲取靈感。

紙和墨水？是的，這是對(duì)的。谷歌最初賦予它量子紙的名字，后來(lái)更名為材料設(shè)計(jì)。設(shè)計(jì)原則嘗試使用z 軸將紙張的物理特性轉(zhuǎn)換到屏幕上。背景就像一張紙，UI 的元素和行為模仿紙張的剪切和重新調(diào)整大小、隨機(jī)排列和裝訂在一起的能力。

Material Design 的元素模仿太空中的紙

與扁平化設(shè)計(jì)不同，紙張等材料會(huì)投下陰影，為 UI 元素創(chuàng)造一種深度感。它們還可以改變形狀并由用戶以多種方式操縱。

在許多方面，Material Design 旨在將扁平化設(shè)計(jì)和擬物化設(shè)計(jì)的兩全其美。與扁平化設(shè)計(jì)一樣，Material Design 也旨在使用大膽的顏色和 2D 圖標(biāo)，但其目的是部署從基于印刷的設(shè)計(jì)中汲取靈感的圖形和有意的 UI。

Material Design 使用 z 軸創(chuàng)建陰影和深度

質(zhì)感設(shè)計(jì)的好處

• 統(tǒng)一簡(jiǎn)單的界面
• 原則和目標(biāo)為設(shè)計(jì)師提供一致性
• Z 軸創(chuàng)建深度
• 使用直觀
• 使用動(dòng)作向用戶展示屏幕上發(fā)生的事情

材料設(shè)計(jì)的缺點(diǎn)

• 浮動(dòng)操作按鈕等元素可能是多余的
• 設(shè)計(jì)僅適用于 Android 設(shè)備
• 與谷歌密切相關(guān)，品牌空間較小
• 沒(méi)有動(dòng)作設(shè)計(jì)的用戶界面通常缺乏直觀性

扁平化設(shè)計(jì)與材料設(shè)計(jì)：它們有何不同？

功能

也許觀察設(shè)計(jì)語(yǔ)言之間差異的最佳方法是查看它們與擬物化設(shè)計(jì)的關(guān)系。扁平化設(shè)計(jì)意在將自己與擬物化設(shè)計(jì)盡可能拉開(kāi)距離，讓它從后視鏡中徹底消失。完全平坦。

另一方面，Material Design 并沒(méi)有完全拒絕它的遠(yuǎn)親。它在某種程度上試圖模仿物理世界，但通過(guò)使用 z 軸以一種更平坦、更微妙的方式。這可以幫助展示元素層次結(jié)構(gòu)、可點(diǎn)擊性，也可以作為交互的提示。然而，這里的比喻是紙張的自然運(yùn)動(dòng)——你不會(huì)看到任何垃圾桶或?qū)汒悂?lái)相機(jī)！

從左到右：Material Design vs. Flat Design UI

相反，扁平化設(shè)計(jì)不使用任何陰影，也不使用 z 軸，讓一切都牢牢扎根于第二維。這有助于進(jìn)一步簡(jiǎn)化設(shè)計(jì)并可以大大減少頁(yè)面加載時(shí)間，盡管如果按鈕看起來(lái)不可點(diǎn)擊會(huì)犧牲可用性。

美學(xué)

扁平化設(shè)計(jì)傾向于使用有限但大膽的顏色來(lái)減少干擾，而 UI 元素設(shè)計(jì)的簡(jiǎn)單性鼓勵(lì)效率和功能。

Material Design 也力求簡(jiǎn)單，但從不同的角度嘗試：與現(xiàn)實(shí)世界元素（如紙）的基本交互。這與不試圖模仿現(xiàn)實(shí)世界中的任何事物的平面設(shè)計(jì)形成鮮明對(duì)比。

靈感

扁平化設(shè)計(jì)從包豪斯等設(shè)計(jì)運(yùn)動(dòng)中汲取靈感。包豪斯的一項(xiàng)重要原則是功能遵循形式。這就是平面設(shè)計(jì)被剝離，沒(méi)有多余裝飾的原因。

另一方面，材料設(shè)計(jì)從印刷設(shè)計(jì)和自然中汲取了很多影響。

易于設(shè)計(jì)

由于扁平化設(shè)計(jì)主要是一種旨在拒絕擬物化設(shè)計(jì)的反動(dòng)運(yùn)動(dòng)，因此它仍然如此。它開(kāi)始是一種設(shè)計(jì)趨勢(shì)；沒(méi)有組織設(shè)計(jì)它，就像 Material Design 的情況。因此，在設(shè)計(jì)平面 UI 時(shí)需要遵守的規(guī)則和指南較少。對(duì)于一些設(shè)計(jì)師來(lái)說(shuō)，這可能是一種解放，對(duì)于另一些設(shè)計(jì)師來(lái)說(shuō)，缺乏方向可能是一種障礙。

平面設(shè)計(jì)圖標(biāo)非常簡(jiǎn)單和極簡(jiǎn)

然而，有一件事是肯定的：扁平化設(shè)計(jì)的 UI 設(shè)計(jì)肯定比材料設(shè)計(jì)的 UI 更快。為什么？因?yàn)樗麄兗兇獾暮?jiǎn)單。相反，Material Design 需要更多細(xì)節(jié)，尤其是在 UI 元素中添加微妙的深度。作為與谷歌有關(guān)的設(shè)計(jì)系統(tǒng)，它還需要更嚴(yán)格地遵守其準(zhǔn)則。

擬物設(shè)計(jì)

這種風(fēng)格開(kāi)啟了更平坦的數(shù)字世界的靈感。Apple 是擬物化設(shè)計(jì)的第一個(gè)實(shí)踐者，這是一種旨在幫助用戶從模擬過(guò)渡到數(shù)字的設(shè)計(jì)系統(tǒng)。為了幫助他們應(yīng)對(duì)這種數(shù)字劇變，Apple 設(shè)備 UI 的圖標(biāo)是 3D 的。他們代表了現(xiàn)實(shí)中的物理項(xiàng)目，以幫助他們的用戶理解不同圖標(biāo)的概念。

眾所周知的例子包括軟盤(pán)圖標(biāo)，它已成為大多數(shù)人的第二天性知識(shí)，作為保存工作或進(jìn)度的功能。同樣，垃圾桶圖標(biāo)已成為刪除和回收計(jì)算機(jī)上文件的同義詞。

過(guò)時(shí)了，還是它？

然而，世界現(xiàn)在發(fā)現(xiàn)自己不需要模仿現(xiàn)實(shí)世界，因?yàn)榇蠖鄶?shù)人已經(jīng)習(xí)慣于每天使用網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序。他們不再需要如此詳細(xì)的圖標(biāo)來(lái)找到直觀的 UI。

從更多細(xì)節(jié)到更少：蘋(píng)果圖標(biāo)的演變

此外，擬物化在設(shè)計(jì)方面需要更多的工作，并且經(jīng)常導(dǎo)致用戶界面更加混亂。為了進(jìn)一步加劇問(wèn)題，它還導(dǎo)致網(wǎng)頁(yè)和應(yīng)用程序的加載時(shí)間更長(zhǎng)。出于這些原因，正如我們上面提到的，擬物化設(shè)計(jì)引起了設(shè)計(jì)界的強(qiáng)烈反應(yīng)，要求稍微改變一下：進(jìn)入扁平化設(shè)計(jì)——擬物化設(shè)計(jì)的對(duì)立面。

可能的好處

然而，這也不是說(shuō)擬物化設(shè)計(jì)已經(jīng)死了！它仍然可以帶來(lái)潛在的好處，例如為沒(méi)有成為數(shù)字原住民特權(quán)的老一代設(shè)計(jì)技術(shù)。

當(dāng)涉及到 VR 應(yīng)用程序的開(kāi)發(fā)時(shí)，設(shè)計(jì)師還可以發(fā)現(xiàn)擬物化設(shè)計(jì)的前所未有的用途，因?yàn)?3D 界面在幫助用戶導(dǎo)航虛擬世界時(shí)再次變得有意義。

流暢的設(shè)計(jì)

Fluent Design也值得一提，因?yàn)樗c谷歌的 Material Design 相似。Microsoft 的設(shè)計(jì)系統(tǒng)帶有一套非常標(biāo)準(zhǔn)化的指導(dǎo)方針，與 Material Design 的方式非常相似。微軟 Fluent Design 的主要目標(biāo)是創(chuàng)造“簡(jiǎn)單的元素、系統(tǒng)的流程和連貫的產(chǎn)品，成為微軟設(shè)計(jì)的代名詞?！?/span>

Microsoft 的 Fluent Design 用戶界面

他們打算將 Fluent Design 部署到一系列軟件產(chǎn)品和操作系統(tǒng)中，例如 Windows、Web 應(yīng)用程序——甚至 Android 和 iOS。您甚至可以注意到包括 Xbox 在內(nèi)的不同 Microsoft 產(chǎn)品的 Fluent Design UI。

與 Material Design 類似，微軟希望 Fluent Design 有點(diǎn)基于自然物理，UI 元素基于以下主要原則：

• 規(guī)模
• 材料
• 深度
• 光
• 運(yùn)動(dòng)

使用 Fluent Design 系統(tǒng)的好處是顯而易見(jiàn)的——如果您想設(shè)計(jì)在 Windows 桌面或手持設(shè)備上使用的應(yīng)用程序，或者實(shí)際上是在任何范圍的 Microsoft 產(chǎn)品中使用，那么使用 Fluent 是一個(gè)明智的決定！

結(jié)論 - 扁平化設(shè)計(jì)與質(zhì)感設(shè)計(jì)？

很明顯，扁平化和質(zhì)感設(shè)計(jì)系統(tǒng)都有自己的優(yōu)點(diǎn)和缺點(diǎn)。很明顯，他們的原則和目標(biāo)略有不同。但是對(duì)于設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，扁平化設(shè)計(jì)的轉(zhuǎn)瞬即逝可能意味著它不會(huì)持續(xù)存在，但質(zhì)感設(shè)計(jì)的明確指南為其提供了一個(gè)可以建立和改進(jìn)的堅(jiān)實(shí)基礎(chǔ)。