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 21

Day 21 - Cards ( Design )

前言 Card 的設計,已經廣泛出現在我們的應用程式中,例如 ig、facebook 等等,是一種元件配置的設計方式,並非只是單純一個元件 Cards - D...

2022-10-06 ‧ 由 vosscg0822 分享
DAY 22

Day 22 - Cards ( Implementation )

大綱 Simple Using Making card checkable Making card draggable Cards Elevated...

2022-10-07 ‧ 由 vosscg0822 分享
DAY 23

Day 23 - Bottom Sheet ( Design )

前言 Bottom Sheet 算是比較近期 App 非常熱門的應用設計,從底部彈跳出視窗。通常會搭配在 more action,提供用戶與當前情境畫面的細部操...

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

Day 24 - Bottom Sheet ( Implementation)

大綱 Standard bottom sheet Modal bottom sheet Expanding bottom sheet Common Using...

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

Day 25 - Bottom Navigation ( Design )

前言 Bottom Navigation 通常作為主畫面的元件之一,位於畫面底部,能讓用戶操作並進行各個畫面的導航,是個以操作體驗與畫面跳轉為重的組件 Bo...

2022-10-10 ‧ 由 vosscg0822 分享
DAY 26

Day 26 - Bottom Navigation ( Implementation )

大綱 Using Anatomy Key properties Style Using 先就簡單地做一下基本的架構,需要BottomNavigationVi...

2022-10-11 ‧ 由 vosscg0822 分享
DAY 27

Day 27 - Navigation drawer (Design)

前言 是一個作為導航工具的組件,能讓用戶隨時展開或收起,與 Bottom Navigation 相同都是作為跳轉畫面的元件,但應用上有些不同,上幾篇我有提到 B...

2022-10-12 ‧ 由 vosscg0822 分享
DAY 28

Day 28 - Navigation Drawer ( Implementation )

大綱 Simple Using Anatomy Key properties Modal navigation drawer Bottom navigatio...

2022-10-13 ‧ 由 vosscg0822 分享
DAY 29

Day 29 - Tabs ( Design )

前言 不知不覺鐵人賽也接近尾聲,要講的最後一個元件是 Tab,也是一種導航切換畫面的元件,圍繞在同一主題上。在大多數的 App 都能看到,包裹著相關性高或相同應...

2022-10-14 ‧ 由 vosscg0822 分享
DAY 30

Day 30 - Tab ( Implementation ) & 完賽後記

大綱 Simple Using Fixed tabs Scrollable tabs Anatomy Key properties Style Simpl...

2022-10-15 ‧ 由 vosscg0822 分享