iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Mobile Development

從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列

透過 Google 官方的 Material Design Components 指南,淺白地介紹在 Android 上實用 UI/UX 如何去設計 Components。當中的篇幅都會以 Mobile 移動裝置為主,不會介紹關於平板等大型裝置。
文章會依照官方架構介紹的形式,每個元件都會分為 Design 與 Implementation 兩大部分。
所以即便不是 Android 的開發者,只要是對於 Google Material Design 在設計元件上的UI/UX 有興趣的人,都可以觀看。在 Design 的部分不會提到任何關於程式碼的事情,請放心閱讀~

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v6.0
DAY 1

Day 1 - 學習 Material Design 的好處在哪 ?

前言 由於 Material Design 大多數的篇幅都注重在介紹 UI / UX 還有在 Android 中有哪些實用的元件 所以對前端工程師最大的好處應該...

2022-09-16 ‧ 由 vosscg0822 分享
DAY 2

Day 2 - Button ( Design )

前言 觸控手機問世的那一刻,Button 就成了每個應用程式中不可或缺的元件。這也是我想把它擺到第一位來介紹的主因,作為 Mobile 移動端的開發工程師,都無...

2022-09-17 ‧ 由 vosscg0822 分享
DAY 3

Day 3 - Button ( Implementation )

大綱 會分為下面幾個段落來介紹 Simple Using in layout in code add a icon Text Button in...

2022-09-18 ‧ 由 vosscg0822 分享
DAY 4

Day 4 - Text fields ( Design )

前言 今天要來介紹的是 Text fields ( Input Text ),與 Button 一樣都是在應用程式中很常見的元件,通常出現在需要讓用戶填寫資料的...

2022-09-19 ‧ 由 vosscg0822 分享
DAY 5

Day 5 - Text fields ( Implementation )

大綱 TextInputLayout Simple Using Adding a leading icon Leading icon attribute...

2022-09-20 ‧ 由 vosscg0822 分享
DAY 6

Day 6 - App bar : Top ( Design )

前言 App bar:Top ( toolbar ),官方之所以這樣區分,是因為在 Material Design 分為 Top 與 Bottom,只不過在常見...

2022-09-21 ‧ 由 vosscg0822 分享
DAY 7

Day 7 - App bar : Top ( Implementation )

大綱 Type Regular top app bar Simple Using Applying scrolling behavior Prominent...

2022-09-22 ‧ 由 vosscg0822 分享
DAY 8

Day 8 - Slider ( Design )

前言 Slider 能讓用戶透過滑動按壓來對一系列的數值進行更加細部選擇的元件,常應用在音量控制或價格範圍等數值範圍選取的情境 Slider - Design...

2022-09-23 ‧ 由 vosscg0822 分享
DAY 9

Day 9 - Slider ( Implementation )

大綱 Simple Using Using Ranger Slider Adding/removing the value label Setting a...

2022-09-24 ‧ 由 vosscg0822 分享
DAY 10

Day 10 - Switches ( Design & Implementation )

前言 接下來的篇幅會開始講到 Selection Controls Components 簡稱 “選擇控件”:允許用戶完成涉及做出選擇的任務,例如選擇選項、打開...

2022-09-25 ‧ 由 vosscg0822 分享