前言PREFACE

最近在進行項目改版，對原來所有圖標的設計做了統一規范，同時也從設計圖標的過程中總結了一些關于圖標設計規范的經驗。

圖標是當今世界上最通用的圖形語言，很容易讓人理解的語言，在如今互互聯網時代，科技感十足的智能手機讓人產生距離感，圖標的設計使得畫面不再冰冷，優秀的圖標設計讓界面更具有趣味性，拉進與用戶之間的距離，讓用戶產生愉悅感，所以圖標設計在ui界面設計中是必不可缺少的一個環節，作為ui視覺設計師，更是應該掌握的一項基本技能。在圖標設計時并不是只考慮表面形狀那么簡單，我們更應該去了解圖標設計的風格、原則和設計要點。

一、圖標分類

象形圖標，是現代比較流行的圖標類型，通過其與物理對象的圖畫相似來表達其意義的表意文字。比如一個日歷造型的圖標表現的就是日歷。

表意圖標，這種類型的圖標比較復雜，需要投入學習成本來理解它，比如在學習數學的時候，要先學習并記住各種符號，通常表意文字是基本的形狀，人們一般是沒辦法一眼認出來的它的含義的，需要去學習。

二、圖標風格

1. 擬物圖標

擬物，或稱擬物化，也叫做現實主義。擬物化風格是喬布斯時代的ios代表設計風格，其目的是使用戶界面簡單易懂，降低用戶學習成本。擬物圖標比較注重質感表現、構型和光影控制的這些技法。因為擬物化設計過于復雜給用戶瀏覽信息造成了不必要的干擾，所以現在的擬物圖標已經被時代所淘汰了。

2. 線性圖標

目前是***的圖標表現方式之一。是由一條等粗細度構成的圖形，相比面形圖標會比較有細節的表現空間，控制線條的粗細和構型能夠有很多樣的視覺表現。

3. 面型圖標

這類圖標設計師會從現實世界中提取事物的關鍵外觀形狀特點，通過設計形式展現一個象形的剪影色塊，視覺上比較醒目，但不容易刻畫細節。

4. 填充圖標

填充圖標是線性圖標和面形圖標的***結合，采用線條構型在內部根據設計風格，選擇性的填充顏色，比較個性，有更多的設計發揮空間。

5. 手繪圖標

手繪圖標一般運用在游戲和手機主題設計中，視覺效果比較強烈，富有感染力，作為純手工繪制的圖標，很考驗設計師的手繪表現能力。

三、方寸之間

在動手畫圖標之前一定要選定參考線，只有這樣所有圖標才能規范統一。

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

在繪制圖標過程中，構圖不能太滿，要在四周要有留白，不要讓設計稿進入留白區域，不然進入留白區域的圖標會顯得很大，整體會顯得不和諧，大小不統一，所以根據不同形狀的圖標制定出了四種外輪廓的圖標參考線。

在繪制圖標過程中，為了達到視覺上的統一，可以相對的縮小外輪廓的尺寸，不用嚴格的遵循網格和參考線。網格是為了幫助你讓圖標保持統一性，如果在設計出一個偉大的圖標和遵循規則之間二選一，那就打破規則。

1. 像素對齊

在制作圖標時，常常會碰到圖標發虛的問題，那是因為我們沒有嚴格做到像素對齊，作為一名專業的ui設計師，必須注意到這點。

2. 多使用布爾運算

在制作圖標時能用基本形狀進行布爾運算的情況下，盡量不要使用鋼筆工具，使用布爾運算的好處有很多：

• 讓圖標更加規范
• 后期進行修改更加方便快捷

四、用品牌基因法做圖標

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

1. 提取特定形狀，直接應用

最常見的方法是直接將logo作為圖標，如下圖：

2. 吸取品牌顏色

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

3. 抓取風格特點

抖音結合了「抖」的風格特色，運用在產品的各個環節，建立了品牌特色，讓人一看到這些設計就知道是抖音。

五、結語

通過上面的分享不知道大家對圖標設計有沒有了大概的了解，如果大家已經對制作圖標的基本原則有了基本的了解，可以自己動手試一試，光說不練假把式，自己親自動手才能發現問題解決問題，逐漸提高自己的設計能力。如果你對圖標設計特別感興趣的話，也可以找資料深入學習，畢竟我想每一個設計師心里都有一個大師夢！

【本文是51CTO專欄機構“豈安科技”的原創文章，轉載請通過微信公眾號(bigsec)聯系原作者】

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