圖標（ICON）是任何設計系統中都不可或缺的一部分。使用圖標的主要原因就在於它可以幫助用戶快速解釋想法、快速導骯、解決語言障礙等問題，以此讓用戶旅程變得可用且愉快。
ICON作為一種設計工具，在UI/UX設計師之間最受歡迎。它對每個人來說都是簡單易懂的，同時圖標所具有的這些特性也賦予了它們通用數字語言的地位。
今天，我們就給大家來分享幾個ICON設計的最佳原則，來幫助大家在UI/UX中設計出完美的圖標。
01
Size
最小的圖標大小通常為12×12px。根據行業標准，在以此為基礎產生的大小值中，大部分的數值都是通過將先前的數字加倍而創建的。通常我們可以看到小、中、大這三個尺寸的圖標大小。
-
小圖標：12×12, 16×16, 24 x 24, 32 x 32, 48 x 48px
-
中等圖標：64 x 64, 96 x 96, 128 x 128, 256 x 256px
-
大圖標：512 x 512, 1024 x 1024px
值得我們注意的是，在我們創建ICON時，應該以100%的比例設計，這樣才會使得圖標像素看起來比較完美。同時通過進一步放大也可以確保准確性。
02
Pixel-Perfect
具有完美像素的圖標會呈現出清晰明快的線條和形狀。如今，高分辨率顯示器和Retina顯示器越來越流行，因此在不久的將來可能會減少對像素完美圖標的要求。但就目前而言，我們所設計的圖標也應該是可擴展、響應迅速並能適用於許多設備的。我們在創建具有完美像素的圖標時，可以參考以下三種建議：
-
對齊像素網格：這種設計方法可以使直線變得非常清晰，並增加曲線和拐角的清晰度
-
使圖標保持完美角度：有角度的線條更有模糊感。在創建圖標時，完美的角度是45°
-
邊緣：直線必須占據其邊緣最暗的4個像素，這樣線條邊緣看起來才會更清晰
03
Line Width
為了使圖標看起來整潔一致，非常重要的一點就是要記住線寬和間隙的大小。這是一條我們必須遵循的規則，即：所有線條的寬度相同。
在理想情況下，線寬和間隙的大小應該相等。然而，在某些時候，我們又不得不打破這個規則，當我們需要說明日常生活中的不對稱物體時，就會發生這種情況。以條形碼為例，如果我們故意使圖標內部的線寬和間隙大小不均勻，這樣就會在一定程度上表明該對象的身份。
04
Corner Radius
在UI設計中，包括圖標在內的對象圓角半徑會定義項目的外觀和感覺。當我們對一組中的多個對象進行闡述時，就需要遵循這一簡單的規則，即：在方角和圓角之間選擇其一，並對整組圖標應用相同的屬性。
那么這一原則為什么如此重要呢？我們需要知道，一致性是UI/UX設計的關鍵原則。可用且對用戶友好的設計需要始終提供一致的體驗。在下圖示例中，我們可以看到打破這一原則是如何影響視覺體驗的。
05
Optical Balance
計算機與我們人眼所感知到的體驗是不同的。對計算機來說，那些似乎對其完全平衡的東西，對我們的眼睛來說可能並不相同。
例如，當我們把一個大小相等的正方形和一個圓形放在一起時，就會產生一種奇怪的感覺：圓形似乎比正方形小。為了使我們的形狀在視覺上看上去大小相同，我們就應該把圓圈變大，或減小正方形的大小。
這個原則也適用於圖標的設計和適用。有些圖標可能更側重於一側。那我們就可以嘗試將它們調整至整體對齊。如下圖所示，我們可以看到，盡管它與其他部分都具有相同的大小，但突出顯示的圖標似乎更大。為了平衡這組圖標，大家就需要通過減小其大小來調整突出顯示的圖標。
06
Optical Alignment
我們經常在設計程序中使用中心對齊。雖然這種方法並沒有錯，但在細節方面，比如圖標設計中，我們就需要相信自己的眼睛，打破數學規律，以增強元素的平衡。以播放按鈕為例，它的形狀越不對稱，需要改進的地方就會越明顯。
07
Keep Simple & Starightforward
在這里，想和大家分享的是這條KISS原則。這個原則背后的想法是，如果大多數系統保持簡單操作，那么它們就會運作得很好。用戶也就會越容易理解並與之交互，而它就越有可能被放到項目設計中。那么，KISS原則是如何運用於圖標設計的呢？
- 不使用文本：文字和圖標的結合會減少圖標的使用方式。此外，小尺寸的文本具有不可讀性。如果我們仍然需要將文本作為支持元素，就需要使用ICON旁邊的提示工具和標簽
-
不要過度設計：不必要的復雜性會妨礙設計目的。重復的設計也會嚴重影響用戶體驗
-
盡可能避免不必要的元素：但我們不能忘記確保每個圖標在整體上下文中都是可以理解且清晰的
值得大家關注的是，在ICON設計中需要明智使用KISS原則，但也要注意不能讓設計變得過於簡單而損害了本應該呈現出的效果。如果想要提供積極的用戶體驗，那我們所設計的圖標應該是清晰易懂的。
08
Frame & Keyshapes
關鍵形狀（keyshape）通常是指組合在一起的圓形、正方形、縱向及橫向矩形，它們通過了一個模式來創建ICON。但是，這一規則需要我們的靈活運用，並讓位於上面所提到的“Optical Balance (光感平衡)”這一原則。
因此，如果我們在設計過程中覺得圖標並不完全適合形狀，那么這時候我們並不能馬上懷疑自己的設計是否有誤，通過換位思考也許它並沒有錯。
對於框架（frame）而言，它是我們設計的“容器”。框架可以幫助我們通過選擇畫布的一個區域來創建設計。大家在創建設計時經常會將ICON放置在框架中，這么做的原因在於以下幾點：
-
Size (大小)：由於圖標的幾何形狀，它們都具有不同的高度和寬度。為了在設計中正確使用ICON，我們就應該將它們放置在大小始終相同的框架之中
- Export (導出)：框架內的圖標需要與視覺中心對齊，這對於導出帶有框架的圖標至關重要
- Time (時間)：如果我們使用Figma，那就需要通過創建組件來節省時間。大家可以使用“實例功能”來快速替換圖標
09
Format: SVG & PNG icons
SVG or PNG？當我們處於導出圖標階段時，這就會成為關鍵問題。那我們就先來比較一下兩種格式：
- SVG具有非常小的文件大小，這就意味着在導出時，可以快速加載最終設計成果；而PNG的文件大小有時會過大
-
SVG格式是無限可擴展的；而PNG的分辨率僅限於我們創建文件的大小
-
SVG文件可以進行編輯和創建動畫；而PNG則是靜態文件
-
對於PNG格式來說，我們必須提供所有尺寸和顏色的資源；而使用SVG時則不需要
-
PNG與大多數瀏覽器都兼容；而某些舊瀏覽器可能不支持SVG格式
在這里建議大家可以選擇SVG格式的圖標，因為它可以節省大量時間。但最重要的是，在導出過程中需要注意縮小復雜的形狀，並牢記某些舊版本的瀏覽器可能不支持SVG格式。
以上，就是我們想跟大家分享的9種ICON設計原則，希望可以幫助大家在今后的圖標創建設計中更加方便、靈活。
原文鏈接: https://medium.com/design-bootcamp/create-icons-like-a-pro-c66a50064f8b