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

他說：「UX 包含產(chǎn)品或服務(wù)的整體經(jīng)驗(yàn)，而且也包含UI。UI 由視覺設(shè)計(jì)（外觀和感覺）和互動(dòng)設(shè)計(jì)（如何運(yùn)作）組成?！?/p>

可以得知 UI 在互動(dòng)設(shè)計(jì)和視覺設(shè)計(jì)交錯(cuò)的那個(gè)區(qū)塊。

既然 UI 設(shè)計(jì)由視覺設(shè)計(jì)和互動(dòng)設(shè)計(jì)組成。組成代表的是兩者必需同時(shí)存在。你不會(huì)說「水是 H2O 組成，所以 H2 是水，O 也是水。」

接口必須包含輸入、輸出、運(yùn)作內(nèi)容，可以互動(dòng)才可被稱為 UI，也就是說不能動(dòng)的通通不能被當(dāng)成 UI。就像你不會(huì)說電影海報(bào)是 UI、大潤發(fā) DM 是 UI 一樣，它們是視覺設(shè)計(jì)或平面設(shè)計(jì)。

動(dòng)畫是不是 UI？ 當(dāng)然不是，使用者怎么操作動(dòng)畫？一定要包含輸入、輸出、運(yùn)作內(nèi)容這三點(diǎn)，才可被稱為 UI。(會(huì)動(dòng)不是指畫面元素會(huì)動(dòng)這件事，而且能不能和使用者互動(dòng)。）

例子

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

（先假設(shè)一切完美、沒有 GGYY 的客戶或主管、沒有時(shí)程壓力、沒有技術(shù)限制、沒有外在干擾。開發(fā)團(tuán)隊(duì)至少包含 PM、RD、UX Researcher、Interaction Designer、Visual Designer 等等，且所有人都有一定程度的實(shí)務(wù)經(jīng)驗(yàn)、知道如何跨領(lǐng)域相互支持、團(tuán)隊(duì)合作和溝通上無問題。)

有個(gè)大前提：團(tuán)隊(duì)合作并不是某人說了算，而是某個(gè)職務(wù)上的人做了這樣的提議后，項(xiàng)目成員皆同意、共同負(fù)責(zé)。當(dāng)在大家都同意的情況下，產(chǎn)品失敗不會(huì)是其中一個(gè)人的責(zé)任。

關(guān)于 UI 設(shè)計(jì)的職責(zé)劃分可以參考：What are the differences between UX, Interaction, UI and graphic/visual designers? Are these distinctions helpful or damaging to our field?

鼠標(biāo)移過購物車圖標(biāo)，要滑出一個(gè)迷你購物車，誰來決定迷你購物車內(nèi)是否要放產(chǎn)品照片、應(yīng)付金額的文字尺寸要不要加大？

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

畫 Wireframe 的是誰？他要決定畫面包含哪些內(nèi)容、各種頁面狀態(tài)，Interaction Designer。

應(yīng)付金額的文字尺寸要不要加大？

Interaction Designer 只會(huì)處理內(nèi)容（文字、圖片、聲音、影片）和使用者之間的互動(dòng)關(guān)系，至于內(nèi)容長什么樣是 VD 的工作。

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

為什么要加大呢？可能是 UX Researcher 發(fā)現(xiàn)目前版本能有改善的空間，找 VD 處理。

UX Researcher 做的是「發(fā)現(xiàn)」，他只能告訴你問題出在哪，但沒辦法直接告訴你問題要怎么解決。解決問題是「創(chuàng)造」，歸設(shè)計(jì)師思考。思考出解法再交給 UX Researcher 驗(yàn)證。

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

Interaction Designer 必須考慮所有和使用者有關(guān)的互動(dòng)行為，產(chǎn)出 Wireframe 給 RD 和 VD ，有專門處理動(dòng)畫的職務(wù)。Jobs – Google Design

鼠標(biāo)點(diǎn)擊選擇折價(jià)券，會(huì)跳出一個(gè)「會(huì)員現(xiàn)有的折價(jià)券清單」的 modal，決定這個(gè) modal 是要選擇折價(jià)券之后自動(dòng)關(guān)掉，還是要點(diǎn)選「我已選擇完成」之后才關(guān)掉的人是誰?

畫 Wireframe 的那個(gè)人決定，Interaction Designer 。

UX Researcher 驗(yàn)證這個(gè)作法會(huì)不會(huì)讓使用者跑光。

承上，決定這個(gè) modal 在計(jì)算機(jī)上要多寬，「我已選擇完成」的按鈕要在 modal 的右下角、左下角還是中間的？

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

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

會(huì)員購物明細(xì)中，地址、收件人、電話、手機(jī)、備注、商品明細(xì)、折扣明細(xì)……等各種項(xiàng)目的顯示順序。

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

某按鈕上的文字常常被用戶誤解點(diǎn)錯(cuò)，讓客服電話接不完，決定按鈕上的文字要怎么寫的人是？

PM 或 Planner。

不，我開玩笑的。

常常被誤點(diǎn)就是 UX Researcher 的工作，既然他已經(jīng)知道問題出在文字上，就得提出建議給實(shí)作人員?？赡軆烧邥?huì)配合多測幾組文字，看看用戶的反應(yīng)以找出較好的那組文字。

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

Google 有專門寫文案的職務(wù)。?UX Writer – Jobs – Google Design

承上，要改善系統(tǒng)流程，避免誤點(diǎn)了之后發(fā)生無法挽回的事，提出新流程規(guī)畫的人是？

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

UX Researcher 會(huì)告訴 Interaction Designer 使用者的操作習(xí)慣、容易出錯(cuò)的部份、為什么出錯(cuò)。至于怎么修改是 Interaction Designer 的工作。

改完再給 UX Researcher 驗(yàn)證…

某一在線型錄頁面中有一個(gè) Download 按鈕，點(diǎn)擊之后會(huì)把檔案下載到本機(jī)。決定按鈕上的圖標(biāo)要用一朵云+向下的箭頭，還是磁盤的人是？

VD。

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

某一在線型錄頁面中已經(jīng)有一紅、一黃、一藍(lán)的按鈕，現(xiàn)在要再增加一個(gè)功能與其他顆完全相異的按鈕，決定新的按鈕要用什么顏色的人是？

和視覺有關(guān)的都找 VD。

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

執(zhí)行某動(dòng)作之前有一段說明文字，「避免有人沒看說明，要先等待 5 秒才會(huì)跑出執(zhí)行按鈕」，決定「」內(nèi)操作流程的人是？

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

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

但一個(gè)產(chǎn)品或服務(wù)給人使用的體驗(yàn)不好，絕對(duì)不只是 UX 的錯(cuò)，整個(gè)團(tuán)隊(duì)都有份。程序?qū)懱珷€常常崩潰會(huì)失去使用者的信用??！程序穩(wěn)定和與設(shè)計(jì)師們無關(guān)對(duì)吧。要知道整個(gè)項(xiàng)目成員都在執(zhí)行「讓產(chǎn)品給用戶更好的體驗(yàn)」這項(xiàng)任務(wù)。

團(tuán)隊(duì)合作不是把自己手上的事情做完扔出去就沒事了。要去看看其他項(xiàng)目成員在做什么，拿到自己給出的檔案后接下來會(huì)怎么處理，自己有沒有可能配合對(duì)方做微調(diào)讓雙方都好做事。

先不管是不是我亂嘴炮胡扯，起碼跨領(lǐng)域多懂一點(diǎn)、讓工作順利，多學(xué)一點(diǎn)總是好的。

補(bǔ)充：

Jobs – Google Design

Google 分工的很細(xì)，有些職務(wù)如 Filmmaker、Industrial Designer，我就不熟悉這個(gè)領(lǐng)域的工作內(nèi)容了。

作者：@Akane_Lee

原文地址：blog.akanelee.me