iT邦幫忙

material design相關文章
共有 139 則文章
0 Like 0 留言 1135 瀏覽
鐵人賽 Mobile Development DAY 9
30天建立寵物約散App-Android新手篇 系列 第 9 篇

技術 【Day9】AddInvitationFragment(上)

好的，接下來我們要新增邀約的Fragment，好讓使用者可以上去PO出自己的邀約，以及讓不同的使用者可以看到目前有的邀約。那我們開始吧! 今天會完成上傳圖片/...

Tom ‧ 2021-09-24 ‧團隊好想工作室V5.0
0 Like 0 留言 1134 瀏覽
鐵人賽 Mobile Development DAY 10
Kotlin 實踐 Material Design 懶人包 系列 第 10 篇

技術 Day10 使用 M3 的 Floating Action Buttons (FAB) (上)

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

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

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

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

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

技術 Day 6 把生成好的Material3 顏色加入專案，再來點動態顏色。

前言 昨天我們花了幾分鐘做輸出好顏色檔案。接下來就是使用它啦！ 加入 Theme.kt 和 Colot.kt 輸出檔案解壓縮後得到兩個檔案 開新的 comp...

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

技術 Day17 使用M3的Divider

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

Anna ‧ 2022-10-01
1 Like 0 留言 1065 瀏覽
鐵人賽 Mobile Development DAY 12
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 12 篇

技術 Day 12 IconButton，從IconButton的參數看到狀態提升技巧。

前言 Card 上面會用到關閉的 IconButton。來介紹IconButton的參數，並且從Toggle Button 的參數來介紹狀態提升的技巧。 Ic...

ChuLin ‧ 2022-09-18 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1061 瀏覽
鐵人賽 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
0 Like 0 留言 1055 瀏覽
鐵人賽 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 留言 1046 瀏覽
鐵人賽 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
0 Like 0 留言 1021 瀏覽
鐵人賽 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 留言 1005 瀏覽
鐵人賽 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 留言 983 瀏覽
鐵人賽 Mobile Development DAY 28
Kotlin 實踐 Material Design 懶人包 系列 第 28 篇

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

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

Anna ‧ 2022-10-12
1 Like 0 留言 975 瀏覽
鐵人賽 Mobile Development DAY 10
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 10 篇

技術 Day 10 Card

前言 今天詳細介紹 Card 的種類，以及實作時需要注意的事項。 Card @Composable fun MyCard() { Card() {...

ChuLin ‧ 2022-09-16 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 973 瀏覽
鐵人賽 Mobile Development DAY 11
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 11 篇

技術 Day 11 Top App Bar、Scaffold

前言 今天研究 Search bar 如何用 TopAppBar 實現。 TopAppBar 上方導覽列，分為四種樣式。M3 和 M2不同的點在於，捨棄了陰...

ChuLin ‧ 2022-09-17 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 957 瀏覽
鐵人賽 Mobile Development DAY 9
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 9 篇

技術 Day 9 主頁面 Flow、Component

前言 今天要從 Flow 開始，介紹主畫面主要流程、看看 wirefram 上需要哪些 Component，並到 Figma 的 MD3 抓需要的元件。 Ho...

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

技術 Day02 一般常見 Button

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

Anna ‧ 2022-09-16
0 Like 0 留言 934 瀏覽
鐵人賽 Mobile Development DAY 13
Kotlin 實踐 Material Design 懶人包 系列 第 13 篇

技術 Day 13 使用 M3 的Chips

主要功能在幫助輸入信息、進行選擇、過濾內容或觸發操作，Chipa和Button有相似之處在於它們都提供視覺提示用戶採取行動和做出選擇。 但是有一些重要的區別，C...

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

技術 Day14 延續前實戰新增 FAB + Bottom App Bar 實作

延續之前實作的「Day09 實戰簡易的卡片瀏覽頁面」後，將Day10~Day12學會MDC Components的Floating Action Buttons...

Anna ‧ 2022-09-28
1 Like 0 留言 925 瀏覽
鐵人賽 Mobile Development DAY 26
Kotlin 實踐 Material Design 懶人包 系列 第 26 篇

技術 Day26 使用M3的Progress Indicators

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

Anna ‧ 2022-10-10
1 Like 0 留言 921 瀏覽
鐵人賽 自我挑戰組 DAY 21
UI / UX 設計白皮書 - Material Design 導讀 系列 第 21 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day21 Machine learning 機器學習

昨天我們了解到 Communication 通訊中，快速入門流程可以幫助用戶快速熟悉應用程式，從啟動到操作特定目標的過程一一給予用戶引導。離線狀態允許用戶無需開...

Yvonne_Zhong ‧ 2020-09-21
1 Like 0 留言 916 瀏覽
鐵人賽 Mobile Development DAY 5
Kotlin 實踐 Material Design 懶人包 系列 第 5 篇

技術 Day05 使用M3 Icon button

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

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

技術 Day 6 - App bar : Top ( Design )

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

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

技術 Day 2 - Button ( Design )

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

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

技術 Day 8 - Slider ( Design )

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

vosscg0822 ‧ 2022-09-23 ‧團隊好想工作室 v6.0
0 Like 0 留言 857 瀏覽
鐵人賽 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
0 Like 0 留言 853 瀏覽
鐵人賽 Mobile Development DAY 16
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 16 篇

技術 Day 16 - Progress indicators ( Design )

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

vosscg0822 ‧ 2022-10-01 ‧團隊好想工作室 v6.0
1 Like 0 留言 840 瀏覽
鐵人賽 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
1 Like 0 留言 816 瀏覽
鐵人賽 Mobile Development DAY 23
Kotlin 實踐 Material Design 懶人包 系列 第 23 篇

技術 Day23 使用M3MaterialSwitch

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

Anna ‧ 2022-10-07
0 Like 0 留言 800 瀏覽
鐵人賽 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 留言 765 瀏覽
鐵人賽 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
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邦幫忙