圖標定制設(shè)計之一:6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

2022-6-13    博博


前言


做好圖標設(shè)計是一個入門級 UI 設(shè)計師的必備技能之一,圖標是界面中非常重要的組成部分,在實際的工作中,即便是一些工作多年且有一定經(jīng)驗的設(shè)計師,也很難保證自己設(shè)計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設(shè)計思路更是有所區(qū)別,例如金剛區(qū)、分類、標簽欄、服務(wù)工具等。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

用圖標準確的表達出實際含義,僅僅學其「形」是不夠的,需要對圖標有較為全面、系統(tǒng)的認識,了解圖標的相關(guān)概念、正確的繪制方法及處理好一系列的細節(jié),本篇文章將介紹圖標設(shè)計的具體方法及要點,幫你規(guī)避掉一些常見的問題,讓圖標設(shè)計有理有據(jù)。

本期大綱

  1. 圖標的定義
  2. 常見的圖標風格
  3. 性格與氣質(zhì)
  4. 設(shè)計規(guī)范與流程
  5. 常見問題及注意事項
  6. 圖標資源
  7. 總結(jié)


圖標的定義


1. 什么是圖標?

圖標是一種具有高度概括性的圖形化標識,在界面中與文案相互支撐、搭配使用,隱晦或直白的表達內(nèi)容的具體含義、屬性特征、形象氣質(zhì)等豐富的視覺信息。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

從概念上來講,圖標可分為廣義、狹義兩種,廣義指的是現(xiàn)實世界中的圖形符號、且有明確指向的含義,而狹義的圖標指的設(shè)備界面中的符號,這些設(shè)備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體,如手機、電腦、iPad…等。在 UI 設(shè)計中主要具是針對狹義的概念。

圖標設(shè)計是一門學問,在我們的認知中,通常將圖標理解為某個概念的抽象圖形,通過設(shè)計清晰易懂的圖形傳達出比文字更高效率的信息,同時提升界面的美觀程度。想要將圖標設(shè)計的更加出色,則需要頻繁練習、不斷試錯、持續(xù)探究并嘗試新的風格,所以很值得我們花費大量的時間去鉆研練習。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

2. 圖標的基本特征

一個界面是由文字、圖標、幾何圖形、圖片(音頻、視頻)組成,從 UI 設(shè)計師的角度,相對來說,其他三種元素大多運用到的是排版技巧,而圖標則是需要繪制、創(chuàng)作的元素,在沒有圖標的情況下,純文字也可以代替,可為什么貴還要費力費時的設(shè)計圖標呢?原因主要有兩點:

首先,圖標作為一種圖形符號的存在,跟文字的復(fù)雜程度相比,在識別效率上有著先天的優(yōu)勢,因文字需根據(jù)語種、長短的不同,所占用的界面空間資源就不同,在文字較多的情況下,大大減低了用戶瀏覽速度及信息傳達的效率,固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高,且讓界面更加簡潔,所以我們常見的圖文結(jié)合界面,絕大多數(shù)都是圖標在上、文字在下,或者圖標在左、文字在右,這些設(shè)計足以說明圖標視覺傳達的優(yōu)先級高于文字。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

其次,不同風格、樣式的圖標能讓界面看起來更美觀,提高用戶的視覺舒適度。設(shè)想一下,如果界面沒有任何圖標的點綴,即便用戶也能使用,但看多來多少都有些枯燥無味,全部用文字來理解內(nèi)容還容易引起視覺疲勞。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南


常見的圖標風格

1. 扁平風格

扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義,并通過不同的色彩體現(xiàn)出不同的視覺效果,最常見配色有以下幾種:

單色:簡潔、清晰視覺效果,常見于基礎(chǔ)功能圖標。例如:B端功能入口,移動端個人中心、二/三級頁面的工具欄等,也有很多app的金剛區(qū)利用底色塊襯托反白的圖標。

雙色:是很常見的功能性圖標,至少由兩個以上的元素組成,在單色的基礎(chǔ)上加以色彩點綴,讓本身就不是很突出的元素不再單調(diào),如果融入品牌色,能提升整個界面品牌調(diào)性,適用場景跟單色圖標相比則范圍更廣。

多色:至少由三種或以上的形狀、顏色組合而成,常用于金剛區(qū)、產(chǎn)品分類列表、定制化菜單等。

漸變:漸變色的圖標顯得較年輕化,可以是單元素的漸變或多元素的漸變組合,能映射出一種活潑、熱烈的氛圍。例如:視頻、直播等娛樂類型的APP,或車載UI等。

不透明度:調(diào)整圖標中某個元素的不透明度,可在不變換色系的情況下豐富配色細節(jié),還能與底色融合的更加細膩,解決多色漸變視覺跳躍的問題。

另外,在 UI 界面中,扁平化風格圖標使用最多的當屬線性、面性、線面結(jié)合這三種類型。

線性

線性圖標主要是通過線條描邊勾勒出來的圖形,在界面中的尺寸普遍偏小,其線條不能過于復(fù)雜,否則將會影響辨識度,看似不多的簡單線條搭配不同的色彩,則有很大的調(diào)整空間。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

面性

面性圖標主要通過剪影的形式來制作抽象的形體,相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設(shè)計感,以達到多種視覺表現(xiàn)的效果。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

線面結(jié)合

線面結(jié)合的圖標既有線段或輪廓、又有填充的色塊,相比純線/面性單一樣式的圖標則細節(jié)更加豐富,如果把控到位,會有更好的視覺效果及信息傳達的效率,也不失趣味性。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

2. 擬物化風格

擬物風格的圖標主要通過細節(jié)和光影、根據(jù)現(xiàn)實世界中的物品塑形打造出圖形立體效果,非??简炘O(shè)計師的造型繪制、技法表現(xiàn)能力。這種風格的圖標有著極強的代入感,能讓用戶快速領(lǐng)會圖標所傳達出的意圖及氣質(zhì)。

因為擬物化圖標信息元素的高復(fù)雜度及突出的視覺效果非常搶眼,在頁面中頻繁出現(xiàn)會成為干擾其他信息的存在,游戲類應(yīng)用中使用的非常普遍(不過多贅述)。在其他類型的應(yīng)用中,大部分出現(xiàn)在營銷類型的界面,例如專題頁、成就榜、會員中心等。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

3. 輕質(zhì)感風格

跟擬物化圖標相比,輕質(zhì)感就不會有太多復(fù)雜的元素,主要通過各種色彩漸變、發(fā)光、投影等圖層樣式體現(xiàn)出非常柔和的立體感,整體風格偏年輕化,給人輕盈、簡潔及精致的感覺。在設(shè)計過程中,請使用干凈且和諧的配色,主要使用在界面較大區(qū)域的位置。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

4. 磨砂玻璃風格

不僅僅是頁面背景有毛玻璃風格,圖標的毛玻璃風格也很出彩,主要通過背景模糊、疊加、剪切圖層來實現(xiàn)(網(wǎng)上很多教程)。輕量漸變搭配毛玻璃的朦朧感,可以體現(xiàn)出圖標的質(zhì)感與神秘感。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

除上述這幾種風格的圖標之外,還有例如 2.5D、3D、像素風、新擬態(tài)…等,但在 UI 設(shè)計中并不常用,就不一一舉例說明了。


性格與氣質(zhì)


1. 性格走向(描邊/拐角)

力量型:粗線條、直角拐點,給人一種力量、狂野的感覺,常用于體育、健身、機械類型的產(chǎn)品;

可愛型:粗線條、圓角設(shè)計,看起來活潑可愛,給人舒適、飽滿的感覺,在兒童、教育類產(chǎn)品中很常見;

嚴謹型:細線條、直角拐點,看起來工整、嚴謹,中規(guī)中矩,適合政府、法律類型的產(chǎn)品;

精致型:細線條、圓潤的拐角,柔和、干凈、纖細且精致的感覺,很適合極簡風格的設(shè)計,在藝術(shù)、金融、珠寶等奢華類產(chǎn)品中比較常見。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

2. 動態(tài)效果

如果想要突出金剛區(qū)、工具列表中的某個功能入口,將圖標設(shè)計成動態(tài)效果,既能保持整體圖標風格的統(tǒng)一、又能單獨突出功能的重要性,起到強調(diào)的作用,用來吸引用戶的注意力,引導用戶操作,提升其點擊率。切記動效圖標不能過多,當什么都突出了等于什么都沒有突出。

其次,在年輕化、娛樂類型的產(chǎn)品 Tab 欄中的圖標切換時,加入動態(tài)效果,可起到畫龍點睛的作用,還能通過動效表達出不同的情緒,降低切換時的枯燥感,好的 Tab 動效能傳達出整個產(chǎn)品的氣質(zhì)。

最后,如果有類似運營或短期內(nèi)的活動,需要吸引用戶注意但又不適合固定在界面中的某個位置,這時可以設(shè)計一個動態(tài)圖標懸浮在設(shè)備某個位置(注意用戶體驗及交互原則),既不過多的占用頁面資源,還能同時顯示在多個界面,一舉多得。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

動效圖標:@墨染 ART 授權(quán)


設(shè)計規(guī)范與流程


遵循圖標設(shè)計規(guī)范有利于設(shè)計師之間的合作及接下來的設(shè)計,以及產(chǎn)品整體圖標風格的統(tǒng)一性,起到約束的作用,即便在更換設(shè)計師的情況下,也不至于出現(xiàn)較大的問題。在制定合理的設(shè)計規(guī)范前需要先了解圖標到底有哪些規(guī)范,應(yīng)從哪些方面入手,以便接下來的圖標設(shè)計順利進行。

1. 網(wǎng)格尺寸比例

為了保持圖標元素的平衡,尺寸大小需要保持一致,通常我們會建立基礎(chǔ)網(wǎng)格尺寸進行圖標的繪制,常見的網(wǎng)格尺寸有 16、24、36、48、64、128、512、1024,這些網(wǎng)格尺寸并非固定,也會根據(jù)設(shè)計中的特殊尺寸而變化。

一個圖標系統(tǒng)包括網(wǎng)格尺寸和圖標元素兩部分,設(shè)定好網(wǎng)格尺寸后,就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設(shè)計的圖標大小并不是跟隨網(wǎng)格尺寸,而是根據(jù)不同的形狀占比受制于圖標 keyline,最終形成統(tǒng)一的視覺大小。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

從上圖中可以看出,相同尺寸的圖標在真實的視覺中相差很大,這就好比一個 100 像素的圓形、跟 100 像素的方形相比,站在邏輯角度,大小是相同的,但在視覺上,一定是方形顯得更大。所以我們常說的圖標大小相同,并非真實尺寸,而是視覺感受。

2. 圖標 keyline

為保持圖標視覺上的一致性和平衡感,需要先繪制 keyline 用來指導、規(guī)范圖標設(shè)計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成,網(wǎng)格的大小需保持 4 的倍數(shù),便于不同尺寸的圖標都能適配,可使用 24*24px 的網(wǎng)格尺寸為基準,其他尺寸的圖標可通過增加倍數(shù)以此類推,如 48*48px、72*72px……

下圖是以 24px 尺寸的網(wǎng)格參考基準示例(出血為 2px):

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

3. 確定圖標風格

根據(jù)產(chǎn)品屬性及目標用戶并結(jié)合應(yīng)用場景,找到最符合自身產(chǎn)品性格、氣質(zhì)的圖標設(shè)計風格,例如健身應(yīng)用屬力量、粗獷類型,圓角、曲線適合女性產(chǎn)品等,在前面的「性格與氣質(zhì)」中有舉例說明。

4. 圖標繪制

經(jīng)過圖標風格的確定,圖標細節(jié)便是接下來繪制過程的核心部分,對線性圖標來說,注重的是線條的粗心,而面性圖標則注重各小圖形之間的距離,所以在繪制時,需要保持線條、間距的統(tǒng)一,方便后期的圖標更新迭代。

線性描邊粗細

我們以 iOS@2x 為基準(避免@1x 的 3px 描邊變成 1.5px,小數(shù)點),可適配最 2px、3px、4px 最常用的描邊粗細,4px 視覺較重,用于優(yōu)先級較高區(qū)域的功能性圖標,2px 看起來會顯得更加精致,在設(shè)計中,還需根據(jù)產(chǎn)品的行業(yè)屬性及調(diào)性來確定描邊的粗細,并統(tǒng)一起來。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

面性正負形間距

面性圖標需要確保每個單獨的形狀之間有足夠的間距,以 24px 大小的形狀為例,其間距不能小于 1px,以此類推,雖然未規(guī)定上限,但間距也不宜太大,否則無法相互組合關(guān)聯(lián),以實際視覺的舒適度為準。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

5. 創(chuàng)意提取

根據(jù)行業(yè)類型及風格進行創(chuàng)意設(shè)計,如線性統(tǒng)一斷點、融入品牌基因、單個元素傾斜、節(jié)日氛圍烘托、修飾元素等,為圖標塑造靈魂或傳遞更多信息而進行的二次創(chuàng)作。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南


常見問題及注意事項


1. 識別性

圖標存在的意義,主要是為了快速傳遞信息,不能讓其成了無用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時間的積累,人們對一些線上圖標信息的隱喻已根深蒂固,早就形成了慣性思維,所以我們設(shè)計的圖標必須要符合用戶的認知,能讓用戶快速理解,即便出現(xiàn)個別特殊情況,也要用文字清楚的標注說明,否則一旦讓用戶產(chǎn)生疑惑,圖標就起了負面作用,在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預(yù)期,減少學習成本,提升使用效率。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

2. 簡潔美觀

圖標是將現(xiàn)實世界中的事件/事務(wù)用抽象的圖形表現(xiàn)出來,如果過于追求完美而設(shè)計的太復(fù)雜,還不如直接上圖片來的快,所以不能過于展現(xiàn)真實物品的細節(jié),最終設(shè)計出正確而不失真的圖標尤為重要,這樣既能用于傳遞信息,又便于用戶快速且清晰感知。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

3. 視覺對齊

為確保視覺平衡,異形元素在使用系統(tǒng)自動對齊后,會有一定的偏差,需手動微調(diào)進行視覺對齊。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

4. 保持一致

針對大型項目,要想整個家族的圖標更加和諧,保持相同的樣式及設(shè)計原則著實不易,尤其是在多人完成設(shè)計的情況下,事先有一個清晰的設(shè)計原則和規(guī)范是必不可少的。圖標都有著對應(yīng)的視覺重量,例如描邊粗細、填充模式、繁簡程度等屬性,需要做的就是控制好這些關(guān)鍵因素,讓整體看起來視覺重量相同且能相互關(guān)聯(lián)組合到一起,保持所有圖標的一致性。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

5. 最小間隙

單個圖標的各元素之間要有呼吸感,需要適當?shù)牧舭?,如果描邊過大,整個條看起來感覺像糊成一團或臃腫不堪,如果存在類似問題,可通過減小描邊值或降低圖標的復(fù)雜程度來解決。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

6. 使用 2 的倍數(shù)

以偶數(shù)為單位的設(shè)計便于數(shù)據(jù)的計算(2 的倍數(shù)),例如正負形間距、描邊值等,在 iOS@2x 設(shè)計下,@1x 也不會出現(xiàn)小數(shù)點。在移動端設(shè)計中,最小的圖標為 24px,可被 2、3、4、6、8、12 整除,也是可以被整除最多的數(shù)值,因此,可靈活的等比縮放。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

7. 延展性

即便做好了前面的一切,圖標設(shè)計工作也并未完成,需要做的是持續(xù)測試圖標的可用性,做好后續(xù)的完善與優(yōu)化,沒有最好、只有更好,以確保上線后的效果和后續(xù)的迭代。


圖標資源庫


阿里巴巴矢量圖標庫: https://www.iconfont.cn/ ,90%以上常見的矢量圖標下載;

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

飛書官方圖標庫: https://iconpark.oceanengine.com/official ,海量資源可在線修改,調(diào)整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標。

6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

雖然上述圖標資源基本能滿足我們的日常設(shè)計所需,但僅僅只能是作為參考而已,一味的圖方便、投機取巧只會毀了自己的動手、創(chuàng)新能力。


結(jié)語


圖標設(shè)計是一個非常龐大的版塊,且有很多個分支,例如:金剛區(qū)、標簽欄、應(yīng)用圖標…等,每個分支都有自己的一套設(shè)計法則,我們需要在不斷的學習與創(chuàng)新中獲得更多經(jīng)驗。一篇文章不足以道出圖標設(shè)計的精髓,但可以在不斷沉淀、相互探討、持續(xù)的學習中一起進步。


作者:大漠飛鷹CYSJ

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


更多精彩文章:

圖標定制設(shè)計之一:6大章節(jié)!圖標設(shè)計基礎(chǔ)知識全方位入門指南

圖標定制設(shè)計之二:超全總結(jié)!金剛區(qū)圖標設(shè)計的 10 大風格

圖標定制設(shè)計之三:想讓圖標更精致?先掌握這11個容易忽略的設(shè)計細節(jié)!

圖標定制設(shè)計之四:學會SVG圖標的高級用法,界面適配效率翻一倍!

圖標定制設(shè)計之五:研究微軟 Fluent 圖標規(guī)范后,我總結(jié)了這9個知識點!

圖標定制設(shè)計之六:為什么別人的圖標設(shè)計又快又好?來看騰訊高手總結(jié)的知識點!

圖標定制設(shè)計之七:客戶說B端圖標太普通沒新意,該怎么解決?

圖標定制設(shè)計之八:從6個方面幫你快速掌握圖標設(shè)計規(guī)范

圖標定制設(shè)計之九:不止畫圖標!5 個金剛區(qū)的交互設(shè)計思考










分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔