UI設(shè)計師直通車:超詳細(xì)的圖標(biāo)基礎(chǔ)知識
前言PREFACE
最近在進行項目改版,對原來所有圖標(biāo)的設(shè)計做了統(tǒng)一規(guī)范,同時也從設(shè)計圖標(biāo)的過程中總結(jié)了一些關(guān)于圖標(biāo)設(shè)計規(guī)范的經(jīng)驗。
圖標(biāo)是當(dāng)今世界上最通用的圖形語言,很容易讓人理解的語言,在如今互互聯(lián)網(wǎng)時代,科技感十足的智能手機讓人產(chǎn)生距離感,圖標(biāo)的設(shè)計使得畫面不再冰冷,優(yōu)秀的圖標(biāo)設(shè)計讓界面更具有趣味性,拉進與用戶之間的距離,讓用戶產(chǎn)生愉悅感,所以圖標(biāo)設(shè)計在ui界面設(shè)計中是必不可缺少的一個環(huán)節(jié),作為ui視覺設(shè)計師,更是應(yīng)該掌握的一項基本技能。在圖標(biāo)設(shè)計時并不是只考慮表面形狀那么簡單,我們更應(yīng)該去了解圖標(biāo)設(shè)計的風(fēng)格、原則和設(shè)計要點。
一、圖標(biāo)分類
象形圖標(biāo),是現(xiàn)代比較流行的圖標(biāo)類型,通過其與物理對象的圖畫相似來表達其意義的表意文字。比如一個日歷造型的圖標(biāo)表現(xiàn)的就是日歷。
表意圖標(biāo),這種類型的圖標(biāo)比較復(fù)雜,需要投入學(xué)習(xí)成本來理解它,比如在學(xué)習(xí)數(shù)學(xué)的時候,要先學(xué)習(xí)并記住各種符號,通常表意文字是基本的形狀,人們一般是沒辦法一眼認(rèn)出來的它的含義的,需要去學(xué)習(xí)。
二、圖標(biāo)風(fēng)格
1. 擬物圖標(biāo)
擬物,或稱擬物化,也叫做現(xiàn)實主義。擬物化風(fēng)格是喬布斯時代的ios代表設(shè)計風(fēng)格,其目的是使用戶界面簡單易懂,降低用戶學(xué)習(xí)成本。擬物圖標(biāo)比較注重質(zhì)感表現(xiàn)、構(gòu)型和光影控制的這些技法。因為擬物化設(shè)計過于復(fù)雜給用戶瀏覽信息造成了不必要的干擾,所以現(xiàn)在的擬物圖標(biāo)已經(jīng)被時代所淘汰了。
2. 線性圖標(biāo)
目前是***的圖標(biāo)表現(xiàn)方式之一。是由一條等粗細(xì)度構(gòu)成的圖形,相比面形圖標(biāo)會比較有細(xì)節(jié)的表現(xiàn)空間,控制線條的粗細(xì)和構(gòu)型能夠有很多樣的視覺表現(xiàn)。
3. 面型圖標(biāo)
這類圖標(biāo)設(shè)計師會從現(xiàn)實世界中提取事物的關(guān)鍵外觀形狀特點,通過設(shè)計形式展現(xiàn)一個象形的剪影色塊,視覺上比較醒目,但不容易刻畫細(xì)節(jié)。
4. 填充圖標(biāo)
填充圖標(biāo)是線性圖標(biāo)和面形圖標(biāo)的***結(jié)合,采用線條構(gòu)型在內(nèi)部根據(jù)設(shè)計風(fēng)格,選擇性的填充顏色,比較個性,有更多的設(shè)計發(fā)揮空間。
5. 手繪圖標(biāo)
手繪圖標(biāo)一般運用在游戲和手機主題設(shè)計中,視覺效果比較強烈,富有感染力,作為純手工繪制的圖標(biāo),很考驗設(shè)計師的手繪表現(xiàn)能力。
三、方寸之間
在動手畫圖標(biāo)之前一定要選定參考線,只有這樣所有圖標(biāo)才能規(guī)范統(tǒng)一。
這套參考線是根據(jù)尺寸1024x1024px繪制的。
在繪制圖標(biāo)過程中,構(gòu)圖不能太滿,要在四周要有留白,不要讓設(shè)計稿進入留白區(qū)域,不然進入留白區(qū)域的圖標(biāo)會顯得很大,整體會顯得不和諧,大小不統(tǒng)一,所以根據(jù)不同形狀的圖標(biāo)制定出了四種外輪廓的圖標(biāo)參考線。
在繪制圖標(biāo)過程中,為了達到視覺上的統(tǒng)一,可以相對的縮小外輪廓的尺寸,不用嚴(yán)格的遵循網(wǎng)格和參考線。網(wǎng)格是為了幫助你讓圖標(biāo)保持統(tǒng)一性,如果在設(shè)計出一個偉大的圖標(biāo)和遵循規(guī)則之間二選一,那就打破規(guī)則。
1. 像素對齊
在制作圖標(biāo)時,常常會碰到圖標(biāo)發(fā)虛的問題,那是因為我們沒有嚴(yán)格做到像素對齊,作為一名專業(yè)的ui設(shè)計師,必須注意到這點。
2. 多使用布爾運算
在制作圖標(biāo)時能用基本形狀進行布爾運算的情況下,盡量不要使用鋼筆工具,使用布爾運算的好處有很多:
- 讓圖標(biāo)更加規(guī)范
- 后期進行修改更加方便快捷
四、用品牌基因法做圖標(biāo)
文章中使用的 [ 用品牌基因法做圖標(biāo) ]理論源于菜心設(shè)計鋪,品牌基因的定義:視覺層面的品牌基因就是通過一個事物或者提取出一個(或一組)視覺符號。
1. 提取特定形狀,直接應(yīng)用
最常見的方法是直接將logo作為圖標(biāo),如下圖:
2. 吸取品牌顏色
從咸魚logo中吸取品牌色,當(dāng)作品牌基因,這是也常見的一種方式
3. 抓取風(fēng)格特點
抖音結(jié)合了「抖」的風(fēng)格特色,運用在產(chǎn)品的各個環(huán)節(jié),建立了品牌特色,讓人一看到這些設(shè)計就知道是抖音。
五、結(jié)語
通過上面的分享不知道大家對圖標(biāo)設(shè)計有沒有了大概的了解,如果大家已經(jīng)對制作圖標(biāo)的基本原則有了基本的了解,可以自己動手試一試,光說不練假把式,自己親自動手才能發(fā)現(xiàn)問題解決問題,逐漸提高自己的設(shè)計能力。如果你對圖標(biāo)設(shè)計特別感興趣的話,也可以找資料深入學(xué)習(xí),畢竟我想每一個設(shè)計師心里都有一個大師夢!
【本文是51CTO專欄機構(gòu)“豈安科技”的原創(chuàng)文章,轉(zhuǎn)載請通過微信公眾號(bigsec)聯(lián)系原作者】