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

語言: CN / TW / HK

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

做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字號。

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

設計思考:

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

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

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

設計思考:

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

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

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

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

設計思考:

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

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

產品:神策資料-資料看板-表單設定

設計思考:

在一些web端的某些特定的場景下,可以通過視覺化展示設計師幫助使用者理解資訊,例如:神策資料的表單設定頁面,圖表型別和視窗尺寸,採用視覺化+文字的設計,藉助圖片視覺化提示,便於使用者更好的理解資訊,增加可用性的同時,也提高了使用者的填寫效率。

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

寫在最後

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

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

最後,我準備了一些常用的設計素材送給大家,需要的話免費拿走。獲取方式:老規矩後臺,傳送文字“大廠設計規範”“B端優秀介面”,就可以獲取了~

願你不驚不喜,不卑不亢;清風徐來,花自盛開。我們下篇再見~

Powered by Froala Editor