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