99精品无码视频,亚洲精品综合

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

圖標(biāo)設(shè)計細(xì)節(jié)不夠？你需要掌握的10條關(guān)鍵原則

彩云sky

2020-05-22

0 評論 6047 瀏覽 25 收藏

14 分鐘

圖標(biāo)在設(shè)計中是一個最為基礎(chǔ)的設(shè)計元素之一，很多人在圖標(biāo)設(shè)計細(xì)節(jié)上有不少問題。希望通過今天這篇文章，能夠讓大家自檢下自己作品集中的圖標(biāo)問題，或許還有可以提升之處。

本文會著重介紹圖標(biāo)基礎(chǔ)規(guī)則，深入探討圖標(biāo)的視覺重量和對齊問題。

01 使用柵格規(guī)范，保證相同的視覺大小

一個界面中的圖標(biāo)通常可以近似地看成是一些基本形的組合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量，因為它們或多或少的變成了相同的斑點。

圖標(biāo)的基本輪廓

根據(jù)圖標(biāo)的形狀，將其嵌入到對應(yīng)柵格中。例如，方形圖標(biāo)比三角形或細(xì)長的圖標(biāo)更緊湊些。

圖標(biāo)在柵格中

柵格中的基本圖形

圖標(biāo)越緊湊，需要的空間就越少。圖標(biāo)銳利的邊緣或小細(xì)節(jié)越多，它在畫板上占據(jù)的空間就越大。

圖標(biāo)示例，柵格中可以放不同異形的圖標(biāo)

柵格中放更多細(xì)節(jié)的基本圖形：方形，圓形，三角形

當(dāng)心成為柵格的奴隸，柵格是用來輔助你而不是去限制你的。如果一個圖標(biāo)因為一些突出的元素而在視覺上有更好的效果，那就讓它們突出。

02 注意像素網(wǎng)格，保證圖標(biāo)足夠清晰

為了使圖標(biāo)在非視網(wǎng)膜屏幕上清晰可見，請堅持使用像素網(wǎng)格并在線性圖標(biāo)上優(yōu)先使用2px粗細(xì)的描邊。2px居中對齊的描邊通常會提供足夠的粗細(xì)和清晰的輪廓

2像素線型圖標(biāo)示例

如果圖標(biāo)選擇了1px的描邊，則應(yīng)該使用內(nèi)描邊或外描邊而不是居中的。

1像素外描邊圖標(biāo)示例

1px的居中描邊會使圖標(biāo)在放大到100%的情況下變的模糊，但如果放的更大會顯的清晰。

1像素居中描邊線型圖標(biāo)示例

根據(jù)像素網(wǎng)格去設(shè)置斜線的起點和終點。當(dāng)斜線的角度為45°，30°和60°時會比不規(guī)則角度（像13.7°或81°）更清晰。如今仍有數(shù)百萬人在使用低分辨率的屏幕設(shè)備，這就是為什么圖標(biāo)的清晰度仍然很重要的原因。

矢量和位圖圖標(biāo)示例

03 保持一致的細(xì)節(jié)

最好從復(fù)雜的圖標(biāo)開始去創(chuàng)建一個圖標(biāo)集。它將定義詳細(xì)程度，并且對設(shè)計具有相同視覺重量的圖標(biāo)們有幫助。

不同細(xì)節(jié)程度的圖標(biāo)示例

當(dāng)圖標(biāo)的細(xì)節(jié)程度不一樣時，細(xì)節(jié)越多的圖標(biāo)越能吸引用戶的注意力，并且看起來視覺重量越大。

細(xì)節(jié)不一致

04 控制最小間隙

在整個圖標(biāo)集中，圖標(biāo)內(nèi)部相鄰元素的間距不應(yīng)太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓“粘連”。

不一致的間隙

間隙統(tǒng)一

對于線型圖標(biāo)，最好使最小間距和線條的粗細(xì)相等。線條要么清晰地分開，要么精確地連在一起，永遠(yuǎn)不要含糊不清。

不一致的間隙

間隙統(tǒng)一

05 刪掉重復(fù)的部分

在圖標(biāo)集中，可能會有些重復(fù)的細(xì)節(jié)。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數(shù)學(xué)里分?jǐn)?shù)要約分（化簡分?jǐn)?shù)）一樣。你看到的視覺干擾越少，你對它的理解就越清晰。

如果目標(biāo)用戶已經(jīng)明白他或她使用的是什么，那就沒必要一遍遍的重復(fù)。例如：避免使用基于信封的圖標(biāo)不會讓人覺得這不是一個郵箱類app。（有點繞口，意思是：不用添加相關(guān)系列類的輔助圖標(biāo)也會讓人知道這是一個郵箱類app）

這條規(guī)則也適用于圖標(biāo)周圍的裝飾（框架，背景）。如果這些對圖標(biāo)的識別性沒幫助，則它們就會對圖標(biāo)識別產(chǎn)生阻礙。

06 遵循一種風(fēng)格

不要將不同樣式，不同角度地元素混合在同一個圖標(biāo)集中。一致的風(fēng)格會對用戶識別圖標(biāo)有所幫助并讓用戶明白這些圖標(biāo)有同等的重要性和狀態(tài)。

同一緯度的圖標(biāo)

不同維度的圖標(biāo)

同樣的原理也適用于線型圖標(biāo)和面型圖標(biāo)。如果你把它們混在一起，人們可能會認(rèn)為它們有不同的重要性或狀態(tài)。當(dāng)然，除非你是故意的。例如，面型圖標(biāo)用于關(guān)鍵的指令，線型圖標(biāo)用于其他的指令。

一組一致性圖標(biāo)

一組不一致的圖標(biāo)

在界面中擁有兩種不同的圖標(biāo)是很好的。線型圖標(biāo)用作不可點擊或正常狀態(tài)，面型圖標(biāo)用于點擊狀態(tài)。

07 使用2的倍數(shù)來設(shè)計圖標(biāo)

8px網(wǎng)格和12列布局常用于許多界面，與基于十進制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標(biāo)已成為了標(biāo)準(zhǔn)。如果需要更大的尺寸，可以對他們進行縮放。

08 保證形狀簡潔和精確

完美主義不是我們的目標(biāo)：沒有人需要為了像素完美而去追求完美的線條。但是，這對于產(chǎn)品中最終呈現(xiàn)正確而不失真的圖標(biāo)是很重要的。記住圖形中錨點數(shù)量達(dá)到最少并且相鄰元素之間不要有間隙。

矢量圖標(biāo)的調(diào)整與優(yōu)化

還有那些煩人的“8.999px”或“100.001px”呢？如果錨點的位置很準(zhǔn)確，圖標(biāo)的邊緣看起來就會很清晰。此外，在合并形狀時，也不會有出現(xiàn)多余錨點和間隙的風(fēng)險。

矢量圖標(biāo)的調(diào)整與優(yōu)化

09 清除SVG文件中的垃圾圖層

許多設(shè)計軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來似乎都不錯。

sketch中的圖標(biāo)示例

在其它軟件中打開這個SVG文件（例如Ai中），你會看到很多空圖層，不必要的編組，有時還會有剪切蒙版。當(dāng)前端開發(fā)人員將圖標(biāo)轉(zhuǎn)換成圖標(biāo)字體或在網(wǎng)頁上使用SVG文件的時候，這些都可能導(dǎo)致出現(xiàn)問題。

Ai中的圖標(biāo)示例

你可以刪除這些垃圾文件然后保存。

你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預(yù)覽的效果不一樣。順便說下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數(shù)據(jù)字符串。