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

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

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

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

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

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

蘋果從擬物化到扁平化的演變

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

功能

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

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

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

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

美學(xué)

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

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

靈感

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

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

易于設(shè)計

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

平面設(shè)計圖標(biāo)非常簡單和極簡

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

擬物設(shè)計

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

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

過時了，還是它？

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

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

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

可能的好處

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

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

流暢的設(shè)計

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

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)動

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

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

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