文章內容
全球大概有 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 團隊期望透過提供多元化的工作機會,讓更多人從事自己喜愛的事業。