前一段時(shí)間，一位伙伴土豆在群里發(fā)的一個(gè)問題，界面中卡片如何設(shè)計(jì)，卡片如何設(shè)計(jì)優(yōu)化，在UI設(shè)計(jì)js.design中，卡片的優(yōu)化是特別重要的，能夠迅速抓取人的視覺重點(diǎn)，有助于強(qiáng)調(diào)重要內(nèi)容。

群里的小伙伴也都非常熱情，給找了很多參考：

我整理了一下大家和我個(gè)人的一些建議，大概有下面三個(gè)優(yōu)化點(diǎn)：

1. 信息層級問題

我們仔細(xì)觀察那些落地的參考，基本上第一突出的信息都是文案：

讓用戶知道這個(gè)卡片功能是什么，這也是正確的方式。

但我們的卡片，信息第一層級是圖標(biāo)：

所以在信息的層級劃分上就有些問題，我們看參考的設(shè)計(jì)方式，都是把圖形與背景結(jié)合，然后突出文案。

2. 整體構(gòu)圖飽滿度

從設(shè)計(jì)層面來講，一個(gè)很大的問題就是整個(gè)卡片飽滿度的問題，我們還是來看參考，整個(gè)背景圖形是非常飽滿的，但我們的卡片背景相對來說就沒那么飽滿：

這也是后面可以優(yōu)化的方向。

3. 一些細(xì)節(jié)問題

其余的就是一些細(xì)節(jié)問題了，其實(shí)還蠻多的。

比如：背景紋理風(fēng)格統(tǒng)一的問題，有的深，有的淺波浪紋理與圓形也不是特別統(tǒng)一：

再比如，檢驗(yàn)采樣的圖標(biāo)做的還不錯(cuò)，但是開單檢驗(yàn)的圖標(biāo)就差了一些：

好了，問題差不多就這些，基于剛才的問題，土豆又發(fā)了一版優(yōu)化稿：

信息層級問題是有所改善，但是背景圖形的處理，文案信息的細(xì)節(jié)都有提高的空間，所以我簡單做了一版效果：

簡單說幾個(gè)里面的小細(xì)節(jié)：

1. 圖標(biāo)本身一定要精致，因?yàn)槲矣X得那個(gè)藥瓶做的還不錯(cuò)，所以我直接用那個(gè)藥瓶來延展了，只有你的基礎(chǔ)元素足夠精致，延展后才有可能好看。

2. 我把主體元素進(jìn)行了角度的傾斜，看上去會顯得靈動(dòng)些。

3. 輔助圖形，我是根據(jù)圖標(biāo)本身來延展的，因?yàn)槲覐乃幤啃螤罾锟吹搅巳切?，所以輔助圖形我用了三角形，然后輔助圖形也盡量多幾個(gè)層次，比如有深有淺：

1. 文案可以適當(dāng)加點(diǎn)排版，比如修飾物、然后信息稍微緊湊一點(diǎn)，別太散：

大概差不多就這些，希望后面土豆也可以自己的內(nèi)容進(jìn)行多多總結(jié)，提升自己的執(zhí)行力和總結(jié)能力！