iT邦幫忙

material design相關文章
共有 141 則文章
1 Like 0 留言 2241 瀏覽
鐵人賽 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 留言 2179 瀏覽
鐵人賽 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 留言 2114 瀏覽
鐵人賽 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 留言 1994 瀏覽
鐵人賽 Mobile Development DAY 3
Kotlin 實踐 Material Design 懶人包 系列 第 3 篇

技術 Day03 使用 Text fields

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

Anna ‧ 2022-09-17
0 Like 0 留言 1989 瀏覽
鐵人賽 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
0 Like 0 留言 1983 瀏覽
鐵人賽 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 留言 1959 瀏覽
鐵人賽 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
0 Like 0 留言 1955 瀏覽
鐵人賽 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
1 Like 0 留言 1953 瀏覽
鐵人賽 Mobile Development DAY 4
Kotlin 實踐 Material Design 懶人包 系列 第 4 篇

技術 Day04 實戰登入頁面

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

Anna ‧ 2022-09-18
0 Like 0 留言 1953 瀏覽
鐵人賽 影片教學 DAY 18
智慧雲端物聯 - 關鍵輕專業 （AIoT Cloud - Essential Shallow Expertise） 系列 第 20 篇

技術 使用者體驗與介面設計 (2/2)

[Day 18] 使用者體驗與介面設計5.3：視覺與APP設計 (54min)-- APP 設計準則 : Google Material Design 實感設...

drm ‧ 2018-10-31
1 Like 0 留言 1940 瀏覽
鐵人賽 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 留言 1888 瀏覽
鐵人賽 Mobile Development DAY 17
Kotlin 實踐 Material Design 懶人包 系列 第 17 篇

技術 Day17 使用M3的Divider

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

Anna ‧ 2022-10-01
0 Like 0 留言 1874 瀏覽
鐵人賽 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 留言 1867 瀏覽
鐵人賽 Mobile Development DAY 13
Kotlin 實踐 Material Design 懶人包 系列 第 13 篇

技術 Day 13 使用 M3 的Chips

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

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day20 Communication 通訊

昨天我們了解到 Communication 通訊中，當應用程式無法顯示項目的內容時，畫面呈現空白狀態，這時畫面可以顯示內容來告訴用戶當前狀態，或是提供其他方案讓...

Yvonne_Zhong ‧ 2020-09-20
0 Like 0 留言 1818 瀏覽
鐵人賽 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 留言 1778 瀏覽
鐵人賽 Mobile Development DAY 9
30天建立寵物約散App-Android新手篇 系列 第 9 篇

技術 【Day9】AddInvitationFragment(上)

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

Tom ‧ 2021-09-24 ‧團隊好想工作室V5.0
1 Like 0 留言 1773 瀏覽
鐵人賽 Mobile Development DAY 10
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 10 篇

技術 Day 10 Card

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

ChuLin ‧ 2022-09-16 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
1 Like 0 留言 1772 瀏覽
鐵人賽 自我挑戰組 DAY 26
UI / UX 設計白皮書 - Material Design 導讀 系列 第 26 篇

技術 # UI / UX 設計白皮書 / Material Design 導讀_Day26 Platform guidance 平台指導

昨天我們了解到 Usability 易用性，需要根據不同國家顯示的語言方向進行排版，依照用戶的使用慣性排列出易於用戶操作的畫面，當產品支援多國語系時排版可能需要...

Yvonne_Zhong ‧ 2020-09-26
1 Like 0 留言 1750 瀏覽
鐵人賽 自我挑戰組 DAY 13
UI / UX 設計白皮書 - Material Design 導讀 系列 第 13 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day13 Shape 形狀

昨天我們了解到 Iconography 影像學中各種圖示設計的注意事項，圖標由不同的設計元素構成，透過網格我們可以設計出具有統一性的圖示，配合筆畫粗細、圖示顏色...

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

技術 Day23 使用M3MaterialSwitch

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

Anna ‧ 2022-10-07
0 Like 0 留言 1747 瀏覽
鐵人賽 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
1 Like 0 留言 1744 瀏覽
鐵人賽 自我挑戰組 DAY 19
UI / UX 設計白皮書 - Material Design 導讀 系列 第 19 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day19 Communication 通訊

昨天我們了解到 Communication 通訊可以使用不同方式的通知，提供用戶確認與承認，減少用戶對於已採取或將要採取動作的不確定性。除此之外還可以防止用戶犯...

Yvonne_Zhong ‧ 2020-09-19
1 Like 0 留言 1738 瀏覽
鐵人賽 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
0 Like 0 留言 1737 瀏覽
鐵人賽 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 留言 1736 瀏覽
鐵人賽 Mobile Development DAY 5
Kotlin 實踐 Material Design 懶人包 系列 第 5 篇

技術 Day05 使用M3 Icon button

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

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

技術 Day02 一般常見 Button

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

Anna ‧ 2022-09-16
0 Like 0 留言 1717 瀏覽
鐵人賽 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 1 留言 1689 瀏覽
鐵人賽 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 留言 1679 瀏覽
鐵人賽 Mobile Development DAY 6
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 6 篇

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

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

ChuLin ‧ 2022-09-12 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19831 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙