設計師最好知道一下的UI/UX工作職責劃分

 　　頁面放不放按鈕誰決定?按鈕放在哪誰作主?今天@Akane_Lee 用一個具體的案例，給同學們科普一下產品經理、工程師、視覺設計師、交互設計師等職位，在一個項目中究竟承擔著怎樣的職責，文章細致明確，非常受用，建議閱讀。

　　這張圖是 Dan Saffer 畫的，指的是 UX 包含那些范圍，可以看到並沒有「UI」的圓圈。

　　他說：「UX 包含產品或服務的整體經驗，而且也包含UI。UI 由視覺設計(外觀和感覺)和互動設計(如何運作)組成。」

　　可以得知 UI 在互動設計和視覺設計交錯的那個區塊。

　　既然 UI 設計由視覺設計和互動設計組成。組成代表的是兩者必需同時存在。你不會說「水是 H2O 組成，所以 H2 是水，O 也是水。」

　　接口必須包含輸入、輸出、運作內容，可以互動才可被稱為 UI，也就是說不能動的通通不能被當成 UI。就像你不會說電影海報是 UI、大潤發 DM 是 UI 一樣，它們是視覺設計或平面設計。

　　動畫是不是 UI? 當然不是，使用者怎麼操作動畫?一定要包含輸入、輸出、運作內容這三點，才可被稱為 UI。(會動不是指畫面元素會動這件事，而且能不能和使用者互動。)

　　例子

　　有人問決策過程，依本文的概念該由誰來處理。

　　(先假設一切完美、沒有 GGYY 的客戶或主管、沒有時程壓力、沒有技術限制、沒有外在干擾。開發團隊至少包含 PM、RD、UX Researcher、Interaction Designer、Visual Designer 等等，且所有人都有一定程度的實務經驗、知道如何跨領域相互支持、團隊合作和溝通上無問題。)

　　有個大前提：團隊合作並不是某人說了算，而是某個職務上的人做了這樣的提議後，項目成員皆同意、共同負責。當在大家都同意的情況下，產品失敗不會是其中一個人的責任。

　　鼠標移過購物車圖標，要滑出一個迷你購物車，誰來決定迷你購物車內是否要放產品照片、應付金額的文字尺寸要不要加大?

　　要不要放產品照片這件事，得先看客戶資料端有沒有照片資料。可能 RD 可能 PM 要去把數據找出來。

　　畫 Wireframe 的是誰?他要決定畫面包含哪些內容、各種頁面狀態，Interaction Designer。

　　應付金額的文字尺寸要不要加大?

　　Interaction Designer 只會處理內容(文字、圖片、聲音、影片)和使用者之間的互動關系，至於內容長什麼樣是 VD 的工作。

　　PS. 內容：就是文字、圖片、聲音、影片。和文字(是不是今天寒流來)、圖片(是貓還是狗)、影片(是卡通還是電影)無關。

　　為什麼要加大呢?可能是 UX Researcher 發現目前版本能有改善的空間，找 VD 處理。

　　UX Researcher 做的是「發現」，他只能告訴你問題出在哪，但沒辦法直接告訴你問題要怎麼解決。解決問題是「創造」，歸設計師思考。思考出解法再交給 UX Researcher 驗證。

　　承上，誰來決定迷你購物車是整塊從上往下滑入，還是裡面的項目是一條一條從畫面外淡入飛入?

　　Interaction Designer 必須考慮所有和使用者有關的互動行為，產出 Wireframe 給 RD 和 VD ，有專門處理動畫的職務。Jobs – Google Design

　　鼠標點擊選擇折價券，會跳出一個「會員現有的折價券清單」的 modal，決定這個 modal 是要選擇折價券之後自動關掉，還是要點選「我已選擇完成」之後才關掉的人是誰?

　　畫 Wireframe 的那個人決定，Interaction Designer 。

　　UX Researcher 驗證這個作法會不會讓使用者跑光。

　　承上，決定這個 modal 在計算機上要多寬，「我已選擇完成」的按鈕要在 modal 的右下角、左下角還是中間的?

　　在計算機上要多寬和按鈕位置是是 VD 的工作。但決定這個畫面上要不要有 modal 、有按鈕，是 Interaction Designer 。

　　Do Visual Design and Interface Design have a similar job objective?

　　會員購物明細中，地址、收件人、電話、手機、備注、商品明細、折扣明細……等各種項目的顯示順序。

　　Interaction Designer 畫 Wireframe 時提出，但不代表 VD 不能改。改完會不會被 UX Researcher 測一測說有問題…不知道。

　　某按鈕上的文字常常被用戶誤解點錯，讓客服電話接不完，決定按鈕上的文字要怎麼寫的人是?

　　PM 或 Planner。

　　不，我開玩笑的。

　　常常被誤點就是 UX Researcher 的工作，既然他已經知道問題出在文字上，就得提出建議給實作人員。可能兩者會配合多測幾組文字，看看用戶的反應以找出較好的那組文字。

　　可能另外有專人負責文案，如果沒有特定的人，只好看 Wireframe 誰畫誰處理了。(Interaction Designer：「又是我!?」)

　　Google 有專門寫文案的職務。 UX Writer – Jobs – Google Design

　　承上，要改善系統流程，避免誤點了之後發生無法挽回的事，提出新流程規畫的人是?

　　提出新流程規劃=舊有問題待解決，UX Researcher 必須找出舊版的問題出在哪，給 Interaction Designer 建議，共同討論新作法。

　　UX Researcher 會告訴 Interaction Designer 使用者的操作習慣、容易出錯的部份、為什麼出錯。至於怎麼修改是 Interaction Designer 的工作。

　　改完再給 UX Researcher 驗證…

　　某一在線型錄頁面中有一個 Download 按鈕，點擊之後會把檔案下載到本機。決定按鈕上的圖標要用一朵雲+向下的箭頭，還是磁盤的人是?

　　VD。

　　如果被 UX Researcher 測出使用者看不明白就會被打回重做。

　　某一在線型錄頁面中已經有一紅、一黃、一藍的按鈕，現在要再增加一個功能與其他顆完全相異的按鈕，決定新的按鈕要用什麼顏色的人是?

　　和視覺有關的都找 VD。

　　至於新的顏色能不能讓使用者看得懂，UX Researcher 要去測。

　　執行某動作之前有一段說明文字，「避免有人沒看說明，要先等待 5 秒才會跑出執行按鈕」，決定「」內操作流程的人是?

　　Interaction Designer。至於 5 秒會不會太久、或這樣作法會不會讓使用者抓狂…UX 要去測。

　　上線前會有 UX Researcher 把關質量的，不然沒辦法證明這樣子的設計能給使用者良好的體驗。上線前先測一下，總比上線後被使用者罵來得好。(快和頭皮屑一樣多的研究方法就是為了各種情況、階段的測試和驗證而生，種類繁復應有盡有…)

　　但一個產品或服務給人使用的體驗不好，絕對不只是 UX 的錯，整個團隊都有份。程序寫太爛常常崩潰會失去使用者的信用啊!程序穩定和與設計師們無關對吧。要知道整個項目成員都在執行「讓產品給用戶更好的體驗」這項任務。

　　團隊合作不是把自己手上的事情做完扔出去就沒事了。要去看看其他項目成員在做什麼，拿到自己給出的檔案後接下來會怎麼處理，自己有沒有可能配合對方做微調讓雙方都好做事。

　　先不管是不是我亂嘴炮胡扯，起碼跨領域多懂一點、讓工作順利，多學一點總是好的。

　　補充：

　　Jobs – Google Design

　　Google 分工的很細，有些職務如 Filmmaker、Industrial Designer，我就不熟悉這個領域的工作內容了。