前言PREFACE

最近在進(jìn)行項(xiàng)目改版，對(duì)原來所有圖標(biāo)的設(shè)計(jì)做了統(tǒng)一規(guī)范，同時(shí)也從設(shè)計(jì)圖標(biāo)的過程中總結(jié)了一些關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)。

圖標(biāo)是當(dāng)今世界上最通用的圖形語言，很容易讓人理解的語言，在如今互互聯(lián)網(wǎng)時(shí)代，科技感十足的智能手機(jī)讓人產(chǎn)生距離感，圖標(biāo)的設(shè)計(jì)使得畫面不再冰冷，優(yōu)秀的圖標(biāo)設(shè)計(jì)讓界面更具有趣味性，拉進(jìn)與用戶之間的距離，讓用戶產(chǎn)生愉悅感，所以圖標(biāo)設(shè)計(jì)在ui界面設(shè)計(jì)中是必不可缺少的一個(gè)環(huán)節(jié)，作為ui視覺設(shè)計(jì)師，更是應(yīng)該掌握的一項(xiàng)基本技能。在圖標(biāo)設(shè)計(jì)時(shí)并不是只考慮表面形狀那么簡(jiǎn)單，我們更應(yīng)該去了解圖標(biāo)設(shè)計(jì)的風(fēng)格、原則和設(shè)計(jì)要點(diǎn)。

一、圖標(biāo)分類

象形圖標(biāo)，是現(xiàn)代比較流行的圖標(biāo)類型，通過其與物理對(duì)象的圖畫相似來表達(dá)其意義的表意文字。比如一個(gè)日歷造型的圖標(biāo)表現(xiàn)的就是日歷。

表意圖標(biāo)，這種類型的圖標(biāo)比較復(fù)雜，需要投入學(xué)習(xí)成本來理解它，比如在學(xué)習(xí)數(shù)學(xué)的時(shí)候，要先學(xué)習(xí)并記住各種符號(hào)，通常表意文字是基本的形狀，人們一般是沒辦法一眼認(rèn)出來的它的含義的，需要去學(xué)習(xí)。

二、圖標(biāo)風(fēng)格

1. 擬物圖標(biāo)

擬物，或稱擬物化，也叫做現(xiàn)實(shí)主義。擬物化風(fēng)格是喬布斯時(shí)代的ios代表設(shè)計(jì)風(fēng)格，其目的是使用戶界面簡(jiǎn)單易懂，降低用戶學(xué)習(xí)成本。擬物圖標(biāo)比較注重質(zhì)感表現(xiàn)、構(gòu)型和光影控制的這些技法。因?yàn)閿M物化設(shè)計(jì)過于復(fù)雜給用戶瀏覽信息造成了不必要的干擾，所以現(xiàn)在的擬物圖標(biāo)已經(jīng)被時(shí)代所淘汰了。

2. 線性圖標(biāo)

目前是***的圖標(biāo)表現(xiàn)方式之一。是由一條等粗細(xì)度構(gòu)成的圖形，相比面形圖標(biāo)會(huì)比較有細(xì)節(jié)的表現(xiàn)空間，控制線條的粗細(xì)和構(gòu)型能夠有很多樣的視覺表現(xiàn)。

3. 面型圖標(biāo)

這類圖標(biāo)設(shè)計(jì)師會(huì)從現(xiàn)實(shí)世界中提取事物的關(guān)鍵外觀形狀特點(diǎn)，通過設(shè)計(jì)形式展現(xiàn)一個(gè)象形的剪影色塊，視覺上比較醒目，但不容易刻畫細(xì)節(jié)。

4. 填充圖標(biāo)

填充圖標(biāo)是線性圖標(biāo)和面形圖標(biāo)的***結(jié)合，采用線條構(gòu)型在內(nèi)部根據(jù)設(shè)計(jì)風(fēng)格，選擇性的填充顏色，比較個(gè)性，有更多的設(shè)計(jì)發(fā)揮空間。

5. 手繪圖標(biāo)

手繪圖標(biāo)一般運(yùn)用在游戲和手機(jī)主題設(shè)計(jì)中，視覺效果比較強(qiáng)烈，富有感染力，作為純手工繪制的圖標(biāo)，很考驗(yàn)設(shè)計(jì)師的手繪表現(xiàn)能力。

三、方寸之間

在動(dòng)手畫圖標(biāo)之前一定要選定參考線，只有這樣所有圖標(biāo)才能規(guī)范統(tǒng)一。

這套參考線是根據(jù)尺寸1024x1024px繪制的。

在繪制圖標(biāo)過程中，構(gòu)圖不能太滿，要在四周要有留白，不要讓設(shè)計(jì)稿進(jìn)入留白區(qū)域，不然進(jìn)入留白區(qū)域的圖標(biāo)會(huì)顯得很大，整體會(huì)顯得不和諧，大小不統(tǒng)一，所以根據(jù)不同形狀的圖標(biāo)制定出了四種外輪廓的圖標(biāo)參考線。

在繪制圖標(biāo)過程中，為了達(dá)到視覺上的統(tǒng)一，可以相對(duì)的縮小外輪廓的尺寸，不用嚴(yán)格的遵循網(wǎng)格和參考線。網(wǎng)格是為了幫助你讓圖標(biāo)保持統(tǒng)一性，如果在設(shè)計(jì)出一個(gè)偉大的圖標(biāo)和遵循規(guī)則之間二選一，那就打破規(guī)則。

1. 像素對(duì)齊

在制作圖標(biāo)時(shí)，常常會(huì)碰到圖標(biāo)發(fā)虛的問題，那是因?yàn)槲覀儧]有嚴(yán)格做到像素對(duì)齊，作為一名專業(yè)的ui設(shè)計(jì)師，必須注意到這點(diǎn)。

2. 多使用布爾運(yùn)算

在制作圖標(biāo)時(shí)能用基本形狀進(jìn)行布爾運(yùn)算的情況下，盡量不要使用鋼筆工具，使用布爾運(yùn)算的好處有很多：

• 讓圖標(biāo)更加規(guī)范
• 后期進(jìn)行修改更加方便快捷

四、用品牌基因法做圖標(biāo)

文章中使用的 [ 用品牌基因法做圖標(biāo) ]理論源于菜心設(shè)計(jì)鋪，品牌基因的定義：視覺層面的品牌基因就是通過一個(gè)事物或者提取出一個(gè)(或一組)視覺符號(hào)。

1. 提取特定形狀，直接應(yīng)用

最常見的方法是直接將logo作為圖標(biāo)，如下圖：

2. 吸取品牌顏色

從咸魚logo中吸取品牌色，當(dāng)作品牌基因，這是也常見的一種方式

3. 抓取風(fēng)格特點(diǎn)

抖音結(jié)合了「抖」的風(fēng)格特色，運(yùn)用在產(chǎn)品的各個(gè)環(huán)節(jié)，建立了品牌特色，讓人一看到這些設(shè)計(jì)就知道是抖音。

五、結(jié)語

通過上面的分享不知道大家對(duì)圖標(biāo)設(shè)計(jì)有沒有了大概的了解，如果大家已經(jīng)對(duì)制作圖標(biāo)的基本原則有了基本的了解，可以自己動(dòng)手試一試，光說不練假把式，自己親自動(dòng)手才能發(fā)現(xiàn)問題解決問題，逐漸提高自己的設(shè)計(jì)能力。如果你對(duì)圖標(biāo)設(shè)計(jì)特別感興趣的話，也可以找資料深入學(xué)習(xí)，畢竟我想每一個(gè)設(shè)計(jì)師心里都有一個(gè)大師夢(mèng)！

【本文是51CTO專欄機(jī)構(gòu)“豈安科技”的原創(chuàng)文章，轉(zhuǎn)載請(qǐng)通過微信公眾號(hào)(bigsec)聯(lián)系原作者】

戳這里，看該作者更多好文