讓圖標(biāo)設(shè)計(jì)變精致的方法
不知道大家有沒有被說過，設(shè)計(jì)做的不精致？
拿圖標(biāo)舉例，其實(shí)不精致的原因就是統(tǒng)一性沒做好！
我們總說做圖標(biāo)要統(tǒng)一，但是到底要統(tǒng)一哪些要素？有沒有一個(gè)完整的自檢表呢？
拿圖標(biāo)舉例，其實(shí)不精致的原因就是統(tǒng)一性沒做好！隨著在線設(shè)計(jì)工具的不斷升級，在sketch、www.figma.cool等設(shè)計(jì)軟件上實(shí)現(xiàn)統(tǒng)一也變得越來越簡單了
以前我總結(jié)了 5 到 6 個(gè)要統(tǒng)一的要素，最近觀察大家的練習(xí)之后，直接擴(kuò)增到 9 個(gè)了，今天就以線形圖標(biāo)為例，看看我們需要統(tǒng)一哪 9 個(gè)要素！
大綱如下：
大小統(tǒng)一
圓角統(tǒng)一
語言統(tǒng)一
粗細(xì)統(tǒng)一
疏密統(tǒng)一
間距統(tǒng)一
比例統(tǒng)一
正負(fù)形統(tǒng)一
角度統(tǒng)一
1. 大小統(tǒng)一
這個(gè)很容易理解，就是一組圖標(biāo)看起來大小是一致的。但是最近發(fā)現(xiàn)了一個(gè)比較重要的點(diǎn)，就是很多同學(xué)做一組練習(xí)，相鄰的圖標(biāo)都差不太多，但是隔的比較遠(yuǎn)的圖標(biāo)放在一起就差很多了，比如下面這幾個(gè)圖標(biāo)，就是逐漸變大的：
所以對于大小統(tǒng)一，我們必須要做到，一組圖標(biāo)里，任意兩個(gè)圖標(biāo)拿出來都是大小統(tǒng)一的，否則就是不及格。
2. 圓角統(tǒng)一
圓角統(tǒng)一也是比較好理解的點(diǎn)，無非就是圓角大小，像下面這兩個(gè)圖標(biāo)：
如果圓角差很多，你很容易發(fā)現(xiàn)，因?yàn)槎际遣畈欢啻笮〉木匦?，但是我們很容易忽略一些?xì)節(jié)，比如下面第一個(gè)圖標(biāo)的三角形，和旁邊的日歷相比，就過于尖銳：
這是圖標(biāo)里面很細(xì)的細(xì)節(jié)，所以容易被忽視，大家一定要重視。
3. 語言統(tǒng)一
語言統(tǒng)一你可以理解為設(shè)計(jì)風(fēng)格統(tǒng)一，如果一組圖標(biāo)里面出現(xiàn)了多種風(fēng)格，那會顯得非常不專業(yè)。
比如下面這組練習(xí)：
大體看似好像是一種語言，但仔細(xì)觀察其實(shí)還是有很多細(xì)節(jié)不統(tǒng)一的，比如外輪廓上面有的有白色，有的沒有，白色還分帶描邊和不帶描邊：
這就是在語言上不統(tǒng)一的案例，大家在做練習(xí)的時(shí)候，一定要想清楚你的語言是什么。
4. 粗細(xì)統(tǒng)一
粗細(xì)統(tǒng)一就不用說了吧，基本就是用在線性圖標(biāo)線條粗的，比如像這種比較明顯的粗細(xì)不一致，就不應(yīng)該出現(xiàn)了：
這都是最最基礎(chǔ)的問題，一般在星球里打卡超過 5 次還出現(xiàn)這種問題，那就實(shí)屬不該了！
5. 疏密統(tǒng)一
疏密統(tǒng)一其實(shí)是很多新人朋友容易犯的錯(cuò)，比如下面這一組圖標(biāo)：
大部分地方是比較透氣疏松的，但是只有第二個(gè)比較密集，這樣就會讓人感覺比較突兀，整體不夠和諧。
這就是疏密程度的統(tǒng)一性，一定要把握住節(jié)奏感，否則就會不舒服。
6. 間距統(tǒng)一
這個(gè)點(diǎn)一般用在斷線圖標(biāo)上，也就是你開口大小的統(tǒng)一性，比如一個(gè)開很大，一個(gè)開很?。?/p>
那就證明細(xì)節(jié)沒有做到位。
7. 比例統(tǒng)一
比例可以分很多種，比如顏色比例，像下面這個(gè)原作的顏色比例就沒有太統(tǒng)一：
在小 y 優(yōu)化臨摹之后，達(dá)到了顏色比例的平衡：
再比如之前說的一個(gè)案例，粗細(xì)線條的比例：
第一個(gè)圖標(biāo)，粗線與細(xì)線的比例：95:5
第二個(gè)圖標(biāo)，粗線與細(xì)線的比例：70:30
第三個(gè)圖標(biāo)，粗線與細(xì)線的比例：100:0
在這樣不統(tǒng)一的情況下，圖標(biāo)是一定不會精致的。
這些都是比例統(tǒng)一問題出現(xiàn)的實(shí)際場景。
8. 正負(fù)形統(tǒng)一
正負(fù)形也是沒那么容易看出來的，舉個(gè)例子，下面這組周楠做的圖標(biāo)，乍一看沒什么問題，但是仔細(xì)一觀察，其實(shí)我們會發(fā)現(xiàn)，白色面積的重量其實(shí)是不統(tǒng)一的，那個(gè)消息上面的“#”會偏重一點(diǎn)：
當(dāng)優(yōu)化之后，我們再看：
整體就會比之前統(tǒng)一精致很多。
9. 角度統(tǒng)一
角度，也是增加圖標(biāo)統(tǒng)一感的因素之一，最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范，比如 30 度的倍數(shù)：
再舉一個(gè)角度其他方面的例子，在做下面這組圖標(biāo)的時(shí)候，最初沒有考慮斷線的規(guī)律：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角 45 度，如遇到圓角拐角處，可挪動靠近拐角處進(jìn)行斷線：
這樣我們就會看到所有的圖標(biāo)斷線位置都大致出現(xiàn)在右下角的地方，最終效果如下：
很大程度上提高了圖標(biāo)的統(tǒng)一性，并且在延展執(zhí)行的時(shí)候節(jié)省了大量的思考時(shí)間（思考在哪里斷）。
但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統(tǒng)一和諧，且延展性高。
總結(jié)
以上就是目前總結(jié)的 9 個(gè)需要統(tǒng)一的點(diǎn)，只要能把所有的統(tǒng)一性做好，精致一定是沒問題的。
