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

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

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

一、按鈕精度

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

不慌！我們帶著精度提升小技巧來了，先看看局部優(yōu)化前后對比圖吧

步驟如下：

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

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

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

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

③ 顏色調(diào)整：

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

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

④ 加投影：

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

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

二、卡片精度

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

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

步驟如下

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

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

② 添加倒影：

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

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

卡片精度 2

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

步驟如下

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

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

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

容器樣式調(diào)整完后，因為圖標(biāo)是發(fā)光的，必然會存在投影，我們再加上投影即可；需要注意這里的投影添加方式（記筆記

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

卡片精度 3

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

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

步驟如下

① 容器調(diào)整：

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

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

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

③ 優(yōu)化遮罩：

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

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

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

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

叮！知識已到賬。

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

作者：菜心