探索大廠B端產品設計的細節秘笈!

0 評論 5969 瀏覽 72 收藏 13 分鐘

B端產品有著獨特的使用場景和用戶需求,因此在設計過程中必須考慮很多細節和維度。對于設計人員而言,如何確保產品設計體現精準的需求和出色的用戶體驗,已經成為一個關鍵的問題。在本文中,作者拆解了部分B端產品的設計細節,一起來看。

設計師想要提升設計能力,必不可少的就是體驗優秀產品,從優秀產品設計中吸收好的設計,從而快速提升自我的設計能力,產品思維。

前段時間我在發總結文章的時候,有朋友在后臺問我文章中的案例是用的什么平臺的圖,如何能詳細的體驗。

做B端產品的設計師都知道,因B端產品業務本身非常復雜,很難看不到其他公司的后臺系統,一方面是很多是付費賬號才能看,另一方面沒有數據,唯有深入體驗,才能了解實際業務操作流程及頁面數據情況。

為了督促自己并堅持體驗優秀產品的習慣,我準備定期總結一下自己體驗產品的記錄,希望養成自己習慣的同時,也能給你提供一些設計靈感。

一、表單居中布局

1. 產品:飛書管理后臺-表單

設計思考:

在眾多左對齊表單布局設計的后臺管理中,為何飛書獨樹一幟,采用居中布局樣式?

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<p>為什么飛書采用居中布局設計?其實仔細想想也是可以理解,設置類表單,數據項較少,相對比較簡單,使用居中設計可以讓用戶更聚焦。</p>
<p>而其他大部分的表單設計,比如CRM、ERP、云產品、OA、項目研發、文檔產、HR、BI等系統產品的錄入類表單均采用的視覺偏左的設計方式,不管表單拓展多復雜的信息,都不會影響整體的一致性。</p>
<p><img data-action=二、側邊欄-導航四級層級

產品:銷客CRM-管理網站-側邊欄導航

設計思考:

銷客CRM是一個通過分析、研究企業產品及服務特性,運用網絡營銷為企業提高銷售額的平臺,功能很多,我發現他的側邊欄包含一級、二級、三級、四級,層級關系復雜,這種處理樹形處理方式,可以很好的管理多層級關系,同時又能做到很清晰,負責導航系統的產品是很值得借鑒的。

產品設計體驗 | 探索好的產品的設計秘笈!(第一期)

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

產品:銷客CRM-管理網站-篩選條件

設計思考:

銷客CRM的篩選,可能因為行業屬性,這個行業的篩選需要這種復雜且清晰的處理方式,這種篩選條件復雜且少見,節點清晰,層級關系清晰,排列整潔。既可以滿足自定義的需求,子節點或者添加組合,也可以使用模版。是比較值得學習和研究的復雜篩選組件。

產品設計體驗 | 探索好的產品的設計秘笈!(第一期)

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

產品:銷客CRM-管理網站-表格篩選條件

設計思考:

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<p><img data-action=

五、表單雙欄布局

產品:銷客CRM-管理網站-表單

設計思考:

新增客戶表單采用雙欄布局,同時用帶豎線的小標題對表單進行分組,操作按鈕固定懸浮與底部。

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<h2  id=六、后臺管理-表格文字12px

產品:銷客CRM-管理網站-表格

設計思考:

最近我在處理表格設計的時候發現一個有趣的事情,自己接手的項目表格采用的12px的字體,我們都知道web端常規來說,只有二級或者三級字體會采用12px的字號。那為什么一個成熟的產品會用12px字號呢?

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

常規12px字號實際識別上會相對困難的,那為什么有些平臺會采用呢?

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<p><img data-action=七、平鋪矩陣式篩選方式

產品:抖音電商羅盤-后臺管理-達人優選篩選

設計思考:

抖音電商后臺管理,篩選方式平鋪矩陣式篩選方式基礎增加了步驟,最大程度上放大了平鋪矩陣式篩選方式的優點,可以承載多維的數據信息,避免檢索條件疏漏的可用性問題。

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<h2  id=八、表格的關鍵數據標識

產品:飛書管理后臺-表格

設計思考:

飛書的成員與部門中,對于賬號狀態就是一個關鍵數據的標識,一方面用戶可以快速了解到已經激活的成員,另一方面對于未激活狀態的進行突出展示,同時給予用戶未激活后的再次發送提醒的操作,是對用戶使用的優化提升。

但是,如果將不重要的數據進行標識,例如手機號,那么這將會是一個令人痛苦的設計。

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

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<h2  id=九、有贊表格的批量操作按鈕

產品:有贊-工具后臺-表格-顯性批量操作

設計思考:

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

同時可以滿足表格上方的批量操作和表格底部的批量操作的需求。這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋;相比于隱形的批量操作容易造成記憶負擔,增加學習成本,適合批量操作較低頻的操作,功能不復雜的產品。

產品設計體驗 | 探索好的產品的設計秘笈?。ǖ谝黄冢? /></p>
<h2  id=十、表單可視化設計

產品:神策數據-數據看板-表單設置

設計思考:

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

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

產品設計體驗 | 探索好的產品的設計秘笈!(第一期)

寫在最后

本期的設計體驗日記主要總結了B端產品后臺的設計相關內容,堅持體驗優秀產品,總結設計背后產品和設計的思考,希望能夠提升自我的設計能力及產品思維。

好了,本期分享到此結束,僅為個人角度的體驗總結,希望可以帶給大家更多設計靈感啟發。

本文由 @三原設計 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash ,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!