經過這幾篇的探討，我們一路從「為什麼需要無障礙設計」，到各種細節像是排版、色彩、元件、表單、表格……，其實各位應該已經發現，無障礙設計並不是一套額外的規則，而是...
在介面設計裡，表格（ Data Table ）算是魔王等級的存在。 它往往承載著使用者最關鍵的資訊：帳單明細、交易紀錄、訂單狀態、成績列表⋯⋯但當資料密密麻麻、...
表單是數位服務裡最平凡、也最容易讓人「挫折」的地方。 當使用者在輸入資料時，如果標籤模糊、提示不清、錯誤訊息又高冷難懂，那整個流程就像一場猜謎。而對無障礙設計來...
上一篇我們聊到「排版與佈局」是使用者理解介面的地圖。那今天要來聊的 色彩對比與可見性，則是這張地圖上的「路標」。 好的設計不只是美觀，還要能被「看見」，而「看見...
在平常上網，我們移動滑鼠、點擊元件已經成了日常。但對於一些使用者來說，「滑鼠」根本不是他們能選擇的輸入工具。 手有受傷的人可能無法精準操控滑鼠，視障者甚至看不到...
在無障礙設計的觀點中，排版不只是美學，而是讓資訊「可被看見、被操作、被理解」的結構。 對有視覺障礙、注意力困難或行動障礙的使用者來說，一個好的版面可以是「我能理...
在上一篇簡單介紹了「無障礙設計規範：WCAG 2.1」，而遵循規範不是只為了取得標章，更是為了讓更多人能真正使用你的設計。 所以今天我們來看看設計師必須知道、能...
在上一篇我們聊過「為什麼要做無障礙設計」，當設計師真正動手時，就可以依照 WCAG（Web Content Accessibility Guidelines）網...
在上一篇我們聊到「易用性測試」的重要性，透過觀察使用者的操作過程，找出設計中可能被誤解或卡住的地方，讓產品更容易被使用。 但你有沒有想過，當我們努力讓設計「更容...
上一篇我們聊到易用性測試的基礎概念，這篇進到易用性系列最後一篇，今天就帶大家往更實務的方向走：怎麼準備、怎麼執行、怎麼分析，還有一些要注意的事項。 1️⃣ 初...
在上一篇我們聊到設計中常見的 UI/UX 易用性陷阱。 不過就算設計師和團隊再有經驗，也難以保證一開始就能做出完全符合使用者直覺的產品。因為設計不只是在畫面上的...
系列文章: 前端工程師的 Modern Web 實踐之道 - Day 13預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標 在前一篇文章中,我...
前幾篇都在介紹十大易用性原則，今天整理出 5 個最常見的 UI/UX 易用性陷阱，讓你設計時能提前避開這些地雷。☠️ 1. 不清楚的狀態回饋 系統沒有明確告訴...
上一篇文章我們聊到「彈性與效率」與「簡約美學」，強調系統能保持簡潔的第一印象，又能提供足夠的彈性，滿足不同層次使用者的需求。今天要介紹不管設計多完美、多小心要預...
上一篇文章我們聊到「錯誤預防」和「辨識而非記憶」，強調了如何幫助使用者減少出錯、降低腦力負擔。 今天要介紹的是兩個看似風格不同，但其實互補的原則：「彈性與效率」...
這次的鐵人賽感覺一直在後端打滾，但其實我是一名前端工程師，所以應該多洗一點前端的主題，致力於打造更好的操作體驗，也是我當初的選擇走這一行的原因！ 訊息時間 在...
上一篇我們聊到「使用者的操控自由」以及「一致性與標準」，今天要繼續介紹兩個常被忽略，卻能大大影響體驗的原則：錯誤預防 和 辨識而非記憶。 5️⃣ 錯誤預防 在...
上一篇聊到「系統狀態可見性」和「系統與真實世界的關聯性 」，強調的是讓使用者理解系統的「現在狀況」與「生活語言」。這一篇我們繼續往下走，來看看另外兩個對日常設計...
上一篇我們聊到「設計指引」與「易用性原則」的重要性，今天，我們要更深入聊聊，聚焦在 Nielsen 十大易用性原則中的前兩項👉 「系統狀態可見性」與「系統與真實...
在做 UI/UX 設計的過程中，我們常常會聽到「設計規範」、「設計系統」，還有「設計指引」。 前兩者比較具體，像是按鈕高度多少、字體行距多少，這些能被明確量化。...
今天是基礎概念篇的最後一篇了！來講講文字如何影響介面體驗。 上一篇說到顏色和 icon 是 UI 的「外觀語言」，那文字就是最直接的資訊語言。 介面裡大多數訊息...
顏色是介面中最直覺、最能瞬間影響使用者感受的元素。它能傳達情緒、建立品牌記憶，也能直接左右操作的效率。而在實際體驗中，顏色與 icon 往往搭配使用，成為「訊息...
在設計元件時，大家第一直覺可能會是定義樣式：按鈕長什麼樣、表單欄位的圓角多少、icon 要實心還是空心 …。 這些確實重要，但元件不單只是為了「好看」，而是為了...
在上一篇文章中，我們談了設計系統的重要性：它是一套團隊共同語言，讓設計與開發可以對齊、確保介面一致性。這一篇則更往下聊 設計規範 和 介面元件，告訴你設計系統如...
在 UI/UX 設計中，設計系統已經從「選擇性工具」變成現代產品團隊不可或缺的核心資源。很多新人設計師可能覺得，反正只要畫出漂亮介面、按顏色與字體規則就好，何必...
在 UI/UX 設計流程裡，介面設計不是一開始就畫精緻的畫面🙅♀️。 我們通常會先做 Wireframe、Lo-Fi Prototype、Hi-Fi Prot...
在 Day03 的設計流程有介紹到『 資訊架構就像蓋房子前的藍圖，這步驟決定資訊要怎麼被整理和放置，使用者進來時才知道要去哪裡找東西。』 當使用者打開一個網站或...
在 UI/UX 設計流程裡，「使用者研究」是一個承上啟下的關鍵步驟。 上一步的需求訪談會蒐集大量資訊，但這些資料如果只是散落在筆記裡，團隊會很難吸收和運用。 這...
在 UI/UX 設計流程中，「需求訪談」幾乎是最前面的工作。很多設計師一開始會忍不住打開 Figma 開畫面開始設計，但如果沒有先理解需求，很容易設計到一半就被...
今天來介紹 UI/UX 的設計流程，上篇有提到 UI/UX 設計不只是「設計畫面」，其實背後是一個有脈絡的流程的喔！一般來說，我自己會把它拆成幾個步驟： 1️⃣...
ＸＩＮ
useKevin('front-end')
Shin
iThome鐵人賽
看影片追技術