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

優(yōu)化實例分享

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

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

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

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

文章鏈接：

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

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

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

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

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

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

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

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

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

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

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

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

結尾

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

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

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

我們下篇再賤～

B端產品設計課程開課倒計時一個月了，課前預習內容都準備好了，趕緊來變強～詳情請看課程介紹：