iT邦幫忙

material design相關文章
共有 141 則文章
鐵人賽 自我挑戰組 DAY 17

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 自我挑戰組 DAY 12

技術 UI / UX 設計白皮書 / Material Design 導讀_Day12 Iconography 影像學

昨天我們了解到聲音可以具有不同的屬性及特徵,運用不同的編排可以使用在各種物件狀態及情境事件上,在應用程式的畫面層次中依序建立聲音回饋,藉此讓使用者得到更多的互動...

鐵人賽 自我挑戰組 DAY 11

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

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

鐵人賽 自我挑戰組 DAY 10

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

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

鐵人賽 自我挑戰組 DAY 9

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

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

鐵人賽 自我挑戰組 DAY 8

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

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

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 自我挑戰組 DAY 5

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

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

鐵人賽 自我挑戰組 DAY 4

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

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

鐵人賽 自我挑戰組 DAY 3

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

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

鐵人賽 自我挑戰組 DAY 2

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

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

鐵人賽 自我挑戰組 DAY 1

達標好文 技術 UI / UX 設計白皮書 / Material Design 導讀_Day01 Material 基本介紹

必點技能 近年來 UI / UX 設計盛行,許多企業在開職缺需求都有特別備註需要了解 Material Design 及 Human Interface Gui...

鐵人賽 Software Development DAY 25

技術 Day 25 - 二周目 - React component 套件 Material-UI: Google Material Design 的實作套件

回憶 前面三天都是在談 Redux 關於前端的資料流,今天要談一個「非必要」的 react component 套件:Material-UI。它是Materia...

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 影片教學 DAY 18

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

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

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 33

技術 [Angular Material完全攻略] Day 33 - 雜項技巧(2) - 其他CSS技巧

今天來分享一些筆者近期撰寫Angular Material文章,以及開始在實際專案中使用Angular Material所整理出來的一些CSS小技巧,有些在文件...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 32

技術 [Angular Material完全攻略] Day 32 - 雜項技巧(1) - 自己的theme自己設計

Angular Material內建了4種不同主題的theme,未來應該還會持續增加,但這些theme未必是我們喜歡的,而在Angular Material中,...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 31

技術 [Angular Material完全攻略]Angular CDK(隱藏版) - Coercion、Platform

今天我們來講兩個Angular CDK文件上沒有介紹,但很有機會使用到的 隱藏版 功能,分別是型別轉換(coercion)、平台偵測(platform)。 關...

鐵人賽 Modern Web DAY 30
Angular Material完全攻略 系列 第 30

技術 [Angular Material完全攻略] Day 30 - Angular CDK(6) - Overlay

今天我們要來介紹Angular CDK中的Overlay!Overlay在Angular Material中可以說是隨處可見,只要是任何會從螢幕上彈出資訊的功能...

鐵人賽 Modern Web DAY 29
Angular Material完全攻略 系列 第 29

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

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

鐵人賽 Modern Web DAY 28
Angular Material完全攻略 系列 第 28

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

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

鐵人賽 Modern Web DAY 27
Angular Material完全攻略 系列 第 27

技術 [Angular Material完全攻略] Day 27 - Angular CDK(3) - Bidirectionality、Layout

今天我們來講Angular CDK中兩個跟版面配置有關的功能,分別是Bidirectionality、Layout。 Bidirectionality主要是用來...

鐵人賽 Modern Web DAY 26
Angular Material完全攻略 系列 第 26

技術 [Angular Material完全攻略] Day 26 - Angular CDK(2) - Accessibility

今天我們要來介紹第一個Angular CDK的分類功能-Accessibility。Accessibility(簡稱A11y)主要是放置一些方便與使用者互動的功...

鐵人賽 Modern Web DAY 25
Angular Material完全攻略 系列 第 25

技術 [Angular Material完全攻略] Day 25 - Angular CDK(1) - 基礎介紹

我們即將要邁入新的篇章-Angular CDK,我們今天先不來寫程式,而是大致的把目前(5.0.0)Angular CDK的架構做一個整體的介紹,讓讀者們能先在...

鐵人賽 Modern Web DAY 24
Angular Material完全攻略 系列 第 24

技術 [Angular Material完全攻略] Day 24 - 收件夾頁面(4) - Table (進階功能)

昨天我們把一個data table的基礎功能-「顯示資料、分頁、排序」都大致說明了一遍,今天我們來講一些進階的data table用法,以及分頁和排序元件的補充...