關于精度優(yōu)化的小技巧，今天又來啦！

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

直接開整！優(yōu)化狠活來了！

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

數(shù)字卡片1

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

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

步驟如下 ??

① 分析問題：

我們首先要搞清楚老板說的沒有設計感，是形式感不夠？還是信息排版出了問題？

這里不難發(fā)現(xiàn)卡片是一個純白色的矩形，過于普通；而信息排版的大方向 OK，但是數(shù)據(jù)這塊兒，因為想展示的是數(shù)字，所以文字在數(shù)字下方會更加合理。

② 卡片造型：

接著我們來調整卡片的造型，先來嘗試一下常用的方法“異形”，并用圖形添補空缺。

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

③ 細節(jié)調整：

卡片的整體造型調整好后，我們再對其進行細節(jié)的優(yōu)化，包括文字、卡片顏色的調整，星星投影的添加：

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

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

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

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

步驟如下 ??

① 調整折線圖：

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

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

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

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

二、信息卡片

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

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

步驟如下 ??

① 調整卡片樣式：

在整體的排版沒有問題的情況下，老規(guī)矩，調整造型讓它變得不“常規(guī)”

② 優(yōu)化標題：

接著我們對里面的文字內容進行優(yōu)化，先是標題，我們可以選擇一個特殊字體，然后進行簡單的設計：

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

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

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

④ 卡片加底紋：

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

⑤ 其他形式：

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

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

三、卡片層級

最后補充一個信息層級的問題，這是某位同學做的會員權益卡片，圖標畫的都很用心，精致度也不錯；但是，乍一看是不是覺得下面這些權益我都擁有了？而且會產(chǎn)生下面 4 個內容怎么一模一樣的困惑。

這是因為信息層級出現(xiàn)了問題，常規(guī)來講未獲得的會員權益應該是置灰的，其圖標也應該不是“禮花”的樣子。由此，我們進行優(yōu)化：

步驟如下 ??

① 調整透明度：

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

② 優(yōu)化圖標：

接著我們調整未獲得權益的圖標，使用無彩色的圖標即可，不需要太復雜，重要的是表意要明確：

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

可以看到目前的圖標底部是一個純色的矩形塊兒，我們可以調整它的樣式讓整體看起來更加精致：

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

知識再次到賬

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

作者：菜心1