iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 10 瀏覽

鐵人賽 Modern Web DAY 13

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 13 篇

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

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

ＸＩＮ ‧ 2025-09-26

0 Like 0 留言 65 瀏覽

鐵人賽 Modern Web DAY 12

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 12 篇

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

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

ＸＩＮ ‧ 2025-09-25

0 Like 0 留言 74 瀏覽

鐵人賽 Modern Web DAY 11

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 11 篇

技術 Day 11 | 顏色×icon：介面的視覺語言

顏色是介面中最直覺、最能瞬間影響使用者感受的元素。它能傳達情緒、建立品牌記憶，也能直接左右操作的效率。而在實際體驗中，顏色與 icon 往往搭配使用，成為「訊息...

ＸＩＮ ‧ 2025-09-24

0 Like 0 留言 77 瀏覽

鐵人賽 Modern Web DAY 10

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 10 篇

技術 Day 10 | 元件不只是樣式，而是體驗的橋樑

在設計元件時，大家第一直覺可能會是定義樣式：按鈕長什麼樣、表單欄位的圓角多少、icon 要實心還是空心 …。這些確實重要，但元件不單只是為了「好看」，而是為了...

ＸＩＮ ‧ 2025-09-23

0 Like 0 留言 100 瀏覽

鐵人賽 Modern Web DAY 9

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 9 篇

技術 Day 09 | 設計規範到底管什麼？談談元件背後的秩序規則

在上一篇文章中，我們談了設計系統的重要性：它是一套團隊共同語言，讓設計與開發可以對齊、確保介面一致性。這一篇則更往下聊設計規範和介面元件，告訴你設計系統如...

ＸＩＮ ‧ 2025-09-22

0 Like 0 留言 116 瀏覽

鐵人賽 Modern Web DAY 8

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 8 篇

技術 Day 08 | 設計的共同語言魔法：淺談設計系統的重要性

在 UI/UX 設計中，設計系統已經從「選擇性工具」變成現代產品團隊不可或缺的核心資源。很多新人設計師可能覺得，反正只要畫出漂亮介面、按顏色與字體規則就好，何必...

ＸＩＮ ‧ 2025-09-21

0 Like 0 留言 95 瀏覽

鐵人賽 Modern Web DAY 7

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 7 篇

技術 Day 07 | 從藍圖到樣品屋：Wireframe 到 Hi-Fi Prototype 的進化之路

在 UI/UX 設計流程裡，介面設計不是一開始就畫精緻的畫面🙅‍♀️。我們通常會先做 Wireframe、Lo-Fi Prototype、Hi-Fi Prot...

ＸＩＮ ‧ 2025-09-20

0 Like 0 留言 133 瀏覽

鐵人賽 Modern Web DAY 6

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 6 篇

技術 Day 06 | 別再讓使用者迷路！3 步驟搞懂資訊架構

在 Day03 的設計流程有介紹到『資訊架構就像蓋房子前的藍圖，這步驟決定資訊要怎麼被整理和放置，使用者進來時才知道要去哪裡找東西。』當使用者打開一個網站或...

ＸＩＮ ‧ 2025-09-19

0 Like 0 留言 141 瀏覽

鐵人賽 Modern Web DAY 5

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 5 篇

技術 Day 05 | 使用者研究三神器：Persona、CJM、User Story 怎麼用？

在 UI/UX 設計流程裡，「使用者研究」是一個承上啟下的關鍵步驟。上一步的需求訪談會蒐集大量資訊，但這些資料如果只是散落在筆記裡，團隊會很難吸收和運用。這...

ＸＩＮ ‧ 2025-09-18

0 Like 0 留言 118 瀏覽

鐵人賽 Modern Web DAY 4

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 4 篇

技術 Day 04 | 需求訪談不只是聊天：抓住設計的第一手資訊

在 UI/UX 設計流程中，「需求訪談」幾乎是最前面的工作。很多設計師一開始會忍不住打開 Figma 開畫面開始設計，但如果沒有先理解需求，很容易設計到一半就被...

ＸＩＮ ‧ 2025-09-17

0 Like 0 留言 70 瀏覽

鐵人賽 Modern Web DAY 3

UI/UX 不只是漂亮！30 天讓你的設計人人都能用系列第 3 篇

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

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

ＸＩＮ ‧ 2025-09-16

1 Like 0 留言 687 瀏覽

鐵人賽 Mobile Development DAY 4

用最接近自然語言的Basic30天學會行動App 系列第 4 篇

技術 Basic30天學會行動App-第4章.實作App

第4章: 實作簡單的計算機App 介面設計本章與第1章計算機最大的差異即是使用Designer設計，實作一個簡單的計算機應用程式，並透過此專案來學習如何設計介...

因田木 ‧ 2024-09-04

0 Like 0 留言 961 瀏覽

鐵人賽 Mobile Development DAY 9

ReFlo : 重新設計月經日曆 App 系列第 9 篇

技術 [ReFlo : Day 8] 了解Flo的設計原則（ㄧ）之前的介面改版

今天來了解Flo在介面上不同功能的設計原則與之前的改版設計，如果提出的重新規劃不能沿襲之前訂定的設計原則，會讓整個app變得更加模糊、混亂，而且鐵人賽目前是我自...

heiyuyu ‧ 2022-09-24

0 Like 0 留言 1280 瀏覽

鐵人賽 Modern Web DAY 1

30天UIUX自學之路系列第 1 篇

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

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

Dolly ‧ 2022-09-16

0 Like 0 留言 1300 瀏覽

鐵人賽 Mobile Development DAY 24

長照小幫手 - 從 0 開始建置 Chatbot 的筆記 & 走錯路的心得系列第 24 篇

技術 Day 24 - [Android APP] 02-界面設計

昨天講完架構面，今天不那麼技術，來講界面設計。畫面設計上由於介面是設計給長者使用，因此字型較大。首頁，使用者可以先選擇要問哪類問題。點選後進入對話頁面。...

YR ‧ 2021-10-08 ‧團隊來自行雲者研發基地的菁英們

0 Like 0 留言 891 瀏覽

鐵人賽 Mobile Development DAY 21

30天零負擔輕鬆學會製作APP介面及設計系列第 21 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 21】

大家好，我是YIYI，今天我要來製做設定頁面。從哪裡可以進入設定頁面呢? 點擊LIST的設定~如下圖設定頁面這邊我設計的上一頁是預設跳回HOMEPAGE，...

YIYI ‧ 2021-09-30

0 Like 0 留言 790 瀏覽

鐵人賽 Mobile Development DAY 17

30天零負擔輕鬆學會製作APP介面及設計系列第 17 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 17】

大家好，我是YIYI，今天我要來製作記帳和報表的頁面。記帳頁面和製作前面的頁面一樣，先將BACKGROUND放入WHIMSICAL中，並拉ICON到手機框裡...

YIYI ‧ 2021-09-26

0 Like 0 留言 627 瀏覽

鐵人賽 Mobile Development DAY 16

30天零負擔輕鬆學會製作APP介面及設計系列第 16 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 16】

大家好，我是YIYI，今天我要來製作到目前為止所有頁面放入MARVEL APP做DEMO。進入MARVELAPP 首先，進入登入好的APP頁面，將所有頁面放入...

YIYI ‧ 2021-09-25

0 Like 0 留言 756 瀏覽

鐵人賽 Mobile Development DAY 15

30天零負擔輕鬆學會製作APP介面及設計系列第 15 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 15】

大家好，我是YIYI，今天我要來製作日記-LIST以及個人資料頁面。日記LIST 日記LIST是在昨天製作的日記頁面的基礎上增加LIST的頁面。製作完成後如下...

YIYI ‧ 2021-09-24

0 Like 0 留言 830 瀏覽

鐵人賽 Mobile Development DAY 14

30天零負擔輕鬆學會製作APP介面及設計系列第 14 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 14】

大家好，我是YIYI，今天我要來製作日記部分的介面。如何進入日記頁面? 日記的部分是點選像是筆的icon來進入畫面，分別有三個地方可以進入這個頁面。第一個是H...

YIYI ‧ 2021-09-23

0 Like 0 留言 954 瀏覽

鐵人賽 Mobile Development DAY 13

30天零負擔輕鬆學會製作APP介面及設計系列第 13 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 13】

大家好，我是YIYI，今天要來公開設計好的封面，還有修正、增加一些前面沒想到的東西。 APP一點開的介面底色一樣使用前面設定好的App底色，字使用E8B6A5...

YIYI ‧ 2021-09-22

0 Like 0 留言 784 瀏覽

鐵人賽 Mobile Development DAY 12

30天零負擔輕鬆學會製作APP介面及設計系列第 12 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 12】

大家好，我是YIYI，今天我要來製作HOMEPAGE中MONTH與TODAY的切換以及右下角的加號點擊後的畫面。 HOMEPAGE的切換在HOMEPAGE的設...

YIYI ‧ 2021-09-21

0 Like 0 留言 766 瀏覽

鐵人賽 Mobile Development DAY 11

30天零負擔輕鬆學會製作APP介面及設計系列第 11 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 11】

大家好，我是YIYI，今天我要利用MARVEL將前面三個介面做出連結。製作介面連結首先，先進入昨天的介面，並且將滑鼠放在HOMEPAGE的頁面上，就會看到P...

YIYI ‧ 2021-09-20

1 Like 0 留言 2258 瀏覽

鐵人賽 Mobile Development DAY 10

30天零負擔輕鬆學會製作APP介面及設計系列第 10 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 10】

大家好，我是YIYI，今天我要來介紹MARVEL APP。 MARVEL APP是甚麼 MARVEL APP是一款能夠讓設計師在不需要寫任何的程式的情況下讓AP...

YIYI ‧ 2021-09-19

0 Like 0 留言 1163 瀏覽

鐵人賽 Mobile Development DAY 9

30天零負擔輕鬆學會製作APP介面及設計系列第 9 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 09】

大家好，我是YIYI，今天我要來製作左上角點開的清單以及點開右上角相機後的頁面。清單LIST 考慮到這款APP的功能多樣化，所有的Icon都必須是讓人一眼就知...

YIYI ‧ 2021-09-18

0 Like 0 留言 1352 瀏覽

鐵人賽 Mobile Development DAY 8

30天零負擔輕鬆學會製作APP介面及設計系列第 8 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 08】

大家好，我是YIYI，今天我要製作APP登入後的介面。先製作登入後介面的原因因為我畫的封面一直達不到我想要的感覺，於是決定先做裡面，後面再來做封面~ HOM...

YIYI ‧ 2021-09-17

0 Like 0 留言 1162 瀏覽

鐵人賽 Mobile Development DAY 7

30天零負擔輕鬆學會製作APP介面及設計系列第 7 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 07】

大家好，我是YIYI，今天要開始用Whimsical畫架構圖了~ 進入Whimsical 先透過【DAY5】給大家的Whimsical網址進入網站的畫面。點【S...

YIYI ‧ 2021-09-16

0 Like 0 留言 1181 瀏覽

鐵人賽 Mobile Development DAY 6

30天零負擔輕鬆學會製作APP介面及設計系列第 6 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 06】

大家好，我是YIYI，今天要來聊聊我想製作的APP的規格表。動機與目的如同【DAY 02】所說，我想製作的是一款多功能的小日曆。因為目前GOOGLE PLA...

YIYI ‧ 2021-09-15

0 Like 0 留言 2601 瀏覽

鐵人賽 Mobile Development DAY 5

30天零負擔輕鬆學會製作APP介面及設計系列第 5 篇

技術 30天零負擔輕鬆學會製作APP介面及設計【DAY 05】

大家好，我是YIYI，今天我要來介紹Whimsical。關於Whimsical 在介紹如何使用前，先來說一下Whimsical是甚麼~Whimsical是一個...

YIYI ‧ 2021-09-14

0 Like 0 留言 1144 瀏覽