跳至主要內容 
近年用戶體驗設計的概念愈來愈受重視，造就了UI/UX設計師的出現。但UI和UX到底有什麼分別呢？如果業主要跟設計師溝通，應該具備什麼樣的概念、接洽流程為何？
了解UI與UX的差異很重要，因為你得搞清楚你的網頁究竟需要的是哪方面的改善、聘請哪種設計師。也有很多人也選擇直接使用其他架設網站軟體，減少UI與UX的煩惱。有好的UI不代表有好的UX，這兩個並不通用。確定你的需求才不會造成尷尬的後果，所以讓我們來看看UI和UX究竟是什麼。
UI、UX設計是什麼？
已故的蘋果CEO 史蒂夫·賈伯斯說過：「大部分的人以為產品外觀做得美觀就是一個好設計(UI)，但實際上成功的設計不能只是好看更必須要好用(UX)。」UI與UX是完全不一樣的定義，但兩者之間卻如同唇齒彼此相依，不可失去彼此。
UI（User Interface）使用者介面
UI中文稱為「使用者介面」。介面指的是APP、網頁等可以與使用者互動的媒介。UI著重的是使用者介面的『呈現』，實務工作上則包含外觀(Graphic)和互動設計(I簡而言之，這兩者有著密不可分的重要性。在產品開發階段，會從UX設計再到UI。UX設計就像是骨骼，著重於「用起來怎麼樣？」而UI設計則是血肉，加入美觀、互動性的元素，讓產品活起來，著重於「看起來怎麼樣？」。nteraction)等範疇。如：視覺美感、設計美學、便利性、風格呈現，細節更包含了字型、字體大小、顏色、標誌、按鍵、動畫效果等。UI的呈現，會影響到使用者的使用感受以及順暢性。
身為一個UI設計師，我們可能會想的是：
・網站要使用樣的什麼顏色與風格？
・按鍵要用什麼樣的動畫？
・要如何運用對比的顏色增加文字的閱讀性？
UX（User Experience）使用者經驗
UX中文稱為「使用者經驗」。包含的範圍更為廣泛，涵蓋使用者與產品從頭到尾的所有『互動過程』。UX的主要任務在於解決用戶使用產品時的痛點、提升產品使用流暢性，透過用戶在使用產品時產生的需求、回饋、感受、偏好，將以解決、優化，進而創造最優質的使用者經驗。
身為一個UX設計師，我們可能會想的是：
・要如何改善網路購物的結帳流程？
・用戶需要完成的步驟有哪些？
・按鈕應該要放在哪裡？
・這樣的用戶體驗是直接明瞭的嗎？
UI/UX差異總整理
| UI（User Interface） 使用者介面 | UI（User Interface） 使用者介面 | |
| 定義 | 使用者與產品之間的溝通媒介。 | 以使用者感受為出發點來設計產品。 |
| 任務 | 視覺設計：版型配置、字體配置、顏色搭配、互動效果等。 | 市場調查與研究、使用者行為分析、資訊架構設計、流程設計等。 |
| 達成目的 | UI設計師著重在「產品如何呈現」，確保用戶在使用產品時，整體的介面、按鈕、配色、字體…等都能讓人感到舒服順暢。 | UX設計師著重在「產品使用起來的感覺」，透過蒐集者使用者意見與反饋，確保流程可解決用戶痛點、使用順暢，讓用戶擁有優質的使用經驗。 |
簡而言之，這兩者有著密不可分的重要性。在產品開發階段，會從UX設計再到UI。UX設計就像是骨骼，著重於「用起來怎麼樣？」而UI設計則是血肉，加入美觀、互動性的元素，讓產品活起來，著重於「看起來怎麼樣？」。
UX和UI其實還是多重疊的地方
UX 設計師關注介面設計，更關心所有會影響使用體驗的一切，例如資訊架構、互動設計、內容、使用者的認知、經驗、需求、價值觀。也就是說，UX設計師其實是包山包海的，橫跨眾多領域，單憑一人之力是無法完成的，甚至可以說UI也涵蓋在UX裡面，以負責的工作內容來看，如下圖。
UI/UX設計流程
UI/UX 設計師的工作，是規畫介面的流程與動線，並設計良好的視覺呈現，讓客戶體驗到舒適流暢的產品服務。因此了解使用者的心理世界，也是每位 UI/UX 設計師的任務之一。
所以如何與業主溝通就變得很重要！坊間可能會遇到業主要求多或不了解設計而時常出現大改的情況，為了杜絕這樣的情形發生，飛拉霓詳列以下 UI/UX 設計6大步驟，讓業主們清楚知道現在製作到哪一步驟，設計師也可以在每個階段完成後請業主簽名蓋章，避免之後又更改需求。
1.網站需求瞭解 蒐集資料
在網站設計工作開始之前，UX設計師需透過市場調查、製作問卷、面談等方式蒐集資料，分析並了解使用者需求及網站使用習慣。而這項工作，在現在台灣的公司中，蠻大一部分會變成專案經理或業務的職責之一，接收客戶需求並整理分析相關資料提供給團隊。
在這個階段，我們需要暸解以下四點：
．客戶：也就是需求方，可能是老闆、其他部門或甲方。
．用戶：產品的終端使用者。
．目標：本次需求的問題。例如加入XX功能、提升XX%的購買量都是可能的目標。
．限制：時間、成本、或設計限制。
2.進行設計思考 分析
經由前面所蒐集到的資料，規劃出使用者輪廓(Persona)，站在其角度發掘需求及痛點，並以此為基礎，規劃能吸引用戶點擊、刺激購買慾，並增加轉換率的設計。
3.繪製地圖 報價
針對使用者輪廓，並跟客戶確認製作方案後，將其繪製成網站地圖(Sitemap)，以檢視網頁大致的架構，再交由資訊團隊分析此專案所需的人力、成本等構成，進而製作報價。
4.基本雛型 排版
確認報價後，接下來與客戶進行設計溝通，先利用線框圖（Wireframe），使用簡單的灰階、線條、符號或框線，來表達網頁的排版架構。呈現出網頁介面的主要內容與排版架構，幫助雙方確認網站核心部分。如果省去線框圖，將可能造成雙方對網站的設計認知有所落差，導致後期大量修改，延誤交付時間。
5.介面視覺 設計
跟客戶確認線框圖製作的網頁排版後，UI 設計師再進行視覺設計中的字型、顏色與 Icon 設計等細節調整製作視覺稿，以增強產品質感與使用體驗的效果。完成後再與業主確認是否為對方想要的感覺。
6.易用性測試 改良
最後，確認功能的設計邏輯是否順暢，及整體介面是否直觀、易操作。藉由易用性測試來評估網站是否真的能滿足使用者需求，再針對測試結果的反饋，進行細節上的修改與調整。
設計小技巧
在了解UI/UX和設計流程後，總的來說就是要注意這三件事：
1. 以用戶需求為本的設計思考 經由不斷的思考與測試，我們可以更有效率的設計出更貼近使用者需求的產品。除了從使用者的角度，也會從技術及商業層面進行討論，達到品牌與用戶間的平衡。
2. 介面設計是可互動的 簡單來說就是使用者如何使用介面，介面又給使用者什麼樣的回饋。 一些通用的設計原則，可以確保使用體驗，不會因為超出使用者的預期，而對產品的產生不信任，然後放棄產品。
3. 開發流程的轉變 比起平面設計大多是一次性，UI/UX設計的不同之處在於會不斷優化，不斷重複“規劃→設計→開發→測試”的過程。雖然真的很煩(XD)，但卻可以讓使用者體驗得到最優化。
設計好壞的差異
好的UI設計可以讓你很清楚知道按鈕在哪裡，直覺的知道下一步的流程，清晰的文字、按鈕、顏色、乾淨簡單的設計；好的UX設計會考慮到你每一個動作的流程，讓你在使用任何工具、系統、服務時，都能用最簡單的方式完成動作，即使有發生錯誤也會友善提醒，不會讓你重複一樣的動作而卡關。
下面是以網站的形式做UI/UX設計好壞的案例。
好的 UI：文字、按鈕、圖片等元素使用一致的設計樣式
好的 UI：馬上知道要按哪一個登入按鈕
好的UX：填錯密碼時清楚的提醒
UI/UX 可以應用在哪裡
UI/UX 不只是用在數位系統開發，其實 UI/UX 無所不在~~舉凡一般網站、平板、手機、網站、點餐機、汽車控制台、電影、虛擬實境(VR)、展場設計、餐廳.…..，有數不完的應用方式。
再詳細舉例：餐廳的UI/UX設計，先思考餐廳的受眾有誰呢？有消費者、點餐結帳人員、廚師、服務人員：設計之前再收集足夠的使用者體驗，包含消費者的點餐、等餐、座位配置，服務人員的送餐路線、廚師的餐廳動線、結帳人員收費流程、餐廳空間規劃、用餐後評價…等，以上的各種使用者體驗、習慣、空間動線就是由UX設計師收集歸納後進行流程設計，設計後交由UI設計師進行視覺設計與優化，依照CIS設計原則設計，以上就是一個完整的餐廳UI/UX設計。
所以當你有以上需求，就可以來找飛拉霓諮詢啦~
結語
經過飛拉霓的講解，相信大家對 UI/UX 設計已經有粗淺的認識。現在大家之所以都重視 UI/UX，是因為市場漸漸證明越能貼近使用者需求感受的產品，越受消費者青睞。
然而很多小公司為了節省成本，通常會讓UI設計師和尚兼撞鐘地兼差UX的工作，但是UX需要有更多的背景知識與調查研究，才能有效地讓使用者在瀏覽網頁時，達到心理歷程上的改變，造成購買慾；不過，若設計師空有UX思維，缺乏UI的基本能力，則也容易讓網站的整體呈現觀感不好，而無法達到目標。
因此，最好的方式是有UX設計師來協助整個網站的使用者經驗與互動更流暢，搭配UI設計師將UX的理念得以實踐，讓產品在激烈的市場競爭中脫穎而出！
