圖示的正确應用可以幫助使用者快速定位并了解想法，進而推動使用者便捷地進行下一步操作，提升使用者的最終使用體驗。那麼在圖示設計中，有沒有哪些細節是設計者可以注意的？又或者有沒有哪些技巧是可以利用的？本文作者便總結了10個技巧，一起來看看吧。
圖示是任何設計系統不可或缺的一部分。使用圖示的主要原因是幫助使用者快速了解想法，實作快速導航，解決語言障礙，最終提升使用者體驗。
圖示作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業的圖示。
一、尺寸規範
最小的圖示大小通常是12 x 12px。以這個尺寸為基礎，行業标準中大多數其他尺寸隻是通過将之前的尺寸翻倍而産生的。
- 小尺寸圖示，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.
重要提示：當你設計圖示時，重要的是要按100%顯示的比例去設計，使圖示完美像素并放大像素塊檢視準确性。
二、保持像素完美
完美像素圖示在螢幕上能呈現尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網膜顯示器正變得越來越好，是以在不久的将來，對像素完美圖示的需求可能會減少。但就目前而言，讓你的圖示具有可伸縮性、響應性和适配更多裝置是非常重要的。
1. 像素網格對齊
使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩雲注：盡可能的使線條實心）
3. 完美角度
有角度的線更模糊。建立圖示的最佳角度是45°，因為形成一個角的像素彼此對稱。
3. 邊緣清晰
直線必須占據其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
三、注意粗細和間隙
為了讓圖示看起來整潔一緻，重要的是要記住線條寬度和間隙大小。這條規則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發生。比如條形碼這個例子來說，我故意使圖示内的線寬和間隙大小不均勻，以表示條碼的特征。
四、統一圓角
在UI設計中，對象(包括圖示)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規則很簡單：在正方形和圓角之間進行選擇，并對所有的圖示應用相同的屬性。
為什麼它如此重要?一緻性是UI/UX設計的關鍵原則。一個可用和使用者友好的設計總是提供一緻的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感覺的。
五、視覺平衡
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也适用于圖示的設計和使用。有些圖示的一側可能較重。試着調整它們一兩個點，直到整體對齊看起來正确。在下面的例子中，你可以看到突出顯示的圖示看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖示的大小來調整突出顯示的圖示。
（彩雲注：這個原則很多人應該都知道，但我發現也是在整套圖示的設計中最容易出現的問題，當把圖示彙總在一起的時候，這個問題尤其需要重視。）
六、視覺對齊
我們經常在設計軟體中使用中心對齊，這種方法沒有錯。但當涉及到細節時，比如圖示設計，我們需要相信自己的眼睛，打破數學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
七、保持簡單和直接
我打賭你已經猜到我們指的是KISS原則。這一原則背後的思想是，大多數系統在保持簡單的情況下工作得最好。使用者越容易了解某樣東西并與之互動，它就越具有通用性。
（彩雲注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩雲幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何适用于圖示設計?
1. 别使用文字
文本和圖示的綁定減少了圖示的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支援元素，使用工具提示和圖示旁邊的标簽。
2. 不要過度設計
不必要的複雜性阻礙了合理的表達，應該避免。過載的設計會将使用者體驗變成一場噩夢。
3. 避免不必要的元素
隻要確定每個圖示在整體環境中是可了解和清晰的就行。（彩雲注：比如已經是在郵件用戶端中，就不需要再額外增加表示郵件的圖示部分）
重要提示：在圖示設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優秀的圖示應清晰易懂。
八、圖示規範架構
圖示規範架構通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們建立了一個架構來設計圖示。但是，這個規則非常靈活，隻是作為參考，友善圖示的設計在視覺上平衡。是以，如果你覺得你的圖示不完全比對這個框框，但看起來完全正确——相信你的眼睛！
架構是設計的“容器”。架構規範了一個統一的範圍來設計圖示，這背後有一些原因：
1. 大小
由于其幾何形狀，所有圖示都具有不同的高度和寬度。為了在我們的設計中統一圖示尺寸，我們應該将它們放置在大小始終相同的架構中。
2. 輸出
架構内的圖示與視覺中心對齊，這經常被開發人員忽略，因為他們經常根據實際的中心來調整圖示，而沒有注意到差異。這就是為什麼用架構輸出圖示是至關重要的，當你按這個架構輸出圖示時，能保證視覺設計時想要的視覺中心。
3. 效率
如果使用Figma，可以通過建立元件來節省時間。可以使用執行個體快速地将一個圖示替換為另一個圖示。
九、設定好圖示的關鍵詞
如果你要打算做圖示資源庫的話。要想到當設計師在庫中搜尋圖示時，會遇到哪些挑戰？他們的痛點是什麼？他們的需求是什麼？要回答這些問題，請設身處地為使用者着想。
1. 不要讓使用者思考
例如，如果他們不知道自己想要找到哪種花卉圖示，那麼就讓他們看到一系列選擇:鮮花項鍊，室内花卉，植物商店等。
2. 展示關聯圖示
例如，如果使用者想在相同的主題或類别中找到圖示，他們可以快速地檢查包含這個特定圖示的完整集合。
3. 使用标簽
使用者可能很難找到合适的詞進行搜尋，或者可能希望看到所有類似的補充選項，從中選擇最合适的。例如，當一個圖示的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優雅#浪漫
十、SVG和PNG圖示的差別
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
- SVG的檔案大小非常小，這意味着最終設計的加載速度非常快，而PNG則相當大。
- SVG格式是無限可伸縮的，而PNG的分辨率則受建立的檔案大小的限制。然而，将一個複雜的SVG圖示縮小到随機大小可能會産生半像素的邊緣，這可能會使圖示看起來有虛邊。這是因為當螢幕上的圖示變得更小時，代表其來源的像素就會減少，進而導緻清晰度下降。這并不意味着需要避免使用SVG檔案。隻需根據預期用途調整 SVG 圖示即可。
- SVG檔案可以編輯和動畫，PNG檔案隻能是靜态的。
- 對于PNG格式，你必須提供各種大小和顔色的資源，而在使用SVG時就不需要這些了。
- Png與大多數浏覽器相容，而svg可能不被舊的浏覽器支援。
我個人的選擇是使用SVG圖示，因為它可以節省很多時間。但是，一定要小心縮小複雜的形狀，并記住舊的浏覽器可能不支援SVG格式。
十一、總結
到這裡你應該已經學會了這10個圖示設計要點，在你的圖示設計中使用這些規則，相信會讓你的圖示變得更加專業！
彩雲注：圖示設計是一個設計師的基礎能力，在彩雲看過的無數份作品集中最普遍的問題也就是圖示設計。今天這篇文章雖然非常基礎，但千萬别小看它，用這10條技巧重新審視自己的圖示作品，相信會有新的收獲！
原文作者：Karina（本文翻譯已獲得作者的正式授權）
原文：https://bootcamp.uxdesign.cc/create-icons-like-a-pro-c66a50064f8b
譯者：彩雲Sky，公衆号：彩雲譯設計；人人都是産品經理專欄作家，騰訊進階視覺設計師。
本文由@彩雲sky 翻譯釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。