應(yīng)用中心圖標(應(yīng)用中心圖標怎么升級)

圖標的正確應(yīng)用可以幫助用戶快速定位并理解想法，從而推動用戶便捷地進行下一步操作，提升用戶的最終使用體驗。那么在圖標設(shè)計中，有沒有哪些細節(jié)是設(shè)計者可以注意的？又或者有沒有哪些技巧是可以利用的？本文作者便總結(jié)了10個技巧，一起來看看吧。

圖標是任何設(shè)計系統(tǒng)不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現(xiàn)快速導(dǎo)航，解決語言障礙，最終提升用戶體驗。

圖標作為一種設(shè)計工具，在UI/UX和平面設(shè)計師中最受歡迎。這些微小的設(shè)計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數(shù)字語言的地位。

在這篇文章中，我整理了10個簡單又重要的技巧幫你設(shè)計出更專業(yè)的圖標。

一、尺寸規(guī)范

最小的圖標大小通常是12 x 12px。以這個尺寸為基礎(chǔ)，行業(yè)標準中大多數(shù)其他尺寸只是通過將之前的尺寸翻倍而產(chǎn)生的。

小尺寸圖標，px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.中尺寸圖標，px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.大尺寸圖標，px: 512 x 512, 1024 x 1024.

重要提示：當(dāng)你設(shè)計圖標時，重要的是要按100%顯示的比例去設(shè)計，使圖標完美像素并放大像素塊查看準確性。

二、保持像素完美

完美像素圖標在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應(yīng)性和適配更多設(shè)備是非常重要的。

1. 像素網(wǎng)格對齊

使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實心）

3. 完美角度

有角度的線更模糊。創(chuàng)建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。

3. 邊緣清晰

直線必須占據(jù)其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。

三、注意粗細和間隙

為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認為是必須遵循的:所有線條的寬度都是相同的。

理想情況下，線寬和間隙大小也應(yīng)該相等。

然而，有時候你必須打破這個規(guī)則。當(dāng)你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發(fā)生。比如條形碼這個例子來說，我故意使圖標內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。

四、統(tǒng)一圓角

在UI設(shè)計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當(dāng)我們說到一個集合中的多個對象時，規(guī)則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應(yīng)用相同的屬性。

為什么它如此重要?一致性是UI/UX設(shè)計的關(guān)鍵原則。一個可用和用戶友好的設(shè)計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。

五、視覺平衡

在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。

當(dāng)我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應(yīng)該使圓更大(或減少正方形的尺寸)。

這個原則也適用于圖標的設(shè)計和使用。有些圖標的一側(cè)可能較重。試著調(diào)整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調(diào)整突出顯示的圖標。

（彩云注：這個原則很多人應(yīng)該都知道，但我發(fā)現(xiàn)也是在整套圖標的設(shè)計中最容易出現(xiàn)的問題，當(dāng)把圖標匯總在一起的時候，這個問題尤其需要重視。）

六、視覺對齊

我們經(jīng)常在設(shè)計軟件中使用中心對齊，這種方法沒有錯。但當(dāng)涉及到細節(jié)時，比如圖標設(shè)計，我們需要相信自己的眼睛，打破數(shù)學(xué)法則，以增強元素的平衡。

讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。

七、保持簡單和直接

我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡單的情況下工作得最好。用戶越容易理解某樣?xùn)|西并與之互動，它就越具有通用性。

（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學(xué)習(xí)下。）

它如何適用于圖標設(shè)計?

1. 別使用文字

文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。

2. 不要過度設(shè)計

不必要的復(fù)雜性阻礙了合理的表達，應(yīng)該避免。過載的設(shè)計會將用戶體驗變成一場噩夢。

3. 避免不必要的元素

只要確保每個圖標在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）

重要提示：在圖標設(shè)計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優(yōu)秀的圖標應(yīng)清晰易懂。

八、圖標規(guī)范框架

圖標規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個框架來設(shè)計圖標。但是，這個規(guī)則非常靈活，只是作為參考，方便圖標的設(shè)計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！

框架是設(shè)計的“容器”。框架規(guī)范了一個統(tǒng)一的范圍來設(shè)計圖標，這背后有一些原因：

1. 大小

由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設(shè)計中統(tǒng)一圖標尺寸，我們應(yīng)該將它們放置在大小始終相同的框架中。

2. 輸出

框架內(nèi)的圖標與視覺中心對齊，這經(jīng)常被開發(fā)人員忽略，因為他們經(jīng)常根據(jù)實際的中心來調(diào)整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關(guān)重要的，當(dāng)你按這個框架輸出圖標時，能保證視覺設(shè)計時想要的視覺中心。

3. 效率

如果使用Figma，可以通過創(chuàng)建組件來節(jié)省時間。可以使用實例快速地將一個圖標替換為另一個圖標。

九、設(shè)置好圖標的關(guān)鍵詞

如果你要打算做圖標資源庫的話。要想到當(dāng)設(shè)計師在庫中搜索圖標時，會遇到哪些挑戰(zhàn)？他們的痛點是什么？他們的需求是什么？要回答這些問題，請設(shè)身處地為用戶著想。

1. 不要讓用戶思考

例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內(nèi)花卉，植物商店等。

2. 展示關(guān)聯(lián)圖標

例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。

3. 使用標簽

用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當(dāng)一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關(guān)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫

十、SVG和PNG圖標的區(qū)別

最終應(yīng)該導(dǎo)出SVG或PNG格式？這是一個關(guān)鍵問題。讓我們來比較一下格式:

SVG的文件大小非常小，這意味著最終設(shè)計的加載速度非常快，而PNG則相當(dāng)大。SVG格式是無限可伸縮的，而PNG的分辨率則受創(chuàng)建的文件大小的限制。然而，將一個復(fù)雜的SVG圖標縮小到隨機大小可能會產(chǎn)生半像素的邊緣，這可能會使圖標看起來有虛邊。這是因為當(dāng)屏幕上的圖標變得更小時，代表其來源的像素就會減少，從而導(dǎo)致清晰度下降。這并不意味著需要避免使用SVG文件。只需根據(jù)預(yù)期用途調(diào)整 SVG 圖標即可。SVG文件可以編輯和動畫，PNG文件只能是靜態(tài)的。對于PNG格式，你必須提供各種大小和顏色的資源，而在使用SVG時就不需要這些了。Png與大多數(shù)瀏覽器兼容，而svg可能不被舊的瀏覽器支持。

我個人的選擇是使用SVG圖標，因為它可以節(jié)省很多時間。但是，一定要小心縮小復(fù)雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。

十一、總結(jié)

到這里你應(yīng)該已經(jīng)學(xué)會了這10個圖標設(shè)計要點，在你的圖標設(shè)計中使用這些規(guī)則，相信會讓你的圖標變得更加專業(yè)！

彩云注：圖標設(shè)計是一個設(shè)計師的基礎(chǔ)能力，在彩云看過的無數(shù)份作品集中最普遍的問題也就是圖標設(shè)計。今天這篇文章雖然非常基礎(chǔ)，但千萬別小看它，用這10條技巧重新審視自己的圖標作品，相信會有新的收獲！

原文作者：Karina（本文翻譯已獲得作者的正式授權(quán)）

原文：https://bootcamp.uxdesign.cc/create-icons-like-a-pro-c66a50064f8b

譯者：彩云Sky，公眾號：彩云譯設(shè)計；人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級視覺設(shè)計師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。