網(wǎng)站圖標繪制技巧

1. 像素對齊
我們在繪制圖標的時候，應該將圖標的每個像素盡量對齊于像素點，這樣導出圖標時像素的邊緣不會出現(xiàn)鋸齒，不會出現(xiàn)過于模糊的情況。通常在繪制時我們應該去除繪制軟件中 x 與 y 軸，寬（w）與高（h）的小數(shù)點，這樣就可以避免無法對齊像素的情況。

2. 圖標參考線
在繪制兩個或者以上的圖標時，為了避免多個圖標出現(xiàn)大小不一的情況，我們應該使用由谷歌材料設計語言提供的圖標參考線進行繪制，使用圖標盒子可以讓一整套圖標在視覺效果上更加統(tǒng)一和諧，不會出現(xiàn)一大一小一長一短的情況。

使用方法

先繪制一個 152*152px 的正方形，一個 176*176px 的正圓形，一個寬 176*128px 的水平矩形和一個 128*176px 的垂直矩形，圓角為 4px，然后將這個四個形狀進行水平居中對齊，之后得出一個圖標的參考線。

在寬度相等的情況下，正方形的面積要大于正圓的面積，所以在繪制圓形圖標時應該將圓形的上下左右四個頂點頂齊與圖標盒子正方形區(qū)域的四條邊；在繪制方形圖標時應該將方形的四個角點頂齊與圓形參考線的外圍邊；在繪制橫向矩形與縱向矩形圖標時，應該將圖標的左右邊或者是上下邊控制在正方形的參考線之內(nèi)，這樣矩形圖標繪制出來會更加的圓潤，相對于其他的形狀圖標更加匹配。

3. 可訪問性
我們繪制的圖標必須要保證清晰度，可辨別性。不管是在強光下還是正常光下都需要良好的可讀性。這就需要圖標不論是自身元素之間的對比度還是和頁面底板背景之間的對比度都需要很好的可讀性。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節(jié)，還需要確保圖標中的每一種顏色都是可見的。第二就是將圖標拿到強光下進行觀察，在強光下是否可以看清圖標的主題結(jié)構(gòu)，圖標是否有足夠的辨識度。

在繪制圖標時，我們可以參考 WCAG 2.1：圖形和用戶界面組件的對比度至少為 3 : 1 的標準進行相應配色，以達到良好的可視狀態(tài)。

4. 統(tǒng)一性
在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內(nèi)容也不同。這時，圖標一致性的意義就體現(xiàn)出來了，根據(jù)格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級別的元素，則應在視覺上保持統(tǒng)一匹配。我們傾向于將彼此相似的元素視為同一個分組，相似性可以幫助我們組織和分類頁面里的元素對象，并將它們與特定的含義或功能相關(guān)聯(lián)。有不同的方法可以使元素被認為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。

圖標內(nèi)容的統(tǒng)一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節(jié)層次和設計元素在整個合集中是否是不變且一致的。

5. 圖標呼吸感
呼吸感的意思就是適當留白。在設計中，適當?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。不管是圖標還是界面，元素與元素之間都應該存在一定的間距。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內(nèi)容，讓用戶快速理解，但是在有限的空間中，太過復雜的細節(jié)會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。

6. 合理運用布爾運算
布爾運算在設計行業(yè)中被得到廣泛的運用，比如工業(yè)設計，影視后期，logo 設計等，布爾運算具有一致性與規(guī)范性的優(yōu)點。我們在設計面性圖標的時候可以合理使用布爾運算進行繪制，這樣繪制的圖標具有吸引力和說服力。

7. 頁面層次感
在頁面中，有需要吸引用戶點擊的圖標，也有起到輔助作用的指示圖標，還有引導用戶操作的圖標，這些圖標在頁面中占據(jù)著不同的地位.在所有圖標中，有色圖標強于無色圖標，多色圖標強于單色圖標，面性圖標強于線性圖標，帶背景圖標強于無背景圖標，在設計圖標的時候應該根據(jù)業(yè)務需要進行視覺強弱不同的設計。

8. 業(yè)務屬性
如文上所說，圖標采用與業(yè)務相符合的色彩搭配會讓用戶在使用的過程中更加自然、舒服，同時也會增加用戶的識別速度，喚起用戶的使用情緒。一個圖標的繪制是否具備商業(yè)價值也恰恰體現(xiàn)在這里。

網(wǎng)站標題：網(wǎng)站圖標繪制技巧
文章路徑：http://muchs.cn/news29/326229.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、響應式網(wǎng)站、小程序開發(fā)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、手機網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)