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 11

Day 11 - Checkboxes (Design & Implementation)

前言 與上篇同為 Selection Controls Components,今天要講的是 Checkboxes,由於這些元件整體相對簡潔,Material D...

2022-09-26 ‧ 由 vosscg0822 分享
DAY 12

Day 12 - RadioButtons (Design & Implementation)

前言 為 selection controls components 最後一個元件,與 slider、checkboxes 在設計上都非常簡潔,一樣也是實作與設...

2022-09-27 ‧ 由 vosscg0822 分享
DAY 13

Day 13 - Floating action button (Design)

前言 FAB 作為一個獨立的 Action Button,位置上是在所有 Content 的前面並位於右下方,形狀上是圓形或依據不同大小可能為橢圓。通常對應著當...

2022-09-28 ‧ 由 vosscg0822 分享
DAY 14

Day 14 - Floating action button (Implementation)

大綱 Using Type Regular FABs Mini FABs Extended FABs Speed dial Custom Style Usg...

2022-09-29 ‧ 由 vosscg0822 分享
DAY 15

Day 15 - Divider ( Design & Implementation )

前言 Divider 是能將要在 UI 呈現的重點內容,更加清晰且顯眼地表達。在我們想呈現列表形式的資料時,透過 Divider 的劃分,讓用戶能明顯辨識之間的...

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

Day 16 - Progress indicators ( Design )

前言 用來通知用戶正在進行的進程狀態,例如 加載應用程序、提交表單或保存更新應用程序的狀態並指示可用的操作,例如用戶是否可以離開當前屏幕。在進行異步或初始化時常...

2022-10-01 ‧ 由 vosscg0822 分享
DAY 17

Day 17 - Progress indicators ( Implementation )

大綱 Simple Using Linear progress indicators Circular progress indicators Anatomy...

2022-10-02 ‧ 由 vosscg0822 分享
DAY 18

Day 18 - SnackBars ( Design & Implementation)

前言 Snackbar,是很常見的應用通知設計,位於應用程式的底部,提供用戶目前操作的任何相關訊息。由於 Snackbar 實作的篇幅較少,就一起講解 大綱...

2022-10-03 ‧ 由 vosscg0822 分享
DAY 19

Day 19 - Dialogs ( Design )

前言 Dialog 比起上一篇提到的 Snackbar,更為顯著且出現時會阻擋用戶操作 Dialogs - Design 分為下面幾個段落來介紹 Usag...

2022-10-04 ‧ 由 vosscg0822 分享
DAY 20

Day 20 - Dialogs ( Implementation )

大綱 Alert dialog Simple dialog Confirmation dialog Full-screen dialog Anatomy Ke...

2022-10-05 ‧ 由 vosscg0822 分享