產品設計體驗 | 探索好的產品的設計祕笈!
前段時間我在發總結文章的時候,有朋友在後台問我文章中的案例是用的什麼平台的圖,如何能詳細的體驗。
做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
- B端設計指南 - 柵格
- 產品設計體驗 | 探索好的產品的設計祕笈!
- 第264期-朱一冰訪談【中篇】-2022設計之旅30
- 羊了個羊火爆全網,原來自己做個小遊戲這麼簡單!
- 把這個小思路記明白,再也不怕做排行等級類的需求了!
- 字母Logo設計如何簡單又有創意?|案例合集
- 設計祕籍丨如何從0到1設計一個詳情頁?
- B端對齊細節,這次是真的細
- UI面試時被説作品太醜怎麼辦——被懟100次後的經驗總結
- 重陽節營銷看這篇,助力你的創意之路節節登高
- 「羊了個羊」爆火吸金,趣味小遊戲營銷值得學習!
- 產品官網設計方法總結
- 產品體驗日記
- 進度條篇 | 從5方面入手,助你設計出優秀的進度條!
- Arnold 渲染技巧
- 意派Epub360丨國慶將至,企業創意借勢宣傳H5怎麼製作?
- 界面優化實戰
- 企業在做品牌設計創新時應注意遵循的五大規則
- 作為一名設計師我們應該如何設計好一個品牌LOGO
- Axure8.0教程:動態面板左右滑動及展開收起