UI/UX 設計是一門專注於創造出優質使用者體驗的設計領域。這個領域涵蓋了許多不同的技術，包括視覺設計、互動設計、用戶研究等。如果你是一名新手，想要開始學習 UI/UX Design，以下是一些實用的學習攻略。
本篇內容為［AI 覺醒！UI 設計詠唱學］線上課程先修教材
有興趣的同學可點擊以下連結瞭解更多：
什麼是 UI 和 UX
UI 和 UX 是用於描述產品設計的兩種相關但區別明顯的概念。
UI（User Interface） 是指使用者與產品互動的介面或系統。這包括了產品的視覺元素，例如按鈕、圖標、色彩、排版等。UI 設計的目標是做出一個美觀、一致且直觀的介面，使用戶能夠輕鬆地與產品互動。
UX（User Experience） 是指使用者在使用產品或服務時的整體體驗。這包括了用戶在使用產品時的感受、產品的易用性、效率等。UX 設計的目標是理解用戶的需求和期望，並創建一個滿足這些需求且讓用戶感到滿意的產品。
簡單來說，UI 是產品的「外表」，UX 是產品的「內在」。一個好的產品需要同時具有優秀的 UI 和 UX；而廣義來說，UI 使用者介面可以說是 UX 使用者體驗中所涵蓋的一環。
而被 UX 業界被尊稱為始祖、大師的唐·諾曼（Don Norman）同時也是 UX 最先行的推廣者，曾在下面這個影片中定義 UX 這個詞彙是怎麼來的；有舉例到早期蘋果電腦的糟糕使用者體驗，並詮釋「所有你跟產品相關連的體驗都是 UX。」這也成為後來 Apple 成立體驗架構師要去做的事情，而現在的蘋果產品正是以絕佳的全面體驗而聞名。
同時 Don Norman 也強調，所謂的 UX 絕對不僅僅只於手機、網站或 App 上，而是 Everything 的體驗。
UI/UX 設計的重要性
- 提升用戶滿意度：一個良好的 UI/UX 設計可以使產品更易於使用，提供更好的用戶體驗，從而提高用戶的滿意度。當用戶在使用產品時感到滿意，他們更可能成為忠實的用戶，並向他們的朋友和家人推薦該產品。
- 增加用戶留存率：良好的用戶體驗可以使用戶更願意持續使用產品。如果一個產品難以使用或者不符合用戶的需求，用戶可能會選擇放棄使用並轉向競爭對手的產品。
- 提高轉化率：對於商業產品來說，UI/UX 設計可以直接影響到公司的收入。一個易於使用且吸引人的介面可以提高用戶的轉化率，使更多的用戶完成購買、註冊或者其他目標動作。
- 節省開發成本：在產品開發初期就進行用戶體驗設計，可以在早期階段就發現並解決問題，避免在開發過程中進行昂貴的修改。
- 建立品牌形象：UI/UX 設計不僅僅是關於產品的功能，它也是公司品牌的一部分。一個獨特且一致的 UI 設計可以強化公司的品牌形象，使用戶更容易記住和認同。
而生活中隨時隨地都有能夠感受到 UX 的瞬間，比如說要喝星巴克打開透明蓋子上的杯口時，總是會被飲料噴濺到手、桌子甚至臉上，這時候就可以罵一句：「這啥小 UX 啦！ =.=」。
無論是對於用戶還是對於公司，UI/UX 設計都是非常重要的。一個好的 UI/UX 設計可以使產品更具吸引力，更易於使用，並最終帶來更高的商業價值。
而被視為 UX 最初發源領域的人因工程學（Human Factors Engineering）有一個著名案例，在第二次世界大戰之前的工業設計，傾向於將人訓練成要能夠適應機器，而隨著技術不斷進步，機器的操作愈趨複雜，如下左圖的 F-111 轟炸機駕駛艙，有非常多的儀表板與控制器，駕駛員需要花費相當多的時間精力去理解和熟悉操作。
隨後在二戰期間各國軍方也發現到即使飛行員接受了嚴密的訓練，在戰場上的人為操作失誤仍頻繁出現，在那之後歐美等國才開始相關研究該怎麼讓機器去配合人為操作，也注意到人類在使用機械時的生理與心理狀態在互動時影響甚深；而是上右圖就是美國軍方經過多年大幅度修改後的 F-15EX 駕駛艙，可以發現儀表板除了數量減少之外，彼此的大小、間距的設計也做了最佳化。
UI 與 UX 的區別
UI（User Interface）和UX（User Experience）是兩個密切相關但有明顯區別的概念。
UI 設計的目標是創建一個美觀、一致且直觀的介面，讓用戶能夠輕鬆地與產品互動。它通常涉及到視覺設計、互動設計等。
而 UX 設計的目標是理解用戶的需求和期望，並創造一個滿足這些需求且讓用戶感到滿意的產品。它通常涉及到使用者研究、用戶測試、用戶流程設計等。
UI 設計主要影響到產品的視覺呈現和互動方式，而 UX 設計則影響到用戶對產品的整體感受和評價，一個好的產品需要同時具有優秀的 UI 和 UX。
以哆啦 A 夢（小叮噹）裡面的任意門舉例，我們所看到的那一扇粉紅色門和手把是 UI，和 UX 則包含了這道門要做推（Push）還是拉（Pull）更適合？從百寶袋拿出來的時候該怎麼樣展開比較不會磨到手？同時也包含了要不要貼上推和拉的告示貼紙這樣的 UI 課題，以及打開門之後如果是南極、海洋等環境，是不是可以新增警告動畫或多一個轉場空間等等，UX 所討論的涵蓋範疇極為廣泛。
而除了門這樣日常生活中都會看到的物件外，接下來讓我們來看看為什麼 UI/UX 會和數位產品設計（網站, App 等）有關係。
GUI 圖形使用者介面（Graphical User Interface）
是指採用「圖形」方式顯示的電腦操作使用者介面，雖然現在大家都很習慣在 iPhone 手機和電腦上滑呀滑的，但在以前電腦剛被發明的時候，可不是那麼友善使用的，需要透過機器上的作業系統來操作。
而與早期電腦使用的命令列介面相比，GUI 除了降低使用者的操作負擔之外，對於新使用者而言，圖形介面對於使用者來說在視覺上更易於接受，學習成本大幅下降，也讓電腦的普及得以實現（手機裡也是電腦）。
而如果 GUI 也有所謂的「iPhone 時刻」我個人覺得是是Apple 所推出的商業級系統 Apple Lisa，雖然當時因為其昂貴的價格，再加上軟體和磁碟機等問題，短短兩年就被 Apple 麥金塔（Macintosh）取代，但 Apple Lisa 其創新的使用者介面，除了將全錄（Xerox）所創新發明的 GUI 這概念給發揚光大，也對之後的電腦軟體設計帶來非常深遠影響，使圖形使用者介面（GUI）成為當今個人電腦使用者介面的主流。
下圖為 Apple 創辦人之一 Steve Jobs 在參觀全錄帕羅奧多研究中心（Xerox PARC）之後，就認為所有電腦都應該採用 GUI，因此與 Apple 開發團隊開始Lisa的研發工作。
而在 GUI 圖形使用者介面中，讓使用者透過滑鼠（或現在大家滑手機的手指）等指標裝置進行選擇，去操作互動電腦畫面上顯示的視窗、icon、按鈕等圖形，這些都是後來網頁設計、App 等數位產品的建構基本元件，而我們要做的事情，就是去設計其 UI/UX。
UI/UX 設計工具
Sketch
Sketch 是一款專為數位設計而生的向量繪圖軟體，在 UI/UX 設計中被廣泛使用，在過去（2017 年以前）為主流設計師的軟體選擇。
Sketch 提供了一套完整的設計、原型和協作工具，讓設計師可以快速且容易地建立和測試他們的設計。
Adobe XD
Adobe XD 是 Adobe 公司推出的一款用戶體驗設計工具。它支援繪圖、原型設計和協作等功能，並且與 Adobe 的其他產品（如 Photoshop、Illustrator）有良好的整合。
在 2018 年左右釋出後，因為其免費、跨平台（Windows, macOS 都能用）與有訂閱 Adobe Creative Cloud 都能下載，成為當時後不少公司的優先選擇。
Figma
Figma 是一款基於網頁的 UI/UX 設計工具，它的最大特點是支援即時團隊協作。設計師可以在同一個文件中同時工作，並即時看到其他人的更改。
在跨平台通用性上也很優秀，同時支援網頁版、Windows 和 macOS 等作業系統，不過都要連網進行同步。
在這幾年成為 UI/UX 設計圈知名軟體，並以豐富且創新的功能受到設計師們喜愛；在 2022 年時被 Adobe 以 200 億美元收購。
UI/UX 設計的流程
- 研究：這是設計流程的第一步，主要目的是理解用戶的需求和期望。這可能包括市場研究、用戶訪談、用戶調查等。
- 定義：在進行了足夠的研究之後，設計師需要定義產品的目標和用戶的需求。這可能包括建立用戶人物、使用者旅程地圖等。
- 線框稿：設計師將開始畫出產品的初步設計，這可能包括草圖、線框圖和原型。這些設計將用於測試和驗證設計概念。
- 設計：在確定了設計概念之後，設計師將開始製作產品的詳細設計。這可能包括視覺設計、互動設計等。
- 原型：設計師將測試他們的設計，以確保它滿足用戶的需求並提供良好的用戶體驗。
- 前端開發：由工程人員構建框架、頁面開發、撰寫網頁程式與最佳化等。
- 上線和測試：設計被發佈到產品中，並持續進行評估。這可能包括分析用戶數據、收集用戶回饋等。
這個流程不是一條直線，而是一個持續迭代的過程。設計師需要不斷地測試和最佳化他們的設計，以確保它持續滿足用戶的需求並提供良好的使用者體驗。
UI/UX 職業介紹
UI/UX 相關職位因公司人員編排不同，在台灣可能對應到求職網站上的 UI/UX 設計師、網站美編、視覺設計師等，而國外則是 UX Designer, Product Designer, UX/UI Designer 等等。
而在一個最小編制的專案團隊中，UI/UX 設計師可能還會與 PM 專案管理和前後端工程師溝通協作，在不同工作階段會有不同的職位工作。
UI 設計師 / 產品設計師
工作內容包含 UI 設計所涵蓋的範疇，比如說製作設計系統規範，和介面設計上的配色、排版、視覺處理等，如網站裡的各個網頁設計，以及 App 各頁面設計等，確保整體視覺與品牌一致。
技能面則則包括 UI 設計軟體、製作可互動 Prototype 原型等，以及基礎的 icon 圖標繪製和照片修圖處理能力，部分 UI 設計師也具備配圖插畫的電腦繪圖能力，並在職場上需要與 UX 同事和與前端工程進行協作溝通。
UX 設計師 / UX 研究員
進行使用者研究相關方法來理解使用者的需求，並進一步產出如 Flow Chart, Wireframe 等互動流程文件，因此需要和團隊其他成員（像專案管理 PM）保持溝通，除此之外現在的 UX 工作者也都具備一定的商業敏銳度和長期策略洞察能力。
而除了職稱名稱不同外，每間公司的各個職位主要的工作項目也都會不太一樣，建議找工作時需看仔細工作負責內容與所需的知識技能。
UX 設計基本知識
UX 設計是一種以使用者為中心的設計方法，目的是要創造出能夠滿足用戶需求並提供良好體驗的產品或服務。
使用者研究
使用者研究是 UX 設計的基石，它可以幫助設計師理解用戶的需求、行為、痛點和目標。常見的用戶研究方法包括訪談、田野調查和質量化分析等。
人物誌
用戶人物是基於用戶研究建立的虛構角色，用來代表一種用戶類型，描述用戶如何與產品互動的故事。這些工具可以幫助設計師更好地理解並設計出符合使用者需求的產品。
資訊架構
資訊架構是關於如何組織和標記資訊，以便使用者能夠找到和理解內容。這通常涉及到建立網站 sitemap、導航列 (Navagation)等。
互動設計和原型測試
互動設計是關於如何設計產品的交互方式，以便使用者能夠達到他們的目標。這可能包括設計點擊按鈕、網站架構、展開選單等。
原型是具備產品互動的初步版本，用於測試和驗證設計概念。透過測試讓用戶使用原型，並收集他們的回饋，以改進設計。
易用性和可訪問性
易用性是關於產品是否易於使用，而可訪問性則是關於產品是否能夠被所有人使用，包括有殘疾的人士。
UI 設計基礎技能
視覺設計
這是 UI 設計的核心。視覺設計包括色彩理論、排版、繪圖、修圖、字型等。一個好的 UI 設計師需要有良好的視覺設計技能，能夠設計美觀、一致且易於使用的介面。
軟體工具
UI 設計師需要熟悉一些設計工具，如前面提到的 Sketch、Adobe XD、Figma 等。這些工具可以幫助設計師快速且有效地創作和修改設計，同時透過互動設計與原型設計等流程來讓產品更接近使用者的需求。
UX 知識
雖然 UI 和 UX 是兩個不同的領域，但它們是密切相關的。一個好的 UI 設計師需要理解使用者體驗的基礎，包括使用者研究方法與思維等。
協作與溝通
UI 設計師通常需要與其他設計師、開發人員、產品經理等合作。因此，良好的協作和溝通技能是非常重要的，否則設計稿無法在設計流程中運作。
基本開發概念
而要將設計稿交付給前端等工程師之前，具備一定的產品開發程式概念會對於設計上的可實現性與創意能有很大幫助，並在和開發者溝通時可以更順暢，如學習簡易的 HTML, CSS 等前端語言。
