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