UI / UX 傻傻分不清楚？圖解帶你快速搞懂差別 - HiSKIO 程式部落

給網頁設計初學者的一門課 跳至主要內容 你是不是很常聽到UI/UX設計師，以為它們是差不多的職位，事實上，它們有著許多相異之處！有些UI設計師不懂UX，而UX設計師也不見得了解UI的美感。

對網頁設計而言，了解UI與UX的差異是很重要的，如此你才知道哪方面需要改善，或是需要聘請哪一種設計師。

文章目錄UI是什麼？UX是什麼？UI與UX有什麼差異？結語想學習技術嗎？推薦你這些課程互動式網頁動畫完全手冊給網頁設計初學者的一門課Hi找我嗎？追蹤訂閱HiSKIO UI是什麼？ UI是UserInterface的縮寫，又稱為使用者介面，主要是針對網站的美感、圖片的選擇、按鈕的呈現、色系的搭配、配置的安排等外觀來設計，並同時考慮使用者便利性，也就是專精於「產品怎麼呈現」，確認在視覺上能傳達UX的理念。

舉幾個實際的例子：電視遙控器上面的按鍵就是UI，透過這些按鍵能告訴機器我們想做的事，而這些按鈕擺放的位置、顏色等要如何設計才能讓操作者易於理解，就跟UI有關；在銀行操作ATM時，會有一個螢幕畫面來指引我們完成一些事情，如提領現金、指定轉帳等，畫面的設計、選項的擺放位置也都是UI的範圍。

UI設計師必會的就是繪圖軟體，如：PS、AI、AE，還得熟悉基本的設計原則，如：平衡原則、對比原則，至於程式的部分，許多UI設計師的職缺描述都說要會HTML+CSS，但究竟是不是「必須」要會？只能說不會無妨，但會了更好！一旦會寫程式，你將會用更有系統性的思維去做設計，也更清楚你的設計如何被使用，並有助於你跟工程師協作。

UX是什麼？ UX是UserExperience的縮寫，又稱為使用者體驗。

除了美觀外，我們還需要設計出符合使用者習慣的功能，這部分就是UX設計師的職責，主要考慮的是「產品用起來的感覺」。

他們必須確保使用者在操作過程中的每一個步驟是否夠流暢、夠直覺，因此，設計師時常透過真人測試來觀察使用者的行為，藉此不斷修正使用者體驗，讓產品在操作上可以更便利、更友善。

舉個實際的例子：操作ATM時，你會發現在提領現金的畫面，都會有預設的提領金額按鈕，點擊後你就可以直接提領該金額的鈔票，而不必自己輸入數字。

會有如此便利的功能，是因為銀行透過資料發現，大多數的人提領的金額都是1000、2000、5000這樣的數字，所以在操作畫面預設這些按鈕，以有效提升使用者提款的速度。

UI與UX有什麼差異？ 這邊以圖片來解釋：UI設計師會著重於美感的設計，但UX設計師較注重產品的實用性與使用情境。

圖片來源：Techtic 圖片來源：Deptofmarketing 結語 從上述內容來看，你會發現UI設計師注重的是整體的美感，也就是是否能讓使用者一眼就喜歡這項產品；而UX設計師著重於產品的功能，也就是這項產品是否符合使用者的需求。

隨著科技的發展，UI與UX設計師成為近年來搶手的人才，下篇文章將回答大家關於這個職位的疑問，並教大家如何準備面試作品集。

想學習技術嗎？推薦你這些課程 互動式網頁動畫完全手冊 能夠熟練使用AnimateCC軟體能夠獨立做出網頁banner、網頁動畫，及HTML5小遊戲式的互動程式碼排版>命名規則>清晰註解>邏輯明確>版本控制，學習coding好習慣學習進階開發技巧：陣列迴圈、陣列操作、字串處理等前端面試解題綜合 給網頁設計初學者的一門課 學會html的架構學會css的語法與應用網頁編輯實作的能力建立一個基礎網站 Hi找我嗎？追蹤訂閱HiSKIO HiSKIO嗨程式技能： 科技資訊文章、實用工具分享、新課程優惠領取 Codefree：喝一杯咖啡，輕鬆學程式！ HiSKIOLINE：叮咚！掌握最新資訊與優惠，現在就到LINE領200抵用券！ HiSKIOYouTube：免費實用課程、工程師經驗分享 程式丼起來：不想一個人孤單寫code?立即加入話題圈吧! FacebookComments CSSHTMLPSUIUIUX作品程式學習程式語言網站設計網頁網頁設計設計設計師 文章導覽 有程式問題怎麼解？推薦你五個實用平台想投資虛擬貨幣？5個投資虛擬貨幣前必知的Q&A 搜尋關鍵字: 近期文章 2021面試攻略|親訪百家企業，提早演練，正確應對！ HiEXPERT2021DevOps領航者論壇重點整理 5種履歷模板+6個免費履歷製作網站（內附編輯檔）｜打造吸睛履歷，讓你求職順利 HiEXPERT2021資料科學領航者論壇重點整理 HiExpert2021｜後端領航者論壇幕後直擊 追蹤HiSKIO HiSKIO嗨學程式 LINE官方帳號 Instagram 標籤AI CSS HTML JAVA javascript MIKE php PS python React Sketch UI UIUX Wix WordPress 免費課程 免費資源 入門 初學 初學者 前端 前端工程師 學習 實用 後端 技巧 投資理財 期貨 架設網站 演算法 程式交易 程式學習 程式語言 網站架設 網站設計 網頁 網頁設計 線上學習 線上課程 股票 設計 設計師 轉職 非本科 面試