其實(shí)一個(gè)畫面能夠那么精致都是無數(shù)的細(xì)節(jié)堆出來的，很多人都只關(guān)注“大細(xì)節(jié)“，卻很少關(guān)注“小細(xì)節(jié)“，但其實(shí)很多時(shí)候，就是那么多不起眼的小細(xì)節(jié)，影響著我們最終的輸出效果。

今天我們來簡(jiǎn)單看幾個(gè)小細(xì)節(jié)，真的是很小很小，很容易被忽略，都是實(shí)戰(zhàn)項(xiàng)目。

1. 一個(gè)加號(hào)的細(xì)節(jié)

在管理人員的時(shí)候，我們需要添加或者刪除人員的操作，也就是常見的加號(hào)、減號(hào)，最開始設(shè)計(jì)師做的效果是這樣的：

其實(shí)也沒有什么大問題，但就是差點(diǎn)精致度，如果一個(gè)頁(yè)面，每個(gè)點(diǎn)都差點(diǎn)精致度，合起來就會(huì)差很多，于是我們就去想為什么它沒有那么精致。首先，我覺得線是有點(diǎn)太粗了，于是我們變細(xì)了一點(diǎn)：

其次呢，是否可以在對(duì)比上再加一點(diǎn)細(xì)節(jié)呢？比如里粗外細(xì)、里實(shí)外虛，于是我們咔咔一頓調(diào)整，最后選擇了下面三張圖的最后一版：https://js.design/

我們看下和第一稿時(shí)的區(qū)別：

是不是精致很多，雖然是很小的細(xì)節(jié)，但也影響著整體的效果。

2. 小面積少用大漸變

我們?cè)谧鲰?yè)面的時(shí)候經(jīng)常會(huì)使用漸變色，有時(shí)候還會(huì)使用那種比較大的漸變，比如對(duì)比色漸變、互補(bǔ)色漸變，像下面這種：

在大面積上使用是沒有什么問題的，但小面積就不一定了，比如這種小面的對(duì)號(hào)，用了漸變色，基本看不到，還影響識(shí)別：

不如直接就用白色算了：

不一定所有地方都要使用主色漸變。

再比如我們經(jīng)常用的按鈕，大漸變的按鈕，最好別讓按鈕太短，要有一個(gè)最短寬度，這樣兩個(gè)字的時(shí)候會(huì)好看些，比如下面這兩種：

是不是第二個(gè)會(huì)好一點(diǎn)，既然我們用了大漸變，就一定要讓漸變釋放出來，不然憋在一個(gè)小面積里，看不清楚，那就沒意義了。

3. 前后邏輯的問題

當(dāng)信息層級(jí)有前后關(guān)系的時(shí)候，正常情況下，都應(yīng)該是前面的是亮起的，后面的是暗的，比如背景灰色，前面的卡片是白色：

再比如，分類頁(yè)面的側(cè)邊欄，選中的是白色，非選中的是灰色：

我們可以看下最近的的一個(gè)實(shí)際案例：

有一些地方的邏輯是 ok 的，比如這種信息亮起、彈窗浮層亮起，后面背景暗下去：

但是有一個(gè)問題，聊天列表，選中的列表是深色，沒選中的反而亮起到前面來了：

這就給人一種好像所有的列表都被選中的感覺，怪怪的，后來我們優(yōu)化了一下：

這樣就沒那么奇怪了。這種都是考驗(yàn)一些基本邏輯的問題，千萬不能出錯(cuò)，不然就會(huì)看起來很奇怪。

總結(jié)

好了，以上就是今天分享的幾個(gè)很細(xì)節(jié)很細(xì)節(jié)的小點(diǎn)，可能在很多人眼里覺得很不起眼，但這些小點(diǎn)真的都是非常重要的，都是支撐我們頁(yè)面精致美觀的必要條件。