14 款 Material Design 介面設計 Android App 嘗鮮推薦

之前寫過一篇文章:「10 款介面設計一用就會愛不釋手的 Android App 推薦」,推薦那些好看、好用、順手的優質 Android App,在那篇文章中,我提到介面的美醜是個人主觀的認定,所以我的出發點不只是美,更重要的是使用者覺得好用順手,由此來設立一個相對客觀的出發點。

而在今年的 Google I/O 大會後, Google 提出的 Material Design 介面設計,也將成為未來 Android 與 Google 服務的設計風格,它的特色是來自於紙墨和數位結合的靈感,利用紙張的實體感去設計介面的層次與流程,例如堆疊的卡片、換頁的渲染動畫,展現一個讓用戶更容易找到操作方向的「空間感」。

那麼,目前的 Android App 中,有沒有已經具備 Material Design 設計的應用程式呢?今天這篇文章,就為大家整理在 Android App 中符合這個風格的好看、好用 App,提供給喜歡嘗鮮新介面設計的朋友參考。

2015/6/14 新增:體驗Android的最佳介面!16款 Android App 精選下載




我不是專業設計師,無法用正確的語彙來生動描述 Material Design, 尤其 Material Design 的特色之一在於「介面轉換」、「空間層次」的動畫,所以大家不如看看下面的 Google 官方影片,就能很快的體會這個介面設計的特色。

附註:動畫效果部分比較難以在下面文章裡用文字表達,就請大家依照文字盡可能想像。







這是一款新的計算機 App,利用 Material Design 風格讓上半部呈現出清楚的算式與運算結果,而下半部的計算機鍵盤則可以左右滑動切換不同卡片,並且利用綠色按鈕凸顯出最重要的「等於」確認按鈕。

按下左上方的幾顆功能選項,則會用渲染動畫的方式切換不同功能, Material Design 的設計主打之一就是如紙張般切換的動畫,但這部分在文章裡我只能用文字加以描述了。






簡單易用的多國貨幣匯率換算 App ,用計算機的方式讓我們可以更即時的算出自己需要的匯率,尤其出國旅行購物當下非常便利。而匯率計算機的設計同樣的展現 Material Design 用上方大畫面凸顯主要資訊的風格,另外右方可以拉出卡片查看近期匯率波動。






把各式各樣的度量單位換算統整在一張一張不同的卡片中,例如下圖是關於數位儲存容量的換算卡片頁面,只要輸入其中一個單位的數字,就可以立即顯示其他單位的換算結果。

而右下方以顯眼的飄浮立體按鈕,提供使用者小計算機卡片的功能,計算機卡片會以渲染動畫轉換疊在主畫面上,提供臨時計算需要。






一個簡易版的檔案總管,但是對大多數使用者來說,可以瀏覽、搜尋、使用檔案其實就夠了,太多的功能反而增加麻煩。而且這款檔案總管也使用了最新的 Google Material Design 設計風格,以上方顯眼色塊顯示控制列,右下方的原點按紐新增檔案,並且以立體滑動的卡片層級區分不同功能。






這是一款個人私密日記服務,在簡易精美的介面中,讓我們新增圖文日記,還可以加上地點、天氣等額外標註。並且在瀏覽日記時,以卡片翻頁動畫呈現每則不同日期的日記。

Material Design 本身就是學習紙墨特性的設計,而應用在日記服務上,就讓這個 App 更有個人手帳本的感覺。






已經提供用戶申請試用版的 Evernote Beta Android ,是一個在功能上、介面上都具有突破性的大更新,我自己試用一段時間後,認為這是目前所有平台上最優異的 Evernote 設計。

我們今天先不談裡面一些強大的隱藏功能,單就介面上來看,新版 Evernote Beta 同樣採用了 Google 的 Material Design 風格,以卡片動畫渲染出每則筆記的空間層次,然後利用右下方顯眼的按鈕動畫進行各種筆記的新增,在操作上更不容易迷路,而且更順手。






這是一款只支援 Nexus 5、 Moto X、 LG G2 等少數高階手機的計步器,因為使用了硬體上特殊的省電計步功能。而這款計步器的設計風格也符合 Material Design 的思維,主要的控制切換都集中在下方的顏色按鈕上。






這款訴求簡單、聚焦的行事曆完全符合 Material Design 的思考,用拉動卡片的方式展現每一個任務的層次,讓你在滑動操作裡完成所有的月曆切換瀏覽,所有的視覺切換都是以自然的渲染方式遞進,還以浮動卡片等方式集中展現今日的行程。






當然, Google 自己的官方 App 自然也陸續的更新到 Material Design 介面,最有代表性的應該是新版的 Google 文件、簡報、試算表編輯工具,現在他們不僅可以編輯 Google 文件,也可以處理微軟 Office 檔案。而且在使用動線上以顯眼顏色、立體按鈕、滑動卡片讓使用者清楚知道每一個功能的意義與重點。






新版的 Chrome Beta 瀏覽器,把一些功能介面的邊框再加以淡化,然後在表現動畫上有更細緻的渲染擴散等水墨效果,更趨近 Material Design 想要的動畫風格。






這款 Google 官方推出的 Android 桌面,現在可以讓更多 Android 4.2 以上系統的手機使用,這款桌面很簡單聚焦,重點就是 Google Now 的資訊卡片,而在桌面切換動畫上,你可以看到無論是搜尋列的展開、頁面的滑動時,都很明顯地呈現出每個功能都是一張卡片,並且卡片之間有堆疊層級的空間,在空間滑動重組裡,讓用戶找到最重要的功能。






當然,一向在介面設計上非常有特色的 Google+ App,也已經更新到 Material Design 風格的介面設計,除了資訊瀏覽就是以紙張卡片渲染的方式呈現外,在新增訊息時也是利用右下方的顯眼按鈕,來彈出疊上主畫面上層的撰寫卡片,而要添加照片時,也同樣利用拉動卡片的效果來展開更多照片。






最新版 Google 地圖中加入了右下方的一顆「探索」按鈕,點擊後會滑出導遊卡片,在導遊卡片裡上半部大範圍的顏色展現了目前的時間、天氣,並且依據時間和天氣,推薦下方的景點餐廳卡片,在切換時同樣也有各種嶄新的渲染動畫,目前台灣部分城市也已經支援,值得大家試試看。





  • 14. Google Play 商店新版介面

你的 Google Play 商店更新到新版介面了嗎?在新版商店介面中,除了看起來更漂亮外,也利用上方的大照片、影片,來呈現出這個 App 最重要的意圖,再以顯眼的圓點來展現這款 App 最重要的下載、評價資訊。如果想要看更多介紹,也會以卡片渲染的方式切換頁面。




以上,就是目前我看到採用 Material Design 風格的優秀 App, 可以看到這是 Google 之前卡片風格的延續與進化,你還有發現其他好看又好用的類似 Android App 嗎?歡迎一起留言推薦。

留言

  1. 我發現好看的設計確實會讓用戶更願意去使用, 如新版的 Play Store,前幾天終于升級了之後,整體設計和大圖的衝擊力美觀大氣,逛商店的體驗大大提升,每個 App 突然高大上起來 XD
    這篇大部分我都用過,確實已經覆蓋了市面上優秀的 MD 設計的 App, 還有其他我用過的:
    Wally - 壁紙 App
    QKSMS - SMS, 需要在 Google+測試
    其實對於 Google 重度使用者, Google 家的一系列 App 才是最重要的,期待能儘快更新!

    回覆刪除
  2. LocalCast也是採用Material Design

    回覆刪除
    回覆
    1. Link Bubble也更新為使用Material Design的介面了

      刪除
  3. 請問Evernote Beta for Android 是要先申請加入G+的Group嗎?

    回覆刪除
  4. 不就是Asus的zenUI

    回覆刪除
    回覆
    1. 我是覺得差別滿大的,不過就算一樣,那表示 Android 有趨近統一的設計主流,那也沒什麼不好^^

      刪除
  5. Floatify - Smart Notifications不知算不算,也許可以看看值不值得介紹 ^.^

    回覆刪除
  6. 整個設計搞得跟 Windows Phone 裡的 app 設計差不多.....
    Windows Phone 裡的 app 都是這種設計.........
    那些罵 Windows Phone 裡的 app 醜的不知道現在上哪去了?

    回覆刪除
  7. 在PLAY搜尋 Material Design
    前面幾個都有用到

    回覆刪除
  8. Play 上的 已讀不回助理 用 Material Design

    回覆刪除
  9. 不如把 Windows Phone 裡的 APP 提出來討論如何?
    我沒用過 Windows Phone,不知道是哪裡差不多?

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

會議記錄不麻煩!我常用兩個 Evernote AI 功能整理錄音、手寫筆記

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學