iT邦幫忙

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

技術 Day 15 - Divider ( Design & Implementation )

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

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

技術 Day 23 溫咖癲啦唯啊薩～讓按鈕浮起來吧！Floating Action Button

前言 今天來介紹整個頁面的要角 Floating Action Button。 Floating Action Button 樣子 簡稱為 FAB ，常在...

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

技術 Day15 使用M3的Bottom sheets

BottomSheets 分成兩種 Standard bottom sheet Modal bottom sheet M3新增內容 顏色：新的顏色對映和...

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

技術 Day 14 - Floating action button (Implementation)

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

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

技術 Day 13 - Floating action button (Design)

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

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

技術 Day 12 - RadioButtons (Design & Implementation)

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

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

技術 Day 13 使用 M3 的Chips

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

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

技術 Day 11 - Checkboxes (Design & Implementation)

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

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

技術 Day 10 - Switches ( Design & Implementation )

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

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

技術 Day 11 使用 M3 的 Extended Floating Action Button（下）

延續上一篇 Floating Action Buttons (上) 在上一篇FAB提到的icon必須清晰易懂，因為按鈕沒有文字描述，Extended FABs可...

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

技術 Day 18 實作 Grid Layout 2 調整卡片內容樣式

前言 今天接續昨天，調整卡片樣式。目標樣式： 字體大小 參考 MD3 Card日期我們使用 title medium 內文使用 body medium 在 T...

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

技術 Day 9 - Slider ( Implementation )

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

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

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

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

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

技術 Day 17 實作 Grid Layout 和 Card

前言 詳讀完 grid layout ，接下來要使用在專案中。除了呈現，我還要做出紀錄長按 item，並且記住 item index 的功能。 前置作業 1...

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

技術 Day09 實戰簡易的卡片瀏覽頁面

延續之前實作的「登錄頁面」在Day05~Day07學會MDC的Icon Buttons、Segmented Buttons和MaterialCardView、A...

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

技術 Day 7 - App bar : Top ( Implementation )

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

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

技術 Day08 使用 M3 的 AppBarLayout

Top app bar 提供與當前螢幕相關的內容和操作，通常是與裝置的寬度相同。 將APP的主題使用NoActionBar，如<style name=&q...

Anna ‧ 2022-09-22
0 Like 0 留言 882 瀏覽
鐵人賽 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 留言 1584 瀏覽
鐵人賽 Mobile Development DAY 5
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 5 篇

技術 Day 5 - Text fields ( Implementation )

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

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

技術 Day06 使用 M3 的 Segmented Buttons

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

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

技術 Day 13 Text Brush

前言 因為團隊成員聖佑有把 Text 屬性全部詳說一遍了，所以我想來點不一樣的，今天來研究 Brush API 來做出字體漸層色效果。 Brush API...

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

技術 Day 4 - Text fields ( Design )

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

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

技術 Day 3 - Button ( Implementation )

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

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

技術 Day04 實戰登入頁面

在前兩篇學會MDC Components的Button和Text Field，所以已經可以來實作一個「登錄頁面」。 介紹的內容： 使用 IDE版本 : A...

Anna ‧ 2022-09-18
0 Like 0 留言 969 瀏覽
鐵人賽 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鐵人們
1 Like 0 留言 1202 瀏覽
鐵人賽 Mobile Development DAY 3
Kotlin 實踐 Material Design 懶人包 系列 第 3 篇

技術 Day03 使用 Text fields

Text fields 是讓可輸入欄位，並且提示容易讓使用者理解的資訊，同時可以有顯示輸入的錯誤訊息。 簡單介紹 有兩種Text fields，都提供相同的功能...

Anna ‧ 2022-09-17
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邦幫忙