UI / UX 傻傻分不清楚?圖解帶你快速搞懂差別

你是不是很常聽到 UI/UX 設計師,以為它們是差不多的職位,事實上,它們有著許多相異之處! 有些 UI 設計師不懂 UX,而 UX 設計師也不見得了解 UI 的美感。

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

UI 是什麼?

UI 是 User Interface 的縮寫,又稱為使用者介面,主要是針對網站的美感、圖片的選擇、按鈕的呈現、色系的搭配、配置的安排等外觀來設計,並同時考慮使用者便利性,也就是專精於「產品怎麼呈現」,確認在視覺上能傳達 UX 的理念。

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

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


UX 是什麼?

UX 是 User Experience 的縮寫,又稱為使用者體驗。除了美觀外,我們還需要設計出符合使用者習慣的功能,這部分就是 UX 設計師的職責,主要考慮的是「產品用起來的感覺」。他們必須確保使用者在操作過程中的每一個步驟是否夠流暢、夠直覺,因此,設計師時常透過真人測試來觀察使用者的行為,藉此不斷修正使用者體驗,讓產品在操作上可以更便利、更友善。

舉個實際的例子: 操作 ATM 時,你會發現在提領現金的畫面,都會有預設的提領金額按鈕,點擊後你就可以直接提領該金額的鈔票,而不必自己輸入數字。會有如此便利的功能,是因為銀行透過資料發現,大多數的人提領的金額都是 1000、2000、5000 這樣的數字,所以在操作畫面預設這些按鈕,以有效提升使用者提款的速度。

UI 與 UX 有什麼差異?

這邊以圖片來解釋:UI 設計師會著重於美感的設計,但 UX 設計師較注重產品的實用性與使用情境。

圖片來源:Techtic
圖片來源:Deptofmarketing

結語

從上述內容來看,你會發現 UI 設計師注重的是整體的美感,也就是是否能讓使用者一眼就喜歡這項產品;而 UX 設計師著重於產品的功能,也就是這項產品是否符合使用者的需求。隨著科技的發展,UI 與 UX 設計師成為近年來搶手的人才,下篇文章將回答大家關於這個職位的疑問,並教大家如何準備面試作品集。


想學習技術嗎?推薦你這些課程

互動式網頁動畫完全手冊

  • 能夠熟練使用Animate CC 軟體
  • 能夠獨立做出網頁banner、網頁動畫,及HTML5小遊戲式的互動
  • 程式碼排版 > 命名規則 > 清晰註解 > 邏輯明確 > 版本控制,學習 coding 好習慣
  • 學習進階開發技巧:陣列迴圈、陣列操作、字串處理等
  • 前端面試解題綜合

給網頁設計初學者的一門課

  • 學會html的架構
  • 學會css的語法與應用
  • 網頁編輯實作的能力
  • 建立一個基礎網站
歡迎追蹤訂閱】
HiSKIO 嗨 程式技能」科技資訊文章、實用工具分享、新課程優惠領取
Hi 直播學程式」不定期專題直播
HiSKIO youtube頻道」免費實用課程、工程師經驗分享
最懂初學者的「F5學程式
不想一個人孤單寫 code ? 來活力滿點的「程式丼起來」加入話圈吧 !
Facebook Comments