iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 1617 瀏覽

鐵人賽 Mobile Development DAY 15

Kotlin 實踐 Material Design 懶人包系列第 15 篇

技術 Day15 使用M3的Bottom sheets

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

Anna ‧ 2022-09-29

2 Like 1 留言 1607 瀏覽

鐵人賽自我挑戰組 DAY 30

UI / UX 設計白皮書 - Material Design 導讀系列第 30 篇

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

昨天我們了解到 Platform guidance 平台指導，子母畫面模式可讓兩個活動同時顯示在螢幕上，執行兩種不同的應用程式活動，也可以調整子母畫面的畫面尺寸...

Yvonne_Zhong ‧ 2020-09-30

0 Like 0 留言 1593 瀏覽

鐵人賽影片教學 DAY 18

智慧雲端物聯 - 關鍵輕專業（AIoT Cloud - Essential Shallow Expertise）系列第 20 篇

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

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

drm ‧ 2018-10-31

0 Like 0 留言 1576 瀏覽

鐵人賽 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 留言 1575 瀏覽

鐵人賽自我挑戰組 DAY 14

UI / UX 設計白皮書 - Material Design 導讀系列第 14 篇

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

昨天我們了解到 Shape 形狀，可以設定個式形狀來傳達含意及狀態變化，同類型的形狀可以識別組件和識別不同的元件區塊，獨特的形狀可以跟一般組件形狀產生出差異，也...

Yvonne_Zhong ‧ 2020-09-14

1 Like 0 留言 1553 瀏覽

鐵人賽 Mobile Development DAY 1

Kotlin 實踐 Material Design 懶人包系列第 1 篇

技術 Day01 踏入Google的設計語言

這次Kotlin 實踐 Material Design 懶人包，文章主要關注在 Material Design components 的實作上，所以會有大量實作...

Anna ‧ 2022-09-15

0 Like 1 留言 1542 瀏覽

鐵人賽 Mobile Development DAY 5

今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列第 5 篇

技術 Day 5 來點顏色瞧瞧 Material3 Color & Dynamic Color 不是設計師，也能輕鬆產出主題色～

前言昨天信誓旦旦的說要把 flow 畫好，但有時候就是會看著同個東西沒有靈感。所以今天來做個也很重要，而且可以讓心情變美麗的東西，主題色！Android 1...

ChuLin ‧ 2022-09-11 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

1 Like 0 留言 1508 瀏覽

鐵人賽自我挑戰組 DAY 25

UI / UX 設計白皮書 - Material Design 導讀系列第 25 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day25 Usability 易用性

昨天我們了解到 Usability 易用性中輔助功能，無障礙設計提供更多幫助，通過螢幕閱讀器、放大工具和助聽器等設備幫助用戶用戶可以在 "觸摸瀏覽&q...

Yvonne_Zhong ‧ 2020-09-25

2 Like 0 留言 1490 瀏覽

鐵人賽 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 留言 1478 瀏覽

鐵人賽 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

0 Like 0 留言 1455 瀏覽

鐵人賽 Mobile Development DAY 29

從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計系列第 29 篇

技術 Day 29 - Tabs ( Design )

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

vosscg0822 ‧ 2022-10-14 ‧團隊好想工作室 v6.0

0 Like 0 留言 1426 瀏覽

鐵人賽 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 留言 1408 瀏覽

鐵人賽 Mobile Development DAY 8

Kotlin 實踐 Material Design 懶人包系列第 8 篇

技術 Day08 使用 M3 的 AppBarLayout

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

Anna ‧ 2022-09-22

1 Like 0 留言 1383 瀏覽

鐵人賽自我挑戰組 DAY 23

UI / UX 設計白皮書 - Material Design 導讀系列第 23 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day23 Material Theming 主題

昨天我們了解到 Machine learning 機器學習模式能提供用戶使用圖像進行搜尋及條碼掃描，看似簡單的操作步驟，在每項操作時預先想好流程中用戶可能會遇到...

Yvonne_Zhong ‧ 2020-09-23

1 Like 0 留言 1361 瀏覽

鐵人賽自我挑戰組 DAY 29

UI / UX 設計白皮書 - Material Design 導讀系列第 29 篇

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

昨天我們了解到 Platform guidance 平台指導，在應用程式中許多的操作需要權限許可，透過入門指南說明權限、或是事先詢問、在消息通知中顯示請求、透過...

Yvonne_Zhong ‧ 2020-09-29

1 Like 0 留言 1358 瀏覽

鐵人賽自我挑戰組 DAY 13

UI / UX 設計白皮書 - Material Design 導讀系列第 13 篇

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

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

Yvonne_Zhong ‧ 2020-09-13

1 Like 0 留言 1331 瀏覽

鐵人賽自我挑戰組 DAY 22

UI / UX 設計白皮書 - Material Design 導讀系列第 22 篇

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

昨天我們了解到 Machine learning 機器學習模式能提供用戶更完善的人機介面指南，在操作機器中達成最好的互動體驗，物體檢測中看似簡單的即時攝影操作，...

Yvonne_Zhong ‧ 2020-09-22

0 Like 0 留言 1313 瀏覽

鐵人賽 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 留言 1305 瀏覽

鐵人賽 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

1 Like 0 留言 1286 瀏覽

鐵人賽自我挑戰組 DAY 26

UI / UX 設計白皮書 - Material Design 導讀系列第 26 篇

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

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

Yvonne_Zhong ‧ 2020-09-26

1 Like 0 留言 1270 瀏覽

鐵人賽自我挑戰組 DAY 20

UI / UX 設計白皮書 - Material Design 導讀系列第 20 篇

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

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

Yvonne_Zhong ‧ 2020-09-20

1 Like 0 留言 1264 瀏覽

鐵人賽 Mobile Development DAY 4

Kotlin 實踐 Material Design 懶人包系列第 4 篇

技術 Day04 實戰登入頁面

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

Anna ‧ 2022-09-18

1 Like 0 留言 1245 瀏覽

鐵人賽自我挑戰組 DAY 19

UI / UX 設計白皮書 - Material Design 導讀系列第 19 篇

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

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

Yvonne_Zhong ‧ 2020-09-19

1 Like 0 留言 1242 瀏覽

鐵人賽 Mobile Development DAY 6

Kotlin 實踐 Material Design 懶人包系列第 6 篇

技術 Day06 使用 M3 的 Segmented Buttons

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

Anna ‧ 2022-09-20

1 Like 0 留言 1203 瀏覽

鐵人賽 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

1 Like 0 留言 1192 瀏覽

鐵人賽 Mobile Development DAY 3

Kotlin 實踐 Material Design 懶人包系列第 3 篇

技術 Day03 使用 Text fields

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

Anna ‧ 2022-09-17

1 Like 0 留言 1151 瀏覽

鐵人賽自我挑戰組 DAY 16

UI / UX 設計白皮書 - Material Design 導讀系列第 16 篇

技術 UI / UX 設計白皮書 / Material Design 導讀_Day16 Motion 動作

昨天我們了解到 Motion 動作可以強化結構層次、表現品牌、增加回饋和狀態及幫助用戶執行。更了解到各種畫面及元件在轉場動畫上的設定，各種主題在軸線上的轉場含義...

Yvonne_Zhong ‧ 2020-09-16

0 Like 0 留言 1140 瀏覽

鐵人賽 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

0 Like 0 留言 1139 瀏覽

鐵人賽 Mobile Development DAY 18

Kotlin 實踐 Material Design 懶人包系列第 18 篇

技術 Day18 使用M3的Menus

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

Anna ‧ 2022-10-02

0 Like 0 留言 1136 瀏覽

鐵人賽 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