iT邦幫忙

material design相關文章
共有 139 則文章
2 Like 0 留言 1496 瀏覽
鐵人賽 Mobile Development DAY 30
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 30 篇

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

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

vosscg0822 ‧ 2022-10-15 ‧團隊好想工作室 v6.0
0 Like 0 留言 1457 瀏覽
鐵人賽 Mobile Development DAY 29
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 29 篇

技術 Day 29 - Tabs ( Design )

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

vosscg0822 ‧ 2022-10-14 ‧團隊好想工作室 v6.0
1 Like 0 留言 663 瀏覽
鐵人賽 Mobile Development DAY 30
Kotlin 實踐 Material Design 懶人包 系列 第 30 篇

技術 Day30 Motion - Fade through 、Fade（3）

繼前兩天章節 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patter...

Anna ‧ 2022-10-14
1 Like 0 留言 838 瀏覽
鐵人賽 Mobile Development DAY 29
Kotlin 實踐 Material Design 懶人包 系列 第 29 篇

技術 Day29 使用M3的Motion - Shared axis（2）

繼前一章節 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform pattern...

Anna ‧ 2022-10-13
0 Like 0 留言 998 瀏覽
鐵人賽 Mobile Development DAY 28
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 28 篇

技術 Day 28 - Navigation Drawer ( Implementation )

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

vosscg0822 ‧ 2022-10-13 ‧團隊好想工作室 v6.0
0 Like 0 留言 978 瀏覽
鐵人賽 Mobile Development DAY 28
Kotlin 實踐 Material Design 懶人包 系列 第 28 篇

技術 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patterns (1)

Material Design的Ｍotion由四種模式組成，用於在元件或全屏檢視之間過渡轉換動畫，這些模式主要在透過加強使用者介面元素之間的關係來幫助使用者瀏覽...

Anna ‧ 2022-10-12
0 Like 0 留言 1322 瀏覽
鐵人賽 Mobile Development DAY 27
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 27 篇

技術 Day 27 - Navigation drawer (Design)

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

vosscg0822 ‧ 2022-10-12 ‧團隊好想工作室 v6.0
0 Like 0 留言 1013 瀏覽
鐵人賽 Mobile Development DAY 26
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 26 篇

技術 Day 26 - Bottom Navigation ( Implementation )

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

vosscg0822 ‧ 2022-10-11 ‧團隊好想工作室 v6.0
0 Like 0 留言 1042 瀏覽
鐵人賽 Mobile Development DAY 25
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 25 篇

技術 Day 25 - Bottom Navigation ( Design )

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

vosscg0822 ‧ 2022-10-10 ‧團隊好想工作室 v6.0
1 Like 0 留言 916 瀏覽
鐵人賽 Mobile Development DAY 26
Kotlin 實踐 Material Design 懶人包 系列 第 26 篇

技術 Day26 使用M3的Progress Indicators

Progress 有分兩種類型 Linear progress indicator Circular progress indicator 實作上探討...

Anna ‧ 2022-10-10
0 Like 0 留言 1880 瀏覽
鐵人賽 Modern Web DAY 24
前端技能樹的十萬個為什麼 系列 第 24 篇

技術 Day 24 - 為什麼要用 Material-ui

前言 昨天聊到 styled-components，以及 CSS-in-JS 對於 React 開發的重要性，但考量到程式規模愈趨複雜，不太可能連一些很基本的元...

ycchiuuuu ‧ 2022-10-09
0 Like 0 留言 326 瀏覽
鐵人賽 Mobile Development DAY 23
關於我用 Compose UI 造新輪子這檔事 系列 第 23 篇

技術 Day 23 - Material Design

Android 遵循的一套視覺設計規範叫 Material Design，目前分為 Material 2 與 Material 3，Android 11（含）以...

Mikucat ‧ 2022-10-08 ‧團隊那團名要叫什麼？
0 Like 0 留言 841 瀏覽
鐵人賽 Mobile Development DAY 23
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 23 篇

技術 Day 23 - Bottom Sheet ( Design )

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

vosscg0822 ‧ 2022-10-08 ‧團隊好想工作室 v6.0
1 Like 0 留言 321 瀏覽
鐵人賽 Mobile Development DAY 24
Kotlin 實踐 Material Design 懶人包 系列 第 24 篇

技術 Day24 使用M3的Sliders

Sliders是使用條形的滑動進行檢視和選值或範圍，非常適合調整音量和亮度等設定等。 Silders 有分兩種類型 Continuous slider Di...

Anna ‧ 2022-10-08
0 Like 0 留言 792 瀏覽
鐵人賽 Mobile Development DAY 22
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 22 篇

技術 Day 22 - Cards ( Implementation )

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

vosscg0822 ‧ 2022-10-07 ‧團隊好想工作室 v6.0
1 Like 0 留言 811 瀏覽
鐵人賽 Mobile Development DAY 23
Kotlin 實踐 Material Design 懶人包 系列 第 23 篇

技術 Day23 使用M3MaterialSwitch

當需要開啟或關閉單一選項時，可使用Switch ，最常用於手機裝置，以啟用和禁用選項或是選單中的選項。開啟和關閉表示一個具有兩種狀態的按鈕，開關由軌道和拇指組成...

Anna ‧ 2022-10-07
0 Like 0 留言 744 瀏覽
鐵人賽 Mobile Development DAY 21
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 21 篇

技術 Day 21 - Cards ( Design )

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

vosscg0822 ‧ 2022-10-06 ‧團隊好想工作室 v6.0
1 Like 0 留言 759 瀏覽
鐵人賽 Mobile Development DAY 22
Kotlin 實踐 Material Design 懶人包 系列 第 22 篇

技術 Day22 使用M3的Navigation bar

Navigation bar 主要手機裝置位於螢幕底部固定呈現，通常顯示3~5個item，當需要5個以上、3個以下皆考慮使用Chips 、navigation...

Anna ‧ 2022-10-06
1 Like 0 留言 690 瀏覽
鐵人賽 Mobile Development DAY 21
Kotlin 實踐 Material Design 懶人包 系列 第 21 篇

技術 Day21 使用M3的Navigation rail

Navigation rail 元件會顯示在應用程式中每個螢幕的同一側，顯示3到7個item。通常適用於平板的螢幕上，但也可以在手機裝置上使用，判斷螢幕寬度大小...

Anna ‧ 2022-10-05
0 Like 0 留言 1863 瀏覽
鐵人賽 Mobile Development DAY 20
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 20 篇

技術 Day 20 - Dialogs ( Implementation )

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

vosscg0822 ‧ 2022-10-05 ‧團隊好想工作室 v6.0
0 Like 0 留言 683 瀏覽
鐵人賽 Mobile Development DAY 28
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 28 篇

技術 Day28 實作 DateTimePicker

前言 昨天完成 Training 頁面雛形，今天要來加一些更改數據的互動。 首先是日期調整這裡要用到 DatePickerDialog Date Picker...

ChuLin ‧ 2022-10-04 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1044 瀏覽
鐵人賽 Mobile Development DAY 19
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 19 篇

技術 Day 19 - Dialogs ( Design )

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

vosscg0822 ‧ 2022-10-04 ‧團隊好想工作室 v6.0
1 Like 0 留言 1678 瀏覽
鐵人賽 Mobile Development DAY 20
Kotlin 實踐 Material Design 懶人包 系列 第 20 篇

技術 Day20 使用M3的Navigation drawer

Navigation drawer 預設情況下可以開啟或關閉，以適應不同的應用程式佈局，有兩種型別的Standard、Modal。Standard標準非常適合頻...

Anna ‧ 2022-10-04
0 Like 0 留言 1051 瀏覽
鐵人賽 Mobile Development DAY 18
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 18 篇

技術 Day 18 - SnackBars ( Design & Implementation)

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

vosscg0822 ‧ 2022-10-03 ‧團隊好想工作室 v6.0
0 Like 0 留言 543 瀏覽
鐵人賽 Mobile Development DAY 26
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 26 篇

技術 Day 26 把主畫面組起來！

前言 學以致用，把主畫面組裝起來。 MainScreen 這裡傳三個 funtion 用來做頁面轉換用。 @OptIn(ExperimentalMateria...

ChuLin ‧ 2022-10-02 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1140 瀏覽
鐵人賽 Mobile Development DAY 18
Kotlin 實踐 Material Design 懶人包 系列 第 18 篇

技術 Day18 使用M3的Menus

選單內容應適合使用者需求，同時易於開啟、關閉和互動。當用戶與按鈕、操作或其他控制元件互動時，會出現選單。 1. Dropdown menus 2. Expose...

Anna ‧ 2022-10-02
0 Like 0 留言 1490 瀏覽
鐵人賽 Mobile Development DAY 17
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 17 篇

技術 Day 17 - Progress indicators ( Implementation )

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

vosscg0822 ‧ 2022-10-02 ‧團隊好想工作室 v6.0
1 Like 0 留言 1067 瀏覽
鐵人賽 Mobile Development DAY 17
Kotlin 實踐 Material Design 懶人包 系列 第 17 篇

技術 Day17 使用M3的Divider

Divider 分隔線(MaterialDivider)是一個可用於佈局的檢視，將內容清晰的劃分。分隔線長度可伸縮性，例如用於分離列表項或定義長度。 M3新增內...

Anna ‧ 2022-10-01
0 Like 0 留言 846 瀏覽
鐵人賽 Mobile Development DAY 16
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 16 篇

技術 Day 16 - Progress indicators ( Design )

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

vosscg0822 ‧ 2022-10-01 ‧團隊好想工作室 v6.0
0 Like 0 留言 520 瀏覽
鐵人賽 Mobile Development DAY 16
Kotlin 實踐 Material Design 懶人包 系列 第 16 篇

技術 Day16 使用Ｍ3的Dialogs

通常我們大家熟悉的Dialogs 是讓使用者需要的操作、內容包含簡明扼要的陳述或問題。 Dialogs在應用程式內容前面，同時禁用所有應用程式功能，以提供關鍵資...

Anna ‧ 2022-09-30
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙