亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

1. 產品中圖標不規(guī)范存在的問題

在繪制自己的圖標庫之前，產品中使用的圖標都是在iconfont中找。這種做法短期看來效率高，沒什么問題。但是當產品慢慢健壯后，使用的圖標越來越多，會發(fā)現(xiàn)一系列問題。

1.1 圖標類型不一致

有的是線條型，有的是填充型。

1.2 圖標圓角不一致

有的邊角是直角90°型，有的邊角是圓角弧度型并且弧度大小不一樣。

1.3圖標尺寸大小問題

Iconfont上icon大小與外框比例不統(tǒng)一，前端引用時要單獨調整大小，影響開發(fā)效率。

1.4 圖標線條粗細不一致

1.5 圖標顏色色值不統(tǒng)一

1.6 圖標命名不規(guī)范問題

這些問題不解決，不僅會給前端開發(fā)增加工作量，且整個產品看起來不專業(yè)。特別在一個頁面同時出現(xiàn)多個圖標時，這種影響尤其明顯。

圖1：未規(guī)范化的產品圖標

2. 確定圖標規(guī)范

根據(jù)上述總結的問題，整理出在圖標繪制時需要注意的事項。并形成關于該產品的圖標規(guī)范。

2.1圖標類型：線型、面型

因為某些特殊場景的需要，有些圖標提供線型、面積型2種樣式，如提示信息圖標；有些圖標只有線型一種，如常用圖標編輯

2.2 圖標的圓角半徑

繪制圖標使用的是AI，模板為iconfont官網下載。主要線條寬度定義為64排序，經多次調試，最終將矩形圓角半徑定義為15px。

2.3 圖標大小及外框大小

圖標外框大小統(tǒng)一為iconfont官方樣例大小，1024*1024px。圓形圖標直徑為896px，長方形長寬為896*830px，正方形邊長為830px。

圖2：AI繪制圖標網格參考線

2.4 點、線的大小

主要構圖的線條寬度為64px（主要構圖將會構成icon圖標的主要形狀）。

圖標內部細節(jié)的線條寬度為52px。

細節(jié)元素如圓點和正方形，用90px作為直徑或邊長。

2.5 圖標顏色

圖標顏色統(tǒng)一為#000000。

2.6 圖標命名規(guī)則

該規(guī)范緊適用于當前產品，如果是公司整體的命名規(guī)范，還需區(qū)分產品線及模塊。icon-【circle圓、square方，可選】-【action動詞，可選】-【圖標名稱】-【line，fill可選】

命名規(guī)則解析：

【circle圓、square方，可選】此項選填，是指圖標的外形是什么形狀，目前較常見的是圓形和方形，有些圖標可能既不是圓形，也不是方形，根據(jù)實際情況而定。

【action動詞，可選】此項選填，是指圖標的含義，圖標中多數(shù)是一個動作，如下載。

【圖標名稱】此項必填，就是圖標含義的文字表征。

【line，fill可選】此項選填，如果一個圖標有線型和面積型2種形式，則其他命名都相同，最后以line、fill區(qū)分。

圖3：命名規(guī)則圖示

3.  工具使用注意事項（使用AI繪制，上傳至iconfont）

3.1 輪廓化描邊

為保證導出的svg文件可以正常上傳至iconfont，所有元素畫完后，必須輪廓化描邊（步驟：效果-路徑-輪廓化描邊）

3.2 圖標有重合路徑的處理

繪制圖標時，我們一般使用簡單的幾何圖形拼接，有時幾何圖形之間會有重疊。如果重疊圖形不處理，這樣上傳iconfont是一切正常的，但是前端引用時就會出現(xiàn)問題；如果將重合路徑的圖形使用路徑查找器工具組合后，問題就會解決。

圖4：圖標有重合路徑時，路徑處理前后對比

3.3 巧用替換工具

如果發(fā)現(xiàn)上傳的圖標有問題，需要修改。一般都會直接刪除之前的圖標，重新上傳新圖標。這樣做在iconfont上看不出什么區(qū)別，無非就是圖標位置換了下，但是對于前端開發(fā)來說，需要更改鏈接、改代碼，比較麻煩。

而如果我們使用編輯圖標-點擊上傳替換圖標，前端只需要替換鏈接，不用修改代碼，減少前端的工作量。

圖5：巧用替換工具

參考：圖標設計的三點最基本規(guī)范 https://www.25xt.com/iconweb/17892.html

封面：轉載自網絡侵刪