剛踏進網頁設計和網路行銷的人很常聽到 UX 和 UI 設計師這個職業，很多人會困惑 UX UI 是什麼？他們的工作內容看起來相似但又不完全一樣，他們之間有什麼共同點和差異點？彼此之間又不能少了一方，UX 不能沒有 UI；UI 不能沒有 UX，他們之間到底有什麼曖昧關係？今天這篇就來告訴你他們之間的定義。
內容目錄
UX（User Experience）定義
UX 是所謂的使用者體驗，UX 設計師根據使用者的習慣，決定某處該置放什麼東西，例如網頁這裡要放一個主要內容，那裡該放一個按鈕，在那裡需要一個 CTA 呼籲，UX 的責任就是維持良好的體驗流程，讓人在使用產品時能保持邏輯。
要如何了解使用者體驗的流程，UX 設計師通常需要做調查分析，不外乎利用問卷、訪問等調查方式研究使用者的習慣和喜好，或是透過內部資料庫（例如 GA）分析使用者的習慣和行為，進而整理這些數據來設計出最佳的使用者體驗。
不僅網站或 App 等數位產品需要 UX，就算是一般實體產品，例如電鍋、球拍、桌子等等實物，在設計前都需要 UX 設計師構出完整的使用者體驗系統，這樣才能製造出心目中最完美的產品。
UI（User Interface）定義
UI 是所謂的使用者介面，在經過 UX 設計師構思出的使用者體驗流程後，UI 設計師需要做的工作就是將 UX 的想法具體地呈現出來，例如這個網頁的主要內容字體要多大，字型要如何設定；這個按鈕的顏色要方紅色還是綠色，按鈕要方形還是圓形；CTA 呼籲是否要加底線，UI 設計師基本上就是產品的美學工程師，如何讓使用者擁有絕佳的體驗過程中保有優越的美感就是 UI 設計師的責任。
就算不是數位產品，實體產品也很需要UI的設計概念，將產品最具美感的一面秀給消費者，吸引消費者目光進而買單。
UX 和 UI 之間的關係
他們之間密不可分，UX 和 UI 之間不能缺少彼此，UX 是網站的骨架設計，UI 是視覺上的呈現效果。UX 需要將體驗流程設定好後，將流程系統交予UI，由 UI 來付諸 UX 的想法。
就有如一個人類，UX 就是人的骨頭和器官，構成人的生命機能，UI 是皮膚，決定你的膚色、頭髮顏色、身高、衣著等等視覺上的效果。
很多新創公司會把 UX 和 UI 融合在一起，讓大家看不清楚他們之間的差別，以下這張圖可以精確了解到他們之間的區別。
但他們還是有相似重疊之處，可以參考下圖：
來源：Asinthecity
UX 著重在使用者的內心感受，擁有良好的體驗才能讓使用者願意留下來；UI 則將 UX 的理念發揮出來，著重在使用者的視覺體驗，照顧的是使用者的視覺感受。
網頁設計的 UX 和 UI
在設計一個網頁時該如何提升使用者體驗呢？以下共有 6 點可以說明：
1. 簡單乾淨、一目了然的介面
使用者一進入網站會想要馬上看到網站的重要內容，可能是網站的宗旨，也可能是最新消息，切記這時網站的介面要保持乾淨，不要有任何廣告，盡量將最重要的內容或向使用者表達的資訊放出來。
UX 需要做的事情是將網站的架構構思出來，包括 Menu 選單，進入首頁馬上看到的畫面等等。
UI 這時要做的就是將網站的 UX 思路具現化，設計出一個具有美感的網站畫面。
例如 SkyCar 的首頁就呈現一張大圖表示我們的服務內容（想讓使用者了解的資訊），選單的設計排版（產品及服務的選單在前，關於頁面的選單在後）。
來源：SkyCar
2. 圖像、影像的使用
不論是電商網站還是部落格網站，在描述產品和寫文章時最重要的是不要讓使用者一直看到太多文字，因為這樣會造成使用者負擔，我們要適時地將圖片或影像放入內容中，除了緩解使用者負擔，還能達到補助說明的效果，有些文字內容難以靠想像力來理解的資訊，靠圖像就能馬上讓使用者理解。
UX 在這時需要做的是將圖像和影像決定好要放在文字內容中的那個位置；
UI 則將圖像/影像放在正確位置上，再調整圖片和影片的大小、解析度等等外觀因子。
例如電商網站在描述產品時，會附上產品圖片說明讓使用者了解產品的形狀、顏色、包裝等外觀資訊。
來源：懋霖創新漢方
再來看看這個部落格例子，懋霖創新漢方撰寫文章時用嵌入影片的方式向使用者闡述葉黃素的功能。
來源：懋霖創新漢方
3. RWD 響應式設計
在這個人手一機的世界，大家用手機瀏覽網站已經是常態，所以 UX 設計師也要根據手機及平板用戶設計一套使用者流程體驗，了解他們的習慣和行為，有助於使用者不管在哪個裝置上都能順利瀏覽，架構完成好後就可以交給 UI 來設計了。
大家也可以使用這個網站：http://responsivetesttool.com/，來檢視網站的 RWD 體驗。
來源：Website Responsive Testing Tool
RWD響應式設計不僅可以提升使用者體驗，還可以提升SEO排名，有助於網路行銷等，有關RWD的優點可以參考這篇：RWD 是什麼？9 個 RWD 的好處和 2 個壞處
4. 明顯的 CTA 呼籲
作為一個網站，最重要的莫過於讓使用者買下產品，或是訂閱電子報，或者只是單純留個言，這些想讓使用者行動的呼籲必須放置在顯眼的位置，讓使用者在適當的時候可以找到 CTA 並且採取行動，提高轉換率。
如果 CTA 不明顯，使用者找不到採取行動按鈕的情況下，會失去採取行動的動機，導致原本要到手的單子就此流失，而且使用者可能會由於沒有耐心而對你產生不好印象，導致轉換率下降。
UX 需要在適當的位置放置 CTA 呼籲按鈕，可能是文章的結尾處，可能是產品頁面的開頭和結尾只要能讓使用者在循序脈絡看完你的內容後，有邏輯的發現你的 CTA 就是好的 CTA。
UI 要做的是就是將 CTA 按鈕在正確位置上設計出來，這時可以調整 CTA 的顏色，可以將按鈕的顏色與頁面的顏色呈鮮明對比，讓使用者一眼就看到 CTA。
舉我們 SkyCar 的例子，我們最希望的行動呼籲是讓使用者透過表單向我們諮詢服務，因此我們在 Menu 最右方和文章最下方都會置放 CTA 行動呼籲按鈕。
來源：SkyCar
來源：SkyCar
5. 多餘雜訊的剔除
網站上有些訊息其實可以不用加，例如背景配樂，擾人的廣告畫面，不相關的圖示，或是已經沒在經營的社群媒體連結，這些訊息並不是要讓使用者了解的，更甚者會降低使用者體驗流程，造成不好印象。因此UX要將這些不重要的訊息剔除，讓網站保持乾淨，讓使用者保持良好印象。
（延伸閱讀：9 點判斷電商網站的好壞｜網頁設計的評斷標準）
6. 提升購物車設計
如果你是電商網站，將產品賣出是網站最重要的事之一，因此 UX 在設計時要考量消費者的思路。
要怎麼讓使用者下單？
購物車的圖示放在哪裡比較適合？
怎麼提醒使用者進行結帳？
怎麼提醒使用者購物車內的產品數量？
這些問題都是 UX 設計師要思考的問題。
UI 設計師這時要做的是就是將購物車的圖示 icon、未結帳的商品數量數字、顏色等外觀設計出來。
來源：懋霖創新漢方
結語
看到這邊相信你已經了解 UX 和 UI 之間的關係了。透過了解 UX 和 UI，我們可以更加了解一個網站該有的架構設計，讓大家在設計網站時有個大方向。SkyCar 設計的網站都遵循 UX 和 UI 的原則，將使用者最佳體驗呈現給客戶，我們提供免費的諮詢服務，會盡心回答各位的問題，有任何問題歡迎隨時諮詢喔。
參考資料
【2020最新】做網路行銷還沒聽過UI UX？ Google給企業的UI UX操作建議
