大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「圖標(biāo)設(shè)計(jì)細(xì)節(jié)」。圖標(biāo)在頁(yè)面中的尺寸很小，卻包含著很多細(xì)節(jié)。作為通用的視覺(jué)化語(yǔ)言，把握住其中的設(shè)計(jì)細(xì)節(jié)至關(guān)重要。

這次總結(jié)一下圖標(biāo)設(shè)計(jì)的屬性以及在圖標(biāo)設(shè)計(jì)中，很重要但容易被忽略的知識(shí)點(diǎn)。

在 UI 設(shè)計(jì)中，圖標(biāo)主要有兩大類(lèi)：一類(lèi)是 APP 啟動(dòng)圖標(biāo)，每個(gè) APP 獨(dú)一份；另一類(lèi)是系統(tǒng) icon，搭配文字，方便用戶快速理解信息，也是這篇文章重點(diǎn)講解的內(nèi)容。

風(fēng)格

常見(jiàn)的圖標(biāo)風(fēng)格有線性、面性、彩色、寫(xiě)實(shí)、3D 等，圖標(biāo)的選用因頁(yè)面的設(shè)計(jì)風(fēng)格、圖標(biāo)的位置等原因會(huì)有所差異，主要的作用是反饋動(dòng)作和吸引用戶更多注意力。

1. 線形/面性：最基本也是做常用的風(fēng)格，廣泛用在頁(yè)面設(shè)計(jì)中。
2. 彩色：通常用于反饋用戶的操作或者增加用戶的注意力。
3. 3D/寫(xiě)實(shí)：當(dāng)頁(yè)面中的某個(gè)內(nèi)容需要引起用戶高度注意時(shí)使用，一下抓住用戶的視線。

Tips: 現(xiàn)在字節(jié)、百度新推出的一些年輕化產(chǎn)品中，有很多精致的 3D 寫(xiě)實(shí)圖標(biāo)，極具個(gè)性，很好地迎合了年輕用戶的喜好。在扁平風(fēng)格流行的當(dāng)下，這樣的嘗試也是一種突破。

重量

簡(jiǎn)單的線性圖標(biāo)重量輕，看起來(lái)更簡(jiǎn)約，不會(huì)給頁(yè)面帶來(lái)太大的視覺(jué)負(fù)擔(dān)。比如當(dāng)頁(yè)面中已經(jīng)有很豐富的圖片和內(nèi)容，那么更適合選用簡(jiǎn)約的、重量輕的線性/面形圖標(biāo)，防止頁(yè)面過(guò)于雜亂。

相反，如果當(dāng)前的頁(yè)面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至 3D 圖標(biāo)來(lái)增加頁(yè)面的豐富性，讓頁(yè)面看起來(lái)更有設(shè)計(jì)感，給用戶帶來(lái)視覺(jué)上的愉悅，簡(jiǎn)約而不簡(jiǎn)單。

屬性

構(gòu)成圖標(biāo)的元素包括描邊的粗細(xì)、端點(diǎn)的方圓、圓角的大小、色彩的輕重等，表達(dá)式規(guī)則是統(tǒng)一的，以便只給觀看者識(shí)別圖標(biāo)所需的最小更改。

1. 描邊粗細(xì)：手機(jī)上常用到的描邊粗細(xì)有 2px、3px、4px。2px 的看起來(lái)會(huì)顯得更加精致，4px 的描邊視覺(jué)較重，可以用在優(yōu)先級(jí)較高的區(qū)域作為功能性圖標(biāo),。
2. 端點(diǎn)/節(jié)點(diǎn)：圖標(biāo)的端點(diǎn)有平頭、圓頭和方頭，圖標(biāo)的節(jié)點(diǎn)有斜接連接、圓角連接、斜角連接，具體使用哪種樣式要根據(jù)頁(yè)面的情況統(tǒng)一設(shè)置。
3. 圓角半徑：方形的圖標(biāo)邊角過(guò)于鋒利，用戶有時(shí)候看起來(lái)會(huì)不舒服，圓角圖標(biāo)更圓滑，相對(duì)來(lái)說(shuō)更容易讓用戶接受。雖然圓角用的更普遍，但具體使用哪種，還是要考慮頁(yè)面的整體風(fēng)格再?zèng)Q定。

網(wǎng)格

圖標(biāo)的外形有圓形、方形、三角形甚至不規(guī)則形狀的，所以我們很難將不同形狀的圖標(biāo)尺寸完全統(tǒng)一。

這個(gè)時(shí)候網(wǎng)格就起到很關(guān)鍵的作用，有了網(wǎng)格相當(dāng)于提前將圖標(biāo)限定范圍，在網(wǎng)格范圍內(nèi)根據(jù)圖標(biāo)的重量和重心靈活調(diào)整大小，這樣會(huì)讓不同形狀的圖標(biāo)看起來(lái)更統(tǒng)一。

視覺(jué)校正

由于設(shè)計(jì)軟件的局限性，雖然有些圖形已經(jīng)居中對(duì)齊，但有時(shí)候還需要進(jìn)行視覺(jué)校正。

最典型的圖標(biāo)案例是“播放”圖標(biāo)，利用設(shè)計(jì)軟件對(duì)齊中間的三角形后，會(huì)發(fā)現(xiàn)三角形的位置看起來(lái)偏左。

利用軟件對(duì)齊后，我們還需要再用眼睛確認(rèn)一遍，我們可以將三角形向右移動(dòng)，保證三角形的重心與圓形的重心一致，這樣整個(gè)播放圖標(biāo)看起來(lái)會(huì)更舒服。

角度

設(shè)計(jì)圖標(biāo)時(shí)，我們的第一反應(yīng)是不帶透視的二維圖形。因?yàn)槲覀冇^看手機(jī)的視角都是平視，所以大多數(shù)的圖標(biāo)都沒(méi)有透視，看起來(lái)會(huì)更簡(jiǎn)潔。

帶透視的圖標(biāo)會(huì)給用戶營(yíng)造一種空間感，可能會(huì)感到認(rèn)知失調(diào)。雖然這種帶透視的圖標(biāo)能引發(fā)用戶關(guān)注，但不建議這么設(shè)計(jì)。

比例

圖標(biāo)比例通常使用 8 的倍數(shù)作為基準(zhǔn)，例如 8px、16px、24px 和 32px，以便在各種環(huán)境中進(jìn)行流暢地切換。除此之外，在移動(dòng)端等屏幕尺寸較小的頁(yè)面中，還會(huì)使用 4px 的倍數(shù)，來(lái)實(shí)現(xiàn)多功能性。

清晰

圖標(biāo)的設(shè)計(jì)要使用用戶能夠快速理解的且最簡(jiǎn)潔的元素。圖標(biāo)的尺寸通常很小，要盡可能做到對(duì)用戶友好，可以使用一些簡(jiǎn)單的隱喻設(shè)計(jì)，但含義不能過(guò)于復(fù)雜。

一個(gè)圖形能說(shuō)明的問(wèn)題，沒(méi)必要再添加多余的圖形。復(fù)雜的圖標(biāo)可能需要花費(fèi)用戶很長(zhǎng)時(shí)間才能理解它們的含義，這樣反而會(huì)影響用戶的操作。

細(xì)節(jié)

這一點(diǎn)和剛才說(shuō)到的圖標(biāo)清晰道理一樣。圖標(biāo)最重要的目標(biāo)是快速傳遞信息，特別是對(duì)于尺寸很小的系統(tǒng)圖標(biāo)，最好只保留最基本的內(nèi)容，移除多余的裝飾元素。

一致性

這里說(shuō)得一致性，并不是指一個(gè)產(chǎn)品中所有頁(yè)面都只能使用一種圖標(biāo)風(fēng)格。一個(gè)產(chǎn)品有很多頁(yè)面，線性、面性等多種圖標(biāo)風(fēng)格可以一起使用。

但在同一個(gè)頁(yè)面場(chǎng)景中，執(zhí)行相同功能的圖標(biāo)應(yīng)該保持相同的樣式。

熟悉感

面對(duì)不同的操作系統(tǒng)，例如 iOS 和 Android，同一功能對(duì)應(yīng)的圖標(biāo)也會(huì)有差異。針對(duì)不同的系統(tǒng)，我們可以選用大多數(shù)用戶熟悉的圖標(biāo)，這樣用戶能更快地理解圖標(biāo)的含義

最后

以上就是常用卻容易忽略的圖標(biāo)設(shè)計(jì)細(xì)節(jié)，希望通過(guò)這些內(nèi)容能幫助你對(duì)圖標(biāo)設(shè)計(jì)有更深的認(rèn)識(shí)。

作者：Clippp

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

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

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門(mén)指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來(lái)看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說(shuō)B端圖標(biāo)太普通沒(méi)新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫(huà)圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類(lèi)型的菜單圖標(biāo)和用法，這篇全總結(jié)了！