1.設(shè)置網(wǎng)格
通常我們會設(shè)計一組icon而不是單獨一個。為了使整組圖標更統(tǒng)一，我們首先需要設(shè)置一個網(wǎng)格。
定義安全區(qū)域并設(shè)置關(guān)鍵線，使用相同的邊框作為模板來保持所有圖標的比例和大小。
2.保持一致
設(shè)計圖標時要使用相同的描邊、圓角和填充樣式，確保圖標看起來更統(tǒng)一且易于識別。
▲ 描邊2px、圓角3px的一組圖標設(shè)計。
3.明確說明
圖標設(shè)計中少即是多。使用清晰的隱喻和有限的細節(jié)，使每個圖標易于識別和理解。
▲ icon設(shè)計并不是細節(jié)越多越好，相反更應(yīng)該在表意清晰的基礎(chǔ)上保持最簡潔。
4.使用相同間距
在圖標元素之間使用相同的間距，可以讓圖標看起來和諧。
Tips：在Figma、Sketch、XD中按住ALT鍵可以顯示元素之間的距離。
5.視覺對齊
不能只依靠軟件來對齊圖標，更多時候需要平衡圖標重量保持視覺上的對齊。
▲最常見的例子就是播放icon，居中對齊的視覺效果并不好，需要將播放圖標向右移動才能保持平衡。
6.填補空白
通過旋轉(zhuǎn)寬度較小的圖標使圖標充滿整個容器，可以提高圖標的可讀性。
7.組合樣式
組合使用面性和線性兩種樣式的圖標來描述頁面狀態(tài)，幫助用戶找到正確的圖標或按鈕。
▲ 在App底部導航欄中通常使用面性圖標代表選中狀態(tài)，使用線性圖標代表未選中狀態(tài)。
8.圖標資源
Icons8.com—擁有海量的圖標、插畫、照片，使用方便
iconfinder.com——好看好用的圖標設(shè)計庫
flaticon.com——提供三百多萬海量免費圖標的素材庫
iconfont.cn——阿里巴巴體驗團隊打造的矢量圖標庫
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。