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

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

今天啊，就和你分享下原型設計中的交互設計吧。

我們先來看看原型設計的定義。

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

這里主要從 4 部分展開，包括信息架構、任務流程、布局結構、交互設計。

每一個部分作用分別是：

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

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

②任務流程：設計任務流程，即設計用戶行為動線。任務流程設計的好，會極大提升用戶的操作效率，并達到產(chǎn)品設計的目的。

這就好比宜家的購物路徑設計，讓大部分消費者進入宜家，就會按照宜家的動線設計，被默默引導著走完全程，并購買了商品。

③布局結構：布局結構是指對 B 端產(chǎn)品框架層面和頁面層面的布局設計。

我以前是學美術出身，老師告訴我們在動筆畫具體的物體前，需要先對畫面進行構圖， 也就是經(jīng)營畫面內容大致呈現(xiàn)的位置，是上下結構，還是左右結構，亦或者是對角線結構、 環(huán)形結構、正三角結構。

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

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

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

聽下來，你覺得哪個房間的燈開關交互好呢?

我想你心中自有答案。

那么，今天，我將重點和你分享交互設計，這是一件有趣的事兒。

為什么說交互設計很有趣呢，咱們來看看這個例子。

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

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

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

所以，我們想要把交互設計好，可以從以下幾個方面展開：

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

那我們一個個展開吧。

1. 由面到點：

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

2. 符合用戶常識：

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

3. 不干擾用戶：

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

4. 直觀性：

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

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

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

6. 一致性：

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

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

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

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

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

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

9. 用戶可控：

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

10. 防錯原則：

防錯原則是指設置防錯機制，防止用戶在界面操作中犯錯，它有二類：一是在用戶操作之前，就要防止用戶犯錯，這個在交互體驗上是最好的；二是在用戶操作過程中，設立有防錯機制。

11. 易取原則：

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

12. 靈活高效：

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

13. 易掃原則：

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

14. 容錯原則：

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

15. 幫助原則：

我們每次設計產(chǎn)品，要考慮到產(chǎn)品本身未必能準確的表達出產(chǎn)品經(jīng)理要表達的意思。用戶在使用過程中，也可能會出現(xiàn)疑問。這時候用戶該怎么辦呢？我們如果能提前考慮到應對方案，那么對于用戶來說再好不過了。

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

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

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

最后的話

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

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

當一個交互的優(yōu)化，帶來用戶和團隊的點贊時，那種感覺太棒了。

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

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

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

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

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

作者：知果日記