2025-3-26 杰睿
常見的B端卡片組件，應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗？在本篇文章里，作者就結(jié)合具體案例，對B端卡片組件設計進行了技巧拆解，一起來看看吧，或許會對你有所啟發(fā)。
B端設計的過程中，并不是所有元素抄一抄別人的，從組件庫里引用下就完事了，而是要經(jīng)過具體組織并設計。尤其在一些特殊的組件中，是可以去表現(xiàn)設計水平，提升項目整體視覺質(zhì)量的，而不是讓它們看起來非常的枯燥乏味。
這次，我們的改版主要就圍繞在B端常見的卡片組件中，通過3個以前提交過的作業(yè)，來分享如何設計B端的卡片。
三個改版案例我們都遵循相同的設計方式和順序：
在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內(nèi)容的權(quán)重沒有得到有效的表現(xiàn)，訂單標識只有一個的情況反復強調(diào)對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。
所以，重構(gòu)它的結(jié)構(gòu)時，重點突出標題弱化標簽，將卡片拆分成標題、信息、操作三個欄，讓信息的呈現(xiàn)更簡潔直觀。
然后再具體優(yōu)化內(nèi)容和細節(jié)，對重要信息突出，固定的標題字段弱化。
最后，再根據(jù)主色的需要填充色彩進去即可。
這個案例也是設計得比較有問題的，但是忽略掉全局組件的粗糙，卡片部分的設計也是很多作品案例中的常見問題，要素過多，沒有主次，在列表化的展示中，根本沒辦法很好的識別相關(guān)的內(nèi)容和關(guān)注到有效的信息，會被淹沒在繁復的字段內(nèi)容中。
所以，我們用相同的方法作下區(qū)分，將內(nèi)容分為上中下三個欄。
然后再對字段做權(quán)重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業(yè)名和數(shù)據(jù)是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標。
最后，再完成樣式的補全即可，只在星級和用戶職位上增加色彩。
問題和前面還是一樣，內(nèi)容很零碎，所有要素都強調(diào)，于是就沒有重點。所以，下面對它們進行改版，這次因為數(shù)據(jù)項不再是重點，卡片的目標不是用來查看數(shù)據(jù)而是用于檢索進入到下級頁面的，所以只分了兩欄。
然后，再對權(quán)重進行強調(diào)，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。
最后，再完成相應色彩的添加和圖片的填充，完成最終的視覺效果。
這三個改版都用了很簡單的修改方式，通過理解卡片的作用、字段信息，對它進行信息分區(qū)，然后填入相關(guān)的字段并做出權(quán)重劃分，最后再用顏色為不同的要素加權(quán)。
只要掌握這樣的設計思路，做絕大多數(shù)卡片都不會有阻力，只會糾結(jié)于應該用哪套樣式更合適。
因為時間關(guān)系只做了很簡單的調(diào)整，沒去做多套大跨度的樣式變更，同時套進原圖環(huán)境沒做整體的處理，所以還有很多升級優(yōu)化的空間，理解這個感覺即可。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash ，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
