產品設計體驗 | 探索好的產品的設計祕笈！

語言: CN / TW / HK

時間 2022-09-25 14:25:29 UI中國

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

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

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

產品：飛書管理後台-表單

設計思考：

在眾多左對齊表單佈局設計的後台管理中，為何飛書獨樹一幟，採用居中佈局樣式？單從設計角度，比如小鵝通，信息全集中在左邊，感覺視覺有點失衡。而類似飛書的居中設計，視覺會更平衡。但是在設計中，首先人的視覺動線遵循F模型，同時根據行業相關信息可讀性研究，眼動舒適角度為30度，都説明在表單的設計中我們不用過度的追求視覺平衡。

為什麼飛書採用居中佈局設計？其實仔細想想也是可以理解，設置類表單，數據項較少，相對比較簡單，使用居中設計可以讓用户更聚焦。

而其他大部分的表單設計，比如CRM、ERP、雲產品、OA、項目研發、文檔產、HR、BI等系統產品的錄入類表單均採用的視覺偏左的設計方式，不管表單拓展多複雜的信息，都不會影響整體的一致性。

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

設計思考：

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

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

設計思考：

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

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

設計思考：

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

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

設計思考：

新增客户表單採用雙欄佈局，同時用帶豎線的小標題對錶單進行分組，操作按鈕固定懸浮與底部。

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

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

設計思考：

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

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

常規12px字號實際識別上會相對困難的，那為什麼有些平台會採用呢？

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

產品：抖音電商羅盤-後台管理-達人優選篩選

設計思考：

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

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

產品：飛書管理後台-表格

設計思考：

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

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

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