最近因為開始轉職找工作的關係,看了許多公司的UI Designer、UX Designer、UI/UX Designer職務工作內容,但對於一些工作內容會有些疑惑

例如像是
1.負責製作活動banner、DM、海報各式的設計相關工作 (這不是平面設計?)
2.UI的工作需要有UX的流程及規劃能力 (UI Designer也要有UX能力?)
…等以上

這樣不免會覺得要成為從平面跨足到數位的全能設計師才能勝任,但其實很每個公司情況不同,所以會對設計師能具備的能力有不同期待

所以這篇想要跟大家分享UI、UX的工作內容以及他們的差異,還有為何現在出現了很多UI/UX Designer這樣的職務

一、UI(User Interface)

1.什麼是UI?

中文全名為使用者介面維基百科上的定義是
“系統和用戶之間進行互動和資訊交換的媒介,它實現資訊的內部形式與人類可以接受形式之間的轉換。”

簡單來說就是人和機器溝通需要有一個中間人的角色,這角色協助我們來如何告訴程式機器,我們想要它做什麼事情,而這角色我們就稱為UI。

2.UI在我們生活中哪些地方?

雖然目前UI現在大部分是指APP上的介面設計,但以上面的定義來說,凡是協助我們與程式機器溝通的畫面就稱為UI

舉個實體的例子:

電視遙控器上面的按鍵就是UI,透過這些按鍵能讓我們告訴機器,我們想要它做哪些事情,像是我要切換下一個電視台、我要降低音量…等,這就是基本的UI要做的事情

而這些按鈕要如何擺放、用什麼顏色、什麼材質,才可以讓人好操作,這部分就是UI的好壞。

再舉一個例子:

銀行ATM我們使用時,會有個電腦螢幕畫面來幫助我們完成一些事情,像是提領現金、指定轉帳的銀行帳戶與金額…等等,這個畫面就是UI,而這部分的UI設計也比較是我們認知中的UI Designer所要做的事情。

from 國泰世華銀行ATM

3.UI Designer負責哪些工作?

這裡我們所要討論的UI Designer工作,主要以機器螢幕上的介面設計為主,像是我們所熟悉的APP設計

UI Designer主要的工作以視覺的設計為主,像是視覺風格、顏色搭配、畫面元素的大小與佈局等等

關於佈局上還需要熟悉各個不同平台的規範,像是 iOS 的 Human Interface Guideline 或是 Google 的 Material Design Guideline,並基於這些設計規範的限制上,進行頁面與流程上的設計

當然,設計並不應該被侷限於「某些規範」之中,也是有很棒的介面設計跳脫這些規範框架!但在我們去嘗試發想各種創意(brainstorm)的同時,我們之後都需要回到「使用者為中心(HCD)」的考量,確認整體的設計是否能夠帶給使用者絕好的操作體驗,而不會造成使用者的困惑或挫折感。

UI Designer在工作上主要負責pageflow、wireframe、prototype等設計圖稿製作為主。

4.網頁設計師跟UI Designer有什麼不同?

因為自己是從網頁設計師開始踏入設計,所以之前也會有這樣的疑惑

但其實網頁設計屬於UI設計的一部分,原因是現在網路的時代中,人們都透過網站來完成一些想要做的事情

比方說我們要蒐集某些主題的相關資料,現在絕大部分的人都會打開google去進行搜尋,而使用的google搜尋引擎畫面就是UI了!

同樣在設計工作上要執行的事情也是視覺風格、顏色搭配、畫面元素的大小與佈局等等,然後一樣要產出pageflow、wireframe、prototype設計稿

不同的地方則在網頁設計也有網頁設計的規範,網頁與APP介面製作的方法也不同,所以與APP的UI設計相比更為複雜,APP的UI設計只要專注在畫面流程規劃與視覺的設計,就可以交付給工程師去做製作。

但網頁設計反而還要了解實作面的知識,並且自己很有可能就是實作出網頁的人,在台灣的業界是蠻常有的情況,這在自學成為網頁設計師?非本科生設計師的告白(下)進階能力學習部分有提到。

二、UX(User Experience)

1.什麼是UX?

中文全名為使用者經驗,在維基百科提到使用者體驗,是指一個人使用一個特定產品或系統或服務時的行為、情緒與態度。

包括人與機器互動與擁有產品時的操作、體驗、情感、意義與價值面向;還包含使用者對於系統的功能、易用、效率的感受

因此主要強調的是「使用者體驗的過程」,而UX Designer的職責就是如何提供好的使用體驗

2.UX在我們生活中哪些地方?

UX的實際例子上,大部分人都會舉下面這張經典的番茄罐設計來做說明

透過觀察研究使用者得使用方式發現,瓶蓋在上方正立擺放的番茄醬,使用者常常會因為蕃茄醬越來越少,而需要先甩動瓶身將番茄醬集中到瓶口的地方,才可以將番茄醬快速倒出來

反觀瓶蓋在下方,倒立放置的番茄醬,因為地心引力的關係,所以番茄醬都會自然集中在瓶底處也是瓶口處,所以番茄醬就可以很快倒出來使用,並藉由加大瓶口的與桌面的接觸面積,可以讓罐子在倒放的時候夠加穩固

再舉一個例子:

銀行ATM提款的時候,大家應該都會發現在輸入提領金額的畫面,都會有預設好的提領金額按鈕,供你點擊後就可以提領該數字的金額,而不需要自己輸入金額數字

from 國泰世華銀行ATM

會有這樣便利的功能,是因為銀行透過所有ATM提領資料中發現,大部分的人會提領的金額都為1000、2000、5000等這樣的數字

這幾個金額數字的使用率加起來,可能就佔所有ATM提領業務的6.7成以上,所以ATM透過在提領畫面預設好這些金額的按鈕,就可提升6.7成使用者的提款速度,而使用者體驗的好感度也會相對提升

近期使用到一些國泰世華的ATM,更是把這些預設金額的按鈕放在最一開始的畫面,讓使用者下一步只要輸入帳戶密碼後,就可以把錢提領出來了,大大提升提款過程的使用者體驗好感度

3.UX Designer負責哪些工作?

會有上面這些例子的發現與改變,並創造提升更好的使用者體驗,就是UX的核心價值。

以網頁設計來說,UX Designer根據使用者的習慣,安排整個頁面的內容規劃,像是哪些區塊的內容要先在畫面上出現,哪些按鈕一定要在哪,並確保產品從這一步到下一步都能符合邏輯

在資訊架構、互動設計、內容呈現、使用者的認知、過去使用經驗…都要去考慮到,實際的工作包含使用者訪/真人測試分析使用者的使用情形,發現需求並提供可能的解決方案。

若產品初期並沒有真人測試或者案例不足,也會藉由建立User Story來做各種假設、思考、分析使用者在當下可能產生的行為以及行為背後背後的預期目標,同時透過驗證或 A/B Testing來根據這些行為數據,進一步對使用者體驗進行設計或者優化。

三、UI與UX差異


UI DesignUX Design
主要目標負責實踐整體介面視覺呈現,包含顏色、元件樣貌從使用者的角度去研觀察、究,怎麼樣對使用者來說最舒服的使用體驗
工作事項視覺設計
顏色搭配
資訊內容排版
字體選擇、大小與間距
Prototype製作
資訊架構設計
使用者研究測試、驗證
pageflow規劃
wireframe製作

四、台灣業界UI、UX Designer情況

在台灣專案公司仍然比開發自有產品的公司還要多,主要原因為開發產品需要長期投入許多資金與能力,並且這產品能夠實際為公司帶來營收才是重要的

所以許多公司在初期沒有資金與人力之前,其實無法將設計師切分為UI和UX兩種,因此才出現很多UI/UX Designer的職缺

希望UI Designer能夠有基礎的UX概念來做設計,但的確一個完全不管使用者經驗的UI,縱然介面視覺做得很吸睛,但無法讓使用者有順暢的操作體驗的話,使用者還是會痛下殺手將你的產品刪除(如果是APP的話),除非你是無可取代的,例如:銀行APP

也因為是專案制,所以在專案完成之後就不會有後續的改版與升級,更別說會拿到使用者的操作數據來進行分析。

五、結語

此篇純粹以我自己的個人經驗所學,以及業界在職務上的基本共識來做分享,但可能會因為在不同環境上而有些差異,像是國內、國外不同地區的差異…等等

另外像我是網頁設計師,除了必須有UX的知識以外,也會被期待有APP UI設計的能力,就像因為會使用Illustrator和Photoshop,也會接到平面設計相關工作(天啊~這是不同專業領域阿XD)

當公司想要從網頁專案轉成APP專案時,就一定會讓你去著手設計,因此就將開始具備網頁設計、APP UI設計這兩種的能力了,如果有人想全學的話可以從網頁設計師開始(誤)

想要從網頁端UI、UX設計開始的朋友可以閱讀下面這本書

多元裝置時代的網站UI/UX設計法則:打造出讓使用者完美體驗的好用介面

多元裝置時代的網站UI/UX設計法則

作者:原田秀司
說明:2014年開始出版,主要是針對行動裝置端網頁的UIUX設計做編寫,雖然書籍中的範例圖片已跟現在的設計風格有很大差別,但就基礎的概念來說還是很受用。
連結:博客來

延伸閱讀:
自學成為網頁設計師?非本科生設計師的告白(上)
UI設計師面試經驗分享 – 外商/遠端

若你喜歡我的這篇文章,麻煩拍5次下面小手給予我支持與鼓勵喔!

Joseph

Hi 👋,我是Joseph
是一名從理工宅踏入設計圈的設計師
設計範疇從網頁、UI/UX、平面到花藝設計,也剛開始踏入人夫生活

20 Comments

  1. 版大做了非常詳細的介紹,對想從事相關工作的朋友,幫助很大。

  2. 請問學習UI、UX需要懂程式語言嘛?沒有美感的人學的起來嘛?

    1. 我覺得至少要會基本的前端程式語言吧,例如:HTML、CSS、Javascript,不過我不是專業的,還請版主補充 XD

      1. UX的話,並不需要… 但是應該要跟你的UI和RD好好溝通規劃的可行性。
        UI根據懂不懂HTML那些,應該分成前端設計師、與前端工程師,前者就偏純設計,後者根據javascript的精熟程度,是只碰到切版,或是可以精細到互動的部份。

        1. to Y
          是呀~如果是網頁的設計師,很多公司可能都需要尬上網頁切版的工作XD
          UX工作則都是充滿著邏輯、推理、思考的事情,視覺美感則是交給UI

      2. to Dean
        若是指網頁設計的話是沒錯的喔!HTML和CSS的瞭解,會讓設計作品更能實作(不會被工程師退回)
        至於Javascript我自己覺得算是加分技能吧!以純設計來說的話,因為有些公司是有純設計

    2. 若是作APP這類的UI設計,是不需要會程式語言,但必須要瞭解畫面製作的概念
      美感是可以後天培養,在生活周遭常看關於建築、服飾等等的設計,自然對美感也會有提升

  3. 本來分不太清楚的,不過版主舉例的很好,尤其第一個遙控器直接秒懂!!

    1. 感謝你喜歡遙控器的舉例🙌

  4. 這好專業,介紹的超級詳細!,一定對想學的人有很大的幫助!!!

    1. 感謝你~希望讓更多非設計人能夠瞭解

  5. 喜歡蕃茄醬的比喻
    所有設計都應該為顧客著想 =)

    1. 對啊~設計真的是要來解決很多使用上的事情呢

  6. 喜歡遙控器的比喻~
    看完秒懂UI的意思!!!
    想問如果想要自學平面設計是可行的嗎?

    1. 可以啊,很多平面設計師都往UI邁進囉
      只是UI跟純平面比起來就更加理性和需要邏輯
      所以還是需要去看看一些書籍,以及現在UI設計的規範唷~
      (這邊我指的UI是針對APP UI設計)

  7. 看過蠻多UI和UX差別的文章
    你的最清楚好懂 👍
    UI跟UX真的都很重要,相輔相成~

    1. 謝謝你的稱讚!!希望可以讓更多非設計人有基本的理解

  8. 你好
    請問如果想從 平面設計 轉到 UI /UX設計 ,
    有點不知道該如何下手,
    可以給我點建議嗎?

    1. Hello 因為不清楚你實際遇到什麼困難,所以也無法回答的很確切,但你可以參考看看。以同樣設計角度來學習UI,一樣都先從臨摹開始,先從多逛並搜集一些喜歡的網站或APP,然後觀察了解上面有的元素(ex.文字輸入框、按鈕、元素的排法、字級大小…等等),嘗試繪製一樣的視覺平面稿,至於繪製軟體我建議可以先從你拿手的軟體先作開始(ex.AI、PS),不然要邊學設計和軟體,有點無法專注,若還有什麼想問的,歡迎私信給我joseph@joserenfu.com

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *