国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、結(jié)尾

作為一個小改版，也還是包含了很多對業(yè)務(wù)的思考，因?yàn)閷懫饋硖闊?，所以就不想在前面加一大段文字，要是有什么疑問可以在下方留言，我再做出解答?/p>

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

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