移動應用中 Material Design 的精美實現

已發表: 2021-08-23

如今,許多人在移動應用程序中尋找 Material Design 的精美實現來尋找靈感。

是的,Material Design 出現並改變了設計歷史,近兩年它在移動應用程序設計中非常流行,並且在移動應用程序中有大量漂亮的 Material Design 實現。

但在此之前,讓我們先了解一下 Material Design 是什麼,以及為什麼它會成為最流行和最成功的設計語言。

什麼是材料設計?

Material Design 是谷歌於 2014 年開發的一種設計語言。 在 Google Now 中首次亮相的“卡片”主題的基礎上,Material Design 更自由地使用了基於網格的佈局、響應式動畫和過渡、填充和深度效果,例如照明和陰影。

截至 2015 年,大多數適用於 Android 的 Google 移動應用程序都採用了新的設計語言,包括 Gmail、YouTube、Google Drive、Google Docs、Sheets 和 Slides、Google Maps、Inbox。

所有 Google Play 品牌的應用程序,以及較小範圍內的 Chrome 瀏覽器和 Google Keep。 Google Drive、Docs、Sheets、Slides 和 Inbox 的桌面網絡界面也包含了它。

用於 Web 應用程序用戶界面的 Material Design 的規範實現稱為 Polymer。

它由 Polymer 庫、為不原生實現標準的瀏覽器提供 Web 組件 API 的 shim 和元素目錄組成,其中包括具有 Material Design 視覺元素的“紙質元素集合”。

該系統專注於基於網格的佈局、過渡效果和深度,很快就進入了 Android 應用程序,並使系統達到了 iOS 的設計標準。

材料設計的原則

視覺線索啟發

谷歌使用“觸覺現實”一詞來描述他們的設計理念,因為材料設計中的表面和邊緣受到現實生活中的紙張和墨水研究的啟發。

這有助於用戶毫無困難地直觀地理解屏幕上的數字界面。 基於現實的設計使屏幕上的對象可識別且易於交互。

大膽的美學

材料設計中的顏色選擇大膽而深思熟慮。 引人注目的配色方案與基於印刷的基礎設計技術相結合,讓用戶沉浸在體驗中。

有意留白、邊緣到邊緣的圖像和大字體用於強調用戶操作。 這樣,用戶可以快速了解他們屏幕上界面的用途和功能。

相關文章:移動應用程序設計中最常見的錯誤

通過運動產生的意義

與人工和機械的動畫不同,材料設計中的運動顯得流暢自然。 Google 建議以幾種不同的方式執行此操作:

  • 自然加速和減速:為了避免不自然的運動,頁面上的元素應該平滑地加速和減速。 突然的開始、停止和方向的變化會令用戶感到不安和分心。
  • 視覺連續性:兩種視覺狀態之間的過渡應該是平滑且毫不費力的,這樣用戶才不會走神。 當一個網站或應用程序從一個頁面移動到另一個頁面時,太多的花里胡哨是不必要的。
  • 分層時間安排:包含最重要內容的元素應通過放置在最容易關注的路徑上來強調。 換句話說,重要的是要引起對重要元素的注意。
  • 一致的編排:動畫元素不應該隨機過渡,因為這可能會分散注意力。 相反,他們應該在有意義的有序路徑中旅行。

Material Design 不只是創造秩序,它創造有目的和意義的秩序。 這是谷歌品牌的感官表達。

如果它找到購買,它可能是對蘋果明顯壟斷崇高用戶體驗的第一個嚴重威脅。 作為一名 iPhone 愛好者,我不得不承認,這是我第一次開始對 Android 進行側視。

Material Design 令人麻木的特殊性是對兩個事實的回應:

  • 如果開發人員有可能破壞 UI,他們會的。
  • 好的設計的替代品不是沒有設計,而是糟糕的設計。

現在,這裡有一些在移動應用中最漂亮的 Material Design 實現。

誰能比創建它的人更好地實施 Material Design。 谷歌日曆是移動應用中最漂亮的 Material Design 實現之一。 下載量超過 1.000.000 次,它肯定會震撼整個派對。

谷歌日曆

對於初學者來說,谷歌的應用程序最終摒棄了大多數日曆應用程序使用的傳統擬物化設計,這種設計模仿了物理規劃器的佈局。

不再需要在紙上寫下我們的日程安排。 Google 的日曆為您提供垂直佈局,並將當前日期放在頁面頂部。

這樣,您只能看到即將到來的日子和事件。 什麼都沒有發生的日子被濃縮了,這進一步簡化了體驗,只向您展示真正有用的東西。

對界面的這種單一更改同時允許用戶保持在體驗的中心,以便 UI 圍繞他們移動。 加入一些視差滾動,你就有了一個非常漂亮的應用程序。

印象筆記

Evernote 因其在材料設計方面的表現而備受讚譽,並且是移動應用中材料設計精美實現的一個引人注目的例子

該應用程序始終具有強大且一致的配色方案,並且設計精良且功能強大。 圖標清晰有效地表示它是文本筆記、手寫筆記還是您將要拍攝的照片。

大像圖標簡潔大方,而網站、iOS 和 Windows 10 應用程序也同樣經過精心設計和佈局。

微軟健康

Microsoft Health 實際上是 Play Store 上最好的例子之一。

該應用程序旨在與 Band 健身追踪器配合使用,並以簡單的垂直佈局顯示您的所有統計數據以及平面白色圖標。 單擊這些標題之一時,面板將“打開”以顯示您的統計信息。

UI 非常適合讓您一目了然,同時可以根據需要選擇更深入的內容,這是良好應用程序設計的標誌。

神話般的:激勵我

很多人認為,Fabulous: Motivate Me 是移動應用程序中最精確、最深思熟慮的材料設計實現。

該應用程序以其清晰、扁平的圖像和大膽的顏色以所有常規方式探索新的材料設計原則,但它也有一些在 Play 商店中最吸引人的動畫。

如果沒有 Facebook Live 的移動應用程序,這份名單就不完整。

該應用程序是 Material Design 的一個非常簡單但有效的示例。 它以一種通常看不到的方式使用陰影; 通過使用淺色陰影而不是深色來提供深度。

它有趣地使用了圖像、動畫和交互設計——Material 的關鍵方面。