起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識史上最全B端產品的交互規范來了，建議收藏！
交互規范有效地規定了產品如何與用戶進行交互的規則和標準，這篇文章里，作者便梳理了B端產品的交互規范，一起來看看，或許會對產品經理、產品開發人員、交互設計師等人群有所幫助。
序言
從業B端產品7年+，大大小小公司對交互規范有著不同的要求，但是萬變不離其宗，交互總有其底層規范要求，那么接下來跟大家詳細說明一下交互規范細則，超級詳細的交互規范來啦！
WHAT：交互規范是什么？
產品交互規范，也稱為界面交互規范或用戶界面規范，是一套規定產品如何與用戶進行交互的規則和標準。它包括設計元素的布局、動作反饋，以及對產品的使用流程和功能邏輯等各個方面的設定和控制。
交互規范重點在于人機交互的友好性和流暢性，用起來順手且符合商業目的就是交互規范最好的詮釋。
WHY：目的及意義
- 提高用戶體驗：好的交互規范能夠幫助用戶更好地了解和使用產品，從而提高用戶體驗。
- 提升開發效率：通過制定交互規范，可以使得設計師和開發者在開發過程中有明確的指導。
- 提升品牌形象：通過統一的交互規范，可以使得品牌的各個產品在交互方式上保持一致，從而提升品牌形象。
WHO：適合哪些讀者
產品經理，產品開發人員，交互設計師，產品UI設計人員。
一、色彩
1. 色彩體系
分成兩個層面：系統級和產品級。
1）系統級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn，螞蟻組件對整體交互規范有著細致且順滑的操作演示。假設公司內部有專門的設計部門，可以設計部門整體定義公司色系以及字體等等。
2）產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。
2. 產品級色彩體系
1）品牌色的應用
品牌色體現產品以及品牌特色，加深使用者對品牌的印象。比如支付寶系列操作均是藍色為主，微信主色調為綠色和白色，抖音是黑色系。
2）功能色
功能色代表了明確的信息以及狀態，比如錯誤提示，失敗提醒，成功提示等等。在一套產品體系下，功能色盡量保持一致，比如新增，刪除等功能按鈕色彩需要跟主題色保持一致。
3. 系統建議
公司重要對外宣傳系統以及內部主系統均使用品牌色，突出公司特色；
另外一個頁面盡量不要超過3種顏色，并且是在同一標準色彩體系內，盡量不要自己去色彩庫隨意選取色彩。
二、字體
1. 字體定義
字體是體系化界面設計中最基本的構成之一。
在中后臺視覺體系中定義字體系統，我們建議從下面四個方面著手考慮：主字體，字階與行高，字重，字體顏色。
2. 主字體
為了保證在多數常用顯示器上的用戶閱讀效率最佳，根據電腦顯示器距離舒適度以及用戶觀感舒適度，確認導航為16px，標題為16px，正文為14px，說明為12px。
3. 字階與行高
字階是指不同尺寸的字體。行高就是一行字的高度，包裝在字體外的邊框盒子的高度。
建議的主要字體為 14，與之對應的行高為 22。其余的字階的選擇可根據具體情況進行自由的定義。建議在一個系統設計中，字階的選擇盡量控制在 3-5 種之間，就跟衣服搭配一樣，顏色不要過多，簡潔舒適為宜，字體字號在一個區間范圍內。
4. 字重
字重為字體的粗細程度，建議用 regular 以及 medium 的兩種字體重量。
5. 字體顏色
黑色為主，正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。
三、對齊
文案類最好為左對齊，數字類最好為右對齊，表單類間距建議8px，文字右對齊，結尾沒有冒號。
四、按鈕
市面上比較主流的為這四種按鈕，主按鈕，線性按鈕，次按鈕和純文字按鈕。具體使用規則和使用場景如何呢？我們應該從哪些方面下手去設計按鈕？下面給大家一一進行解答。
1. 主按鈕
主按鈕為主要的按鈕。引導用戶進行點擊操作，一個按鈕區域最多使用一個主按鈕。
場景應用：可應用于確認、新增、保存等等，你想引導用戶做何操作，就可以把視覺焦點集中在哪個按鈕上。比如退款操作時，商家本質希望用戶不退款，主按鈕為返回或是再想想的按鈕。
需要注意的是不要在同一個表單中使用多個主按鈕，1-2個即可，次按鈕或是線性按鈕多于5個時可以向上折疊收起。
2. 線性按鈕&次按鈕
線性按鈕&次按鈕兩種按鈕均可點擊，但是功能均弱于主按鈕。如果希望引導用戶進行點擊，可以選擇線性按鈕；若希望用戶盡可能少點擊或是不點擊可以選擇次按鈕。
場景應用：一般在大表單頁面批量導入，下載均為次按鈕或是線性按鈕。
3. 純文字按鈕
純文字按鈕就是有顏色的文字按鈕，可進行點擊。
場景應用：一般應用于表單中大面積需要點擊的操作，比如查看，刪除，編輯等等，對表單中每一行進行的操作。
4. 謹慎按鈕
謹慎按鈕用于特殊情況下防止誤操作的按鈕。
場景應用：一般應用于刪除/付款/退款/修改權限/移除等危險操作，大部分都需要再次確認才可以。
5. 按鈕順序
前面介紹了那么多種按鈕以及應用場景，那么按鈕應該如何進行排列，需要遵循何種規則呢？
1）閱讀習慣
大家可以閉著眼睛想一下，正常我們閱讀的習慣是從左到右，從上到下，表單信息閱讀完畢后需要進行操作，最好都放在右上方。
2）相關性原則
讓相關的操作按鈕更相近，比如上一步和下一步，保存和取消，增刪改查，讓這些兄弟按鈕距離挨得更近一些。
五、導航
導航是B端系統的地圖索引，幫助用戶可以順利到達目的地。導航對于B端產品交互而言，是系統之眼，一方面清晰展示系統結構，另一方面幫助用戶快速找到他們想要的信息。好的導航清晰操作順滑，差的導航會讓用戶沒有二次進入的想法，所以好的導航是系統成功的一半。
市面上主流的導航交互為全局導航和頁內導航，好的導航如何進行設計，我們需要選取哪種導航模式？繼續一起探索吧。
1. 全局導航
1）側邊豎向導航
使用規則：
- 適用于企業級產品，尤其是較為復雜且操作較為繁瑣的系統，比如人力系統，CRM系統，ERP系統等等；
- 建議1-3個層級使用，可以承載多個層級；
- 建議6-8以上菜單使用，可以承載多個菜單。
需要特別注意豎向導航的排列順序，較為復雜的企業級系統從上到下一般依次為：
- 首頁（工作臺、駕駛倉）：主要展示整體系統主要功能入口以及一些主要數據，內容信息等等。
- 主要功能菜單：主要展示系統較為重要的功能菜單，比如人力系統展示入職管理，活水管理，離職管理等等。
- 數據統計（數據記錄）：主要展示較為重要的數據統計或是數據記錄，比如客服系統的在線會話記錄，在線會話統計，外呼記錄、外呼統計等等。
- 系統配置：主要展示系統內部的功能配置，權限配置等等，比如人力系統的人員配置，菜單配置等等。
- 消息中心（幫助中心）：主要展示系統內部消息，意見反饋，幫助中心等等，比如發貨系統中連接上下游的發貨信息，數據下載消息通知，服務更新通知等等。
優點：
- 多層級，拓展性較好，可以支持多欄目多菜單；
- 導航為固定形式，用戶在操作和瀏覽時可以快速定位和回到首頁，操作效率高；
- 左側導航可以進行收縮，可擴大頁面寬度。
缺點：
層級入口較多時，用戶下鉆縱深體驗稍差。
2）頂部橫向導航
使用規則：
- 適用于較為簡單的企業級系統或是官網，欄目較少，可以給用戶更好的沉浸式體驗；
- 建議1-3個以內層級使用，可以承載多個層級；
- 建議2-6以內菜單使用，菜單字數需要去適應整體屏幕的寬度；
- 需要特別注意的是橫向菜單從左到右，權重依次減少。
優點：
- 整體頁面排版較為簡單，方便用戶輕便操作；
- 用戶能做沉浸式體驗，體驗感較好。
缺點：
- 承載內容有限，層級拓展性較差；
- 橫向中文或是英文命名需要受整體屏幕寬度的限制。
2. 頁內導航
1）面包屑
面包屑幫助定位菜單以及返回菜單，可以顯示當前頁面的路徑，是比較常用的導航方式。
使用規則：
顯示當前頁面路徑，方便用戶進行返回操作，最好大于等于3個層級進行使用；
2）Tab
使用規則：
較常應用于顯示頁面不同內容構成，比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。
3）步驟條
使用規則：
較常應用于一步步按照某種提示去完成任務，任務有明確的先后順序；步驟一般為1-5步。
結語
產品交互規范的內容模塊還是較多的，希望這篇文章對你的產品交互能力有所提升！另外交互規范是產品架構的基礎的地基，具體樓房蓋成什么樣還需要用心去思考以及借助公司內部UI和UE的力量。
本文由 @月亮漫談 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
文章標題黨實錘，一點交互都沒有。
交互就是人機交互界面，人如何跟機器做觸達以及點擊
同意樓下
交互就是人機交互界面，人如何跟機器做觸達以及點擊
基本上都在寫視覺規范，交互規范的概念都沒摸清楚
1
2
交互就是人機交互界面，人如何跟機器做觸達以及點擊