B端產(chǎn)品有著獨(dú)特的使用場景和用戶需求，因此在設(shè)計過程中必須考慮很多細(xì)節(jié)和維度。對于設(shè)計人員而言，如何確保產(chǎn)品設(shè)計體現(xiàn)精準(zhǔn)的需求和出色的用戶體驗(yàn)，已經(jīng)成為一個關(guān)鍵的問題。在本文中，作者拆解了部分B端產(chǎn)品的設(shè)計細(xì)節(jié)，一起來看。

設(shè)計師想要提升設(shè)計能力，必不可少的就是體驗(yàn)優(yōu)秀產(chǎn)品，從優(yōu)秀產(chǎn)品設(shè)計中吸收好的設(shè)計，從而快速提升自我的設(shè)計能力，產(chǎn)品思維。

前段時間我在發(fā)總結(jié)文章的時候，有朋友在后臺問我文章中的案例是用的什么平臺的圖，如何能詳細(xì)的體驗(yàn)。

做B端產(chǎn)品的設(shè)計師都知道，因B端產(chǎn)品業(yè)務(wù)本身非常復(fù)雜，很難看不到其他公司的后臺系統(tǒng)，一方面是很多是付費(fèi)賬號才能看，另一方面沒有數(shù)據(jù)，唯有深入體驗(yàn)，才能了解實(shí)際業(yè)務(wù)操作流程及頁面數(shù)據(jù)情況。

為了督促自己并堅持體驗(yàn)優(yōu)秀產(chǎn)品的習(xí)慣，我準(zhǔn)備定期總結(jié)一下自己體驗(yàn)產(chǎn)品的記錄，希望養(yǎng)成自己習(xí)慣的同時，也能給你提供一些設(shè)計靈感。

一、表單居中布局

1. 產(chǎn)品：飛書管理后臺-表單

設(shè)計思考：

在眾多左對齊表單布局設(shè)計的后臺管理中，為何飛書獨(dú)樹一幟，采用居中布局樣式？

單從設(shè)計角度，比如小鵝通，信息全集中在左邊，感覺視覺有點(diǎn)失衡。而類似飛書的居中設(shè)計，視覺會更平衡。但是在設(shè)計中，首先人的視覺動線遵循F模型，同時根據(jù)行業(yè)相關(guān)信息可讀性研究，眼動舒適角度為30度，都說明在表單的設(shè)計中我們不用過度的追求視覺平衡。

二、側(cè)邊欄-導(dǎo)航四級層級

產(chǎn)品：銷客CRM-管理網(wǎng)站-側(cè)邊欄導(dǎo)航

設(shè)計思考：

銷客CRM是一個通過分析、研究企業(yè)產(chǎn)品及服務(wù)特性，運(yùn)用網(wǎng)絡(luò)營銷為企業(yè)提高銷售額的平臺，功能很多，我發(fā)現(xiàn)他的側(cè)邊欄包含一級、二級、三級、四級，層級關(guān)系復(fù)雜，這種處理樹形處理方式，可以很好的管理多層級關(guān)系，同時又能做到很清晰，負(fù)責(zé)導(dǎo)航系統(tǒng)的產(chǎn)品是很值得借鑒的。

三、自定義樹形-篩選條件

產(chǎn)品：銷客CRM-管理網(wǎng)站-篩選條件

設(shè)計思考：

銷客CRM的篩選，可能因?yàn)樾袠I(yè)屬性，這個行業(yè)的篩選需要這種復(fù)雜且清晰的處理方式，這種篩選條件復(fù)雜且少見，節(jié)點(diǎn)清晰，層級關(guān)系清晰，排列整潔。既可以滿足自定義的需求，子節(jié)點(diǎn)或者添加組合，也可以使用模版。是比較值得學(xué)習(xí)和研究的復(fù)雜篩選組件。

四、豎向平鋪的表格篩選條件

產(chǎn)品：銷客CRM-管理網(wǎng)站-表格篩選條件

設(shè)計思考：

銷客CRM的表格篩選，因篩選條件多且復(fù)雜，采用平鋪的篩選方式，超出一行的篩選做收回展開處理，整個篩選條件也可以展開收起，同時還有自定義設(shè)置的彈窗設(shè)置，支持默認(rèn)設(shè)置。用戶可控空間大，用戶體驗(yàn)感不錯。值得推薦學(xué)習(xí)。

五、表單雙欄布局

產(chǎn)品：銷客CRM-管理網(wǎng)站-表單

設(shè)計思考：

新增客戶表單采用雙欄布局，同時用帶豎線的小標(biāo)題對表單進(jìn)行分組，操作按鈕固定懸浮與底部。

這里大概猜想一下，面對很多的表單輸入項，又想提高屏效，所以選擇了雙屏布局，同時分組提高識別效率。但是有待考慮的是，表單寬度全部統(tǒng)一是否恰當(dāng)。

六、后臺管理-表格文字12px

產(chǎn)品：銷客CRM-管理網(wǎng)站-表格

設(shè)計思考：

最近我在處理表格設(shè)計的時候發(fā)現(xiàn)一個有趣的事情，自己接手的項目表格采用的12px的字體，我們都知道web端常規(guī)來說，只有二級或者三級字體會采用12px的字號。那為什么一個成熟的產(chǎn)品會用12px字號呢？

基于這個問題，我找了市場上包含后臺管理、CRM、云產(chǎn)品、文檔產(chǎn)品等等十幾個產(chǎn)品一一像素級比對，發(fā)現(xiàn)80%采用的是14px字號，另外20%采用的是12px字號，比如我自己做的產(chǎn)品，比如銷客CRM。

常規(guī)12px字號實(shí)際識別上會相對困難的，那為什么有些平臺會采用呢？

基于我目前產(chǎn)品，咨詢了上下游的工作同事，得出結(jié)論。雖然12px字號小，不便于識別。但是當(dāng)一個產(chǎn)品表格復(fù)雜且內(nèi)容極多的情況，橫屏想要承載更多信息的情況，就可以采用12px字體。當(dāng)然，這種情況極少，我個人還是建議，采用常規(guī)14px字號，部分不重要內(nèi)容，或者二級內(nèi)容采用12px字號。

七、平鋪矩陣式篩選方式

產(chǎn)品：抖音電商羅盤-后臺管理-達(dá)人優(yōu)選篩選

設(shè)計思考：

抖音電商后臺管理，篩選方式平鋪矩陣式篩選方式基礎(chǔ)增加了步驟，最大程度上放大了平鋪矩陣式篩選方式的優(yōu)點(diǎn)，可以承載多維的數(shù)據(jù)信息，避免檢索條件疏漏的可用性問題。

同時還使用了分步驟的引導(dǎo)方式，解決來這種篩選方式大而全可能為用戶帶來繁雜的第一印象，都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時間的缺點(diǎn)，用戶體驗(yàn)優(yōu)化方案很巧妙，值得參考。

八、表格的關(guān)鍵數(shù)據(jù)標(biāo)識

產(chǎn)品：飛書管理后臺-表格

設(shè)計思考：

飛書的成員與部門中，對于賬號狀態(tài)就是一個關(guān)鍵數(shù)據(jù)的標(biāo)識，一方面用戶可以快速了解到已經(jīng)激活的成員，另一方面對于未激活狀態(tài)的進(jìn)行突出展示，同時給予用戶未激活后的再次發(fā)送提醒的操作，是對用戶使用的優(yōu)化提升。

但是，如果將不重要的數(shù)據(jù)進(jìn)行標(biāo)識，例如手機(jī)號，那么這將會是一個令人痛苦的設(shè)計。

用戶在使用表格時，會經(jīng)常去留意一些關(guān)鍵的數(shù)據(jù)。比如數(shù)據(jù)的狀態(tài)、變化的多少…如果在系統(tǒng)中，你能夠很明確知道用戶想要了解的數(shù)據(jù)時，便可在關(guān)鍵數(shù)據(jù)上進(jìn)行標(biāo)識。這樣能夠幫助用戶快速定位到自己想要的信息，減少數(shù)據(jù)尋找所花的時間。但如果你對關(guān)鍵數(shù)據(jù)標(biāo)識出現(xiàn)誤判，這條數(shù)據(jù)便是一條十分干擾的數(shù)據(jù)，因此在這里的設(shè)計，需要慎重考慮。

九、有贊表格的批量操作按鈕

產(chǎn)品：有贊-工具后臺-表格-顯性批量操作

設(shè)計思考：

關(guān)于后臺批量操作按鈕的顯性展示或者隱性展示一直是比較糾結(jié)的話題，有贊的后臺管理采用顯性批量操作按鈕，并且表格上方和下方都包含了批量操作按鈕，再結(jié)合綜合復(fù)雜分頁器，也就能發(fā)現(xiàn)這樣的設(shè)計的合理性。

同時可以滿足表格上方的批量操作和表格底部的批量操作的需求。這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；相比于隱形的批量操作容易造成記憶負(fù)擔(dān)，增加學(xué)習(xí)成本，適合批量操作較低頻的操作，功能不復(fù)雜的產(chǎn)品。

十、表單可視化設(shè)計

產(chǎn)品：神策數(shù)據(jù)-數(shù)據(jù)看板-表單設(shè)置

設(shè)計思考：

在一些web端的某些特定的場景下，可以通過可視化展示設(shè)計師幫助用戶理解信息，例如：神策數(shù)據(jù)的表單設(shè)置頁面，圖表類型和窗口尺寸，采用可視化+文字的設(shè)計，借助圖片可視化提示，便于用戶更好的理解信息，增加可用性的同時，也提高了用戶的填寫效率。

這個平臺很多表單都喜歡用icon的方式來協(xié)助用戶識別。

寫在最后

本期的設(shè)計體驗(yàn)日記主要總結(jié)了B端產(chǎn)品后臺的設(shè)計相關(guān)內(nèi)容，堅持體驗(yàn)優(yōu)秀產(chǎn)品，總結(jié)設(shè)計背后產(chǎn)品和設(shè)計的思考，希望能夠提升自我的設(shè)計能力及產(chǎn)品思維。

好了，本期分享到此結(jié)束，僅為個人角度的體驗(yàn)總結(jié)，希望可以帶給大家更多設(shè)計靈感啟發(fā)。