B端設計過程中，一個復雜的列表組件應該如何有效優化呢？本文以一次B端列表卡片優化工作的實操為例，詳細講解了這一組件設計改版的思路，希望能幫助在B端設計方面有類似問題的小伙伴在細節或框架上提供新的思考角度。推薦關注產品設計的小伙伴閱讀。

今天正好在新一期B端學員群中，遇到一個學員的咨詢，關于一個復雜的列表組件應該如何有效優化的問題。趁今天有時間就順手自己做了一遍優化，在這邊把內容和過程記錄下來，供大家參考。

一、優化實例分享

首先我們來看需要優化的原圖，是一個跨境物流的訂單記錄列表，每個卡片記錄一個物流訂單的信息。

領導的需求是，需要盡可能的減少單個列表卡片的高度，在一屏高度內放進盡可能多的條目，減少頁面的滾動。同時還要支持比較靈活的字段增加和減少。

比如在新增需求中，就還有一個操作員分類的信息要添加進來，里面包含業務員、客服、財務三個子分類，每個子分類下還會包含1到10+ 個的人名……

在一個有限的空間內塞大量的信息，就是關于體驗和信息設計的工作了，我們前面分享過的案例中有說過，完成這種組件或頁面的設計，需要遵循下面的流程。

所以，在第一步我首先要理解出現在畫面中的不同字段是什么意思，包含哪些內部邏輯。如果通過自己分析或者搜索找不到的，就要直接問懂的人。

了解完基本的信息，就要整理基礎的信息地圖，把所有會出現的字段全部羅列出來。

只列這些內容是不夠的，原來的卡片內容分布是非?；靵y，且缺乏邏輯的，進度在最頂部，時間在左下角，依據進度點亮的按鈕在右下角，目的倉庫是客戶信息的一部分，但中間還插入了本地倉庫，所以想提升該卡片的信息檢索效率，就肯定要根據字段的內連關系進行重新布局。

所以，要根據前面分析中對這些字段的認識，進行邏輯或業務上的歸類，確保信息能以結構化的形式展現，方便后面做近一步的布局。

有個這個分類以后，就可以開始做具體的原型規劃了。首先創建一個1440畫布和一個簡易的長條卡片，然后做一個最基本的橫向分割，將卡片分成訂單信息、進度兩個部分。

這里等于做出第一步優化，原設計中的卡片切分成了三行，一方面造成空間浪費，另一方面對于縱向列表而言切分了那么子行對視線的干擾太大，所以我要盡可能優化行數。

然后， 再根據前面整理的分類，做進一步的調整。

確定好大致的模塊劃分就可以動手填字段進去，這一步對順利完成復雜組件的設計至關重要，不要把希望寄托在找參考上，因為別人組件包含的字段和你的不同。

在這個版本中，我加入了負責人的模塊（最右側，原來沒有），每個模塊的字段和屬性值向下排列，如果一個模塊增加新的字段，那么就往下新增行，增加整體的高度，應對字段新增的問題。

同時，初版完成后復制排列下來感覺單卡片高度過高，所以進一步優化，壓縮高度的的間距。

確定完框架細節以后，就可以開始進行具體的色彩填充了。在這一步可以盡可能的對使用場景和信息做思考，比如下方的進度，如果整個訂單已經完成了，那么標識原有進度和高亮就沒有實際的意義，將它們合并置灰還能減少整個頁面的無效信息量。

所以到這一步，優化就基本做完了，時間關系，更細節的一些內容和狀態就沒去表現，但整個改版的目標就是圍繞在優化信息處理和拓展性的適配上，下面是原圖和改版前后的對比。你們可以自己感受下優化前后的差異和閱讀效率是否得到提升。

二、結尾

作為一個小改版，也還是包含了很多對業務的思考，因為寫起來太麻煩，所以就不想在前面加一大段文字，要是有什么疑問可以在下方留言，我再做出解答。

同時也要強調，即使是一個組件的設計，也是有必要進行具體分析再動手的，要用邏輯性去應對復雜，這樣你才能不擔心自己的設計稿不對，因為任何問題根源上的錯誤，都可以快速被定位并修改。

而不是純靠胡亂找參考試錯，磨到需求方沒耐心了勉強同意過稿！