常見的B端卡片組件，應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗？在本篇文章里，作者就結合具體案例，對B端卡片組件設計進行了技巧拆解，一起來看看吧，或許會對你有所啟發。

B端設計的過程中，并不是所有元素抄一抄別人的，從組件庫里引用下就完事了，而是要經過具體組織并設計。尤其在一些特殊的組件中，是可以去表現設計水平，提升項目整體視覺質量的，而不是讓它們看起來非常的枯燥乏味。

這次，我們的改版主要就圍繞在B端常見的卡片組件中，通過3個以前提交過的作業，來分享如何設計B端的卡片。

三個改版案例我們都遵循相同的設計方式和順序：

• 分析組件包含字段
• 確認組件內部框架
• 完成字段權重表現
• 完成組建視覺樣式

一、卡片案例1

在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內容的權重沒有得到有效的表現，訂單標識只有一個的情況反復強調對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。

所以，重構它的結構時，重點突出標題弱化標簽，將卡片拆分成標題、信息、操作三個欄，讓信息的呈現更簡潔直觀。

然后再具體優化內容和細節，對重要信息突出，固定的標題字段弱化。

最后，再根據主色的需要填充色彩進去即可。

二、卡片案例2

這個案例也是設計得比較有問題的，但是忽略掉全局組件的粗糙，卡片部分的設計也是很多作品案例中的常見問題，要素過多，沒有主次，在列表化的展示中，根本沒辦法很好的識別相關的內容和關注到有效的信息，會被淹沒在繁復的字段內容中。

所以，我們用相同的方法作下區分，將內容分為上中下三個欄。

然后再對字段做權重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業名和數據是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標。

最后，再完成樣式的補全即可，只在星級和用戶職位上增加色彩。

三、卡片案例3

問題和前面還是一樣，內容很零碎，所有要素都強調，于是就沒有重點。所以，下面對它們進行改版，這次因為數據項不再是重點，卡片的目標不是用來查看數據而是用于檢索進入到下級頁面的，所以只分了兩欄。

然后，再對權重進行強調，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。

最后，再完成相應色彩的添加和圖片的填充，完成最終的視覺效果。

這三個改版都用了很簡單的修改方式，通過理解卡片的作用、字段信息，對它進行信息分區，然后填入相關的字段并做出權重劃分，最后再用顏色為不同的要素加權。

只要掌握這樣的設計思路，做絕大多數卡片都不會有阻力，只會糾結于應該用哪套樣式更合適。

結尾

因為時間關系只做了很簡單的調整，沒去做多套大跨度的樣式變更，同時套進原圖環境沒做整體的處理，所以還有很多升級優化的空間，理解這個感覺即可。