文章內容
全球大概有 50 億人為網絡用戶，來自世界各地的公司或品牌可以透過虛擬網上平台接觸各種國籍、年齡層的用戶群。不少的公司均設有自己的網頁，讓更多潛在客戶都可以在互聯網上認識品牌，從而轉換成消費者，可見網站能成功提高品牌的知名度。
想讓客戶在瀏覽你的網頁時有更好的體驗，卻總不知道要如何改善？那麼你就要看看這篇講解 UI / UX 設計的文章！
Freehunter 這次整合了一個 UI UX 指南，讓你深入了解網頁設計如何運作，助你尋找合適的 UI / UX 設計師幫忙設計！
UI 是什麼？
UI (User Interface) 全名為使用者界面，主要是設計頁面上的功能。
UI 設計師會首要考慮用戶在使用網站時的視覺感受，期望將網站界面的視覺設計變得舒適美觀、貼合品牌形象，設計內容包括網站的顏色、字型、字體大小等。
UX 是什麼？
UX (User Experience) 全名為使用者體驗，強調的是網頁使用者體驗的過程。
UX 設計師會根據產品用家的習慣，安排網站頁面的內容規劃，例如放置按鈕的位置、區塊內容出現的次序等，務求改善用家體驗。
UI 和 UX 有什麼分別？
UX 設計師的工作範疇會更著重用戶的使用體驗，預測用戶使用網站時的期望，讓網站或 app 的設計更加流暢、使用上也會更方便。
UI 設計師需要結合 UX 所做的研究，將所需的元素輸入電腦，作出美觀的設計後排序、並輸出作成品。
UX 設計流程是怎樣的？
UX 設計師需要作出市場調查，分析消費者的習慣及使用網站的模式，所以 UX 設計需於 UI 設計流程開始前進行。UX 設計師會透過真人測試或情境分析等手法，設計不同按鈕、安排通向的頁面等流程。
UX 設計師會根據用戶的習慣安排網頁功能，為不同的按鈕命名，以奪目的宣傳字眼，吸引用戶點擊或刺激購買慾，務求透過巧妙的設計或廣告文案，增加網站或程式的轉換率。
當 UX 設計師完成內容規劃後，便會交由 UI 設計師依照 UX 的設計方向，完成整個介面的設計。
於 UI 初步設計完畢後，UX 設計師會再作不同成品版本的測試 (例如 Usability testing)，由觀察測試人員的使用情況及記錄其回饋，提出改善方案予 UI 設計師，以優化用戶體驗。
UI 設計流程是怎樣的？
1. Functional Map
在開發網站前，UI 設計師需要先了解使用者的來源和目的，釐清產品的功能與脈絡。在確認使用者前，需要先繪製一個功能地圖，訂下希望運行的功能，理清操作上的細節。
2. Flow chart
UI 設計師也會創建一個流程圖，清楚列明頁面不同操作之間的關係，確認需要的功能。這個流程圖有助於與網站的開發人員討論所有狀態的運作。
3. UI flow
UI flow 可以幫助設計師妥善安排功能與資訊在頁面之間的操作流程，更清晰地呈現頁面的數量、頁面流程和設計。
4. 線框稿 (Wireframe)
在擬定 UI 的操作邏輯流程後，設計師會利用線框稿呈現產品的內容與排版架構，確認功能與配置可以滿足客人的需要。團隊會專注於圖面上的功能和流程，考慮使用者的需要。
5. 視覺精稿 (Mockup)
UI 設計師會將已經確認好的 Wireframe 介面，使用 Figma、Sketch、Photoshop 等繪圖軟體進行視覺設計上的配色、版面調整等，增強使用者體驗產品功能的效果。
6. 原型 (Prototype)
在調整版面後，UI 設計師可以透過原型對真實的使用者進行測試，觀察使用者在操作過程中是否有不順暢的地方等等。如此一來，開發者就可以在前期提早發現問題並修正，節省許多後期修改的時間與成本。
明白 UI 和 UX 設計的分別了？
UI 和 UX 雖然有其不同之處，着重的範疇也不一樣，但兩者相輔相成，會拼湊成一個設計美觀、使用流程順暢的網站。
下載 Google UX Playbook
如果你想慢慢細讀更多 UI 和 UX 的設計小貼士，你可下載由 Google 發出的《零售｜旅遊｜地產｜新聞及內容媒體｜如何吸引潛在客戶》的電子書，歡迎你填妥表格取得：
本文章由 Freehunter 提供
原文連結：【UI/UX是什麼？】5分鐘輕鬆了解UI和UX設計
關於 Freehunter
Freehunter 是一個深受各大企業信賴的網上 Freelance 平台，用戶遍佈星港台三地，擁有超過 30,000 位專業自由工作者，協助各地客戶尋找理想工作伙伴！Freehunter 團隊期望透過提供多元化的工作機會，讓更多人從事自己喜愛的事業。