「網頁設計」這四個字，在很多業主心裡的畫面，可能就是一個網站做起來好不好看、色彩搭配順不順眼。但如果進一步去看整個網頁設計的專案分工，會發現「UI」與「UX」其實是兩個獨立、卻又緊密相關的專業範疇，跟單純的視覺設計、前端切版並不是同一件事。很多業主在跟設計團隊溝通時，常常搞不清楚為什麼「設計」還要拆成使用者研究、資訊架構、線框圖、原型測試好幾道工序，覺得是不是把簡單的事情複雜化了。這篇文章想從實務工作範疇的角度，把UI與UX在網頁設計專案裡具體負責哪些工作，一步一步拆解清楚，讓業主在溝通與檢視提案時，能更清楚知道自己付費請的服務，實際涵蓋了哪些專業內容。
UI與UX是什麼？先釐清兩個常被混用的名詞
UI一般指的是使用者介面，也就是使用者在畫面上實際看到、點擊、操作的所有元素，包括按鈕、選單、圖示、色彩與版面配置等，關注的重點是「畫面呈現與操作介面本身好不好用、好不好懂」。UX則是使用者體驗，範圍比UI更廣，關注的是使用者從一開始接觸到這個網站，到完成目標任務為止，整個過程中的感受與流暢度，包括他有沒有很快找到想要的資訊、操作過程有沒有卡關、離開網站時的整體印象如何。簡單來說，UI比較像是「介面本身的樣貌」，UX則是「使用整個介面的完整體驗」，兩者高度相關，但關注的層次與工作方法並不完全相同，這也是為什麼專業的網頁設計團隊，通常會把這兩塊拆開來討論。
在網頁設計專案裡，UI/UX工作出現在哪個階段
如果把一個完整的網頁設計專案畫成時間軸，UX相關的工作通常會出現在專案最前端，先透過使用者研究釐清「這個網站要解決誰的什麼問題」，再透過資訊架構規劃內容怎麼分類、頁面之間怎麼串連，接著用線框圖把版面的骨架定下來，並透過原型與可用性測試反覆驗證。等到這些基礎確定之後，UI設計才會接手，把線框圖轉換成有色彩、字體、圖像的具體視覺畫面，決定介面看起來的樣子與風格調性。也就是說，UX工作解決的是「這個網站的結構與流程對不對」，UI工作解決的是「這個結構呈現出來好不好看、好不好操作」，兩者是先後銜接、彼此依賴的關係，而不是同一個步驟的兩種說法。
使用者研究：從假設變成實際需求的第一步
很多網站在設計初期，其實是憑著業主與設計團隊對「使用者可能想要什麼」的主觀假設在進行規劃，而使用者研究要做的，就是把這些假設拿去跟真實的使用者對照，看看猜測是否成立。常見的做法包括訪談潛在使用者、觀察他們實際操作類似網站的行為、整理出具代表性的使用者輪廓（一般稱為人物誌），藉此了解使用者的目標、習慣、會遇到的困難點。這個階段產出的結論，會直接影響後面的資訊架構怎麼規劃、哪些功能該被優先呈現。如果跳過這一步，直接進入視覺設計，常常會出現「設計團隊自己覺得很合理，但真實使用者用起來卻很卡」的落差，這也是為什麼專業的UX工作流程，會把使用者研究放在整個專案最前面。
資訊架構：網站內容怎麼分類與串連
資訊架構關心的是網站內容的組織邏輯，也就是哪些內容該放在同一個分類底下、選單該怎麼命名使用者才看得懂、從首頁到目標頁面之間需要經過幾層點擊。這個階段通常會產出網站的架構圖，清楚呈現頁面與頁面之間的層級關係與連結路徑。良好的資訊架構，能讓使用者用最直覺的方式找到想要的內容，減少迷路或誤觸的機率；反之，如果資訊架構規劃不良，即使後面的視覺設計做得再精美，使用者還是很容易在網站裡找不到方向，進而提早離開。這也說明了為什麼專業團隊會把資訊架構視為獨立的一道工序，而不是直接跳過、憑感覺排版面。
線框圖：把架構轉換成畫面骨架
線框圖是把資訊架構進一步具體化的工具，用簡單的線條、方塊與文字標示，呈現出每個頁面大致的版面配置，例如標題放在哪裡、圖片區塊多大、按鈕擺在什麼位置，但這個階段刻意不處理色彩、字體、圖像風格等視覺細節，目的是讓所有人能先聚焦在「版面的邏輯與操作動線對不對」，不被視覺喜好干擾判斷。線框圖通常會拿來跟業主與相關利害關係人討論，確認頁面的核心功能與資訊優先順序有沒有遺漏，等大家對版面骨架有共識之後，才會進入下一步的視覺設計與原型製作，避免等到視覺稿都做好了，才發現整體架構需要大幅調整，徒增後續修改的成本。
互動原型與可用性測試：驗證設計是否真的好用
互動原型是把線框圖或視覺稿串接起來，做成可以實際點擊、模擬真實操作流程的模型，讓團隊在網站真正開發完成之前，就能先體驗操作動線是否順暢。可用性測試則是找一群具代表性的使用者，實際操作這個原型，觀察他們在完成特定任務時，會不會卡在某個步驟、會不會誤解某個按鈕的功能，再根據觀察結果回頭調整設計。這個步驟的價值在於，能夠在網站正式開發、投入大量程式撰寫成本之前，提早發現設計上的問題並修正，避免等到網站上線後才從使用者的實際流失情況或抱怨中，反過來推測問題出在哪裡，那時候要調整的成本通常會高出許多。
UI/UX設計 vs 視覺設計 vs 前端切版，三者分工差異在哪
很多業主容易把UI/UX設計、視覺設計、前端切版混為一談，但這三者其實是不同性質的工作。UI/UX設計著重在使用者研究、資訊架構、線框圖與可用性測試，產出的是網站的結構邏輯與操作流程規劃，通常不涉及最終的色彩與圖像風格。視覺設計則是在UI/UX的架構基礎上，決定網站實際呈現出來的色彩計畫、字體選擇、圖像風格與整體美感調性，讓網站兼具品牌識別與視覺吸引力。前端切版則是把視覺設計稿，透過網頁技術轉換成瀏覽器能夠實際呈現、並且能在不同裝置上正常顯示的程式碼，關注的是技術實作的精準度與相容性。這三個角色雖然經常出現在同一個網頁設計專案裡，但需要的專業技能與工作方法並不相同，業主在挑選合作對象或審視提案內容時，可以留意對方是否針對這幾個環節都有具體的規劃與說明，而不是只呈現一份視覺稿就代表完成了整個網頁設計流程。
常見問題
小型網站或預算有限的專案，一定需要完整跑過使用者研究與可用性測試嗎？不一定需要跑到非常完整的規模，但即使是簡化版本，例如訪談幾位目標客群、找幾位使用者實際操作原型給意見，都比完全跳過這個階段，更能降低上線後才發現問題的風險，可以依專案規模調整投入的程度。
UX不好的網站，從外觀上看得出來嗎？不一定。有些網站視覺看起來很精美，但使用者實際操作時卻常常找不到想要的功能或資訊，這就是UI與UX表現落差的典型例子，單看外觀很難判斷UX是否真的到位，需要實際操作或觀察使用者行為才能發現。
線框圖階段，業主可以提出修改意見嗎？可以，而且這個階段正是最適合提出架構性意見的時機，因為線框圖還沒進入視覺與程式開發，調整成本相對較低，等到視覺稿或網站都做好才要求調整架構，通常需要花費更多時間與成本。
沒有經過完整UX流程做出來的網站，就一定不好用嗎？不一定，經驗豐富的設計團隊，也可能憑經驗做出還不錯的版面規劃，但完整的UX流程，能提供比較有依據的驗證方式，降低單純憑經驗判斷可能出現的落差，對於功能較複雜或使用族群較多元的網站，這個差異通常會更明顯。
如果不確定自己現有的網站，在資訊架構或操作動線上是否存在使用者容易卡關的地方，創昇SEO提供免費的網站健檢，協助業主從使用者的角度重新檢視網站的架構與呈現方式。也提供全台免費到府解說，用實際案例說明UI與UX在網頁設計裡各自扮演的角色，讓業主未來在跟設計團隊溝通需求時，能更精準地表達自己真正想要解決的問題。