我們?cè)谠O(shè)計(jì) B 端產(chǎn)品界面的時(shí)候，繞不過(guò)去要進(jìn)行原型設(shè)計(jì)。我一直認(rèn)為，只有在原型層先盡可能想明白，才能在設(shè)計(jì)層和研發(fā)層有好的結(jié)果。

假如原型層沒(méi)考慮明白，隨便就給到研發(fā)同學(xué)進(jìn)行開(kāi)發(fā)，中間來(lái)回修改就非常費(fèi)時(shí)費(fèi)力，這并不是一個(gè)好現(xiàn)象。所以，我們要提升自己的原型繪制能力。

今天啊，就和你分享下原型設(shè)計(jì)中的交互設(shè)計(jì)吧。

我們先來(lái)看看原型設(shè)計(jì)的定義。

其定義了設(shè)計(jì) B 端數(shù)字界面需要涉及的一系列關(guān)于界面構(gòu)建的方式方法，指導(dǎo)如何將碎片化的需求、功能轉(zhuǎn)化為界面原型的能力，從而達(dá)到數(shù)字界面信息展現(xiàn)清晰、流程操作順暢的結(jié)果，最終達(dá)成為用戶(hù)提供友好的用戶(hù)體驗(yàn)的目標(biāo)。

這里主要從 4 部分展開(kāi)，包括信息架構(gòu)、任務(wù)流程、布局結(jié)構(gòu)、交互設(shè)計(jì)。

每一個(gè)部分作用分別是：

①信息架構(gòu)：B 端產(chǎn)品信息架構(gòu)設(shè)計(jì)就是將內(nèi)容規(guī)劃層級(jí)，并逐漸引導(dǎo)用戶(hù)快速找到其想要的內(nèi)容。

這就好比商場(chǎng)里面的導(dǎo)航地圖，我們通過(guò)導(dǎo)航地圖可以知道每層樓有什么。

②任務(wù)流程：設(shè)計(jì)任務(wù)流程，即設(shè)計(jì)用戶(hù)行為動(dòng)線(xiàn)。任務(wù)流程設(shè)計(jì)的好，會(huì)極大提升用戶(hù)的操作效率，并達(dá)到產(chǎn)品設(shè)計(jì)的目的。

這就好比宜家的購(gòu)物路徑設(shè)計(jì)，讓大部分消費(fèi)者進(jìn)入宜家，就會(huì)按照宜家的動(dòng)線(xiàn)設(shè)計(jì)，被默默引導(dǎo)著走完全程，并購(gòu)買(mǎi)了商品。

③布局結(jié)構(gòu)：布局結(jié)構(gòu)是指對(duì) B 端產(chǎn)品框架層面和頁(yè)面層面的布局設(shè)計(jì)。

我以前是學(xué)美術(shù)出身，老師告訴我們?cè)趧?dòng)筆畫(huà)具體的物體前，需要先對(duì)畫(huà)面進(jìn)行構(gòu)圖， 也就是經(jīng)營(yíng)畫(huà)面內(nèi)容大致呈現(xiàn)的位置，是上下結(jié)構(gòu)，還是左右結(jié)構(gòu)，亦或者是對(duì)角線(xiàn)結(jié)構(gòu)、 環(huán)形結(jié)構(gòu)、正三角結(jié)構(gòu)。

在完成畫(huà)面構(gòu)圖后，再開(kāi)始鋪大調(diào)子、畫(huà)物體、填色、上細(xì)節(jié)等， 從整體到局部層層推進(jìn)去做。B 端產(chǎn)品的布局結(jié)構(gòu)也大致是這么回事兒哈。

④交互設(shè)計(jì)：交互設(shè)計(jì)是定義、設(shè)計(jì)人造系統(tǒng)行為的一種設(shè)計(jì)。

具體怎么回事兒呢？假設(shè)你要分別進(jìn)入兩個(gè)房間拿東西，兩個(gè)房間均黑乎乎的，現(xiàn)在你需要打開(kāi)每個(gè)房間的燈，才能拿到東西。其中 A 房間的燈開(kāi)關(guān)就在門(mén)口，你按一下就可以打開(kāi)，但 B 房間的燈開(kāi)關(guān)在屋子深處，且在墻壁較上方，很難夠著，并且你需要將開(kāi)關(guān)連續(xù)按三下才能打開(kāi)燈。

聽(tīng)下來(lái)，你覺(jué)得哪個(gè)房間的燈開(kāi)關(guān)交互好呢?

我想你心中自有答案。

那么，今天，我將重點(diǎn)和你分享交互設(shè)計(jì)，這是一件有趣的事兒。

為什么說(shuō)交互設(shè)計(jì)很有趣呢，咱們來(lái)看看這個(gè)例子。

這是我在網(wǎng)上找的一張圖——這是一個(gè)公園的場(chǎng)景，設(shè)計(jì)師規(guī)劃了用戶(hù)行走的路徑，可是，在用戶(hù)真正行走的過(guò)程中，并沒(méi)有按照設(shè)計(jì)師原本規(guī)劃的路徑來(lái)，而是自己開(kāi)辟了一條小道，這是為什么呢？我想，一個(gè)很重要原因就是：設(shè)計(jì)師原先的設(shè)計(jì)，不符合用戶(hù)模式。

再看這個(gè)例子。這是一個(gè)蘋(píng)果手機(jī)接聽(tīng)電話(huà)的交互方式。你發(fā)現(xiàn)沒(méi)，竟然蘋(píng)果有兩種接聽(tīng)電話(huà)的交互方式，這是怎么回事呢？

原來(lái)啊，蘋(píng)果考慮到了用戶(hù)接聽(tīng)的場(chǎng)景。當(dāng)用戶(hù)將手機(jī)放在口袋里面時(shí)，如果有了來(lái)電，那么很容易誤觸，所以采用了左圖滑動(dòng)接聽(tīng)的方式。而手機(jī)放在桌面的時(shí)候，就不存在誤觸，那么就可以通過(guò)快速點(diǎn)擊的方式接聽(tīng)（右圖）。這就是蘋(píng)果在交互上考慮得非常細(xì)致，符合用戶(hù)的心理預(yù)期。這個(gè)交互方式，用戶(hù)的認(rèn)可度還是很高的。

所以，我們想要把交互設(shè)計(jì)好，可以從以下幾個(gè)方面展開(kāi)：

由面到點(diǎn)、符合用戶(hù)常識(shí)、不干擾用戶(hù)、直觀(guān)性、交互規(guī)則統(tǒng)一、一致性、狀態(tài)可見(jiàn)、環(huán)境貼切、用戶(hù)可控、防錯(cuò)容錯(cuò)、易取原則、靈活高效、易掃原則、容錯(cuò)原則、幫助原則

那我們一個(gè)個(gè)展開(kāi)吧。

1. 由面到點(diǎn)：

是指逐層打開(kāi)去設(shè)計(jì)，依次是頁(yè)面間交互、模塊間交互、組件間交互、組件內(nèi)交互、微交互。如果反著來(lái)設(shè)計(jì)交互，會(huì)讓我們思緒凌亂，提升不了根本性的用戶(hù)體驗(yàn)。但如果本次就是做微交互的，那么另說(shuō)。

2. 符合用戶(hù)常識(shí)：

基于用戶(hù)經(jīng)驗(yàn)、觀(guān)察、智力和直覺(jué)的設(shè)計(jì)方式，不要違背用戶(hù)的經(jīng)驗(yàn)和常識(shí)。比如，大部分用戶(hù)都習(xí)慣于點(diǎn)擊一下觸發(fā)某事件，而你的交互設(shè)計(jì)是點(diǎn)擊三下，那么就和用戶(hù)習(xí)慣違背了，這就會(huì)讓用戶(hù)抓狂和吐槽。

3. 不干擾用戶(hù)：

不干擾用戶(hù)是指我們不要設(shè)計(jì)一些過(guò)度的交互來(lái)影響用戶(hù)正常的操作。例如，頻繁使用彈窗設(shè)計(jì)，打斷用戶(hù)當(dāng)前操作流程；再例如，在不該加微交互的地方加了各種微交互， 導(dǎo)致用戶(hù)無(wú)法將視線(xiàn)定位在重要數(shù)據(jù)上，總被無(wú)效交互干擾。

4. 直觀(guān)性：

B 端產(chǎn)品交互設(shè)計(jì)要以直觀(guān)為主，盡量避免使用隱藏式交互，并不是說(shuō)完全不能用， 但要盡可能少用。比如需要通過(guò)鼠標(biāo) hover 上去才出現(xiàn)的功能就屬于隱藏式交互。

5. 交互規(guī)則統(tǒng)一：

交互規(guī)則統(tǒng)一是指依據(jù)我們所支持的 B 端產(chǎn)品實(shí)際情況，制定一些交互上的通用規(guī)則，避免同一個(gè)功能，又重新衍生一個(gè)新的交互。

6. 一致性：

一致性原則的范圍比較廣，一般我們從單個(gè)產(chǎn)品內(nèi)部來(lái)說(shuō)，一致性包括：文案描述的一致性、色彩的一致性、大小的一致性、反饋的一致性、操作的一致性等。一致性可以讓產(chǎn)品看起來(lái)更加專(zhuān)業(yè)，讓用戶(hù)體驗(yàn)更加舒適。

7. 狀態(tài)可見(jiàn)：

狀態(tài)可見(jiàn)原則分為靜態(tài)和動(dòng)態(tài)兩種。

• 靜態(tài)：用戶(hù)通過(guò)看界面就明確地知道自己所處的位置，及處于何種狀態(tài)。
• 動(dòng)態(tài)：用戶(hù)在進(jìn)行界面操作的時(shí)候，如刪除、新增等，系統(tǒng)應(yīng)該即刻給予用戶(hù)反饋，讓用戶(hù)知道自己的操作是有效的，目前處于何種狀態(tài)。

8. 環(huán)境貼切：

環(huán)境貼切原則是指界面上內(nèi)容的展現(xiàn)和表達(dá)，盡可能地貼近用戶(hù)所在的環(huán)境，從生活中來(lái)到生活中去，使其貼近用戶(hù)的行為和習(xí)慣，這樣可以減少用戶(hù)的學(xué)習(xí)成本，提高產(chǎn)品的易用性。

9. 用戶(hù)可控：

用戶(hù)可控原則是指用戶(hù)對(duì)自己操作了的事情，可以撤銷(xiāo)或重做。比如釘釘發(fā)送的消息可以被撤回，發(fā)送出去的郵件可以被撤回。

10. 防錯(cuò)原則：

防錯(cuò)原則是指設(shè)置防錯(cuò)機(jī)制，防止用戶(hù)在界面操作中犯錯(cuò)，它有二類(lèi)：一是在用戶(hù)操作之前，就要防止用戶(hù)犯錯(cuò)，這個(gè)在交互體驗(yàn)上是最好的；二是在用戶(hù)操作過(guò)程中，設(shè)立有防錯(cuò)機(jī)制。

11. 易取原則：

有的小伙伴在設(shè)計(jì)界面的時(shí)候，經(jīng)常用一些較為隱藏的交互方式，或者把一些關(guān)鍵的功能隱藏起來(lái)，讓用戶(hù)通過(guò)在界面上劃劃、搜搜去取得。這固然把我們的交互技能用出來(lái)了，但這對(duì)用戶(hù)不友好。用戶(hù)喜歡的是直接、容易獲得，而不是隱藏。我們應(yīng)該盡量減少用戶(hù)的記憶負(fù)擔(dān)，將操作和內(nèi)容明明白白的展現(xiàn)給用戶(hù)。

12. 靈活高效：

現(xiàn)在，大家的時(shí)間都很寶貴，只有靈活高效的產(chǎn)品才能深得用戶(hù)的喜愛(ài)。頁(yè)面加載速度夠不夠快，不夠快有提示嗎？新的產(chǎn)品好不好理解和快速上手？功能會(huì)不會(huì)讓用戶(hù)難以理解，是不是專(zhuān)業(yè)術(shù)語(yǔ)要給予說(shuō)明和提示？……一個(gè)高效靈活的產(chǎn)品是以上諸多因素影響的。

13. 易掃原則：

頁(yè)面視覺(jué)設(shè)計(jì)需要層次，真正的目的不僅僅是為了好看，更是為了讓用戶(hù)在繁雜的信息中迅速獲取重要的信息。比如重要的功能是否突出？重要的內(nèi)容是否夠明顯？弱化和剔除不重要信息，突出重點(diǎn)，能讓用戶(hù)心情愉悅。

14. 容錯(cuò)原則：

用戶(hù)每次使用界面功能，不僅希望界面操作減少出錯(cuò)頻率，也很希望人機(jī)交互是有溫度的。當(dāng)用戶(hù)操作出現(xiàn)問(wèn)題的時(shí)候，界面給出除了“錯(cuò)誤”兩個(gè)大字以外的信息，比如能告訴他們哪里錯(cuò)了，接下來(lái)用戶(hù)該如何做，則會(huì)更好。

15. 幫助原則：

我們每次設(shè)計(jì)產(chǎn)品，要考慮到產(chǎn)品本身未必能準(zhǔn)確的表達(dá)出產(chǎn)品經(jīng)理要表達(dá)的意思。用戶(hù)在使用過(guò)程中，也可能會(huì)出現(xiàn)疑問(wèn)。這時(shí)候用戶(hù)該怎么辦呢？我們?nèi)绻芴崆翱紤]到應(yīng)對(duì)方案，那么對(duì)于用戶(hù)來(lái)說(shuō)再好不過(guò)了。

比如有幫助文檔、比如給予即時(shí)提示和反饋、比如貼上客服電話(huà)、比如有 24 小時(shí)智能語(yǔ)音助手等。當(dāng)然，最好的還是無(wú)需提示用戶(hù)就懂啦。

好啦，15 條好的交互設(shè)計(jì)原則講完啦，你對(duì)交互有沒(méi)有了更加深層次的理解呢。你可以在實(shí)際的產(chǎn)品設(shè)計(jì)中，去針對(duì)性的使用，鞏固自己的理解。

如果你對(duì) B 端體驗(yàn)設(shè)計(jì)有興趣，或者想系統(tǒng)性提升你所負(fù)責(zé)產(chǎn)品的用戶(hù)體驗(yàn)，可以夠買(mǎi)我的新書(shū)《B 端體驗(yàn)設(shè)計(jì)：企業(yè)級(jí)視角的系統(tǒng)化方法》一書(shū)。書(shū)中用我的親身經(jīng)歷講解了如何做好 B 端體驗(yàn)設(shè)計(jì)，很多公司也買(mǎi)了去讓設(shè)計(jì)師與產(chǎn)品經(jīng)理學(xué)習(xí)。

最后的話(huà)

最后，我想說(shuō)說(shuō)自己這些年在一線(xiàn)做交互的小思考。

交互，是一件很有意思的是事情，它可以給我們的工作帶來(lái)美好的感覺(jué)，也能讓我們陷入自我懷疑的狀況。

當(dāng)一個(gè)交互的優(yōu)化，帶來(lái)用戶(hù)和團(tuán)隊(duì)的點(diǎn)贊時(shí)，那種感覺(jué)太棒了。

當(dāng)一個(gè)需求很復(fù)雜，交互特別難做的時(shí)候，就常常讓我覺(jué)得自己怎么搞不定它，到底要怎么辦（特別是臨近必須要定稿了）。

然后我發(fā)還發(fā)現(xiàn)，交互這東西和每個(gè)人的習(xí)慣有一定關(guān)系。前些日子我們討論一個(gè)很簡(jiǎn)單的表格數(shù)據(jù)呈現(xiàn)交互，就分成了兩派，一派喜歡翻頁(yè)器，一派喜歡滾動(dòng)加載。

而對(duì)我們來(lái)說(shuō)，這兩種交互都很常見(jiàn)，此時(shí)，要怎么取舍，就不是簡(jiǎn)單的二選一了，而是我們需要對(duì)現(xiàn)有業(yè)務(wù)場(chǎng)景有深刻地理解。

交互，學(xué)起來(lái)不難，理論和方法現(xiàn)在網(wǎng)上一搜一大把，但真正用到產(chǎn)品中，提升產(chǎn)品價(jià)值，用戶(hù)滿(mǎn)意度，就不簡(jiǎn)單了。

下篇文章，我想分享下，這些年我做交互的一些實(shí)際心得，那些踩過(guò)的坑，后來(lái)都怎么樣了。作為設(shè)計(jì)師做交互和作為產(chǎn)品經(jīng)理做交互的區(qū)別在哪里。

作者：知果日記