在上期有關(guān)設(shè)計(jì)“精度”的文章發(fā)布后，我們收到了大量設(shè)計(jì)師的積極反饋，很多讀者表示通過(guò)簡(jiǎn)單的細(xì)節(jié)調(diào)整，確實(shí)提升了作品的視覺(jué)品質(zhì)。

所以今天，我們帶著精度優(yōu)化指南 2.0 來(lái)啦，聚焦那些容易被忽略，但能提升視覺(jué)效果的設(shè)計(jì)細(xì)節(jié)，快快學(xué)起來(lái)吧！

老規(guī)矩，上干貨！

一、按鈕精度

當(dāng)你的按鈕做成這樣被客戶說(shuō)“不行，這樣也太普通，太隨意了”，你是否沒(méi)有頭緒該如何優(yōu)化？

不慌！我們帶著精度提升小技巧來(lái)了，先看看局部?jī)?yōu)化前后對(duì)比圖吧

步驟如下：

① 造型調(diào)整-按鈕：

首先針對(duì)客戶說(shuō)的普通，我們就可以嘗試把常規(guī)的圓形改為圓角矩形，并適當(dāng)調(diào)整 icon 在圖形內(nèi)的占比

② 造型調(diào)整-icon：

按鈕造型 OK 后，再來(lái)看看里面的圖標(biāo)，不難發(fā)現(xiàn)暫停是 2 個(gè)豎線（線性圖標(biāo)），掛斷則是一個(gè)電話（面性圖標(biāo)），它倆不統(tǒng)一；所以我們需要對(duì)其進(jìn)行統(tǒng)一，以暫停按鈕為主，我們來(lái)調(diào)整掛斷按鈕

③ 顏色調(diào)整：

原暫停圖標(biāo)的顏色是灰色，而掛斷圖標(biāo)又是紅色，視覺(jué)上就會(huì)造成暫停“弱于”掛斷，我們需要調(diào)整其明度讓 2 個(gè)圖標(biāo)整體更加和諧

接著，我們修改按鈕的顏色，只需降低透明度即可

④ 加投影：

為了進(jìn)一步增加按鈕的質(zhì)感，我們可以在它的下方加上合適的投影；并根據(jù)頁(yè)面的整體色調(diào)，進(jìn)一步調(diào)整圖標(biāo)的色相，使按鈕更好的與頁(yè)面保持和諧統(tǒng)一。

這樣就調(diào)整好了，最后再來(lái)看看整體的對(duì)比效果吧：

二、卡片精度

再來(lái)看另一個(gè)案例，圖標(biāo)用心畫(huà)了很久，但還是草率加個(gè)矩形包起來(lái)就完事了，導(dǎo)致卡片整體就差點(diǎn)意思

怎么變精致呢？先來(lái)看看優(yōu)化部分的對(duì)比圖：

步驟如下

① 調(diào)整容器樣式：

在整體的排版沒(méi)有問(wèn)題的情況下，我們可以先將純色塊的容器調(diào)整為漸變的形式，再加上描邊(注意描邊也是漸變哦)

② 添加倒影：

調(diào)整后好了很多，但還是略顯單薄，我們可以給圖標(biāo)加上倒影，使畫(huà)面的層次更加豐富

只需簡(jiǎn)單的 2 步，就能讓原本普通的卡片變得有設(shè)計(jì)感，是不是很神奇。再看看對(duì)比效果吧：

卡片精度 2

同樣的技巧，我們也可以運(yùn)用于另一個(gè)案例上

步驟如下

① 調(diào)整容器樣式：

原容器是白色降低透明度+描邊，整體氛圍感不足；我們可以看到圖標(biāo)都是紅色調(diào)的，所以大膽一點(diǎn)，我們的容器和描邊也可以是紅色調(diào)的

② 圖標(biāo)添加投影：

容器樣式調(diào)整完后，因?yàn)閳D標(biāo)是發(fā)光的，必然會(huì)存在投影，我們?cè)偌由贤队凹纯?；需要注意這里的投影添加方式（記筆記

同樣的方法去調(diào)整剩下的 2 個(gè)內(nèi)容，整體就優(yōu)化完成了，再來(lái)看看對(duì)比效果：

卡片精度 3

這是你做的課程卡片，客戶看了說(shuō)“不夠簡(jiǎn)潔，我想要高級(jí)一點(diǎn)的”

怎么改？先來(lái)看看優(yōu)化前后的對(duì)比圖：

步驟如下

① 容器調(diào)整：

原課程卡片使用白色矩形包裹課程圖片的形式，我們可以嘗試去掉外層的白色，將課程圖片鋪滿整個(gè)卡片

② 優(yōu)化文字信息：

去掉右上角的時(shí)間標(biāo)簽，與課程名稱上下排列并注意層級(jí)關(guān)系，“去看看”按鈕改為用箭頭符號(hào)表達(dá)，避免全是文字導(dǎo)致視覺(jué)看起來(lái)很單一

③ 優(yōu)化遮罩：

調(diào)整后整體效果比之前簡(jiǎn)潔很多，但是圖片上的遮罩還是太黑，顯得不夠高級(jí)，我們可以改為毛玻璃的效果增強(qiáng)卡片的質(zhì)感

④ 整體再調(diào)整：

到這一步基本就差不多了，再整體看一看，發(fā)現(xiàn)按鈕有點(diǎn)粗糙是一個(gè)大白塊兒，那么微微調(diào)整一下

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

叮！知識(shí)已到賬。

本次關(guān)于“精度”優(yōu)化的分享到這里就結(jié)束啦！ 希望大家能從中獲得一些啟發(fā)和靈感，讓自己的UI設(shè)計(jì)更加出色和有趣！加油哦！

作者：菜心