20個非常棒的Material Design設計概念案例

2020-12-11 人人都是產品經理

自從去年google在android新版本Lollipop提出的material design概念後,在世界各地瘋狂地掀起一陣material design熱。Material design不僅看起來令人驚嘆,也是一個前所未有的設計理念。不僅對設計師的影響深大,對開發人員亦是。

現在普遍流行的應用程式都採用這種新的設計理念,並且android端上的APP也是採用material design這種設計理念。對於那些還尚未採用這種設計理念的App,這裡我提一些自己的概念。

Material design 設計理念

Facebook

這是我們最喜歡,也是用戶最聚集的交友平臺,採用了material design設計後是不是更吸引人

Cinema Ticket

以這種方式顯示訂電影票的場景你覺得如何呢?

Event Details

全局以這種material design設計,所有的事項安排都顯得乾淨簡潔。

Calendar for Desktop

即便是臺式桌面端和平板端的日曆App,看起來都是那麼的優雅

Music Player

Material design設計的音樂播放器看起來也是那麼時髦

Google Chrome

覺得chrome的新面貌如何?是不是煥然一新

Explore

Material design也非常適用於冒險和旅行App的設計

Windows 資源管理器

老版windows 資源管理器的設計顯然不適應於現在的設計理念,這款看起來如何?

Payment Cards

對於乏味枯燥的支付頁面,這樣子設計看起來更酷些!

YouTube

YouTube是最先使用material design設計的App之一,這也是一個巨大的優勢。

Photoshop

如果Adobe Photoshop也使用material design會是怎樣呢?

Trello

任務管理App Trello使用material design也許會更加美觀。

Profile Page

一個典型的用戶概要頁面通過material design改造後的樣子

News Feed

採用material design設計,看新聞再也不會覺得無聊

Statistics Page

這個版本的設計,統計頁面看起來也更酷、更直觀些!

Last.fm

全新面貌的Last.fm大家覺得如何?

Kickstarter

Kickstarter目前還沒有android端的App,如果他們計劃上線android端的話,material design也許是不錯的選擇哦!

Instagram

Instagram如果這樣子設計,分享照片會不會更有趣些

Calendar App

一款全新material design設計的日曆App

Runtastic

最受歡迎的培訓應用程式Runtastic採用material design設計的樣子,大家覺得如何?

結論

這些概念設計說不定在你以後設計中會有所幫助,當你嘗試一種新的設計方式去設計你的應用程式時,也許這會給你一些想法上的幫助。

我們希望這些概念設計在以後應用程式的設計和開發中能派上用場,也希望各位設計師和開發人員也不妨考慮一下google這種新的設計理念—material design

 

原文:Rahul Chowdhury

本文由 @BESD設計實驗室 原創發布於人人都是產品經理 ,未經許可,禁止轉載。

相關焦點

  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • 「MD規範」1.1-Material Design設計案例講解-Basil
    one 點設計-木木翻譯Basil是一個菜譜app,使用了MD設計組件和主題創造了一個令人激動和易於探索的品牌體驗。App的設計和品牌一樣十分具有親切感,並且充滿了簡明和令人喜悅的內容。有趣但實用的美學Basil採用了大膽的排版和用色搭配簡單的內容,創造了一個讓人樂於探索且易於使用的app。產品解構Basil應用的信息架構有一個目錄組織,目錄包含分類,層級數據和幾個呈現不同數據的頂級頻道。
  • Material Design:為什麼 FAB (Floating Action Button) 是不好的...
    當你想看看屏幕上最後一行第四個縮略圖時,還需要額外的滾動,這甚至不是最壞的情況。用戶 dumazy 遇到了一個問題,FAB 按鈕掩蓋了 Favourite 按鈕以及屏幕上的時間戳,這說明了一個所有 App 在列表頁面都會遇到的問題,當列表中的最後一項不能在進行進一步滾動時,則更加是一個問題。
  • 谷歌Material Design動效篇
    最佳案例 Material Design中動效設計的關鍵是保證物體運動的物理感,同時不犧牲物體運動的優雅感、簡約感、美感,讓物體的運動充滿魔力,打造無縫式的用戶體驗。下面是一些動效設計規範,通過這些規範,可以理解如何用動效展示理念。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug 修復版本:Bug 修復
  • Italdesign Giugiaro Quaranta概念
    Italdesign Giugiaro Quaranta是一款「極限」產品,是一款環保的四輪驅動超級跑車,它結合了一系列創新方面:造型,驅動技術(將混合動力發動機與太陽能結合在一起)及其內部布局雖然安裝在後置引擎的中間,但可以容納三個成年人和一個孩子,還提供了寬敞的行李箱。
  • NYCxDESIGN必打卡之地wanteddesign IC設計節
    我們需要為設計師們打造一個地方、一個平臺,他們能夠齊聚於此,不過不僅僅是設計師,還有生產商、建築師、學校、博物館等……我們真的非常希望能夠讓所有與設計有關的人成為一個團體,一個國際團體,因為目前我們一直沒有真正做到這一點。」
  • 與設計向前行——訪知名用戶體驗設計公司Rigo design
    通過短短的時間,Rigo design已然發展成為了中國當下炙手可熱的設計品牌。今天的Rigo,從產品設計諮詢,到以產品性格的塑造與品牌DNA設計為基礎,打造從產品定義,概念模型設計,到互動設計,視覺傳達為一體的高質量整合化產品解決方案的設計公司,Rigo形成了從產品願景規劃,概念模型設計,到設計執行的整合體系。
  • 鷗翼門設計,Italdesign DaVinci概念轎跑車,建議書福哥關注一下
    【新車迷網 海外汽車資訊】Italdesign-Giugiaro S.p.A(義大利設計·喬治亞羅公司)是義大利一家汽車設計和工程公司,成立於1968年,總部設於都靈,曾為歐亞多家汽車廠設計旗下汽車產品,包括大眾、寶馬、菲亞特、阿爾法羅密歐、蘭博基尼、豐田、現代汽車等等。
  • 專題 | 精選仿生設計案例
    通過設計與仿生的碰撞與交融,能夠展現產品本身的特點,並增加人與產品之間的情感因素。下面小編精選了十二組仿生設計案例進行分享,陸續小編也會整理不同的專題為您呈上,希望能夠對大家有所幫助。第一組猜你喜歡專題 | 精選自行車設計案例展廳設計 | 精選百張展示設計案例音樂愛好者 | 耳機入門攻略設計競賽|新的一年,準備好你的參賽計劃了嗎?
  • Material Design控制項使用(二)
    本篇接著之前的Material Design控制項總結(一)往下學習support design包下其餘控制項,如果對Material
  • 知乎問答‖遊戲概念設計與Game Design有何不同?考官看作品集的審核要求是什麼?
    我此時此刻正在念遊戲概念設計碩士,完全能夠回答題主的問題。1. 開設此專業的英國大學哪些比較好?遊戲專業包括動畫專業好的英國大學還是有數個,但是開概念設計專業的學校卻不多。在英國,遊戲/動畫專業最好的大學主要有:倫藝、伯恩茅斯、愛丁堡、皇藝,以及提賽德。前四所大學在中國範圍非常有名,而第五個知道的人不多。
  • 【16期·火熱報名】「上海交大/米蘭理工POLI.design/燴設計」情境化軟裝高級研修班!
    米蘭理工大學POL.design設計學院由米蘭理工大學於1999年創立,旨在加強學術研究、公司需求和本土從業者之間的溝通,致力於與合作夥伴一起打造世界知名的致力於設計的資源、知識、結構和實驗室的聚集地之一。
  • 【史上最幹】Material Design複雜響應式設計
    Material Design提出了平面像素的Z軸概念,通過紙片在物理世界中形態的抽象和提煉,定義了各種信息層級和常用狀態的表達方式,並詳細講解了各個細節的處理方法,就像一本考試大綱,囊括了產品中常用的UI細節,甚至一些UX細節。這裡並不贅述,想看詳細的Design Guide請點擊這裡(要搬梯子),翻譯版的點擊這裡。
  • 20個色彩明亮的超炫網頁設計
    隨著夏天腳步的到來,在網頁設計中大量使用明亮的色彩會讓讀者眼前一亮,增加對網頁的好感和好奇心。這期佳作賞析帶來的20個網站,或用明亮的色彩強調自身產品的質感,或用明亮色系的妝容突出模特的俊秀臉龐,或用絢麗的色彩營造令人愉悅的瀏覽氛圍。原本略顯死板的平面網頁在明亮色彩的潤澤下仿佛都跳躍了起來!
  • 分析Google、微軟、蘋果設計規範的異同點
    可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。material design 介紹結合material design由來的原因再看其內容從圖形、動效到基礎控制項,明顯能分析出material design更希望通過規範去解決Android平臺設計碎片化的問題,保證設計風格的一致性。所以在規範的詳細描述中,不論是界面還是控制項都給出詳細的尺寸規範,希望設計師們遵循這些規範,從而保證設計的一致性。
  • 20個優秀主頁設計案例
    這些潛在客戶對你的公司及產品印象的好壞,很大程度上取決於你在網站設計上投入精力的多少。所以花時間構思一個好的網站設計,特別是主頁部分的設計非常關鍵。用戶點擊完搜索結果後首先跳轉到的頁面就是該網站的主頁,主頁直接影響到訪客對該公司及其產品的第一印象,所以必須把這個頁面儘可能設計得友好且抓人眼球。
  • 設計師必備15個國外包裝設計網站
    包裝設計資源retail design blog擁有龐大的包裝設計項目檔案,可以激勵您。如果您正在尋找包裝設計靈感,請訪問package design archive。Pinterest有數百張圖片可供瀏覽,您肯定會在Pinterest上找到一些包裝設計靈感在其檔案中有數十萬個鼓舞人心的圖像,我們不能不在這個列表中包含Pinterest。只需在關鍵字搜索中輸入「包裝設計」,即可看到作品。
  • 解讀Material Design引領的UI設計趨勢
    顧名思義,這是一種考慮事物本質的設計,將電子屏幕裡的UI元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。
  • 想知道什麼是 Material Design?有這十款應用就夠了
    這套設計語言源於 Google 自身,它的特點是將抽象圖層,美觀的過場動畫,高反差的色調以及直覺的物理交互組合在一起。如果正確把握這套設計語言,Material Design 就是清新,簡潔和直觀的象徵。此外,它也給予了 Android 設備統一,協調的體驗。在這篇文章裡,我們將會看看 10 個不錯的 Material Design 案例。