資訊專欄INFORMATION COLUMN
摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺(jué)效果。
為什么要有圖標(biāo)規(guī)范
1.文字和圖標(biāo)能更好的搭配使用
圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識(shí)，即文字的一種延展，實(shí)際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準(zhǔn)規(guī)范化設(shè)計(jì)的圖標(biāo)更容易對(duì)齊。
2.圖標(biāo)適配變得更簡(jiǎn)單，圖標(biāo)風(fēng)格更統(tǒng)一,大小統(tǒng)一
矢量化后的圖標(biāo)，由于程序?qū)︻伾笮】煽?且不失真的特點(diǎn),更利于適配實(shí)現(xiàn)圖標(biāo)的72變。另外由于切圖大小統(tǒng)一，不用把時(shí)間花費(fèi)在調(diào)整圖片容器上。
3.能快速修改和得到想要的圖標(biāo)
圖標(biāo)命名規(guī)范化后,編程人員可以很快配合ide找到想要的圖標(biāo)。 不用把時(shí)間浪費(fèi)在找圖上。
1.圖標(biāo)規(guī)格統(tǒng)一
2.圖標(biāo)命名規(guī)范
3.圖標(biāo)切取統(tǒng)一
4.圖標(biāo)管理
[圖標(biāo)名]-[狀態(tài)?]-[形狀?]-[描線?]-[方向?]@[1,2,3]x.png 帶?號(hào)為可選
圖標(biāo)名 公用圖標(biāo)名舉例:[圖標(biāo)名]
舉例:button
釋義:按鈕
舉例:[模塊]-[類別]-[功能]
舉例:nav-button-search
釋義:導(dǎo)航-按鈕-搜索
這里我們簡(jiǎn)單分三種情況,一種被方框包圍-square，一種被圓圈包圍-circle
是否實(shí)心這里我們使用修飾符-o表示描邊型，不帶-o為實(shí)心型
常用狀態(tài)svg和iconfont可以不需要常用狀態(tài)
激活 actived
禁用 disabled
懸停 hover
帶圈圈的加號(hào)非實(shí)心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o
| 格式 | 優(yōu)勢(shì) | 劣勢(shì) |
|---|---|---|
| png | 渲染快 | 存在適配問(wèn)題需要制作各種x圖,程序不可控，適配后體積大 |
| svg | 支持多帶帶和整合打包,支持多色彩,矢量,顏色大小可控,有成熟的管理工具 | 渲染比圖片慢 |
| iconfont | 矢量，顏色大小可控,有成熟的管理工具 | 不支持多色彩,字體文件大,低像素屏有鋸齒 |
那么簡(jiǎn)單得出svg和iconfont的特點(diǎn)
設(shè)計(jì)只需出一次圖,圖標(biāo)集中處理,程序可批量改色改大小且不失真
可以直接獲取別人的svg或 iconfont進(jìn)行修改
工具管理示例阿里UX矢量圖標(biāo)庫(kù)
小結(jié)如果設(shè)計(jì)不介意頻繁改圖片顏色，制作各種大小狀態(tài)。使用png也是可以的，但基于以后項(xiàng)目換膚的要求還是建議svg和iconfont里二選一。
圖標(biāo)設(shè)計(jì)規(guī)范 圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺(jué)效果。
請(qǐng)將所有圖標(biāo)在 1024×1024（16×16 的 64 倍）的畫板中制作。
權(quán)重不一的圖標(biāo)會(huì)破壞視覺(jué)平衡
應(yīng)該與字體搭配時(shí)和字體的尺寸保持一致盡量不要標(biāo)新立異,因?yàn)橹挥泻妥煮w大小一致時(shí)并排時(shí)才能保持水平對(duì)齊[一下為@1x時(shí)的情況]。
勁量不要切入陰影，由于陰影的深度，如果沒(méi)有切取得當(dāng)，經(jīng)常拿到陰影截?cái)嗟膱D標(biāo),致使反復(fù)修改
圖標(biāo)切圖規(guī)范 規(guī)范不管圖標(biāo)是扁的 還是長(zhǎng)的方的 都應(yīng)該一致切成方的需要按設(shè)計(jì)圖標(biāo)時(shí)的容器輪廓線切圖，因?yàn)槌绦蛟O(shè)計(jì)時(shí)如果每個(gè)圖標(biāo)都要特定定義一個(gè)特別的容器來(lái)裝的話，工作量和可維護(hù)性都會(huì)出現(xiàn)很大問(wèn)題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103187.html
摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺(jué)效果。 為什么要有圖標(biāo)規(guī)范 1.文字和圖標(biāo)能更好的搭配使用圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識(shí)，即文字的一種延展，實(shí)際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準(zhǔn)規(guī)范化設(shè)計(jì)的圖標(biāo)更容易對(duì)齊。2.圖標(biāo)適配變得更簡(jiǎn)單，圖標(biāo)風(fēng)...
摘要：前言程序開(kāi)發(fā)變是常態(tài)不變是非常態(tài)只有定好不變的規(guī)范并做得足夠好才能更好的應(yīng)付變化。該系列文章會(huì)把平時(shí)工作中常遇到的問(wèn)題場(chǎng)景拋出并提供解決方案，主要來(lái)自自己的學(xué)習(xí)和整理。 前言 程序開(kāi)發(fā)變是常態(tài),不變是非常態(tài)只有定好不變的規(guī)范,并做得足夠好,才能更好的應(yīng)付變化。 該系列文章會(huì)把平時(shí)工作中常遇到的問(wèn)題場(chǎng)景拋出并提供解決方案，主要來(lái)自自己的學(xué)習(xí)和整理。 現(xiàn)主要涉及如下:圖標(biāo)工程化[好用的圖標(biāo)...
摘要：掘金日?qǐng)?bào)第四期使用怎么能不知道這些插件合集掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計(jì)工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。 【掘金日?qǐng)?bào)】第四期 使用Sublime？怎么能不知道這些 Sublime 插件合集！ 掘金日?qǐng)?bào)主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計(jì)、工具資源和一些有趣的東西。 前端...
閱讀 3102·2023-04-25 20:43
閱讀 1733·2021-09-30 09:54
閱讀 1601·2021-09-24 09:47
閱讀 2891·2021-09-06 15:02
閱讀 3525·2021-02-22 17:09
閱讀 1247·2019-08-30 15:53
閱讀 1450·2019-08-29 17:04
閱讀 1972·2019-08-28 18:22
