陳悅：工作中經(jīng)常有人聊起交互跟產(chǎn)品的差別是什么？交互跟 UI 的差別是什么？似乎從入行至今，都一直有過這樣的聲音。互聯(lián)網(wǎng)紅利期的逐步消退，資本緊縮，壓縮人力成本似乎成了一件趨之若鶩的事，所以早年阿里提出了全棧設(shè)計(jì)師、全棧工程師的概念，但本質(zhì)上各種細(xì)分崗位的工作一直都存在，從未消失過，只不過以不同的形式被平攤了，但效果卻難以說是好的。下面將去拋磚引玉的探討交互設(shè)計(jì)價(jià)值點(diǎn)，并聊聊能否被兼并或取代。

一、先談?wù)劷换ピ谧鍪裁矗?/h4>

借用一句傳統(tǒng)設(shè)計(jì)行業(yè)的經(jīng)典語錄，一個(gè)好的產(chǎn)品一定是"有用的、好用的、用過還想用的"，有用的主要由產(chǎn)品經(jīng)理把控，而好用、用過是否還想用就是交互設(shè)計(jì)的職責(zé)和價(jià)值了。工作內(nèi)容，交互大概可以總結(jié)為下面這幾點(diǎn)

1. 是針對行為的設(shè)計(jì)，讓原本的物理邏輯向用戶行為邏輯轉(zhuǎn)化
2. 平衡業(yè)務(wù)價(jià)值和用戶價(jià)值，腦海中永遠(yuǎn)不要忘記"用戶價(jià)值"這幾個(gè)字
3. 以目標(biāo)為導(dǎo)向，保證產(chǎn)品貼合用戶心智，用戶能更好的理解、使用產(chǎn)品，并獲得愉悅的使用體驗(yàn)
4. 是通過功能架構(gòu)向信息架構(gòu)的重組，提升產(chǎn)品框架的擴(kuò)展性、穩(wěn)定性等，交互更多的考慮到在不同場景下對可用性的要求，讓產(chǎn)品能長久持續(xù)的使用下去
5. 是對使用流程設(shè)計(jì)
6. 數(shù)據(jù)分析和用戶研究相關(guān)的工作，這兩者是交互展開工作的基礎(chǔ)支撐

交互的價(jià)值是長期的和可持續(xù)的，沒有交互，短期內(nèi)看似不會(huì)出現(xiàn)問題，長期來看，對用戶留存、用戶滿意度等會(huì)有重大影響，市場環(huán)境不同于壟斷環(huán)境，功能堆砌過多后甚至都無法再動(dòng)搖產(chǎn)品"難用"這個(gè)印象，但凡有類似競品，放棄產(chǎn)品可能性較大

二、交互設(shè)計(jì)的產(chǎn)出物特點(diǎn)

交互稿與產(chǎn)品原型稿有什么差別？

這可能很多人關(guān)心、疑惑的問題了，本質(zhì)上這個(gè)也是交互稿專業(yè)度的問題。產(chǎn)品經(jīng)理也可以去畫原型圖，那問題在哪兒？下面會(huì)嘗試闡述幾點(diǎn)重要差別。當(dāng)然并不排除極少數(shù)優(yōu)秀、能力全面的產(chǎn)品能內(nèi)外兼修。

1. 從內(nèi)到外的邏輯思維差異

行為邏輯是交互設(shè)計(jì)師思考的出發(fā)點(diǎn)，也是交互設(shè)計(jì)方式能否取得創(chuàng)新的關(guān)鍵點(diǎn)。物理邏輯或者業(yè)務(wù)邏輯是產(chǎn)品經(jīng)理更關(guān)注的要點(diǎn)，交互設(shè)計(jì)需要具備豐富的同理心，產(chǎn)品功能不同、用戶不同、場景不同都會(huì)影響到用戶使用時(shí)的感受和操作行為。簡單來說，交互設(shè)計(jì)師更多的站在用戶角度去思考原型的價(jià)值，是否容易被理解、好用甚至轉(zhuǎn)化，而產(chǎn)品的角度不可避免的會(huì)更多考慮業(yè)務(wù)、技術(shù)實(shí)現(xiàn)等方面，一個(gè)人做到面面俱到，是極其難且思維是很容易固化的，長期形成的思維差異會(huì)直接在原型圖中表現(xiàn)，最終影響到產(chǎn)品可用性。

以 QQ 音樂幾年前的版本（2017）和現(xiàn)版本（2021）為例，左側(cè)過往版本在首頁的信息組織形式上主要以分類的方式，而右側(cè)現(xiàn)版本中信息的組織形式中首頁的分類方式已經(jīng)很弱了，基本傾向于按用戶行為、需求去組織，比如根據(jù)用戶過往聽過的歌曲去推薦歌曲、歌單，每日 30 曲更是研究了用戶每日習(xí)慣、耐心做的信息整合，30 首怎么得來的？根據(jù)什么樣的歌曲去推薦？這些都是行為研究的范疇，需要對用戶深度了解后方有最好的解決方案。

2. 設(shè)計(jì)范式的積累與創(chuàng)新

設(shè)計(jì)范式是交互設(shè)計(jì)師基本功的體現(xiàn)，包含設(shè)計(jì)規(guī)范和模塊范式兩個(gè)方面。設(shè)計(jì)規(guī)范是設(shè)計(jì)范式中的基礎(chǔ)，對規(guī)范的理解和創(chuàng)新也是衡量專業(yè)度最基礎(chǔ)的方面，這對原型稿是否成熟有很大關(guān)系，現(xiàn)有的交互規(guī)范大多基于 iOS、Material design、微軟設(shè)計(jì)規(guī)范的基礎(chǔ)上優(yōu)化的，國內(nèi)比較流行的設(shè)計(jì)規(guī)范還有 Ant design 等，本文不對此做過多討論，這里重點(diǎn)談?wù)勗O(shè)計(jì)范式。

范式，指用戶在長期對于互聯(lián)網(wǎng)產(chǎn)品使用過程中產(chǎn)生的用戶心智，比如用戶對設(shè)置模塊的預(yù)期、對個(gè)人信息模塊的預(yù)期等。也可以理解為對于不同產(chǎn)品功能模塊的記憶，設(shè)計(jì)時(shí)需要非常熟練的從腦海中調(diào)用，這樣做的好處是不容易太偏離用戶長期積累的心智，熟練應(yīng)用范式是創(chuàng)新的前提。

比如表格編輯器的設(shè)計(jì)范式，不管是現(xiàn)在的飛書、谷歌文檔、釘釘、石墨等協(xié)同辦公產(chǎn)品，都在 20 年前微軟 office 的 ribbon 設(shè)計(jì)模式中兜兜轉(zhuǎn)轉(zhuǎn)，尤其是表格編輯器，在長期的使用過程中記類的習(xí)慣是很難輕易被改變的，筆者親身經(jīng)歷過一款表格編輯器產(chǎn)品的迭代，易用性（易操作、易學(xué)、易見）中易學(xué)性指標(biāo)評分是最高的，現(xiàn)在想起來也跟行業(yè)范式接近不無關(guān)系。另外關(guān)于一些編輯器右鍵操作、鍵盤操作快捷鍵是否滿足了用戶需求都是極其重要的。不過辦公類產(chǎn)品發(fā)展到現(xiàn)在已不再像 20 年前純工具類屬性了，協(xié)同屬性必將帶來編輯器再一次的創(chuàng)新。

設(shè)計(jì)范式需要長期的積累，對范式理解不夠深入，通常是要么畫不出來可用的原型，要么畫出來的原型會(huì)被問到一個(gè)問題——"這個(gè)。。。看起來有點(diǎn)說不出來的奇怪"。在理解了基礎(chǔ)范式之后，我們才能做出真正的創(chuàng)新，雖然近兩年交互形式越來越穩(wěn)定，但真正理解了范式之后的創(chuàng)新也能幫助產(chǎn)品快速占領(lǐng)用戶心智，形成特定印象，繼而占領(lǐng)市場。設(shè)計(jì)范式并非不可創(chuàng)新，而是在不必要的時(shí)候盡量遵循范式能最大限度去降本增效，減少不必要的用戶誤解或開發(fā)成本。

3. 多端設(shè)計(jì)交互方式

如果不是潛心研究過多端設(shè)計(jì)差異，一般很容易出問題。比如 PC 端和 Mobile 端、小程序與 App 等，在設(shè)計(jì)方法上都存在巨大差異，我親眼見過太多的產(chǎn)品原型稿中出現(xiàn)過 Mobile 的設(shè)計(jì)方法運(yùn)用到 PC，或者 PC 應(yīng)用到了 Mobile。

比如基本的差異點(diǎn)有：

1. Mobile 的用戶行為多為單線任務(wù)，而 PC 是多線任務(wù)，比如 pc 可以多窗口很便捷的切換，用戶可以一邊聊天一邊收郵件
2. Mobile 端用戶操作時(shí)間更加碎片化，PC 操作時(shí)間更加系統(tǒng)、專一
3. PC 的界面也遠(yuǎn)大于 Mobile，導(dǎo)致信息結(jié)構(gòu)差異較大
4. 兩者交互事件也存在很大差別，PC 可以針對對象進(jìn)行 hover，多上下滾動(dòng)，少左右滑動(dòng)（依據(jù)鼠標(biāo)特性）等。
5. 設(shè)計(jì)控件的規(guī)范差異較大

本文并不詳細(xì)贅述差異點(diǎn)，總的來說，這些差異點(diǎn)在具體的原型稿設(shè)計(jì)中會(huì)體現(xiàn)的比較明顯，這些也是專業(yè)性的一個(gè)方面。下面將舉 2 個(gè)例子來說明：

（1）樹狀結(jié)構(gòu)

樹狀結(jié)構(gòu)是一個(gè) PC 端經(jīng)常應(yīng)用的控件，適用于層級結(jié)構(gòu)的展示、選擇等交互操作，高效而清晰，但其在移動(dòng)端展示時(shí)卻不能照搬，由于屏幕、移動(dòng)端手指交互等限制，在移動(dòng)端該控件既不高效也不清晰。比如常見的將文件移動(dòng)到文件夾的操作，桌面端的交互可以用樹狀結(jié)構(gòu)，而移動(dòng)端更適合層級結(jié)構(gòu)

（2）面包屑導(dǎo)航

面包屑在桌面端是一個(gè)非常普遍的控件，可以有效的承載層級關(guān)系展示、快速導(dǎo)航定位的功能，比如不同層級的文件夾展示與導(dǎo)航等。但在移動(dòng)端，因?yàn)槠聊淮笮?、移?dòng)端用戶操作碎片化等原因，導(dǎo)致用戶對面包屑節(jié)點(diǎn)的記憶、層級操作上都遠(yuǎn)不如桌面端，甚至?xí)绊懙叫畔⒌恼故拘?，因此移?dòng)端在層級關(guān)系的展示與切換上通常不會(huì)用面包屑，而是左上角返回按鈕或系統(tǒng)級別的返回。當(dāng)然面包屑在移動(dòng)端也并非一無是處，如果面包屑各節(jié)點(diǎn)承載的展示作用具備極強(qiáng)的參考意義，比如這些文件夾節(jié)點(diǎn)同時(shí)承載著組織關(guān)系的顯示，則面包屑也還是可以用的

總結(jié)下來：面包屑在移動(dòng)端盡量別用，但如果其各層級節(jié)點(diǎn)同時(shí)有極強(qiáng)的參考意義，則可用

4. 方法論的掌握和運(yùn)用

方法論在交互稿中的體現(xiàn)是比較隱晦的，準(zhǔn)確來說，這一點(diǎn)是針對思維差異點(diǎn)的補(bǔ)充，如交互設(shè)計(jì)十原則、"F 型"頁面設(shè)計(jì)理論（近幾年有爭議）等視覺動(dòng)線，也包含發(fā)現(xiàn)問題的一些方法，比如 KANO 模型、用戶體驗(yàn)地圖、卡片分類等方法論的應(yīng)用，這些對于用戶行為維度的研究結(jié)果也會(huì)支撐著交互稿的科學(xué)性，這里不做展開闡述

比如用戶體驗(yàn)?zāi)Ｐ褪疽鈭D如下，用戶體驗(yàn)?zāi)Ｐ褪墙⒃谟脩艚巧Ｐ椭系模疤崾切枰罅康挠脩羯疃仍L談資料為基礎(chǔ)，用以系統(tǒng)、全面、科學(xué)的研究用戶行為和探索用戶需求。

用戶體驗(yàn)地圖

除了以上列舉出來的，還有一項(xiàng)重要的方法是數(shù)據(jù)分析，這一點(diǎn)是容易被輕視的，但確是最具備參考價(jià)值和衡量工作結(jié)果的，交互關(guān)注的數(shù)據(jù)和產(chǎn)品有很多差異，具體一點(diǎn)，比如對于一個(gè)項(xiàng)目中，產(chǎn)品更多關(guān)注的是衡量功能結(jié)果的數(shù)據(jù)，通常包含使用數(shù)據(jù) PV/UV、轉(zhuǎn)化率等，而設(shè)計(jì)師更多關(guān)注 CTR、停留時(shí)長、轉(zhuǎn)化漏斗中跟操作行為相關(guān)的數(shù)據(jù)，行為是交互研究的對象，所以行為數(shù)據(jù)結(jié)果能為具體的方案設(shè)計(jì)提供衡量指標(biāo)

5. 交互稿中的 UI 考量

簡單來說，就是不能給 UI 挖坑，沒有交互的設(shè)計(jì)，UI 上與產(chǎn)品之間的溝通會(huì)非常頻繁，也主要會(huì)出現(xiàn)以下幾個(gè)常見問題。

（1）信息結(jié)構(gòu)與優(yōu)先級的落地

信息布局既需要考慮功能的業(yè)務(wù)優(yōu)先級，也需要考慮用戶行為優(yōu)先級，同時(shí)還需要考慮到 UI 排版的難度。這中間基本都會(huì)有矛盾存在，做好平衡是必備技能。有時(shí)候需要逼著產(chǎn)品給出功能優(yōu)先級，排版是有限的，也有一定審美要求的專業(yè)度，交互稿需要為 UI 規(guī)避一些明顯的坑，比如最典型的例子——功能都很重要、文案過長等，當(dāng)產(chǎn)品同學(xué)也不確定自己所畫功能是否能被用戶理解、操作的時(shí)候，會(huì)喜歡用文案去進(jìn)行解釋，比如button上寫10個(gè)字這種，交互需要給UI提前做避坑

（2）規(guī)范

設(shè)計(jì)是一個(gè)系統(tǒng)，任何需求在畫交互稿時(shí)都應(yīng)考慮到對系統(tǒng)的適應(yīng)或沖擊，這就要求交互設(shè)計(jì)師不僅要非常熟悉設(shè)計(jì)系統(tǒng)，而且必須是系統(tǒng)的制作人之一，設(shè)計(jì)系統(tǒng)是一項(xiàng)耗時(shí)耗力的工作，前期耐心打磨，后期適應(yīng)、修改，如此才能把握住用戶體驗(yàn)的一致性。

（3）邊界情況

主要包含用戶交互中與前端、服務(wù)端的交互，比如操作事件的定義、反饋；加載的形式與技術(shù)方案；空狀態(tài)；弱網(wǎng)、斷網(wǎng)等等，這些邊界頁面的考慮都定義清楚，能有效避免 UI 的返工

（4）保真度與實(shí)現(xiàn)效果

交互稿如果保真度較低，會(huì)導(dǎo)致 UI 在實(shí)際設(shè)計(jì)的時(shí)候?qū)换ジ逍薷妮^大，導(dǎo)致頁面架構(gòu)、交互注釋等返工修改，造成不必要的時(shí)間資源浪費(fèi)，也會(huì)對項(xiàng)目進(jìn)度造成影響。一般來說，成熟的交互稿是比較接近 UI 稿而又不是 UI 稿的一種狀態(tài)，將 UI 中的坑避免之后，UI 設(shè)計(jì)師需要做的就是更表現(xiàn)層的設(shè)計(jì)，比如與前端工程師的實(shí)現(xiàn)匹配、色彩、柵格、間距、字體字號等等。

6. 詳盡的 Use Case 考量

Use Case（用例）指功能、交互的定義和詳細(xì)描述，用例描述的細(xì)節(jié)程度決定開發(fā)時(shí)反復(fù)溝通的頻率，具體包含的細(xì)節(jié)很多，大到功能流程的設(shè)計(jì)，小到某個(gè)交互事件的定義和枚舉；從前端用戶與系統(tǒng)的交互事件，到服務(wù)端與前端的功能聯(lián)動(dòng)等，都涉及到，總之，只要用戶看到的、點(diǎn)擊/滑動(dòng)/hover 等交互行為涵蓋到的，都應(yīng)該被定義，以期減少開發(fā)過程中遇到的問題和溝通成本，這里不做過多闡述。

五、交互稿背后的價(jià)值

交互設(shè)計(jì)只是畫稿子的嗎？

顯然不是！如果說一個(gè)項(xiàng)目交互階段持續(xù)了 3 天，那繪制交互稿最多能花費(fèi) 1 天。

交互是一個(gè)橫向能力比較高的職業(yè)，很多交互設(shè)計(jì)師也改行去做了產(chǎn)品、用研或者 UI，所以多多少少都會(huì)具備這幾者的一些技能。交互設(shè)計(jì)師通常會(huì)有多重隱藏的技能是必須掌握的

1. 項(xiàng)目中堅(jiān)守用戶價(jià)值

用戶價(jià)值在項(xiàng)目中很容易就讓步于業(yè)務(wù)價(jià)值、項(xiàng)目排期、技術(shù)方案等，交互就是在這中間說"不"的人，潤物細(xì)無聲，在每個(gè)項(xiàng)目中盡量減少用戶價(jià)值的損耗，最后匯聚而成的產(chǎn)品整體體驗(yàn)還是有很大差別的。

2. 團(tuán)隊(duì)中承擔(dān)用戶研究、行為數(shù)據(jù)的部分工作

交互在組織架構(gòu)上，一般是會(huì)歸屬于設(shè)計(jì)部門的，所以在部門中也承擔(dān)了一線跟用戶和數(shù)據(jù)接觸的人，即便有數(shù)據(jù)分析師、用研同學(xué)的幫助，也需要有主動(dòng)跟蹤這些問題的意識，不然設(shè)計(jì)出來的交互稿很難不出問題。

3. 可用性測試等結(jié)果追蹤

可用性測試在一些稍大的項(xiàng)目中是體驗(yàn)設(shè)計(jì)環(huán)節(jié)中的定性維度核驗(yàn)步驟，需要結(jié)合用戶反饋對方案進(jìn)行可用、好用測試，并不是指在流程上能跑通的技術(shù)測試，而是校驗(yàn)用戶對于方案的接受程度、滿意程度，也順便發(fā)現(xiàn)一些問題，后續(xù)進(jìn)行優(yōu)化。

更多的結(jié)果追蹤形式，比如還有 SUS 可用性量表（B 端產(chǎn)品可用阿里云 UES 量表等）、用戶滿意度、NPS 跟蹤等等，目的在于定量的給用戶體驗(yàn)打分，確保用戶體驗(yàn)的衡量是有章可循的

易用性量表

4. 直接驅(qū)動(dòng)業(yè)務(wù)增長

增長黑客和用戶增長設(shè)計(jì)的概念前幾年也已在業(yè)內(nèi)為大家所熟知，AARRR 增長模型（獲客、激活、轉(zhuǎn)化、留存、推薦/傳播）中，交互可依賴對用戶的了解和用戶行為的洞察，通過比如文案、微動(dòng)效、轉(zhuǎn)化漏斗優(yōu)化、信息梳理、布局設(shè)計(jì)等，也可以幫助業(yè)務(wù)在各階段直接提升對應(yīng)的業(yè)務(wù)指標(biāo)，甚至將體驗(yàn)設(shè)計(jì)師熟悉的體驗(yàn)地圖轉(zhuǎn)化繪制為用戶增長地圖，在用戶使用的全鏈路行為節(jié)點(diǎn)做設(shè)計(jì)所擅長的增長賦能。

5. 項(xiàng)目流程管理

交互需要更早的參與到需求中，在需求出現(xiàn)之前的交互參與能讓需求更加合理，而在交互稿畫完之后，也需要實(shí)時(shí)的去跟進(jìn) UI、開發(fā)，有一些技術(shù)難題需要跟開發(fā)密切合作，開發(fā)說""實(shí)現(xiàn)不了"是經(jīng)常碰到的一句話，那是否是真的實(shí)現(xiàn)不了，可能跟不同的團(tuán)隊(duì)、人、項(xiàng)目排期有關(guān)了，有時(shí)候并不是真的實(shí)現(xiàn)不了，或許只是開發(fā)不想做或者他之前沒做過，這個(gè)就需要 PK 了，當(dāng)然有的真的很難實(shí)現(xiàn)或者性價(jià)比很低的設(shè)計(jì)，就需要對交互稿進(jìn)行調(diào)整了。除此之外，有的公司還要求交互有整體管理能力，這就另說了。

五、沒有交互會(huì)帶來什么？

產(chǎn)品團(tuán)隊(duì)或許不都有交互崗位，但不可以沒有好的交互設(shè)計(jì)！

1. 短期內(nèi)產(chǎn)品使用體驗(yàn)很奇怪

很多人畫出來的原型稿甚至是交互稿都遇到過"用起來很奇怪"這個(gè)問題，其實(shí)是因?yàn)樵O(shè)計(jì)者對用戶心智、用戶行為、控件規(guī)范、產(chǎn)品范式等的不熟悉造成的這個(gè)問題，一個(gè)"夾生"的東西即便邏輯合理也必然會(huì)帶來"夾生"的體驗(yàn)。此外，范式和規(guī)范的使用只是執(zhí)行時(shí)的一個(gè)選擇而已，對某規(guī)范的使用未必真正解決當(dāng)前場景下的問題，交互設(shè)計(jì)師更多的是通過對業(yè)務(wù)的梳理、用戶的洞察來做選交互范式和規(guī)范的篩選，找到合適的，才能價(jià)值最大化。

2. 長期下產(chǎn)品"難用"印象的形成

任何行業(yè)，任何產(chǎn)品，產(chǎn)品研發(fā)者可能都不是實(shí)際使用者，術(shù)業(yè)有專攻，對用戶的理解是一項(xiàng)長期經(jīng)驗(yàn)積累的過程，合乎邏輯的，不一定是易用的，易用的不一定是好用的。筆者的經(jīng)驗(yàn)來看，用戶的使用行為既是"傻"的，也是孕育著無窮無盡智慧的，尤其是 B 端產(chǎn)品，用戶使用的方式可能超乎想象。因此對用戶行為理解的深度決定了產(chǎn)品與用戶之間的默契度，圍繞一個(gè)痛點(diǎn)市場上總不至于只有一個(gè)產(chǎn)品，如何讓你的產(chǎn)品成為用戶真正的朋友，需要有專業(yè)的人來研究用戶行為，交互這個(gè)專業(yè)便也是因此而生的。

如今互聯(lián)網(wǎng)紅利愈發(fā)消失殆盡，或許由于資金原因交互崗位并沒有存在于所有公司或團(tuán)隊(duì)，但交互設(shè)計(jì)的專業(yè)度一定永遠(yuǎn)存在，崗位的橫向兼并融合并不能磨滅交互的專業(yè)度，因?yàn)榻换?jiān)守的是用戶體驗(yàn)的底線，讓產(chǎn)品變得或好用、或高效，最終驅(qū)動(dòng)業(yè)可持續(xù)增長，便是這最大的價(jià)值！

作者：LXDC