編輯導(dǎo)語(yǔ)：我們?cè)谧鲈O(shè)計(jì)時(shí)，常常會(huì)忽略一些小細(xì)節(jié)，但這些細(xì)節(jié)卻起著舉足輕重的地位，甚至?xí)绊懻w的效果。如何快速搞定設(shè)計(jì)細(xì)節(jié)呢？作者在文中分享了3招，我們一起來(lái)看看吧。

今天和大家分享設(shè)計(jì)技巧，做設(shè)計(jì)有很多的基礎(chǔ)，色彩、文字、顏色、圖形這些都是，有時(shí)候做一個(gè)設(shè)計(jì)不需要很復(fù)雜華麗的質(zhì)感，只要把握好簡(jiǎn)單的設(shè)計(jì)原則，把每個(gè)小細(xì)節(jié)點(diǎn)做透，能力自然而然會(huì)提升，量變引起質(zhì)變，今天我們來(lái)看看幾個(gè)案例。

一、不要使用100%黑色

分享給大家第一個(gè)小技巧就是做設(shè)計(jì)時(shí)候，不要使用純黑或者純白做設(shè)計(jì)，會(huì)顯得非常的突兀。如上圖這樣，整體沒(méi)有太大問(wèn)題，但是感覺(jué)不精致，哪里總覺(jué)得奇怪，但是說(shuō)不出什么原因。

仔細(xì)看其實(shí)問(wèn)題出在了色彩上，首先背景卡片黑色有點(diǎn)太重，沒(méi)有色彩傾向。其次文字信息都是白色為主，標(biāo)題和正文字號(hào)對(duì)比比較接近，內(nèi)容容易混淆。最后用戶昵稱用白色也和內(nèi)容混淆了。

詳情頁(yè)面問(wèn)題也是類似，主標(biāo)題和副標(biāo)題設(shè)計(jì)對(duì)比過(guò)于強(qiáng)烈，背景太黑，文字太多，看多了容易眼睛不舒適。那我們第一步就開(kāi)始調(diào)整顏色。

首先把背景卡片的黑色改為深灰色，帶一點(diǎn)點(diǎn)藍(lán)色就沒(méi)有那么生硬。其次把內(nèi)容文字信息改為淺灰色，這樣和標(biāo)題有一個(gè)對(duì)比。最后把用戶的名稱由白色改成紅色。這樣層次就拉開(kāi)了。

最后來(lái)看一個(gè)效果圖的前后對(duì)比，優(yōu)化之前對(duì)比缺少層次，優(yōu)化之后頁(yè)面更細(xì)膩了。加了一些顏色對(duì)比，降低了純黑和純白，效果也比之前好很多。所以在做設(shè)計(jì)過(guò)程中，不要 100%使用黑色或者白色。

二、減少頁(yè)面鋸齒感

做設(shè)計(jì)時(shí)候一個(gè)細(xì)節(jié)很容易被設(shè)計(jì)師忽略掉，就是鋸齒感。什么是鋸齒感，就是你閱讀一個(gè)頁(yè)面時(shí)候，閱讀動(dòng)線之間會(huì)出現(xiàn)凹凸不齊的感覺(jué)，這樣的感覺(jué)會(huì)影響閱讀效率。

如上圖就是用戶閱讀視線，當(dāng)前頁(yè)面問(wèn)題就是用戶閱讀路徑會(huì)有很強(qiáng)鋸齒感，在設(shè)計(jì)中對(duì)齊尤其重要。那么怎么改？

首頁(yè)，頁(yè)面頭部背景后面增加灰色背景過(guò)度，讓信息層級(jí)更平一點(diǎn)。其次卡片鋸齒感嚴(yán)重通過(guò)右側(cè)再多增加一個(gè)專輯，讓頁(yè)面更加平衡和飽滿， 解決視線鋸齒感。

同理還可以把頭部卡片樣式增加到3個(gè)增加頁(yè)面平衡感。

優(yōu)化后整體在頁(yè)面平衡感和鋸齒上就好很多了， 整體效果上也會(huì)更佳。

除了頁(yè)面排版中鋸齒感，其實(shí)文字鋸齒感也是需要注意的。一般通過(guò)兩側(cè)對(duì)齊效果會(huì)更好。目前主流的新聞?lì)惍a(chǎn)品和閱讀類產(chǎn)品都采用兩側(cè)對(duì)齊，更有利于信息的閱讀。

進(jìn)行有效的對(duì)齊，有助于產(chǎn)品設(shè)計(jì)更加結(jié)構(gòu)化，這個(gè)規(guī)則希望大家都能掌握。

三、視覺(jué)對(duì)齊而不是工具對(duì)齊

圖標(biāo)相信大家平時(shí)畫(huà)的時(shí)候，都會(huì)用一個(gè)固定的比例，然后去設(shè)計(jì)。但是這樣設(shè)計(jì)會(huì)有一個(gè)問(wèn)題，仔細(xì)看會(huì)發(fā)現(xiàn)圖標(biāo)的視覺(jué)平衡會(huì)不太一致。 那么有什么方法能快速檢查視覺(jué)平衡呢？

檢查視覺(jué)平衡最簡(jiǎn)單的辦法，就是直接把圖標(biāo)進(jìn)行模糊。然后你會(huì)發(fā)現(xiàn)有的圖標(biāo)大有的圖標(biāo)小， 這個(gè)視覺(jué)就需要手動(dòng)對(duì)于圖形進(jìn)行調(diào)整。

調(diào)整過(guò)程中對(duì)于比較飽滿的圖形適當(dāng)縮小點(diǎn)，對(duì)于圖標(biāo)體量比較細(xì)長(zhǎng)的進(jìn)行撐滿，通過(guò)這樣來(lái)保證視覺(jué)平衡。

視覺(jué)重量是人眼感知物體的重要性和大小，像素面積大小和面積不一定必須相同。如果長(zhǎng)方形， 菱形和三角形和正方形在一起使用，我們需要對(duì)圖形進(jìn)行微調(diào)，讓頁(yè)面保持平衡。

今天這幾個(gè)小知識(shí)點(diǎn)，都存在于我們每天的日常工作中，希望這些小的點(diǎn)，能夠幫你慢慢提升設(shè)計(jì)細(xì)節(jié)，讓自己專業(yè)變的更好，我們明天見(jiàn)。

#專欄作家#

Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議