UI設計師直通車：超詳細的圖標基礎知識
乾貨
觀點
案例
資訊
我們
豈安科技
最真誠的業務安全公眾號
擼主：
小思敏兒 豈安科技ui設計師
自我介紹不知道說啥，就是妹子一枚，剛剛入職，在設計屆屬於晉級級別，熱愛設計，我就是這樣一個耿直的girl，哈哈哈……
前言PREFACE
最近在進行項目改版，對原來所有圖標的設計做了統一規範，同時也從設計圖標的過程中總結了一些關於圖標設計規範的經驗。
圖標是當今世界上最通用的圖形語言，很容易讓人理解的語言，在如今互互聯網時代，科技感十足的智能手機讓人產生距離感，圖標的設計使得畫面不再冰冷，優秀的圖標設計讓界面更具有趣味性，拉進與用戶之間的距離，讓用戶產生愉悅感，所以圖標設計在ui界面設計中是必不可缺少的一個環節，作為ui視覺設計師，更是應該掌握的一項基本技能。在圖標設計時並不是只考慮表面形狀那麼簡單，我們更應該去了解圖標設計的風格、原則和設計要點。
圖標分類
象形圖標，是現代比較流行的圖標類型，通過其與物理對象的圖畫相似來表達其意義的表意文字。比如一個日曆造型的圖標表現的就是日曆。
表意圖標，這種類型的圖標比較複雜，需要投入學習成本來理解它，比如在學習數學的時候，要先學習並記住各種符號，通常表意文字是基本的形狀，人們一般是沒辦法一眼認出來的它的含義的，需要去學習。
圖標風格
擬物圖標
擬物，或稱擬物化，也叫做現實主義。擬物化風格是喬布斯時代的ios代表設計風格，其目的是使用戶界面簡單易懂，降低用戶學習成本。擬物圖標比較注重質感表現、構型和光影控制的這些技法。因為擬物化設計過於複雜給用戶瀏覽信息造成了不必要的干擾，所以現在的擬物圖標已經被時代所淘汰了。
線性圖標
目前是最流行的圖標表現方式之一。是由一條等粗細度構成的圖形，相比面形圖標會比較有細節的表現空間，控制線條的粗細和構型能夠有很多樣的視覺表現。
面型圖標
這類圖標設計師會從現實世界中提取事物的關鍵外觀形狀特點，通過設計形式展現一個象形的剪影色塊，視覺上比較醒目，但不容易刻畫細節。
填充圖標
填充圖標是線性圖標和面形圖標的完美結合，採用線條構型在內部根據設計風格，選擇性的填充顏色，比較個性，有更多的設計發揮空間。
手繪圖標
手繪圖標一般運用在遊戲和手機主題設計中，視覺效果比較強烈，富有感染力，作為純手工繪製的圖標，很考驗設計師的手繪表現能力。
方寸之間
在動手畫圖標之前一定要選定參考線，只有這樣所有圖標才能規範統一。
這套參考線是根據尺寸1024x1024px繪製的。
在繪製圖標過程中，構圖不能太滿，要在四周要有留白，不要讓設計稿進入留白區域，不然進入留白區域的圖標會顯得很大，整體會顯得不和諧，大小不統一，所以根據不同形狀的圖標制定出了四種外輪廓的圖標參考線。
在繪製圖標過程中，為了達到視覺上的統一，可以相對的縮小外輪廓的尺寸，不用嚴格的遵循網格和參考線。網格是為了幫助你讓圖標保持統一性，如果在設計出一個偉大的圖標和遵循規則之間二選一，那就打破規則。
像素對齊
在製作圖標時，常常會碰到圖標發虛的問題，那是因為我們沒有嚴格做到像素對齊，作為一名專業的ui設計師，必須注意到這點。
多使用布爾運算
在製作圖標時能用基本形狀進行布爾運算的情況下，盡量不要使用鋼筆工具，使用布爾運算的好處有很多：
? 1.讓圖標更加規範
? 2.後期進行修改更加方便快捷
用品牌基因法做圖標
文章中使用的[ 用品牌基因法做圖標 ]理論源於菜心設計鋪，品牌基因的定義：
視覺層面的品牌基因就是通過一個事物或者提取出一個（或一組）視覺符號。
1
提取特定形狀，直接應用
最常見的方法是直接將logo作為圖標，如下圖：
2
吸取品牌顏色
從鹹魚logo中吸取品牌色，當作品牌基因，這是也常見的一種方式
3
抓取風格特點
抖音結合了「抖」的風格特色，運用在產品的各個環節，建立了品牌特色，讓人一看到這些設計就知道是抖音。
通過上面的分享不知道大家對圖標設計有沒有了大概的了解，如果大家已經對製作圖標的基本原則有了基本的了解，可以自己動手試一試，光說不練假把式，自己親自動手才能發現問題解決問題，逐漸提高自己的設計能力。如果你對圖標設計特別感興趣的話，也可以找資料深入學習，畢竟我想每一個設計師心裡都有一個大師夢~
TAG:bigsec豈安科技 |