1. 像素對(duì)齊
我們?cè)诶L制圖標(biāo)的時(shí)候，應(yīng)該將圖標(biāo)的每個(gè)像素盡量對(duì)齊于像素點(diǎn)，這樣導(dǎo)出圖標(biāo)時(shí)像素的邊緣不會(huì)出現(xiàn)鋸齒，不會(huì)出現(xiàn)過(guò)于模糊的情況。通常在繪制時(shí)我們應(yīng)該去除繪制軟件中 x 與 y 軸，寬（w）與高（h）的小數(shù)點(diǎn)，這樣就可以避免無(wú)法對(duì)齊像素的情況。

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

使用方法

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

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

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

在繪制圖標(biāo)時(shí)，我們可以參考 WCAG 2.1：圖形和用戶(hù)界面組件的對(duì)比度至少為 3 : 1 的標(biāo)準(zhǔn)進(jìn)行相應(yīng)配色，以達(dá)到良好的可視狀態(tài)。

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

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

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

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

7. 頁(yè)面層次感
在頁(yè)面中，有需要吸引用戶(hù)點(diǎn)擊的圖標(biāo)，也有起到輔助作用的指示圖標(biāo)，還有引導(dǎo)用戶(hù)操作的圖標(biāo)，這些圖標(biāo)在頁(yè)面中占據(jù)著不同的地位.在所有圖標(biāo)中，有色圖標(biāo)強(qiáng)于無(wú)色圖標(biāo)，多色圖標(biāo)強(qiáng)于單色圖標(biāo)，面性圖標(biāo)強(qiáng)于線性圖標(biāo)，帶背景圖標(biāo)強(qiáng)于無(wú)背景圖標(biāo)，在設(shè)計(jì)圖標(biāo)的時(shí)候應(yīng)該根據(jù)業(yè)務(wù)需要進(jìn)行視覺(jué)強(qiáng)弱不同的設(shè)計(jì)。

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

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

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

廣告

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