京東讀書APP的卡片圖分兩組、五個(gè)指標(biāo)，如下圖所示。

下方的三個(gè)卡片比較簡單，使用新卡片圖視覺對(duì)象可以一次性設(shè)置：

標(biāo)簽設(shè)置低于值：

上方的兩個(gè)指標(biāo)相對(duì)復(fù)雜，體現(xiàn)在指標(biāo)名稱旁邊有個(gè)圖標(biāo)，以下是Power BI模擬效果。

圖標(biāo)很好加，還是新卡片圖視覺對(duì)象，在我提供的《復(fù)制粘貼就可以使用的Power BI圖標(biāo)素材查詢系統(tǒng)2.0》搜索對(duì)應(yīng)SVG圖標(biāo)代碼，放到卡片圖的圖像URL，位置在上方。

此處有一個(gè)問題：指標(biāo)名稱也會(huì)顯示在圖標(biāo)下方，如何讓指標(biāo)名稱和圖標(biāo)并列？

我們需要將視覺對(duì)象默認(rèn)的指標(biāo)名稱隱藏，接著修改SVG圖標(biāo)，在尾部增加一個(gè)text元素，將指標(biāo)名稱顯示出來。

增加text有兩個(gè)注意事項(xiàng)：

我復(fù)制的圖標(biāo)大小為48*48像素，因此text的橫軸x起點(diǎn)為48，這樣文本可以位于圖標(biāo)右方。
因文本需要橫向空間，所以需要修改整個(gè)圖像的width值，此處由48增加到了200像素。
以上是京東讀書的模擬，微信讀書的卡片原理是一致的，也是圖標(biāo)+文本。區(qū)別在于文本行數(shù)有兩行，文本位置有的位于右側(cè)，多個(gè)text疊加可以實(shí)現(xiàn)需要的效果。

這個(gè)案例本身對(duì)大多數(shù)人沒有價(jià)值，有價(jià)值的是這種構(gòu)圖套路，可以和你的模型適配進(jìn)行設(shè)計(jì)。

本文視頻講解在知識(shí)星球提供，直達(dá)鏈接：

https://t.zsxq.com/13Jo5KMoD