iT邦幫忙

uiux相關文章
共有 40 則文章
鐵人賽 Vibe Coding DAY 8

技術 Day 8 | AI 大大們給的 PRD 建議這麼多,如何進行有效資料整理?

前言 Day 7,我請 AI 大大們 ChatGPT、Claude、Grok Bot 檢視 PRD,收到不少建議。內容落落長,可以怎樣有效地整理這些建議呢?...

鐵人賽 Vibe Coding DAY 7

技術 Day 7 | 請 ChatGPT、Claude、Grok Bot 大大們來指點我的 PRD

與 AI 討論的目標 協助我思考沒想到的事情以及不熟悉的技術領域知識,但最後的建議和產品判斷仍需要自己做決策。 使用哪些 AI 工具 ChatGPT...

鐵人賽 Vibe Coding DAY 6

技術 Day 6 | 來畫 Wireframe 階段 2 - 呼吸練習視覺化紀錄

為什麼想做呼吸練習紀錄的視覺化 對我來說,看見呼吸練習的紀錄會帶來一種踏實感。每次練習可能只有幾分鐘,但當這些零散的時間被記錄下來,我就能看見自己確實有留一些...

鐵人賽 Vibe Coding DAY 5

技術 Day 5 | 來畫 Wireframe 階段 1 - 呼吸練習

什麼是 Wireframe? Wireframe(線框稿)是將 PRD 或腦中的想法具體化,用來呈現介面結構、內容配置與操作流程的設計稿。形式可以很簡單,例如...

鐵人賽 Vibe Coding DAY 4

技術 Day 4 | 產品視覺設計方向介紹與初探

什麼是產品視覺設計方向 💡 定義視覺風格,再從風格中去發展設計元素 視覺風格: 第一印象看起來怎麼樣一件作品帶給你的直覺感受與情緒共鳴。換句話說,就是...

技術 Day 22|後台設計大改版:用不順的地方,其實只有幾個原因

Day 21〈side project 的定位:決定要服務誰,也決定放棄誰〉 講的是那份定位文件裡的四個決定,最後定下來的,是日常行銷工作已經離不開 AI 的那...

鐵人賽 Vibe Coding DAY 3

技術 Day 3 | PRD 初稿撰寫

什麼是 PRD PRD(Product Requirements Document,產品需求文件)是一份用來定義產品或功能「為什麼做、為誰做、要解決什麼問題,...

鐵人賽 Vibe Coding DAY 1

技術 Day1 | 呼吸放鬆 App 這麼多,為何要自己做一個

為何是呼吸放鬆這件事 曾經因工作壓力而有自律神經失調,時常會有心悸和無法專注的情況,第一次接觸到呼吸放鬆法是搭乘高鐵從新竹去台北上班時,打開 Netflix...

鐵人賽 Modern Web DAY 19

技術 Day 19 | 別再採雷!最常見的 5 大 UI/UX 易用性陷阱

前幾篇都在介紹十大易用性原則,今天整理出 5 個最常見的 UI/UX 易用性陷阱,讓你設計時能提前避開這些地雷。☠️ 1. 不清楚的狀態回饋 系統沒有明確告訴...

鐵人賽 Modern Web DAY 18

技術 Day 18 | 易用性原則 ⑤:犯錯沒關係 ── 復原與指引幫你撐腰

上一篇文章我們聊到「彈性與效率」與「簡約美學」,強調系統能保持簡潔的第一印象,又能提供足夠的彈性,滿足不同層次使用者的需求。今天要介紹不管設計多完美、多小心要預...

鐵人賽 Modern Web DAY 17

技術 Day 17 | 易用性原則 ④:剛剛好就好 ── 彈性效率與簡約美學的平衡

上一篇文章我們聊到「錯誤預防」和「辨識而非記憶」,強調了如何幫助使用者減少出錯、降低腦力負擔。 今天要介紹的是兩個看似風格不同,但其實互補的原則:「彈性與效率」...

鐵人賽 Modern Web DAY 16

技術 Day 16 | 易用性原則 ③:少犯錯,少動腦 ── 從預防到辨識的 UX 實踐

上一篇我們聊到「使用者的操控自由」以及「一致性與標準」,今天要繼續介紹兩個常被忽略,卻能大大影響體驗的原則:錯誤預防 和 辨識而非記憶。 5️⃣ 錯誤預防 在...

鐵人賽 Modern Web DAY 15

技術 Day 15 | 易用性原則 ②:設計裡的安全感 ── 自由的保障與一致性的力量

上一篇聊到「系統狀態可見性」和「系統與真實世界的關聯性 」,強調的是讓使用者理解系統的「現在狀況」與「生活語言」。這一篇我們繼續往下走,來看看另外兩個對日常設計...

鐵人賽 Modern Web DAY 14

技術 Day 14 | 易用性原則 ①:別讓使用者瞎猜 ── 系統狀態與真實世界的關聯

上一篇我們聊到「設計指引」與「易用性原則」的重要性,今天,我們要更深入聊聊,聚焦在 Nielsen 十大易用性原則中的前兩項👉 「系統狀態可見性」與「系統與真實...

鐵人賽 Modern Web DAY 13

技術 Day 13 | 設計不只靠直覺:為什麼要懂設計指引和易用性原則?

在做 UI/UX 設計的過程中,我們常常會聽到「設計規範」、「設計系統」,還有「設計指引」。 前兩者比較具體,像是按鈕高度多少、字體行距多少,這些能被明確量化。...

鐵人賽 Modern Web DAY 12

技術 Day 12 | 當介面會說話:文字帶來的體驗差異

今天是基礎概念篇的最後一篇了!來講講文字如何影響介面體驗。 上一篇說到顏色和 icon 是 UI 的「外觀語言」,那文字就是最直接的資訊語言。 介面裡大多數訊息...

鐵人賽 Vue.js DAY 5

技術 Day 4 : 為什麼需要資料綁定?用「狀態→樣式」引出 :class

前言|延續 Day 3 的思維 昨天我們把 姓名(必填)/ 備註(選填) 加入點單,並用 v-model 打通「輸入 ↔ 狀態」; 同時沿用 Day 1 的流程...

鐵人賽 Modern Web DAY 3

技術 Day 03 | 設計不是憑感覺:UI/UX 背後流程大揭秘

今天來介紹 UI/UX 的設計流程,上篇有提到 UI/UX 設計不只是「設計畫面」,其實背後是一個有脈絡的流程的喔!一般來說,我自己會把它拆成幾個步驟: 1️⃣...

鐵人賽 Modern Web DAY 2

技術 Day02 | 為什麼要學 UI/UX?設計師在產品中的角色

當我們打開手機 App、操作網銀、或是訂外送時,背後其實都有涉及到 UI/UX 喔~那麼,為什麼要學 UI/UX 呢?🤔 🌟 UI/UX 的價值在於「橋樑角色...

鐵人賽 Modern Web DAY 1

技術 Day01 | 什麼是UI/UX? UI vs UX 的差異與關聯

What is UI/UX ? 很多剛接觸設計的人,或是非設計背景人員,常常分不清「UI」跟「UX」。簡單來說,UI(User Interface 使用者介面)...

鐵人賽 IT 管理 DAY 28

技術 [Day28-總結] 猴子翻過高牆!工程師也懂的設計交付之旅🔥

Figma 讓合作更緊密 藉由 Figma 即時同步,團隊成員可以共同參與,隨時跟進進度與提供回饋。一個健康的產品團隊需要設計與開發緊密協作,互相理解與回饋。合...

技術 [React][jsx] 隨畫面滾動淡入淡出

程式碼分享加小紀錄,如果能幫到你的話就太好了 codeSandBox 透過滾動才出現的box,會淡入,當畫面滾動到看不見該box,他就會在看不到的地方悄悄淡出。...

鐵人賽 自我挑戰組 DAY 7

技術 【Day7】競品分析 — 單項作品內容頁(2)

今日選定的案例是高階設計師處理國家等級的UX議題,雖然層級偏高,但個人覺得其網頁鋪陳的很好,只是三份案例更細部的項度分析仍在製作中: Terj.Lin-曾處理澳...

鐵人賽 自我挑戰組 DAY 6

技術 【Day6】競品分析 — 單項作品內容頁(1)

今日挑選的競品會跟先前不一樣,主要是顧及到個人既有作品之類型有關聯。今日找了兩份檔案,一個是處理設計系統、一個是處理流程議題。相關描述如下(更細部的項度分析仍在...

鐵人賽 Modern Web DAY 28

技術 Day 28 【職涯之路】如何與設計師協作?

今天要聊的主題有兩個面向,一種是身為UX要如何跟UI設計師合作、一種是自身是設計師,要如何與其他設計師協作。 |身為UX,如何與UI設計師協作? 台灣有很多的...

鐵人賽 Mobile Development DAY 14

技術 [ReFlo : Day 13] FLO整體架構,畫面任務與操作流程

今天要來盤點這個App可以做到的任務和確認他的流程,統整一下我是從哪一個版本開始的後續透過競品分析之後會聽說我心中的重新設計 我把這個App分成四大部分來看:主...

鐵人賽 Mobile Development DAY 13

技術 [ReFlo : Day 12] Flo Health Library,一起看健康圖書館

之前 Day 7 了解 Flo 與世界各地著名的醫學專家、研究機構、大學和研究小組合作。分成三類合作領域:Content Collaborations、Inno...

鐵人賽 Mobile Development DAY 12

技術 [ReFlo : Day 11] Flo Assistant,來了解你的週期助理

今天要來觀察 Flo Assistant ,就是對話式的資料助理!每天輸入完資訊之後他都會直接跳出來跟你說要討論一下,窩喔!又要討論?一開始會很認真的跟他討論,...

鐵人賽 Mobile Development DAY 11

技術 [ReFlo : Day 10] 了解Flo的設計原則(三)生理週期小工具呈現資訊與服務目標

接續昨天的進度,昨天看生理週期小工具設計原則,今天會看隨之產生的介面。 今天重點:生理週期小工具呈現的資訊,和達成的目標! ㄧ.我的月經週期 這區塊會顯示三...