25 個你會喜歡的材料設計示例

已發表: 2018-07-10

Material Design 是一種視覺語言,它綜合了優秀設計的基本原則,並將其與現代科學技術的創新相結合。

目錄隱藏
CryptoAim 儀表板
別針
該機構
別針
垂直菜單概念
別針
內容策略工具
別針
Receptiva – 手機
別針
CasualTrack 應用程序
別針
在線編輯器
感官批評
別針
移動 SDK – Android 上的票務、聊天、文章
別針
趨勢 – 每日 UI 挑戰 069
別針
博文UI設計
別針
材料設計壁紙
別針
電子學習應用程序 UI 概念
別針
日曆
別針
SmartEnergy Ios 應用程序
別針
谷歌播放音樂重新設計概念
別針
初次約會應用
別針
應用程序設計
別針
現場檢查員應用程序
別針
登錄/註冊動畫
別針
酒店預訂 - 每日 UI 挑戰 067
別針
Natgeo 網站佈局
別針
GrandPad Android 應用程序 – 重新設計
別針
服務:圖形
別針
錢包設計

以下是我們喜歡的一些材料設計示例。 每一個都遵循 Material Design 的趨勢和原則,並且有一些獨特的東西可以教給你。

如果你喜歡 Material design 用戶界面的簡潔性,那麼你會喜歡這個列表。 我們在這裡收集了應用程序和網站的概念,具有不同的調色板、結構和佈局。 享受!

想要更多? 查看這些材料設計資源、材料設計顏色工具和免費材料設計背景。

CryptoAim 儀表板

CryptoAim 是一個很酷的 Material Design 應用程序,它允許您檢查許多不同加密貨幣的搜索趨勢。 它有一個黑暗的用戶界面,帶有現代和乾淨的細節。

1 CryptoAim 儀表板材料設計示例 別針

該機構

這是一個基於材料設計趨勢的模型網站。 它以創新的方式成功地結合了鮮豔的霓虹色。 誰能想到黃色、藍色和紫色在同一個調色板中如此搭配?!

2 代理材料設計實例 別針

垂直菜單概念

看看這個遵循材料設計趨勢的垂直菜單概念。 當靠近屏幕邊緣時,這個簡單的菜單會垂直重新對齊,以使所有菜單項完全可見。

3 垂直菜單概念材料設計 別針

內容策略工具

這是一個內容策略工具的設計。 它有一個色彩鮮豔的用戶界面,帶有簡單而細緻的元素。 它包含一個進度和活動指示器,是用戶使用應用程序需要採取的步驟的視覺指示。

4 內容策略工具材料設計示例 別針

Receptiva – 手機

這是為 Tec Mobile 公司創建的一個很酷的系統。 其目的是為活動組織者和在那里工作的員工提供乾淨的活動管理體驗,使其變得簡單快捷。 該設計遵循 Material 趨勢,包括一個用於平板電腦和手機的管理網絡系統和應用程序。

5 Receptiva - 移動材料設計示例 別針

CasualTrack 應用程序

這是一個名為 CasualTrack 的 Android 應用程序的設計。 此結構包括頂部的永久應用欄和右下角的浮動操作按鈕。

6 個 CasualTrack 應用材料設計示例 別針

在線編輯器

這是在材料設計原則的幫助下創建的漂亮的在線編輯器設計。 它包括通知用戶特定任務的對話框。 別針

感官批評

這是 Sens Critique 的重新設計概念,這是一款法國文化應用程序,您可以使用它來發現、評價和評論電影、連續劇、音樂、書籍等。 它包含網格列表——標準列表視圖的替代方案,可以提高對它們提供的內容的視覺理解。

8 Sens Critique 材料設計示例 別針

移動 SDK – Android 上的票務、聊天、文章

以下是 Android 上 Zendesk Mobile SDK 的一些屏幕示例。 它包含一個浮動操作按鈕,代表應用程序中的主要操作。 它是圓形的,中間有一個圖標,懸浮在屏幕右下角的 UI 上方。

9 移動 SDK - 票務、聊天、Android 材料設計示例文章 別針

趨勢 – 每日 UI 挑戰 069

這是一個股票圖像應用程序的設計,它在頂部顯示趨勢圖像。 它提供跨所有平台和設備的統一體驗,並包含一些基本的移動規則。

10 Trending - 每日 UI 挑戰 Material Design 示例 別針

博文UI設計

在這篇博文的材料設計概念中,排版有很大的用途,但是字體的大小應該稍微增加。

11 博客文章 UI 設計 Material Design 示例 別針

材料設計壁紙

你是材料設計的粉絲嗎? 下載此免費壁紙並將其用於您的手機或桌面屏幕。

12張Material Design壁紙 別針

電子學習應用程序 UI 概念

這是一個使用 Material Design 2.0 原則的電子學習課程應用程序的小型 UI 概念。 查看精心製作的圖標!

13 E-learning app UI 概念 Material Design Example 別針

日曆

這是用於管理所有重要內容的應用程序的日曆屏幕設計。 該應用程序包含此內置日曆,可讓您查看所有活動。

14 日曆 別針

SmartEnergy Ios 應用程序

這是 SmartEnergy IOS 應用程序的設計,它為您提供了從智能手機連接到家庭能源主板的簡單方法。

15 SmartEnergy Ios App Material Design 示例 別針

谷歌播放音樂重新設計概念

這是一個遵循所有 Material Design 2.0 原則的 Google play 音樂重新設計概念。 詳細檢查一下。

16 谷歌播放音樂重新設計概念 別針

初次約會應用

這些是 Firstdate iOS 應用入門的一些 Material Design 視覺效果。 它包括可愛的插圖和乾淨且用戶友好的流程。

17 Firstdate 應用材料設計示例 別針

應用程序設計

Material Design 中的顏色靈感來自於放置在中性環境中的大膽色彩。 它還包含深陰影和明亮高光,這是下面設計的另外兩個特徵。

18 應用程序設計 別針

現場檢查員應用程序

這是用於監控和審計對象的 Field Inspector 移動應用程序概念。 這些屏幕顯示主菜單、地圖上的對象和需要檢查的參數列表。

19 Field Inspector 應用程序材料設計示例 別針

登錄/註冊動畫

該調色板由原色和強調色組成,旨在和諧地協同工作。 這個設計理念還有一個流暢的動畫值得一試。

20 登錄:註冊動畫材料設計實例 別針

酒店預訂 - 每日 UI 挑戰 067

材料設計從基於印刷的設計元素中汲取靈感——例如排版、顏色和圖像——並將其適應網絡以創建層次結構和焦點。 這正是下面的設計所做的,它的基線網格和結構模板。 它通過重複視覺元素和結構網格提供一致的解決方案。

21 酒店預訂 - 每日UI挑戰 Material Design Example 別針

Natgeo 網站佈局

在 Material design 中,紙張的物理特性,例如平整度和不透明性,被轉換到屏幕上。 下面是這個原則的一個例子。

22 Natgeo 網站佈局材料設計示例 別針

GrandPad Android 應用程序 – 重新設計

這是 GrandPad 的 Android 配套應用程序的重新設計。 這個 iOS 應用重新設計利用了 Material Design 的靈活性和新的 Extended FAB 材質組件。

23 GrandPad Android 應用程序 - 重新設計 別針

服務:圖形

材料設計為用戶創造了一種視覺語言,綜合了良好設計的基本原則並使其現代化。 這是一個圖標圖形的例子。

24 服務圖形材料設計示例 別針

錢包設計

在應用程序使用的 Material Design 中,菜單通常在與按鈕交互時出現,然後顯示選項列表。 這是一個很好的例子!

25 錢包設計材料設計實例 別針