【網頁設計】一文學懂什麼是 UI/UX設計

想為公司設計網頁，以在網絡市場佔一席之地？相信你必定遇過難以分辨 UI、UX 的情況。UIUX的工作範圍雖有不少重疊部份，但若不慎混淆UIUX，有機會影響網站的用戶體驗及美觀程度。不少人用「UI是眼睛所見，UX則是大腦所思」概括兩者之別。仍覺得十分抽象？Freehunter 為你整理出UIUX設計之別，讓你在數分鐘內掌握網頁設計概念及流程。

💡UIUX設計之別

UI 全稱為使用者介面（User Interface），UX 則為使用者體驗（User Experience），單從名稱已經可見，UI、UX設計師雖同樣在設計網頁，但他們的側重點卻截然不同。UX 提供網頁設計的大方向，而 UI 則提升網頁的美感。較詳細的解說可參考下表。

	UI設計	UX設計
工作內容	改善細節，實踐UX理念	規劃網頁，為UI提供方向
	視覺/版面設計（Visual Design）	功能設計（Wireframe）
	展現品牌形象	研究用戶行為
目標	令網頁更為美觀	優化網頁的使用體驗，提升轉換率

簡單而言，可想像 UX 為人體的骨幹，而 UI 則為外皮。UX 設計師會先規劃

💡UIUX設計流程

UX 設計一般先於 UI 設計開始。UX 設計師會作市場調查，並搜集使用者偏好及習慣，建構具基本功能的網頁。網頁成形後，會邀請用戶進行內部測試，再調整網頁的功能。經過多次微調，UX設計師方能設計出用戶體驗良好、使用時非常「就手」的介面。流暢的介面不能忽略過場，如用戶登入後應跳轉至個人專頁還是網頁主頁都需仔細考慮。

UX 設計師做好網頁的雛形後，便會交由 UI 設計師按照 UX 設計方向去完成整個介面。UI 設計師主要會考慮網頁的主題及風格是否能突出公司的品牌形象。建立品牌形象時，需考慮網頁的顏色主調、字型及大小及配置等。例如，選擇字型時需衡量字型是否清晰易讀，使用過分潦草或筆畫過粗的字型，均會降低內容的可觀性。

（圖片來源：UIUXgurustudio）

💡UX設計參考案例

要提升用戶體驗，首先要了解用戶的使用習慣以及痛處（pain point），亦即是他們正面對什麼難題。UX設計師會便會針對上述數據設法透過更改使用流程或網站結構去為用戶解決問題或帶來更好的體驗。

出色的UX設計師，甚至會想得更深入，在用戶尚未提出投訴或意見時，已為他們多想一步，讓用戶感到網頁的設計很細心、考慮得十分周到。

Gmail

就好像用戶在發送含有Google Drive檔案的電郵前，Gmail會彈出視窗讓用戶設定檔案的存取權限。這裡的心思就是在於考慮到用戶平常的使用習慣，很多時在建立Google檔案時會忘記設定權限，當發送出去的時候，就會出現對方無法開啟檔案然後又要來回電郵並更改權限的尷尬情況。

如果在商業合作的情境，如此情節就會讓對方感到不專業而且準備不充足。Gmail這裡的UX設計細心地為用戶多想一步，避免了用戶在使用時感到不快或造成困擾的情況。

Apple

蘋果在購買體驗上也有花上心思，網站上提供讓用戶選擇三款產品作比較的功能，有關產品的介紹也是由淺入深，從產品照片、顏色到快速比較再到詳細規格，能考慮到不同用家的需要。這樣的UX設計，明白用戶在購物時多在眾多選擇裡面猶疑不決，比較的功能能讓客戶更快找到最適合自己的產品，凸顯了網頁設計上的心思。

Netflix
Netflix的個人化用戶體驗是令他在眾多影片串流平台突圍而出的優勢。用戶可以對於不同的電影或劇集評分，或者加到個人化清單，然後Netfix就會跟據搜集到的用戶數據及觀看紀錄，為每個用戶推薦最符合他們喜好的作品。因此每一位用戶登入時都會看到屬於自己的介面，能夠更輕鬆找到自己適合自己的影片，節省不斷搜尋想看作品的時間，並且更能感受到Netflix為用戶所花的心機。
💡UI設計參考案例

雖然UI設計最主要是能夠突出和實踐UX設計的理念，但很視覺上的呈現也是UI設計師最需要考慮的一環。除了只是讓網頁設計更美觀，UI設計很多時都要配合產品或公司的品牌、風格、性質，以致對於選用什麼顏色、字體、間距、形狀等都有其學問。

Medium

Medium是一個發佈平台，鼓勵不同用戶在網站上發佈文章和分享內容，希望能為用戶提供不同種類的資訊。作為資訊和內容主導的平台，Medium的風格較為簡約和知性，給人可靠得來不失趣味的感覺。網頁的UI設計亦能夠充分表現出以上風格，黑白為主調的簡約設計，配上簡單的圖像，讓人感覺不會過於嚴肅或沉悶。

Airbnb

Airbnb公司想做到的，除了希望方便用戶預定住宿，更希望能夠讓作為陌生人的用戶建立信任。作為旅遊服務的公司，UI設計上選用了廣闊的風景照片作為封面照片，給人自由、探險的感覺。只需需要簡單資料便能開始搜尋的設計，突出了Airbnb希望為用戶帶來最便利旅遊體驗的願景。

當用戶選好住宿的時候，Airbnb沒有直接引導用戶到付費頁面，反而鼓勵用戶與宿主先打個招呼並說一說自己選擇改地點的原因（Say Hello say hello to your host and tell them why you’re coming！），可見在協助用戶建立互信和關係方面，也是花了心思。

Clever

Clever是一本關於建築設計的網上雜誌，主要介紹一些國際化、具才華和創新玩味的設計，不時也會分享一些傢俱設計和佈置的內容。網站的UI設計選用了較鮮明、繽紛的顏色，字體也偏向漫畫風格，清晰的分割別具設計感，完全能夠突出公司的品牌和風格。

⭐️結語

雖然UI/UX很多時會歸納為同一種類，不少網頁設計師也同時身兼兩職，但看畢此文相信大家也會明白在功能、角色和目的上，UI和UX確實不同。有關UI和UX的學問當然不只這些，但懂得辨別兩者的定義和作用也是非常重要的第一步。Freehunter平台上的UI/UX設計師很多都具備專業資格和豐富經驗，相信當需要更深入的了解和設計時，他們絕對能提供專業的意見和協助！

參考資料：

https://www.uiuxgurustudio.com/

https://careerfoundry.com/en/blog/ui-design/beautiful-blog-ui-design/

https://careerfoundry.com/en/blog/ui-design/8-sites-with-great-ui/

https://careerfoundry.com/en/blog/ux-design/brilliant-examples-ux-design/

https://uxplanet.org/5-examples-of-brilliant-ux-design-8e847bf0bcc0