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

2 Like 0 留言 9323 瀏覽

鐵人賽 Modern Web DAY 29

Angular Material完全攻略系列第 29 篇

技術 [Angular Material完全攻略] Day 29 - Angular CDK(5) - Portal

接下來我們要介紹Angular CDK中的Portal分類，透過這裡面的功能，我們可以很容易的動態切換各種不同的元件和templates，讓動態產生內容不再是件...

黃升煌 Mike ‧ 2018-01-16 ‧團隊2018 新年快樂

3 Like 1 留言 8576 瀏覽

鐵人賽 Modern Web DAY 28

Angular Material完全攻略系列第 28 篇

技術 [Angular Material完全攻略] Day 28 - Angular CDK(4) - Observables、Scrolling

今天我們要介紹兩個比較簡單的Angular CDK功能分類，分別是Observables和Scroll。這兩個功能使用上非常簡單，但乍看之下使用的機會不高，因此...

黃升煌 Mike ‧ 2018-01-15 ‧團隊2018 新年快樂

1 Like 0 留言 6531 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day04 Layout 排版

今天我們進入到 Material Design 中 Layout 排版的部分，排版涵蓋的範圍較廣，我們會分成兩天來介紹排版，今天會先了解排版、像素密度、響應式網...

Yvonne_Zhong ‧ 2020-09-04

3 Like 1 留言 6128 瀏覽

鐵人賽 Modern Web DAY 15

Angular Material完全攻略系列第 15 篇

技術 [Angular Material完全攻略] Day 15 - 打造問卷頁面(7) - Slider

今天我們要介紹目前Angular Material裡面關於Form Control的最後一個元件－Slider；完成Slider的學習之後，問卷頁面也會在此告一...

黃升煌 Mike ‧ 2018-01-02 ‧團隊2018 新年快樂

2 Like 0 留言 5853 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day09 Typography 文字排版

昨天我們了解到顏色在搭配使用上呈現不同的色彩感受，在互動元件上巧妙的搭配能吸引注意力，顏色也能代表程式狀態，在不同的配色下仍然需要保持內文能清晰閱讀，在淺色及深...

Yvonne_Zhong ‧ 2020-09-09

1 Like 0 留言 5255 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day08 Color 顏色

昨天我們了解到色彩系統分為主要色、次要色、輔助色及替代顏色的基本概念及變體色的選擇，搭配不同的主題運用替代顏色進行色彩創作，在 UI 元件上建立高對比度的色彩搭...

Yvonne_Zhong ‧ 2020-09-08

1 Like 0 留言 3798 瀏覽

鐵人賽 Modern Web DAY 7

從平面轉型成網頁設計的 UI/UX 設計師系列第 7 篇

技術【Day 7】如何更換 Hexo 主題

在成功將 Hexo 部落格搭建好後，身為設計師的筆者，看著原有的主題實在是渾身不對勁。本篇文章會介紹如何更換主題，讓你每天打開部落格都心情美美的：） by An...

GG ‧ 2020-09-22 ‧團隊想吃薑母鴨

1 Like 0 留言 3792 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day07 Color 顏色

在 Navigation 導覽列的單元，我們了解到 Navigation 導覽列擺放的位子以及在不同頁面間導覽列的功能，在畫面切換間使用轉換動畫能加強關聯性減少...

Yvonne_Zhong ‧ 2020-09-07

1 Like 0 留言 3585 瀏覽

鐵人賽自我挑戰組 DAY 3

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day03 Environment 環境

昨天我們用嚴肅的態度去了解 Material Design 基礎介紹與章節架構後，今天讓我們用比較輕鬆的心情將 Material 章節拆解細分，一天天拼出完整的...

Yvonne_Zhong ‧ 2020-09-03

0 Like 0 留言 3163 瀏覽

鐵人賽 Modern Web DAY 5

關於 UI 元件你所該知道的事系列第 5 篇

技術 Day 05 - 行前說明 — UI 元件分類你知多少？

今天是行前說明的最後一篇了，前面幾篇都是很架構面的知識，而今天要講的就是真的很貼近 UI 元件的分類系統了。首先想先回答一個問題：「UI 元件為什麼要分類呢...

parkerhiphop027 ‧ 2021-09-20

1 Like 0 留言 3115 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day05 Layout 排版

在昨天我們了解了 Layout 排版需要具備響應式設計並且保有一致性，像素密度與裝置解析度的換算，各裝置平台的像素特性，在響應式網格排版與斷點間的密切關係，今天...

Yvonne_Zhong ‧ 2020-09-05

1 Like 0 留言 3064 瀏覽

鐵人賽自我挑戰組 DAY 6

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day06 Navigation 導覽列

在 Layout (排版) 的單元，我們了解到 Material Design 不止適用單一的螢幕尺寸，也是可以用於各種裝置的設計指南，不同的用戶在不同的情境使...

Yvonne_Zhong ‧ 2020-09-06

1 Like 1 留言 3025 瀏覽

鐵人賽 Modern Web DAY 7

關於 UI 元件你所該知道的事系列第 7 篇

技術 Day 07 - Design System — 前端工程師也該知道的那些事

在前一天我們知道了 Design System 為什麼出現、它試圖解決的問題和一些使用上的 Mindset 後，今天要來介紹 Design System 到底...

parkerhiphop027 ‧ 2021-09-22

4 Like 0 留言 2884 瀏覽

鐵人賽 Modern Web DAY 6

前端「設計」聖光之路系列第 6 篇

技術文件、規範參考 - Material Design

程式領域裡面非常重視文件，當然 UI 中也是如此，為了確保設計可以被執行，大型應用程式、系統都會推出屬於自己的規範，如： iOS 的 Human Interf...

卡斯伯 ‧ 2018-10-20

2 Like 0 留言 2803 瀏覽

鐵人賽自我挑戰組 DAY 2

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day02 Material 章節項目

昨天我們了解 Material 的基本介紹，今天讓我們一起來看看 Material 的指標項目吧。 Material 主要分成Foundation (基礎)與...

Yvonne_Zhong ‧ 2020-09-02

0 Like 0 留言 2072 瀏覽

鐵人賽 Modern Web DAY 6

關於 UI 元件你所該知道的事系列第 6 篇

技術 Day 06 - Design System — 為什麼前端工程師也該知道它？

新章突入！終於進入到期待已久的第二章 Design System 啦！那在講 Design System 之前想要先提到一個觀念：「前期規劃 > 實作...

parkerhiphop027 ‧ 2021-09-21

1 Like 0 留言 2001 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

昨天我們了解到 Material Theming 主題，提供了一套基本的主題樣式，在設計時可以觀察 Material 主題樣式的細節，甚至可以直接下載修改為符合...

Yvonne_Zhong ‧ 2020-09-24

1 Like 0 留言 1992 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day10 Sound 聲音

昨天我們了解到 Typography 文字排版樣式等級，也了解每個字母都存在著許多學問，需要注意文字段落包含的字數、字體間距、行距，都與易讀性及可讀性有著密不可...

Yvonne_Zhong ‧ 2020-09-10

1 Like 0 留言 1945 瀏覽

鐵人賽自我挑戰組 DAY 28

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

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

昨天我們了解到 Platform guidance 平台指導，Android 系統的圖示、介面導覽、通知，在圖示的章節中把圖示細分為四層元素，在每一層元素上依照...

Yvonne_Zhong ‧ 2020-09-28

1 Like 0 留言 1933 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

昨天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動，透過不同手勢類型可以執行不同的任務指令，並依照應用程式預設好的狀態與產品進行...

Yvonne_Zhong ‧ 2020-09-18

0 Like 0 留言 1910 瀏覽

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

鐵人賽 Modern Web DAY 24

前端技能樹的十萬個為什麼系列第 24 篇

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

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

ycchiuuuu ‧ 2022-10-09

1 Like 0 留言 1869 瀏覽

鐵人賽自我挑戰組 DAY 27

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

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

昨天我們了解到 Platform guidance 平台指導，Android 系統的狀態欄、指紋及觸覺設計指南，在狀態欄內應顯示的圖示及功能，還有區塊的建議尺寸...

Yvonne_Zhong ‧ 2020-09-27

1 Like 0 留言 1869 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day17 Interaction 相互作用

昨天我們了解到 Motion 動作中，轉場動畫可以藉由控制速度及緩和速度帶給用戶順暢的畫面轉場，搭配持續時間的運用可以讓轉場效果如同自然物體的動態。藉由編排動畫...

Yvonne_Zhong ‧ 2020-09-17

0 Like 0 留言 1820 瀏覽

鐵人賽 Modern Web DAY 8

關於 UI 元件你所該知道的事系列第 8 篇

技術 Day 08 - Design System x 實作 — Color System

今天是這系列第一次碰 Code，要來介紹三種 Color System 在專案中實作的方式，但實現方式絕對不只這三種，這邊只是提供個參考或概念給大家！這三種...

parkerhiphop027 ‧ 2021-09-23

2 Like 0 留言 1801 瀏覽

鐵人賽自我挑戰組 DAY 15

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

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

昨天我們了解到當元件 Shape 形狀改變時，可以增加動畫讓改變動態更順暢，也更能突顯元件。在品牌與層次結構間使用形狀能建立統一的品牌結構基礎，若是需要突顯的元...

Yvonne_Zhong ‧ 2020-09-15

0 Like 1 留言 1798 瀏覽

鐵人賽 Mobile Development DAY 7

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

技術 Day 7 Figma x Material Theme Builder x Material Design 3

前言前2天用了 Web版 Material Theme Builder，快速方便。但想要看渲染過的元件長什麼樣的話就要到 Figma 版的 Material...

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

1 Like 0 留言 1720 瀏覽

鐵人賽 Mobile Development DAY 20

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

技術 Day20 使用M3的Navigation drawer

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

Anna ‧ 2022-10-04

1 Like 0 留言 1696 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 UI / UX 設計白皮書 / Material Design 導讀_Day11 Sound 聲音

昨天我們了解到 Sound 聲音可以分為音效、音樂、語音三種，將這些聲音帶入 UI 可以適時提供使用者訊息或狀態回饋，不同聲音可以傳達不同的情境與感受，英雄般的...

Yvonne_Zhong ‧ 2020-09-11

1 Like 0 留言 1655 瀏覽

鐵人賽 Mobile Development DAY 15

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

技術 Day15 使用M3的Bottom sheets

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

Anna ‧ 2022-09-29