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