UI 設計是什麼？跟 UX 差在哪？核心元素與入門指南

作者｜瞻新資訊　張安邦執行長（台大醫工背景・十年以上IT服務公司創辦人）

「這個網站的UI要再調整一下」——這句話在做網站或APP的過程中很常聽到，但UI具體指的是什麼、跟常常一起出現的UX有什麼不同，很多第一次接觸的人其實說不清楚。

這篇文章把UI設計是什麼、跟UX的分工，以及一個中小企業常常忽略、卻會實際影響開發效率的問題——介面缺乏系統化管理——一次講清楚。

UI設計是什麼？先搞懂它在負責什麼

UI是「使用者介面」（User Interface）的縮寫，指的是使用者跟一個數位產品互動時，所有看得見、摸得著、可以操作的視覺元素——按鈕、輸入框、圖示、色彩、字體、版面配置，全部都屬於UI的範疇。

簡單說，UI設計負責的是「這個產品長什麼樣子、操作起來是什麼感覺」。使用者點一個按鈕，這個按鈕的顏色夠不夠明顯、大小好不好按、點下去有沒有回饋動畫，這些都是UI設計要處理的細節。

UI跟UX，差在哪裡

這是最常被搞混的地方。UI跟UX確實常常綁在一起講，但關注的層面不一樣：

項目	UI（使用者介面）	UX（使用者體驗）
關注焦點	產品「看起來」與「操作起來」的視覺與互動細節	使用者「完成目標」的整體過程與感受
工作內容	色彩、字體、圖示、按鈕、動畫等視覺設計	需求研究、資訊架構、流程規劃、可用性測試
產出物	視覺稿、UI元件庫、設計規格	使用者旅程圖、線框圖、測試報告
判斷依據	好不好看、操作直不直覺	好不好用、能不能順利達成目標

可以這樣理解：UX決定「這個流程該怎麼設計，使用者才能順利完成註冊」，UI決定「這個註冊表單長什麼樣子、按鈕放哪裡、顏色怎麼配」。兩者分工不同，但缺一不可——流程設計得再順，介面亂糟糟一樣讓人想放棄；介面再漂亮，流程繞來繞去一樣留不住使用者。

實務上，尤其在中小型團隊，UI跟UX常常是同一個人或同一個小團隊在做，不會分得那麼細，但理解這兩個詞各自在講什麼，溝通需求時會清楚很多。

好的UI介面，由哪些元素組成

一個介面的UI設計，大致可以拆成四個面向：

• 視覺元素：色彩、圖形、圖示，決定產品的第一印象與品牌調性。
• 互動元素：按鈕、滑桿、輸入框，決定使用者能對介面做什麼操作。
• 佈局與結構：版面規劃、資訊層次，決定使用者的視線該怎麼走、重要的東西擺在哪裡。
• 可用性：導覽、操作流程、回饋機制，決定使用者操作之後知不知道發生了什麼事（例如按下送出之後有沒有明確的成功提示）。

這四個面向互相牽動，單獨把某一個做好，不代表整體介面就好用——例如色彩再漂亮，如果按鈕大小不一致、間距忽大忽小，使用者還是會感覺這個產品「做得不夠仔細」。

一個常見的問題：沒有系統化管理，介面會越改越亂

這是很多團隊在產品做大之後才會意識到的問題，但一開始沒有留意，後面要修正的成本很高。

情境是這樣的：一個網站或APP剛開始只有幾個頁面，按鈕、輸入框都是設計師個別畫的。隨著頁面越做越多，新加入的工程師或設計師沒有一個統一的參考標準，同樣是「確認」按鈕，這個頁面用深藍色、那個頁面用淺藍色，這裡的圓角是4px、那裡是8px。單獨看每個頁面可能都沒問題，但整個產品拼起來，使用者會隱約感覺「這個東西做得不太一致」，即使說不出具體哪裡怪。

對開發端來說，代價更直接：同樣的按鈕、同樣的表單元件，因為沒有共用的標準，每個頁面都重新刻一次，不僅浪費時間，日後要統一調整風格（例如換個主色），得一頁一頁改，而不是改一個地方全站生效。

進階做法：原子設計，把介面拆成五個層級

業界處理這個問題比較成熟的做法，叫做設計系統（Design System）——把介面裡會重複用到的元素標準化、建立一套共用的元件庫，讓整個產品的視覺與互動維持一致。

其中最常被提到的方法論是原子設計（Atomic Design），把介面拆解成五個層級：

• Atoms（原子）：最小的組成單位，例如一個按鈕、一個輸入框、一個標籤，單獨拿出來看不成意義，但是所有元件的基礎。
• Molecules（分子）：幾個原子組合成一個有功能的小單元，例如「輸入框＋按鈕」組成一個搜尋框。
• Organisms（有機體）：多個分子組合成一個較完整的區塊，例如導覽列、頁尾、商品卡片。
• Templates（模板）：把有機體排列成頁面的骨架，決定整體版面結構。
• Pages（頁面）：套用實際內容的最終頁面。

這個拆解方式的價值在於：改一次原子，全站套用這個原子的地方都會跟著更新。但這件事實際上是怎麼發生的？背後的技術基礎叫做設計token——把顏色、間距、字級這類視覺設計決策，賦予一個共用的名稱並集中管理，例如把「主色」定義成一個叫做`color-primary`的token，而不是在每個地方各自寫死一串色碼。設計稿跟程式碼共用同一組token，設計師在源頭把token的值改掉，所有引用這個token的按鈕、連結、標題就會一起變動，不用一個一個頁面手動修改。

這個概念由Salesforce在2014年率先提出，之後經由設計顧問Nathan Curtis等人推廣普及，現在已經是多數規模化產品團隊維持介面一致性的標準做法之一。對中小企業來說，不一定需要一套完整嚴謹的token系統，但「把常用的顏色、間距訂成幾個固定值反覆使用，而不是每次都手動輸入新數字」，就是這個概念最基本、也最容易上手的實踐方式。

UI設計流程大概怎麼跑

實際的UI設計工作，大致會從競品與需求研究開始，經過線框圖規劃版面骨架、視覺設計決定色彩字體、建立元件庫，再到原型測試與跟工程團隊交接規格。每個階段實際要交付什麼文件、驗收時該檢查哪些重點，UI/UX設計流程六階段拆解這篇有更完整的說明，這裡不重複展開。

中小企業做網站或APP，UI設計值得投入嗎

值得，但投入的程度可以依規模調整。如果只是一個不太更新的簡單頁面，不必走完整套流程；但如果是會持續迭代、加新功能的網站或APP，及早建立基本的元件庫（哪怕只是統一按鈕、字體、色彩這幾樣），能省下後面反覆調整的成本，也讓產品看起來更專業、更值得信任。

網站與APP開發的介面設計，會直接影響使用者對品牌的第一印象與後續維護的難易度，瞻新資訊在做網站與APP開發時，會依專案規模評估要不要建立正式的元件庫或設計系統，有需要的話歡迎聊聊你的專案需求。

FAQ