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