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

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

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

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

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

一、表單居中布局

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

設(shè)計(jì)思考：

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈！（第一期）">

為什么飛書采用居中布局設(shè)計(jì)？其實(shí)仔細(xì)想想也是可以理解，設(shè)置類表單，數(shù)據(jù)項(xiàng)較少，相對(duì)比較簡(jiǎn)單，使用居中設(shè)計(jì)可以讓用戶更聚焦。

而其他大部分的表單設(shè)計(jì)，比如CRM、ERP、云產(chǎn)品、OA、項(xiàng)目研發(fā)、文檔產(chǎn)、HR、BI等系統(tǒng)產(chǎn)品的錄入類表單均采用的視覺(jué)偏左的設(shè)計(jì)方式，不管表單拓展多復(fù)雜的信息，都不會(huì)影響整體的一致性。

"="">二、側(cè)邊欄-導(dǎo)航四級(jí)層級(jí)

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

設(shè)計(jì)思考：

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈！（第一期）">

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

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

設(shè)計(jì)思考：

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

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

設(shè)計(jì)思考：

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

="" src="https://image.woshipm.com/wp-files/2023/04/npEAltndPc4mKgTyK3Ih.png" toc-5"="">五、表單雙欄布局

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

設(shè)計(jì)思考：

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

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

設(shè)計(jì)思考：

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

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

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

="" tx8edrlqzjga24i2nkni.png"="" toc-7"="">七、平鋪矩陣式篩選方式

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

設(shè)計(jì)思考：

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

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

設(shè)計(jì)思考：

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

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈?。ǖ谝黄冢? />

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

設(shè)計(jì)思考：

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

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

"="" alt="產(chǎn)品設(shè)計(jì)體驗(yàn) | 探索好的產(chǎn)品的設(shè)計(jì)秘笈！（第一期）">

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

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

設(shè)計(jì)思考：

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

這個(gè)平臺(tái)很多表單都喜歡用icon的方式來(lái)協(xié)助用戶識(shí)別。

"="">

本文由 @三原設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash ，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。