【UI UX大不同】3個重點輕鬆了解UI設計

2020-04-08

UI設計

想讓公司於虛擬網絡平台佔一席之地,但成立網頁時卻總分不清UI、UX設計有甚麼不同?

無論是網頁製作,還是整APP或遊戲UI設計,UI與UX總如雙胞胎般一齊出現,讓人難以辨別。雖然UI與UX的確有密切關係,工作亦有重疊,但若然混淆UI與UX,分分鐘會令你的網站白白流失大批交易!

「UX是大腦所思,UI是眼睛所見。」聽畢這個對UI UX的常見解釋,仍覺得抽象不已?以下筆者將簡單概括出3點UI UX的目標、側重點及範圍,輔以現實例子,讓你輕鬆了解UI及UX的具體工作,以及UI和UX設計對塑造企業或品牌形象,甚至是提高轉換率之重要性!

圖片來源:Tanzeel

一、UI、UX設計大不同?

UI中文為使用者介面(User Interface),UX則為使用者體驗(User Experience),由名稱便可見到兩者雖同為設計師,但側重點卻迥然不同──UX猶如成品的骨架,UI則猶如成品的皮肉。

簡單而言,UI與UX的差異可概括成下表:

UI design

UX design

最終目標

讓成品整體呈現更美觀

讓用戶體驗更佳,轉換率更高

工作範圍

與用戶的互動性設計

前端系統(Front-End例如HTML、CSS)

骨架設計(Wireframe及Prototype)

視覺設計

用戶行為研究

細節執行,實踐UX理念

大體策劃,提供UI方向

內容元素

對成品需涵蓋之資料作美觀排版

技巧性置入訊息,讓用戶更易接收

關鍵詞

美學、功能、便利性、電腦技術

心理、策略、技巧、以人為本

以接觸面而言,UX更著重於「對人」,預測用戶使用時的期望,讓網站或app設計更流暢、人性化,易於使用;UI設計師則主要「與電腦打交道」,結合UX所做的研究,將所需的元素輸入至電腦,符合美學地排序後再輸出為成品。

二、UX及UI設計流程

由上文可見,UX design需於UI設計流程開始前進行:UX設計師需先作市場調查及消費者習慣分析,並透過情境分析(Scenario analysis)、真人測試等,設計出令用戶使用流暢、「順手」的骨架及過場(transition),如使用流程中按鈕所通往的頁面。

例如於UX設計時,需考慮到「雙擊點開文件夾,單擊則為選取文件夾」的用戶習慣去安排網頁功能。UX設計甚至需撰寫文案,為內容「加工」,以具吸引力的宣傳字眼,提高用戶的點擊意願,或刺激消費者的購買慾,令網站或app的轉換率大增。

圖片來源:dribbble.com@Ravindra Momula

當UX做好成品之內容規劃後,便交由UI design依照UX設計方向去完成整個介面。於使用UI設計軟體design時,UI設計師需設計頁面上的功能,並考慮成品的主題格調,配合企業品牌branding,決定所用的成品的顏色主調、字型及大小、配置及功能安排等。

舉個例子,選擇內文字型時會選擇清晰易讀的字體,而非難以閱讀的手寫體;而網頁整體顏色風格亦會配合品牌形象及LOGO的色調,如VISA的網頁主調便正是其LOGO深藍及橙黃的配色。

圖片來源:VISA

於UI初步設計完畢後,UX設計師會再作不同成品版本的測試(例如Usability testing),由觀察測試人員的使用情況及記錄其回饋,提出改善方案予UI設計師,以優化用戶體驗。若你想改善網站流量及轉換率,建議讓UI或UX設計專才為你提出針對性的解決方案。

下圖便為一個應用於現實的UI及UX分別之具體例子:

圖片來源:StrategyAndDesign

以上例子正好解釋了UI design與UX design的分別:UI關注點於功能「存在與否」及「存在時的美觀性」;UX關注點則在用戶心理學,涵蓋了營銷手法,如有技巧地改寫Call to action按鈕中的字眼,暗示並誘導用戶按企業意願行動,提升轉換率。

當然,UX與UI之所以常被混淆,正因為兩者有不少工作是重疊:設計網頁中與用戶的互動時,UI的功能排版及美感能影響到UX關注的用戶行為及習慣,而UX中流暢易用的骨架設計又能配合UI的美觀設計,提升用戶對品牌的觀感,兩者缺一不可。

三、如何設計讓用家讚不絕口的UI及UX?

UI設計大師會平衡美感及使用流暢度,需於符合美學下保持資訊及導引簡潔清晰,故可善用符號作表達;出色UI設計更會兼顧不同裝置用戶的需要,設計出適合於電腦、平格及手機瀏覽的響應式設計網頁。

圖片來源:Freepik

提及如何成為UI設計師,除了多閱讀UI設計書籍或報讀UI設計大學學位,以掌握基本UI設計師技能外,更需要參考其他UI設計師作品集,取長補短,例如學習如何於介紹頁面中透過影片或圖片,配以簡單有力的文字描述,讓用戶輕易接收資訊。

除此之外,雖然UI與UX分別頗大,但基於兩者工作緊密相連,故不難見到招聘廣告的職位上UI及UX合并為一,亦是UI設計師薪水較其他普通職位高的原因。故開始UI設計前,UI及UX設計師亦需先作大量的搜索及研究,設計原型後亦要安排版本測試,身兼兩職。

想把握良機於虛擬網絡社會發展,提升你的網頁或App流量及轉換率?即上Workeroom尋找專業的UI或UX設計師,為你提供價格合適、品質優良的網頁設計!

若你是UI UX設計師,亦歡迎免費註冊加入Workeroom數千名的專才網路,免會員費、免佣金即可接取Freealance UI及UX工作!

延伸閱讀:【網頁設計收費指南】1分鐘了解香港網頁設計價錢