B端設(shè)計(jì)過(guò)程中，一個(gè)復(fù)雜的列表組件應(yīng)該如何有效優(yōu)化呢？本文以一次B端列表卡片優(yōu)化工作的實(shí)操為例，詳細(xì)講解了這一組件設(shè)計(jì)改版的思路，希望能幫助在B端設(shè)計(jì)方面有類似問(wèn)題的小伙伴在細(xì)節(jié)或框架上提供新的思考角度。推薦關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。

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

一、優(yōu)化實(shí)例分享

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

領(lǐng)導(dǎo)的需求是，需要盡可能的減少單個(gè)列表卡片的高度，在一屏高度內(nèi)放進(jìn)盡可能多的條目，減少頁(yè)面的滾動(dòng)。同時(shí)還要支持比較靈活的字段增加和減少。

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

在一個(gè)有限的空間內(nèi)塞大量的信息，就是關(guān)于體驗(yàn)和信息設(shè)計(jì)的工作了，我們前面分享過(guò)的案例中有說(shuō)過(guò)，完成這種組件或頁(yè)面的設(shè)計(jì)，需要遵循下面的流程。

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

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

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

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

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

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

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

確定好大致的模塊劃分就可以動(dòng)手填字段進(jìn)去，這一步對(duì)順利完成復(fù)雜組件的設(shè)計(jì)至關(guān)重要，不要把希望寄托在找參考上，因?yàn)閯e人組件包含的字段和你的不同。

在這個(gè)版本中，我加入了負(fù)責(zé)人的模塊（最右側(cè)，原來(lái)沒(méi)有），每個(gè)模塊的字段和屬性值向下排列，如果一個(gè)模塊增加新的字段，那么就往下新增行，增加整體的高度，應(yīng)對(duì)字段新增的問(wèn)題。

同時(shí)，初版完成后復(fù)制排列下來(lái)感覺(jué)單卡片高度過(guò)高，所以進(jìn)一步優(yōu)化，壓縮高度的的間距。

確定完框架細(xì)節(jié)以后，就可以開(kāi)始進(jìn)行具體的色彩填充了。在這一步可以盡可能的對(duì)使用場(chǎng)景和信息做思考，比如下方的進(jìn)度，如果整個(gè)訂單已經(jīng)完成了，那么標(biāo)識(shí)原有進(jìn)度和高亮就沒(méi)有實(shí)際的意義，將它們合并置灰還能減少整個(gè)頁(yè)面的無(wú)效信息量。

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

二、結(jié)尾

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

同時(shí)也要強(qiáng)調(diào)，即使是一個(gè)組件的設(shè)計(jì)，也是有必要進(jìn)行具體分析再動(dòng)手的，要用邏輯性去應(yīng)對(duì)復(fù)雜，這樣你才能不擔(dān)心自己的設(shè)計(jì)稿不對(duì)，因?yàn)槿魏螁?wèn)題根源上的錯(cuò)誤，都可以快速被定位并修改。

而不是純靠胡亂找參考試錯(cuò)，磨到需求方?jīng)]耐心了勉強(qiáng)同意過(guò)稿！