iT邦幫忙

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

技術 Day 14 【生活觀察】向左走,向右走

還記得我們昨天討論過的 Icon 嗎?(請參考:Day 13 【生活觀察】Icon最佳說?你認識那隻水母嗎?) 除了 icon 之外,日常生活中還有很多使用者...

鐵人賽 Modern Web DAY 13

技術 Day 13 【生活觀察】Icon最佳說?你認識那隻水母嗎?

你知道水母嗎? 好啦不是這隻(來亂)... 那你知道,這隻藍色的水母嗎? 當他亮起來時,到底代表什麼意思呢?....答案是~「遠燈」。*原文出處:http...

鐵人賽 Mobile Development DAY 13

技術 Day 13 - Floating action button (Design)

前言 FAB 作為一個獨立的 Action Button,位置上是在所有 Content 的前面並位於右下方,形狀上是圓形或依據不同大小可能為橢圓。通常對應著當...

鐵人賽 Modern Web DAY 12

技術 Day 12 【生活觀察】你今天碰碰車了嗎?

TO 正在看文章的你:我當然希望你能平安渡過每一次車程,但你有沒有發現,台灣的道路規劃,真的很容易碰碰車! 沒錯,畢竟我最常觀察的情境都是在機車行進間,所以在生...

鐵人賽 Mobile Development DAY 12

技術 Day 12 - RadioButtons (Design & Implementation)

前言 為 selection controls components 最後一個元件,與 slider、checkboxes 在設計上都非常簡潔,一樣也是實作與設...

鐵人賽 Modern Web DAY 11

技術 Day 11 【生活觀察】那個誰!不要踩草皮啦!拜託...

今年(2022)七月的時候,公司舉辦了一場 Outing 活動,地點在一個山上的私人農場。我們預計會在農場進行一個料理比賽!從遊覽車停車場到比賽地點,要走一小...

鐵人賽 Mobile Development DAY 11

技術 Day 11 - Checkboxes (Design & Implementation)

前言 與上篇同為 Selection Controls Components,今天要講的是 Checkboxes,由於這些元件整體相對簡潔,Material D...

鐵人賽 Mobile Development DAY 10

技術 Day 10 - Switches ( Design & Implementation )

前言 接下來的篇幅會開始講到 Selection Controls Components 簡稱 “選擇控件”:允許用戶完成涉及做出選擇的任務,例如選擇選項、打開...

鐵人賽 Modern Web DAY 10

技術 Day 10 【生活觀察】買飯都有障礙...還是回家通靈好了

今天要講一個點餐障礙讓人感到挫折的悲情故事... 午餐幾乎是上班族間討論度最高的一餐,上班族未解之謎之一就是:午餐吃什麼?(喂~!) 在我公司附近的某家店面,...

鐵人賽 Modern Web DAY 9

技術 Day 09 【生活觀察】警語,寫了個心酸

Hi~終於到第九天了...即將寫完整個鐵人賽的三分之一!在「生活觀察」這個章節的內容也來到大約一半了~不曉得大家現在出門會不會比較常留意行人和他們的行為呢?...

鐵人賽 Mobile Development DAY 8

技術 Day 8 - Slider ( Design )

前言 Slider 能讓用戶透過滑動按壓來對一系列的數值進行更加細部選擇的元件,常應用在音量控制或價格範圍等數值範圍選取的情境 Slider - Design...

鐵人賽 Modern Web DAY 8

技術 Day 08 【生活觀察】公車族,一起來空手接白車!?

雖然我是機車族,但就如同前面提過的,在路上時我總會不自覺觀察周遭的狀況,尤其是停等紅燈的時候。 今天我們來看看身為一個公車族有多麼辛苦吧!下面這個新聞畫面,相...

鐵人賽 Mobile Development DAY 6

技術 Day 6 - App bar : Top ( Design )

前言 App bar:Top ( toolbar ),官方之所以這樣區分,是因為在 Material Design 分為 Top 與 Bottom,只不過在常見...

鐵人賽 Modern Web DAY 6

技術 Day 06 【生活觀察】到底是左轉還是右轉??使用者不會告訴你的實話

不曉得正在閱讀文章的你,上班通勤都是用什麼方式呢?公車?捷運?走路!?(等等,太讓人羨慕了吧!)還是騎車或開車呢? 如果你和我一樣非大眾運輸的話,肯定經常在馬...

鐵人賽 Software Development DAY 5

技術 [Day 05] 什麼是搜尋引擎 IV - 在 IT 邦尋求答案是否少了些什麼 |【搜尋引擎製作錄】

[Day 05] 什麼是搜尋引擎 IV - 在 IT 邦尋求答案是否少了些什麼 |【搜尋引擎製作錄】 Github, Over Engineering 在昨天...

鐵人賽 Modern Web DAY 5

技術 Day 05 【生活觀察】你的開關不是你的開關!

進入職場,難免都會遇到最晚下班、負責關燈關門的時候。你是否和我一樣經常在那邊「玩電燈」呢XD?這個按鈕對應那個最遠的燈,旁邊按鈕卻是控制頭頂上的這盞!? 即...

鐵人賽 Modern Web DAY 5

技術 用偽元素改寫input radio,自己設計「單選框」

美化UI小技巧,讓單選框可以更符合設計樣式~ HTML <input type="radio" name="radio&...

鐵人賽 Modern Web DAY 4

技術 Day 04 【生活觀察】恐懼吧!你的手指!

不確定各位有沒有見過,像下圖這樣的洗臉盆? 我曾在某次出遊中,入住一家飯店,該飯店廁所的洗臉盆就像這樣,而且清潔人員還很貼心(?)的按下按鈕(儲水狀態),我...

鐵人賽 自我挑戰組 DAY 3
自學 UX 紀錄 系列 第 3

技術 03 介紹三鑽石設計流程

三鑽石設計流程? Why the double diamond isn’t enough它的出現是基於雙鑽石設計流程定義不夠明確,分工也不夠清楚,因此誕生了升級...

鐵人賽 Mobile Development DAY 3

技術 Day 3 - Button ( Implementation )

大綱 會分為下面幾個段落來介紹 Simple Using in layout in code add a icon Text Button in...

鐵人賽 Modern Web DAY 3

技術 Day 03 【生活觀察】推門還是拉門?

你是否經常因為搞不清楚「這扇門怎麼開」而躊躇在店家門口呢? 或是直接撞爆店家的玻璃門?在我書架上的其中一本書《不是你太笨,是爛UI的錯!》中有很多這樣的例子 -...

鐵人賽 Modern Web DAY 2

技術 Day 02 【生活觀察】自行車與斑馬線

來到我們的第一個小觀察,在你的日常生活中,是不是常見到腳踏車與行人、汽機車,人車爭道呢? 在我所工作與生活的雙北地區,是很常看到腳踏車有時候把自己當人(騎在人行...

鐵人賽 Mobile Development DAY 2

技術 Day 2 - Button ( Design )

前言 觸控手機問世的那一刻,Button 就成了每個應用程式中不可或缺的元件。這也是我想把它擺到第一位來介紹的主因,作為 Mobile 移動端的開發工程師,都無...

鐵人賽 Modern Web DAY 1

技術 Day 01 【你問我為什麼要寫?總之是參賽了。】

首發的封面圖,其實今天是員工旅遊最後一天,八點半才回到家的我,經過這三天的健行,現在隨時躺下就能睡著,但還是努力爬起來發文... |來點前言 恩...假設你真的...

鐵人賽 Modern Web DAY 1
30天UIUX自學之路 系列 第 1

技術 Day 01 30天UIUX自學之路-前言

前言 大家好!我是Dolly,今年第一次參加IThome鐵人賽,大學的背景是資管系,在學期間也輔系設計系,與UIUX的初次接觸是在學校的兩門課上: 第一次是大學...

鐵人賽 Mobile Development DAY 1

技術 Day 1 - 學習 Material Design 的好處在哪 ?

前言 由於 Material Design 大多數的篇幅都注重在介紹 UI / UX 還有在 Android 中有哪些實用的元件 所以對前端工程師最大的好處應該...

鐵人賽 Modern Web DAY 17

技術 30天打造品牌特色電商網站 Day.24 電商必用的各類提示

相信大家使用網站時,一定會遇到大大小小固有或彈出的提示框,這次的主題就是他!提示框在用戶經驗上會以內容的輕重程度做不同類型的變化,因此不管是建議、推廣,到提醒、...

鐵人賽 Mobile Development DAY 9

技術 [Day09 - UI/UX] UI 繪製

在UI出圖之前,我們先確認好目前的 wireframe 是完整的。接下來只要依照 wireframe 來實作UI的部分即可: 以登入為例: 接下來就一張一張把...