資訊專欄INFORMATION COLUMN
摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。
為什么要有圖標規范
1.文字和圖標能更好的搭配使用
圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。
2.圖標適配變得更簡單，圖標風格更統一,大小統一
矢量化后的圖標，由于程序對顏色大小可控,且不失真的特點,更利于適配實現圖標的72變。另外由于切圖大小統一，不用把時間花費在調整圖片容器上。
3.能快速修改和得到想要的圖標
圖標命名規范化后,編程人員可以很快配合ide找到想要的圖標。 不用把時間浪費在找圖上。
1.圖標規格統一
2.圖標命名規范
3.圖標切取統一
4.圖標管理
[圖標名]-[狀態?]-[形狀?]-[描線?]-[方向?]@[1,2,3]x.png 帶?號為可選
圖標名 公用圖標名舉例:[圖標名]
舉例:button
釋義:按鈕
舉例:[模塊]-[類別]-[功能]
舉例:nav-button-search
釋義:導航-按鈕-搜索
這里我們簡單分三種情況,一種被方框包圍-square，一種被圓圈包圍-circle
是否實心這里我們使用修飾符-o表示描邊型，不帶-o為實心型
常用狀態svg和iconfont可以不需要常用狀態
激活 actived
禁用 disabled
懸停 hover
帶圈圈的加號非實心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o
| 格式 | 優勢 | 劣勢 |
|---|---|---|
| png | 渲染快 | 存在適配問題需要制作各種x圖,程序不可控，適配后體積大 |
| svg | 支持多帶帶和整合打包,支持多色彩,矢量,顏色大小可控,有成熟的管理工具 | 渲染比圖片慢 |
| iconfont | 矢量，顏色大小可控,有成熟的管理工具 | 不支持多色彩,字體文件大,低像素屏有鋸齒 |
那么簡單得出svg和iconfont的特點
設計只需出一次圖,圖標集中處理,程序可批量改色改大小且不失真
可以直接獲取別人的svg或 iconfont進行修改
工具管理示例阿里UX矢量圖標庫
小結如果設計不介意頻繁改圖片顏色，制作各種大小狀態。使用png也是可以的，但基于以后項目換膚的要求還是建議svg和iconfont里二選一。
圖標設計規范 圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。
請將所有圖標在 1024×1024（16×16 的 64 倍）的畫板中制作。
權重不一的圖標會破壞視覺平衡
應該與字體搭配時和字體的尺寸保持一致盡量不要標新立異,因為只有和字體大小一致時并排時才能保持水平對齊[一下為@1x時的情況]。
勁量不要切入陰影，由于陰影的深度，如果沒有切取得當，經常拿到陰影截斷的圖標,致使反復修改
圖標切圖規范 規范不管圖標是扁的 還是長的方的 都應該一致切成方的需要按設計圖標時的容器輪廓線切圖，因為程序設計時如果每個圖標都要特定定義一個特別的容器來裝的話，工作量和可維護性都會出現很大問題。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54802.html
摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。 為什么要有圖標規范 1.文字和圖標能更好的搭配使用圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。2.圖標適配變得更簡單，圖標風...
摘要：前言程序開發變是常態不變是非常態只有定好不變的規范并做得足夠好才能更好的應付變化。該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學習和整理。 前言 程序開發變是常態,不變是非常態只有定好不變的規范,并做得足夠好,才能更好的應付變化。 該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學習和整理。 現主要涉及如下:圖標工程化[好用的圖標...
閱讀 1849·2021-11-25 09:43
閱讀 1491·2021-09-02 15:21
閱讀 3453·2019-08-30 15:52
閱讀 1501·2019-08-30 12:48
閱讀 1295·2019-08-30 10:57
閱讀 2929·2019-08-26 17:41
閱讀 681·2019-08-26 11:59
閱讀 1366·2019-08-26 10:41
