2022-9-22 博博
本文主要從業務分析、交互體驗和設計規范三個層面進行總結。
與C端不同，B端產品主要圍繞業務為核心展開，面向專業的人員，有固定的業務屬性，我們只有將業務理解透徹，熟悉業務的運作流程，才能在B端設計過程中，輸出良好清晰的設計架構，更好的解決業務問題。因此，設計師的業務分析能力在B端設計中至關重要。進行業務分析可以從以下幾點著手：
我們可以從多方面收集業務相關的信息，包括梳理需求文檔，與業務人員溝通等，來了解行業背景、業務目標、組織架構，理清一些專業名詞等。業務場景理解的越深入透徹，我們才能建立起一個系統性的邏輯思維，對我們接下來的設計脈絡的梳理以及整體設計的把控是越有利的。
我們可以通過繪制業務流程圖，將零散的業務信息通過具象的流程圖清晰地呈現出來，有助于我們宏觀系統的了解整個功能流程，同時也能夠確保業務的標準流程都能夠走通，不會出現邏輯問題及功能場景的缺失。
B端用戶因其崗位角色的不同，使其具有清晰的角色權限。比如普通成員、管理員、超級管理員，分別對應不同的權限，不同的權限背景下，其功能和業務路徑也是不同的。理清角色權限，聚焦當前角色本身的任務流程，避免被無關的信息干擾，可以使我們的業務功能更加清晰，避免冗雜無用功能在不同角色間的穿插，有助于分解信息結構呈現的復雜性。
我們知道，B端設計的核心目標為降本增效，在交互體驗層面可以理解為降低認知成本，提高使用效率。而B端設計的一個顯著特點就是功能、場景復雜，要達到降本增效，需要我們在交互體驗層面上注意以下幾點：
B端注重對頁面的高效操作，因此在設計的過程中要保持簡潔克制，排除過多的干擾元素，聚焦主要功能，弱化或隱藏非必要功能，保證頁面信息呈現輕量化，降低用戶認知負荷。
同時，通過視覺設計，比如顏色、字號、字重、合理排版等，使頁面信息呈現有層次、有重點，能夠合理有效的進行優先級的引導，頁面信息呈現更加清晰有序，降低頁面的復雜性。
設計過程中，遵守設計規范，在視覺與交互上保持一致性至關重要。
一方面保持視覺上的一致性，包括字體、顏色、間距、結構等，能夠使頁面信息呈現嚴謹有序，保證易讀性；另一方面，保持整個系統交互操作的一致性，則可以大大降低用戶的學習成本，同時還能夠提升開發效率。
B端功能交互邏輯復雜，在設計過程中，盡量保持已成標準的用戶操作習慣，尊重用戶已有的認知，保證內容的可理解性，可以增加用戶的熟悉度，降低學習成本。
B端的信息結構復雜，如果將信息完全平鋪呈現，不僅占用頁面空間，還會大大加重用戶的認知負擔。這就需要我們站在用戶的角度，基于用戶的行為路徑，進行信息層級的劃分。
第一，對頁面信息進行梳理，明確主要信息和次要信息，必要信息和非必要信息，將次要信息和非必要信息進行隱藏、收起、刪除等，可以有效聚焦核心內容，避免分散用戶注意力；
第二，對需要展示的主要、必要信息進行分類歸納、信息分組，通過合理的頁面排版布局，使信息結構清晰有序的呈現；
第三，注意層級步驟的拆分，讓用戶逐級獲得信息，路徑清晰，避免過多信息雜亂無序的呈現，增加用戶認知負荷。
首先，我們通過預測用戶行為，在關鍵交互節點增加功能曝光，給予用戶操作建議和提示，可以幫助用戶高效流暢的完成任務目標；其次，對用戶行為進行預測，主動幫助用戶完成一部分操作，比如信息默認值填充等，可以提升用戶體驗，減輕用戶的操作負擔。
B端產品結構功能復雜，有使用學習的過程，如果對B端產品進行大的改版升級，會讓已經熟悉舊版本且已經產生使用習慣的用戶產生一些不適應感。保留舊版本返回入口，讓用戶慢慢習慣過渡到新版本，可以減小用戶學習的壓力，避免因習慣問題影響產品的正常使用，無論是對用戶的接受度還是對我們改版的順利落地都是一種不錯的方式。
B端系統龐大且復雜，建立起統一的設計組件和設計規范至關重要。
組件規范的建立：
第一，能夠保證交互及視覺設計的一致性，提升設計效率和降低用戶學習成本；
第二，能夠提升團隊的協作效率，提高設計還原度，降低對接成本；
第三，組件化設計，可復用性強，能夠提升開發效率，在后期的迭代開發中，也可以進行統一的更新和應用，能夠減少開發工作量，便于維護。
設計規范比較具體，且不同的項目在規范細節方面也會有所不同，下面主要整理了一些比較常涉及且可以通用的規范和組件。
B端系統用戶的主流分辨率為1920、1440和1366，我們在選擇分辨率時，首先確定目標用戶使用場景是否對分辨率有特殊要求，如果沒有特殊的場景分辨率要求，基于上下好適配性，通常會選擇1440的尺寸進行設計。
由于B端業務場景復雜，信息量比較大，通常選用24柵格系統。
考慮結構布局，根據不同的結構布局，給出動態縮放適配方案。常用的布局為：左右布局和上下布局。
左右布局：通常是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。
上下布局：通常是對兩邊留白區域進行最小值的定義，當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。
B端用色講究簡潔克制，使用戶能夠高效聚焦功能內容，Ant Design上面對色彩應用的描述為“色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達的這些原則之上，理性的選擇顏色是關鍵?！被谏适褂玫哪康模珺端用色主要分為主色、功能色和中性色。
主色：通常是品牌色，或者根據用戶群體、產品定位以及使用場景來定義，主要用在主要按鈕、選中狀態、高亮信息、空狀態等。
功能色：代表了明確的信息以及狀態，如成功、錯誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認知。
中性色：主要用于文字、分割線、邊框、背景等。
字體：中文常用字有：Ping Fang SC、微軟雅黑、思源黑體；英文常用字體有：San Francisco UI（SF字體）、Helvetica Neue、Arial。
字號：最小字號不小于12px，常規字號大小一般為14px。輔助文字12px，正文（常規）14px，小標題16px，標題18px、主標題20px，字號的選擇可根據具體情況進行定義。
字重：字重通常選用regular、medium、semibold，分別對應代碼中的400、500、600。
行高：行高設置一般為字號的1.5倍左右，我們也可以采用，字號+8px做行高。
(1)按照基礎樣式分為：主按鈕、次按鈕、虛線按鈕、文本按鈕、鏈接按鈕
(2)定義按鈕的交互狀態：Normal（默認狀態）、Disable（禁用狀態）、Hover（懸停狀態）、Press（點擊狀態）、Loading（加載狀態）
(3)對按鈕進行規范的制定：包括尺寸、圓角、文字、顏色、背景等
表單通常由輸入框、選擇器、單選框、多選框等組成，具有收集、校驗、提交數據的功能。
(1)表單的狀態：設計時，要明確規范表單的三種狀態
默認狀態：即用戶輸入信息之前的狀態；
焦點狀態：即用戶正在輸入信息時的狀態；
反饋狀態：即用戶填寫信息后的校驗狀態。
(2)輸入順序：表單設計時，信息的輸入順序按照先易后難，先必填后選填，先公開信息后隱私信息進行，可以減輕用戶填寫表單的心理壓力。
(3)對齊方式：對齊方式分為三種：頂部對齊、右對齊和左對齊。
對齊方式的選擇，需要根據瀏覽效率、屏幕空間以及標簽長度來實際判斷，做出選擇。
首先，需要明確，瀏覽效率上，頂對齊＞右對齊＞左對齊。
然后結合屏幕空間和標簽長度做判斷：
頂對齊：效率最高，標簽長度可以更靈活一些，但垂直空間占用多；
右對齊：效率次之，文本字數不可控但又不是很多時可使用右對齊；
左對齊：瀏覽時間最長，效率最慢，標簽字數可控或者需要用戶謹慎確認信息時，可使用左對齊。
需要注意的一點是，頂對齊的標簽布局之間要有合適的垂直間距，才能瀏覽舒適，效率更高，通常使用輸入框 50%至 75%的高度作為相鄰輸入框的垂直間距。
(4)校驗反饋：校驗反饋要具有準確性和及時性。
準確性：主要體現在，要給予用戶準確清晰的錯誤原因和解決方案，以及準確的錯誤位置。
及時性：表單填寫時，出現錯誤是難免的，為了避免用戶盲目填寫信息或者出現大面積報錯，可以進行實時的校驗反饋，比如用戶輸入完成鼠標失焦后進行信息校驗，但反饋的前提條件是不打擾到用戶。
需要注意的一點是，成功或者錯誤等的反饋，不能僅用顏色來區分，需要加入明確的圖標和文字來提示，以達到視覺無障礙設計。
(5)標簽與占位符：標簽和占位符都要盡量簡潔，避免文字過多，給用戶造成視覺負擔，信息描述應該準確、直觀且完整。
(6)表單分步：當表單內容多而復雜時，會讓用戶感到煩躁和不知所措，表單分步不僅有利于減輕用戶的填寫負擔，緩解焦慮情緒，還能夠明確了解表單填寫的步驟流程。
(7)數據與默認值填充：在用戶進行信息錄入時，可以通過后臺數據庫進行匹配，自動填寫已知信息，也可以設置合理的默認值，滿足多數人需要的默認選擇，幫助用戶節省時間，快速完成表單填寫。
(8)輸入框寬度與高度設定：輸入框的大小通常對用戶輸入信息的多少有著暗示作用，輸入框尺寸越大，用戶會認為是可以輸入很多字的。因此，并不是所有輸入框寬度一致，就是好的設計，需要根據實際情況，設定輸入框寬度，但是也不能設定太多寬度，寬度太多會使表單視覺效果凌亂，寬度設定要合理適當。
輸入框的寬度是固定的，但是高度可以根據內容進行自適應調整，來保證信息的顯示完整性，給用戶以良好的體驗。
(9)選項便捷性：表單填寫要始終遵循能不填寫就不填寫，能選擇就不要輸入的原則。當選項多于5個時，適合使用下拉框的形式進行展示。當選項內容過多，超過下拉框的高度，用戶篩選比較困難時，可以考慮是否輸入更快，采用輸入的方式。
B端表格的設計本著清晰易讀的原則進行，設計上需要我們注意以下四點：
(1)表格寬度：表格寬度的處理需要考慮自適應問題，主要有三種方式：
a.設定表格的最小寬度，最大寬度不做限制，可以無限延伸，當表格達到最小寬度時，做極限處理；
b.根據需要設定多個等級的最小單元格寬度，當單元格達到最小寬度時，做極限處理；
c.也可以按照表格寬度的百分比，設置單元格寬度，或者固定部分無放大需求的單元格寬度，對剩余單元格按照百分比進行縮放；
(2)極限處理：極限處理主要針對最小寬度，當表格達到最小寬度時，信息展示不全的情況下，常見的處理方式有：文本信息縮略顯示、文本信息換行顯示、橫向滾動顯示。
(3)單元格高度：單元格的高度直接影響表格的高度，信息呈現量，以及閱讀體驗。單元格高度一般在38px~58px之間，高度太大或者太小都不利于閱讀，個人實踐建議高度為字體行高的2.5倍。
(4)對齊方式：為了提升瀏覽效率和數據的對比效率，通常采用文字左對齊，長數字右對齊的方式，空數據使用“-”填充。
總之，做好B端產品的設計，需要我們多思考、多總結，規范與標準不是一成不變的，設計過程中要與業務、產品、前端多溝通，才能夠做出體驗更好的產品。
作者：陳小花兒 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司