2021-9-1 ui設計分享達人
眾所周知，B端產品中的頁面以列表居多，列表的優勢在于能多維度地呈現/沉淀數據項，且可結合常用操作進行管理。之前我們有對通用型的列表做過設計總結“橫向看信息，縱向做類比”，當需要用“復雜”列表承載業務時，B端產品的視覺設計師可以有怎樣的設計思路，以避免遇到以下場景呢？
Step01
了解產品目標與“復雜”的原因
當接到B端產品中的簡單列表要升級為“復雜”列表的需求時，作為B端視覺設計師首先需要了解背后的原因與目標，便于拓展不同維度的思考以提升產品體驗。通過了解業務目標，明晰對業務流程的影響，以及如何與現有業務模塊的連接；通過了解用戶目標，明確業務參與者中用戶層是否變化等。
Step02
理解業務功能組合及使用場景
將基于產品目標拆解的需求，具象成功能組合后，B端視覺設計師需要結合業務與場景，理解其中的“復雜”點，以及發現設計難點。如：業務的流程變化，對應是否有分支增加/順序調換等，功能又是如何體現的；不同的用戶層，關注重點是什么、對應的數據項是哪些，使用方式是否有變化等。
Step03
思考與設計“復雜”列表的界面表達
結合場景理解業務功能后，B端視覺設計師便可開始思考如何設計“復雜”列表，以表現業務的進化，同時讓用戶能輕松地感知到。
1.先構建列表框架，以體現業務的層級
因為框架的確定，有利于構建整個內容的大關系。而框架構建離不開對列表承載的信息層級進行分析，即對數據行之間的關系分析，其中數據行之間的關系大致可分為三種：并列關系、包含關系、父子關系，如下圖所示。
不同的列表框架，其優勢各不相同：
并列關系的列表 - 適合承載類似數據行的集合，是目前B端系統中最常見的通用型列表；
包含關系的列表 - 適合行的數據行差異性較大的組合，弱對比強呈現，如電商網站中的訂單與商品詳情；
父子關系的列表 - 適合數據行相同且層級有區分的樹狀結構列表，對比、呈現層級關系等的拓展性高。
2.分析數據行，提升可讀性
以某家族列表為例，當框架確定之后，通用型的列表即可轉換為可呈現父子關系的列表。
從管理層（大B）的角度，希望通過層級了解到分布與整體情況；普通管理層（中B/小B），希望通過層級和不同維度的數據項，加深對“人”了解；小B/執行人員，通過便捷的操作增加/刪除/查找/修改內容。因此當一個列表要滿足不同用戶層的目標時，
合理刪除 - 增加不同維度的信息后，確認并刪除含義重復/沒有價值的信息，如：刪除含義重復的子女數量列，增加其他維度更重要的信息。
分層組織 - 不同層級，數據組合可有差異，可從統計數據與詳細數據、列的信息相關性組合等角度入手。如：增加統計的家庭成員數據，對其余列進行相關性分組。
適時隱藏 - 附加功能、增加選擇難度等的功能/隱私信息，在用戶需要時出現。如：聯系方式是較為隱私信息，需要時通過hover查看/編輯。
巧妙轉移 - 結合PC端的交互操作，打破靜態頁面呈現，增加“動態”的空間。如下圖：增加橫向空間寬度，以呈現更多信息。
3.用視覺手法優化各元素間的呈現
期望用視覺手法，帶給不同用戶“感官”層面的積極感受。同時減少視覺噪音帶來的影響，讓用戶清晰地了解關注重點。
其中父子關系的列表注意與斑馬紋的搭配使用，因為易削弱層級關系，斑馬紋更適合通用型的列表。
之前有總結視覺細節的設計方法，這里不再贅述，點擊下方圖片即可查看。
Step04
設計回溯，是否達成目標
設計完成后，帶著最初的產品目標再來看設計，是否有達成目標，在信息呈現方面是否更合理，用戶獲取信息是否更便捷等，退一步更能有全局思維。而對內是否可以沉淀設計資產，優化現有的結構或擴充設計規范。
小結：
B端產品中列表是最普遍存在的，而如何將不斷變化 / 復雜的列表設計得更有用，T型思考法（升級版）探索了其中一種，若有其他思路/場景值得思考，歡迎留言討論～
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務