關(guān)于精度優(yōu)化的小技巧，今天又來(lái)啦！

咱們繼續(xù)這個(gè)硬核又實(shí)用的系列。

直接開(kāi)整！優(yōu)化狠活來(lái)了！

一、數(shù)據(jù)卡片

數(shù)字卡片1

當(dāng)你的數(shù)據(jù)展示做成這樣被老板說(shuō)沒(méi)有設(shè)計(jì)感，該如何優(yōu)化呢？

先看看優(yōu)化前后對(duì)比圖吧

步驟如下 ??

① 分析問(wèn)題：

我們首先要搞清楚老板說(shuō)的沒(méi)有設(shè)計(jì)感，是形式感不夠？還是信息排版出了問(wèn)題？

這里不難發(fā)現(xiàn)卡片是一個(gè)純白色的矩形，過(guò)于普通；而信息排版的大方向 OK，但是數(shù)據(jù)這塊兒，因?yàn)橄胝故镜氖菙?shù)字，所以文字在數(shù)字下方會(huì)更加合理。

② 卡片造型：

接著我們來(lái)調(diào)整卡片的造型，先來(lái)嘗試一下常用的方法“異形”，并用圖形添補(bǔ)空缺。

我們可以再給白色的卡片加上邊框，增強(qiáng)聚焦且豐富整體層級(jí)。

③ 細(xì)節(jié)調(diào)整：

卡片的整體造型調(diào)整好后，我們?cè)賹?duì)其進(jìn)行細(xì)節(jié)的優(yōu)化，包括文字、卡片顏色的調(diào)整，星星投影的添加：

這樣就完成優(yōu)化了，最后再來(lái)看看對(duì)比效果吧：

數(shù)據(jù)卡片 2

數(shù)據(jù)除了以上的純數(shù)字展示，還有圖形的展示，這是一位同學(xué)最開(kāi)始做的收益折線圖。

可以看到數(shù)據(jù)展示部分比較粗糙，像表示數(shù)據(jù)的線條太細(xì)，針對(duì)某一天的數(shù)據(jù)內(nèi)容表意不夠明確等等；我們就這些問(wèn)題進(jìn)行精度優(yōu)化，先看看優(yōu)化后的效果：

步驟如下 ??

① 調(diào)整折線圖：

首先調(diào)整折線數(shù)據(jù)的樣式：包括加粗折線，并調(diào)整其平滑度，添加投影，添加標(biāo)記點(diǎn)，底部增加面積圖：

② 調(diào)整數(shù)據(jù)氣泡：

接著我們調(diào)整某一天的數(shù)據(jù)展示，需要從氣泡中得知是哪一天，獲得了多少收益

2 個(gè)地方的優(yōu)化就能得到高級(jí)感漸變折線數(shù)據(jù)圖，精度瞬間 UP????，再來(lái)看看優(yōu)化對(duì)比吧：

二、信息卡片

關(guān)于卡片的優(yōu)化，我們之前的文章中也舉過(guò)很多例子了，今天來(lái)看看“熱門榜單”類型的信息卡片改如何優(yōu)化，下面是一個(gè)同學(xué)的做的

這是優(yōu)化后的：

步驟如下 ??

① 調(diào)整卡片樣式：

在整體的排版沒(méi)有問(wèn)題的情況下，老規(guī)矩，調(diào)整造型讓它變得不“常規(guī)”

② 優(yōu)化標(biāo)題：

接著我們對(duì)里面的文字內(nèi)容進(jìn)行優(yōu)化，先是標(biāo)題，我們可以選擇一個(gè)特殊字體，然后進(jìn)行簡(jiǎn)單的設(shè)計(jì)：

③ 優(yōu)化話題信息：

設(shè)計(jì)感已經(jīng)慢慢有了，再來(lái)對(duì)話題的信息進(jìn)行優(yōu)化；我們的標(biāo)題選擇的是帶傾斜的字體，為了統(tǒng)一協(xié)調(diào)，話題的排名數(shù)字我們也可以略帶一些傾斜角度；同理，底部的輪播點(diǎn)也是：

此外，我們還可以在有的話題后添加相應(yīng)的狀態(tài)標(biāo)簽。

④ 卡片加底紋：

優(yōu)化到這一步其實(shí)就可以了，但是卡片這塊還是有點(diǎn)空，可以試著淺淺的加了一個(gè)底紋，不需要太扎眼，目的只是讓用戶看過(guò)去時(shí)不至于說(shuō)覺(jué)得空曠。

⑤ 其他形式：

對(duì)于話題信息的表現(xiàn)方式多種多樣，大家也可以根據(jù)自己的需求去做不同的變換，比如這里將數(shù)字變?yōu)閳D標(biāo)，標(biāo)簽的中文換成英文：

最后，再來(lái)看看優(yōu)化前后的效果對(duì)比吧：

三、卡片層級(jí)

最后補(bǔ)充一個(gè)信息層級(jí)的問(wèn)題，這是某位同學(xué)做的會(huì)員權(quán)益卡片，圖標(biāo)畫(huà)的都很用心，精致度也不錯(cuò)；但是，乍一看是不是覺(jué)得下面這些權(quán)益我都擁有了？而且會(huì)產(chǎn)生下面 4 個(gè)內(nèi)容怎么一模一樣的困惑。

這是因?yàn)樾畔蛹?jí)出現(xiàn)了問(wèn)題，常規(guī)來(lái)講未獲得的會(huì)員權(quán)益應(yīng)該是置灰的，其圖標(biāo)也應(yīng)該不是“禮花”的樣子。由此，我們進(jìn)行優(yōu)化：

步驟如下 ??

① 調(diào)整透明度：

首先我們可以通過(guò)降低未獲得權(quán)益的透明度，讓其視覺(jué)上是置灰狀態(tài)。

② 優(yōu)化圖標(biāo)：

接著我們調(diào)整未獲得權(quán)益的圖標(biāo)，使用無(wú)彩色的圖標(biāo)即可，不需要太復(fù)雜，重要的是表意要明確：

③ 優(yōu)化容器樣式：

可以看到目前的圖標(biāo)底部是一個(gè)純色的矩形塊兒，我們可以調(diào)整它的樣式讓整體看起來(lái)更加精致：

最后，再來(lái)看看優(yōu)化前后的效果對(duì)比吧：

知識(shí)再次到賬

時(shí)間飛逝，本次『精度』優(yōu)化分享就到這里啦！希望這些方法能成為你的設(shè)計(jì)小錦囊，讓細(xì)節(jié)更精致，作品更出彩！  我們下次優(yōu)化小課堂再見(jiàn)~

作者：菜心1