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

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

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

一.數據卡片1

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

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

步驟如下 ??

① 分析問題：

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

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

② 卡片造型：

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

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

③ 細節(jié)調整：

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

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

二、數據卡片2

數據除了以上的純數字展示，還有圖形的展示，這是最開始做的收益折線圖：

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

步驟如下 ??

① 調整折線圖：

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

② 調整數據氣泡：

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

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

三.信息卡片

關于卡片的優(yōu)化，今天來看看“熱門榜單”類型的信息卡片改如何優(yōu)化，下面做的

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

步驟如下 ??

① 調整卡片樣式：

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

② 優(yōu)化標題：

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

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

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

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

④ 卡片加底紋：

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

⑤ 其他形式：

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

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

四.卡片層級

最后補充一個信息層級的問題，這是做的會員權益卡片，圖標畫的都很用心，精致度也不錯；

但是，乍一看是不是覺得下面這些權益我都擁有了？而且會產生下面4個內容怎么一模一樣的困惑。

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

步驟如下 ??

① 調整透明度：

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

② 優(yōu)化圖標：

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

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

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

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

知識再次到賬