實(shí)際上，“交互設(shè)計(jì)”可以分成兩個(gè)部分：用戶使用流程的交互設(shè)計(jì)、界面呈現(xiàn)的交互設(shè)計(jì)（我往往叫他單頁(yè)面交互）。印象中，最早Cooper在解釋“交互設(shè)計(jì)”時(shí)，說(shuō)到的也是這兩個(gè)部分。
所謂“用戶使用流程”，源于“業(yè)務(wù)邏輯”，又不同于業(yè)務(wù)邏輯。因?yàn)闃I(yè)務(wù)邏輯一般都更偏向于技術(shù)模型，對(duì)于實(shí)際的用戶使用來(lái)說(shuō)會(huì)過(guò)于繁復(fù)，易用性很差。
這份工作，一般由產(chǎn)品設(shè)計(jì)師(負(fù)責(zé)功能設(shè)計(jì)、信息架構(gòu)、‘交互設(shè)計(jì)’)來(lái)完成。比如，
（下面的例子，有興趣的同學(xué)可以給畫(huà)成流程圖，理解起來(lái)會(huì)更形象）
這里有一個(gè)Push Mail添加帳戶的“業(yè)務(wù)邏輯”（不包括錯(cuò)誤判斷）：
1》進(jìn)入“系統(tǒng)設(shè)置” ，
2》進(jìn)入“帳戶管理(帳戶列表)” ，
2.1 選擇“添加帳戶” ；
3》輸入郵箱名稱(chēng)，
4》輸入郵箱地址和密碼，
5》填寫(xiě)手機(jī)號(hào)和簽名，<可選擇“跳過(guò)”>
6》設(shè)置郵件服務(wù)器，
7》最后提交、完成。
評(píng)估：如果把這個(gè)流程直接作為用戶的使用流程，所有用戶要完成這個(gè)添加帳戶的過(guò)程需要7個(gè)步驟，至少8次提交。
經(jīng)過(guò)“用戶使用流程的交互設(shè)計(jì)”之后，這個(gè)“業(yè)務(wù)邏輯”應(yīng)該變成更合適的“用戶使用流程”。可以是：
1》進(jìn)入“系統(tǒng)設(shè)置” ，
2》進(jìn)入“帳戶管理(帳戶列表)” ，<如果現(xiàn)在一個(gè)帳戶沒(méi)有，直接跳過(guò)帳戶管理開(kāi)始添加帳戶>
2.1 選擇“添加帳戶” ；
3》輸入郵箱地址和密碼，
3.1填寫(xiě)郵箱名稱(chēng)、手機(jī)號(hào)和簽名，<可選，默認(rèn)郵箱名就是郵件地址，簽名就是郵箱前綴，手機(jī)號(hào)可以不填>
4》設(shè)置郵件服務(wù)器，<在第3步就判斷“該郵件后綴，服務(wù)器上是否已有配置記錄”，如果有，直接到完成界面，同時(shí)提供更改配置的入口。>
5》最后提交、完成。
評(píng)估：7個(gè)業(yè)務(wù)邏輯上的步驟在這里變成了6個(gè)。用戶的8次提交變成了最少3次。且80%以上的時(shí)候可以少于4次（數(shù)據(jù)顯示，使用量最高的10個(gè)郵件服務(wù)商擁有了80%以上的用戶）。
后，經(jīng)過(guò)討論，我們考慮到“安全問(wèn)題”和“商業(yè)價(jià)值”等多個(gè)因素，認(rèn)為：“有必要相對(duì)犧牲一點(diǎn)體驗(yàn)，已達(dá)到‘讓大部分用戶主動(dòng)填寫(xiě)手機(jī)號(hào)’的目的”。
于是最終的方案改成了：
1》進(jìn)入“系統(tǒng)設(shè)置” ，
2》進(jìn)入“帳戶管理(帳戶列表)” ，<如果現(xiàn)在一個(gè)帳戶沒(méi)有，直接跳過(guò)帳戶管理開(kāi)始添加帳戶>
2.1 選擇“添加帳戶” ；
3》輸入郵箱地址和密碼，
4》填寫(xiě)郵箱名稱(chēng)、手機(jī)號(hào)和簽名，<默認(rèn)郵箱名就是郵件地址，簽名就是郵箱前綴，手機(jī)號(hào)為空。可以選擇“跳過(guò)”>
5》設(shè)置郵件服務(wù)器，<在第3步就判斷“該郵件后綴，服務(wù)器上是否已有配置記錄”，如果有，直接到完成界面，同時(shí)提供更改配置的入口。>
6》最后提交、完成。
評(píng)估：7個(gè)業(yè)務(wù)邏輯上的步驟變成了6個(gè)。用戶的8次提交變成了最少3次，常規(guī)4次。
當(dāng)然，這個(gè)“用戶使用流程的交互設(shè)計(jì)”提交物不只是業(yè)務(wù)流程圖，而應(yīng)該是“帶界面的使用流程圖”。如圖。
.
所謂“界面呈現(xiàn)的交互設(shè)計(jì)（單頁(yè)面交互）”，實(shí)際上是“UI設(shè)計(jì)”（也就是，我在建議“取消用戶體驗(yàn)部門(mén)”中說(shuō)到的“視覺(jué)設(shè)計(jì)”）所做的工作。對(duì)于“界面呈現(xiàn)的交互設(shè)計(jì)”來(lái)說(shuō)，“使用流程圖”的每個(gè)具體頁(yè)面的“頁(yè)面內(nèi)交互”都只是“建議”，有權(quán)更改每個(gè)頁(yè)面的“交互方式”。
還是上面的例子，
“使用流程的交互設(shè)計(jì)”已經(jīng)規(guī)定好了，“填寫(xiě)郵箱名稱(chēng)、手機(jī)號(hào)和簽名”必須“由一個(gè)單獨(dú)的頁(yè)面完成，而且默認(rèn)不跳過(guò)”，但進(jìn)入這個(gè)頁(yè)面后“光標(biāo)默認(rèn)到什么地方？”，“界面呈現(xiàn)的交互設(shè)計(jì)”應(yīng)該思考。
在“使用流程的交互設(shè)計(jì)”時(shí)，或沒(méi)有考慮到光標(biāo)默認(rèn)停放的問(wèn)題，或放到了“郵箱名稱(chēng)”上，都是不合理的�！敖缑娉尸F(xiàn)的交互設(shè)計(jì)”應(yīng)該在這個(gè)時(shí)候給優(yōu)化成成“光標(biāo)默認(rèn)停留在‘手機(jī)號(hào)’的輸入框里”。
這個(gè)例子里，“界面呈現(xiàn)的交互設(shè)計(jì)”表現(xiàn)出來(lái)的作用可能并不夠強(qiáng)，再比如，
(圖1,Google短信提醒的手機(jī)驗(yàn)證)
在這個(gè)頁(yè)面中，用戶往往輸入手機(jī)號(hào)以后不知道“驗(yàn)證碼是什么？ 哪里有？”
事實(shí)上，也許我們把“獲取驗(yàn)證碼”作為一個(gè)更突出的內(nèi)容會(huì)更合適一些。
簡(jiǎn)單優(yōu)化如下：
(圖2,Google手機(jī)驗(yàn)證的簡(jiǎn)單改進(jìn))
這樣一來(lái)，輸入手機(jī)號(hào)碼雖然還是在一個(gè)頁(yè)面中，但用戶在輸入手機(jī)號(hào)碼的時(shí)候只能有一個(gè)“獲取驗(yàn)證碼”的操作，不會(huì)再疑惑。
總結(jié)：
簡(jiǎn)單來(lái)說(shuō)，“用戶使用流程的交互設(shè)計(jì)”是站在產(chǎn)品和體驗(yàn)兩個(gè)角度，更合理的進(jìn)行產(chǎn)品設(shè)計(jì)。即保證完整的業(yè)務(wù)邏輯和產(chǎn)品利益，又用最小的交互成本讓用戶完成任務(wù)；“界面呈現(xiàn)的交互設(shè)計(jì)”更多是站在易用性的角度優(yōu)化“人機(jī)交互過(guò)程”，讓交互成本再小，易用性更強(qiáng)。
在成熟的團(tuán)隊(duì)，或者交互更復(fù)雜的產(chǎn)品中，有人專(zhuān)門(mén)做偏向于產(chǎn)品的“流程交互”，有人做偏向于UI的“頁(yè)面交互”更合適些，因?yàn)槟憬?jīng)常會(huì)發(fā)現(xiàn)你的產(chǎn)品人員不懂界面設(shè)計(jì)，你的界面設(shè)計(jì)人員不能產(chǎn)品流程…
還是那句話：團(tuán)隊(duì)中如何分工無(wú)所謂，有什么樣的職位無(wú)所謂。不一定非得分開(kāi)“流程交互”和“頁(yè)面交互”，但這些事情都是要有人做的，分不分開(kāi)要看你的實(shí)際情況。
本文，只是為了解釋?zhuān)骸敖换ピO(shè)計(jì)”不只是“單頁(yè)面交互”，更不只是“流程改進(jìn)”。
好的視覺(jué)設(shè)計(jì)師/UI設(shè)計(jì)師應(yīng)該擔(dān)負(fù)起“界面呈現(xiàn)的交互設(shè)計(jì)”的任務(wù)，不能只做視覺(jué)；偏產(chǎn)品的“用戶使用流程的交互設(shè)計(jì)師”，并非“必須具備視覺(jué)設(shè)計(jì)能力”。
粵公網(wǎng)安備 44010402000282號(hào)