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

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

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

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

• 分析組件包含字段
• 確認(rèn)組件內(nèi)部框架
• 完成字段權(quán)重表現(xiàn)
• 完成組建視覺樣式

一、卡片案例1

在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內(nèi)容的權(quán)重沒有得到有效的表現(xiàn)，訂單標(biāo)識只有一個的情況反復(fù)強(qiáng)調(diào)對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。

所以，重構(gòu)它的結(jié)構(gòu)時，重點突出標(biāo)題弱化標(biāo)簽，將卡片拆分成標(biāo)題、信息、操作三個欄，讓信息的呈現(xiàn)更簡潔直觀。

然后再具體優(yōu)化內(nèi)容和細(xì)節(jié)，對重要信息突出，固定的標(biāo)題字段弱化。

最后，再根據(jù)主色的需要填充色彩進(jìn)去即可。

二、卡片案例2

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

所以，我們用相同的方法作下區(qū)分，將內(nèi)容分為上中下三個欄。

然后再對字段做權(quán)重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業(yè)名和數(shù)據(jù)是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標(biāo)。

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

三、卡片案例3

問題和前面還是一樣，內(nèi)容很零碎，所有要素都強(qiáng)調(diào)，于是就沒有重點。所以，下面對它們進(jìn)行改版，這次因為數(shù)據(jù)項不再是重點，卡片的目標(biāo)不是用來查看數(shù)據(jù)而是用于檢索進(jìn)入到下級頁面的，所以只分了兩欄。

然后，再對權(quán)重進(jìn)行強(qiáng)調(diào)，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。

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

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

只要掌握這樣的設(shè)計思路，做絕大多數(shù)卡片都不會有阻力，只會糾結(jié)于應(yīng)該用哪套樣式更合適。

結(jié)尾

因為時間關(guān)系只做了很簡單的調(diào)整，沒去做多套大跨度的樣式變更，同時套進(jìn)原圖環(huán)境沒做整體的處理，所以還有很多升級優(yōu)化的空間，理解這個感覺即可。