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

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

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

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

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

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

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

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

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

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

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

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

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

在完成畫面構(gòu)圖后，再開始鋪大調(diào)子、畫物體、填色、上細(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)在你需要打開每個(gè)房間的燈，才能拿到東西。其中 A 房間的燈開關(guān)就在門口，你按一下就可以打開，但 B 房間的燈開關(guān)在屋子深處，且在墻壁較上方，很難夠著，并且你需要將開關(guān)連續(xù)按三下才能打開燈。

聽下來，你覺得哪個(gè)房間的燈開關(guān)交互好呢?

我想你心中自有答案。

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

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

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

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

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

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

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

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

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

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

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

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

3. 不干擾用戶：

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

4. 直觀性：

B 端產(chǎn)品交互設(shè)計(jì)要以直觀為主，盡量避免使用隱藏式交互，并不是說完全不能用， 但要盡可能少用。比如需要通過鼠標(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)部來說，一致性包括：文案描述的一致性、色彩的一致性、大小的一致性、反饋的一致性、操作的一致性等。一致性可以讓產(chǎn)品看起來更加專業(yè)，讓用戶體驗(yàn)更加舒適。

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

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

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

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

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

9. 用戶可控：

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

10. 防錯(cuò)原則：

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

11. 易取原則：

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

12. 靈活高效：

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

13. 易掃原則：

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

14. 容錯(cuò)原則：

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

15. 幫助原則：

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

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

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

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

最后的話

最后，我想說說自己這些年在一線做交互的小思考。

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

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

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

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

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

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

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

歡迎關(guān)注作者微信公眾號(hào)：「知果日記」