iT邦幫忙

ui/ux相關文章
共有 199 則文章
鐵人賽 Modern Web DAY 1

達標好文 技術 【Day 1】平面轉型後的今天,為何選擇網頁設計?

大家好,我是GG!目前是一名網頁設計師,之前擔任平面設計,後來嘗試轉型成網頁設計至今已滿三年。三年的時間說長不長,說短不短,倒是在這段上班兼學習的期間,體會到平...

鐵人賽 自我挑戰組 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...

技術 在資工系作業導入PM和UI設計的前端工程師,會成功嗎?

講到大學分組作業,幾乎每個人都遇過團隊合作上的問題。 但是感覺自己大學上軟體工程學到的多半是綜觀的概念,比較少人在提團隊的實質做法,所以就想說藉這個機會紀錄一...

徵才 [內科] 軟體開發公司擴大徵才 -UI/UX設計師

軟體開發公司擴大徵才【UI/UX設計師/資深設計師】工作地點:台北內湖科學園區瑞光路(近港墘捷運站)工作時間:日班 9:30-18:00PM薪資範圍:3.5萬~...

鐵人賽 Mobile Development DAY 2

技術 #Day02 #序曲 我是誰我在哪我要做什麼?

【參加動機】 嗨呦~大家好我是Jasmine (。・ω・。)ノ 今天來跟大家說一下我會參加Mono Sparta計畫的源起好惹! 第一次的招募說明會是辦在201...

鐵人賽 Modern Web DAY 3

技術 3分鐘認識 Adobe Xd (操作工具篇)

準備開始囉 嗨囉,我是 Riven今天要用大概 3 分鐘的閱讀時間,一起快速認識 Adobe Xd 這個新的 UI/UX 設計軟體中,有哪些基本卻很重要的工具...

鐵人賽 Modern Web DAY 1

技術 關於這次 30 天的日更「用 Adobe Xd 進行 UI 使用者介面設計」系列

關於作者 嗨囉,我是 Riven。數位遊牧型態的設計師;喜歡在社群上分享設計上的觀察與技巧,撰寫的文章在 Medium 上被選為 #Desgin 領域 Top...

鐵人賽 Modern Web DAY 30

技術 DAY 30-Daily UI 007 Setting 實作分享(prototype)(三)

終於到最後一篇了!今天要把剩下的部分都分享完。 第三個場景有三個地方要設定,返回鍵和切換按鍵前兩天都介紹過了,所以今天針對新增 link 的按鍵做分享。 點擊新...

鐵人賽 Modern Web DAY 29

技術 DAY 29-Daily UI 007 Setting 實作分享(prototype)(二)

接續著第二個場景,把下面所有細項設定拉進新的滾頁容器層,讓他們可以滑動。 在 name 的框新增“輸入”物件,在默認文本打上要輸入的內容,並把顏色、字體、字重、...

鐵人賽 Modern Web DAY 28

技術 DAY 28-Daily UI 007 Setting 實作分享(prototype)(一)

終於進入最後一個分享作品的 prototype 了,一樣把全部的 Artboard 都各別匯進場景裡。 第一個場景要觸發的按鍵有以下三個。 Personal i...

鐵人賽 Modern Web DAY 27

技術 DAY 27-Daily UI 007 Setting 實作分享(三)

今天會把最後的 Artboard 都分享完,那第三個 Artboard 是點開 link 選項的頁面,可以增加或關閉社群平台連結。 一樣把上方的 Setting...

鐵人賽 Modern Web DAY 26

技術 DAY 26-Daily UI 007 Setting 實作分享(二)

今天換分享第二個 Artboard ,這一頁是做 personal information 的細項設定。 上面的 setting 部分一樣保留複製過來,細項的設...

鐵人賽 Modern Web DAY 25

技術 DAY 25-Daily UI 007 Setting 實作分享(一)

這次的 Setting 是延續上一次的 User Profile做的設定,風格跟用色會統一跟 User Profile 一樣,針對 User Profile 的...

鐵人賽 Modern Web DAY 24

技術 DAY 24-Daily UI 006 User Profile 實作分享(prototype)(四)

今天接續著做場景2,這一頁要做的效果是點擊頭像可以放大頭像查看,一樣對頭像添加單擊觸發,把場景3的物件複製過來,先做頭像放大的部分。 把放大的頭像照片複製一個,...

鐵人賽 Modern Web DAY 23

技術 DAY 23-Daily UI 006 User Profile 實作分享(prototype)(三)

昨天已經把底部色塊放大了,接下來就是要讓他消失,那這部分會用到的“透明度動作”昨天已經有介紹過了,就讓大家自己動手做做看囉! 那這邊為了讓底部色塊和封面有無縫接...

鐵人賽 Modern Web DAY 22

技術 DAY 22-Daily UI 006 User Profile 實作分享(prototype)(二)

上一篇做到移動頭像,接下來就換其他物件的設定。 名稱、簡介和頭像的做法一樣,設定好可以看一下效果如何,確定OK後可以把場景2複製過來的物件刪除。這邊補充一下,從...

鐵人賽 Modern Web DAY 21

技術 DAY 21-Daily UI 006 User Profile 實作分享(prototype)(一)

今天又要進入用ProtoPie實作prototype的部分了,那一樣開啟 Adobe XD 和 ProtoPie 把所有場景都匯入,然後就開始第一個場景的設定囉...

鐵人賽 Modern Web DAY 20

技術 DAY 20-Daily UI 006 User Profile 實作分享(二)

這一篇就接續上一篇的內容,繼續介紹。 第二個Artboard就是主要的用戶資訊頁面,上面可以放圖片當作 banner,也壓個透明度底的顏色色塊當濾鏡。 頭貼可以...