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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

比如基本的差異點有：

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

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

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

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

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

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

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

4. 方法論的掌握和運用

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

比如用戶體驗?zāi)Ｐ褪疽鈭D如下，用戶體驗?zāi)Ｐ褪墙⒃谟脩艚巧Ｐ椭系?，前提是需要大量的用戶深度訪談資料為基礎(chǔ)，用以系統(tǒng)、全面、科學(xué)的研究用戶行為和探索用戶需求。

用戶體驗地圖

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

5. 交互稿中的 UI 考量

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

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

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

（2）規(guī)范

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

（3）邊界情況

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

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

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

6. 詳盡的 Use Case 考量

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

五、交互稿背后的價值

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

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

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

1. 項目中堅守用戶價值

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

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

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

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

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

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

易用性量表

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

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

5. 項目流程管理

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

五、沒有交互會帶來什么？

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

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

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

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

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

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

作者：LXDC