1.使用光柵
界面圖標通常可以近似為基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。模糊顯示它們具有相同的視覺重量，因為它們變成或多或少相同的斑點。
根據圖標形狀，將其刻入光柵的相應框架中。例如，方形圖標比三角形或細長圖標更緊湊。
圖標越緊湊，所需空間越小。圖標具有更銳利的邊緣或小細節，它應占據的畫板空間越多。
小心你成為網格的奴隸。它是幫助，而不是限制。如果一個圖標在視覺上更好用一些伸出的元素，讓它們伸出來。
2.注意像素網格
要在非視網膜屏幕上使圖標清晰，請堅持使用像素網格，並優先選擇2像素邊框作為線條圖標。中心2像素邊框提供足夠的厚度和清晰的輪廓。
如果為圖標選擇1像素邊框，則它們應該是外部或內部但不是居中。
居中的1像素邊框使圖標以100％的比例模糊，但如果放大則看起來很清晰。
根據像素網格設置對角線的起點和終點。角度為45°，30°和60°的對角線看起來比對角線不規則的更銳利，如13.7°或81°。
3.保持一定的細節水平
最好從最複雜的圖標開始一個做圖標集。它將定義細節級別並幫助製作相同視覺重量的圖標。
當圖標具有不同的細節層次時，更詳細的圖標會吸引更多用戶的注意力，並且看起來視覺上更重。
4.控制最小間隙尺寸
圖標的相鄰元素之間的空間在整個集合中不應太小或不一致。定義最小間隙並將其保持在任何地方以避免輪廓“粘住”。
對於線圖標，最小空間等於線條粗細是很好的。線應該是明顯分離或準確連接，從未幾乎相連。
5.去除重複部分
在圖標集中，你可能會重複細節。擺脫它們，將觀眾的注意力集中在不同的東西上。這就像數學中的分數簡化一樣。你看到的圖形噪聲越少，你的理解就越清晰。
如果目標用戶已經意識到他或她的工作原理，則無需一次又一次地重複。例如，避免基於信封的圖標不會讓人們認為這不是電子郵件應用程序。
此規則還涉及圖標周圍的各種裝飾 - 框架，背景。如果他們沒有幫助閱讀圖標，他們會阻礙閱讀圖標。
6.選擇某種風格並按照它進行操作
不要在一個圖標集內混合顯示。樣式一致性將幫助用戶識別圖標並理解它們具有相同的重要性或狀態。
相同的原理適用於線圖標和填充圖標。如果你混合它們，人們可能會認為它們具有不同的重要性或地位。當然，除非你故意要那樣。例如，填充圖標用於鍵命令，線圖標用於其他命令。
在接口中有兩個每個圖標的變體很好。線圖標 - 用於禁用或常規狀態。填充圖標 - 用於單擊狀態。
7.使用基於2的尺寸系統
與基於十進制的大小調整相比，8像素網格和12列布局用於許多接口更靈活。12可以分為2,3,4和6.因此，24或48像素圖標區域已成為標準。如果需要更大的尺寸，可以縮放這些圖標。
8.保持輪廓清潔準確
完美主義不是目標。對於像素完美的線條，沒有人需要像素完美的線條。但這對於最終產品中正確但不扭曲的圖標渲染非常重要。請記住所需的最少數量的形狀錨點和相鄰元素之間沒有間隙。
與惱人的“8.999 px”或“100.001 px”尺寸相同的故事。如果形狀錨定位準確，圖標邊緣看起來很清晰。並且在合併形狀時不會冒出過多錨點和間隙的風險。
9.從垃圾中清理SVG
許多界面編輯器（如Sketch）可以生成具有不必要的工件的SVG - 過多的組，顏色層和剪切蒙版。讓我們來看看。在Sketch中，一切看起來都很好。
在另一個編輯器（例如，Adobe Illustrator）中打開此SVG。你會注意到空圖層，不必要的組，有時還有剪貼蒙版。當前端開發人員將圖標轉換為iconfont或在網頁上使用SVG時，所有這些都可能會導致問題。
你可以刪除此垃圾並保存。
你將看到Sketch SVG（picture.svg）和已編輯的Illustrator SVG（picture_new.svg）在文件查看器中具有不同的預覽。
分享最新鮮的設計文章！提供最優質的設計服務！
設計師：umthink1080
閱讀更多 木梓設計 的文章
