亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

我的前端規(guī)范系列-圖標(biāo)工程化[好用的圖標(biāo)]

shengguo / 3608人閱讀

摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。

為什么要有圖標(biāo)規(guī)范

1.文字和圖標(biāo)能更好的搭配使用
圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識，即文字的一種延展，實際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準規(guī)范化設(shè)計的圖標(biāo)更容易對齊。
2.圖標(biāo)適配變得更簡單，圖標(biāo)風(fēng)格更統(tǒng)一,大小統(tǒng)一
矢量化后的圖標(biāo)，由于程序?qū)︻伾笮】煽?且不失真的特點,更利于適配實現(xiàn)圖標(biāo)的72變。另外由于切圖大小統(tǒng)一，不用把時間花費在調(diào)整圖片容器上。
3.能快速修改和得到想要的圖標(biāo)
圖標(biāo)命名規(guī)范化后,編程人員可以很快配合ide找到想要的圖標(biāo)。 不用把時間浪費在找圖上。

目標(biāo)

1.圖標(biāo)規(guī)格統(tǒng)一
2.圖標(biāo)命名規(guī)范
3.圖標(biāo)切取統(tǒng)一
4.圖標(biāo)管理

圖標(biāo)命名規(guī)范 規(guī)范順序

[圖標(biāo)名]-[狀態(tài)?]-[形狀?]-[描線?]-[方向?]@[1,2,3]x.png 帶?號為可選

圖標(biāo)名 公用圖標(biāo)名

舉例:[圖標(biāo)名]
舉例:button
釋義:按鈕

非公用圖標(biāo)名

舉例:[模塊]-[類別]-[功能]
舉例:nav-button-search
釋義:導(dǎo)航-按鈕-搜索

修飾名定義 形狀

這里我們簡單分三種情況,一種被方框包圍-square，一種被圓圈包圍-circle

是否實心

這里我們使用修飾符-o表示描邊型，不帶-o為實心型

常用狀態(tài)svg和iconfont可以不需要

常用狀態(tài)
激活 actived
禁用 disabled
懸停 hover

示例

帶圈圈的加號非實心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o

建議使用svg和iconfont png vs svn vs iconfont
格式 優(yōu)勢 劣勢
png 渲染快 存在適配問題需要制作各種x圖,程序不可控，適配后體積大
svg 支持多帶帶和整合打包,支持多色彩,矢量,顏色大小可控,有成熟的管理工具 渲染比圖片慢
iconfont 矢量，顏色大小可控,有成熟的管理工具 不支持多色彩,字體文件大,低像素屏有鋸齒

那么簡單得出svg和iconfont的特點

設(shè)計只需出一次圖,圖標(biāo)集中處理,程序可批量改色改大小且不失真

可以直接獲取別人的svg或 iconfont進行修改

工具管理示例

阿里UX矢量圖標(biāo)庫

小結(jié)

如果設(shè)計不介意頻繁改圖片顏色，制作各種大小狀態(tài)。使用png也是可以的，但基于以后項目換膚的要求還是建議svg和iconfont里二選一。

圖標(biāo)設(shè)計規(guī)范 圖標(biāo)要有重心

根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。
請將所有圖標(biāo)在 1024×1024（16×16 的 64 倍）的畫板中制作。
權(quán)重不一的圖標(biāo)會破壞視覺平衡

圖標(biāo)尺寸規(guī)范 規(guī)范

應(yīng)該與字體搭配時和字體的尺寸保持一致盡量不要標(biāo)新立異,因為只有和字體大小一致時并排時才能保持水平對齊[一下為@1x時的情況]。

勁量不要切入陰影，由于陰影的深度，如果沒有切取得當(dāng)，經(jīng)常拿到陰影截斷的圖標(biāo),致使反復(fù)修改

圖標(biāo)切圖規(guī)范 規(guī)范

不管圖標(biāo)是扁的 還是長的方的 都應(yīng)該一致切成方的需要按設(shè)計圖標(biāo)時的容器輪廓線切圖，因為程序設(shè)計時如果每個圖標(biāo)都要特定定義一個特別的容器來裝的話，工作量和可維護性都會出現(xiàn)很大問題。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54802.html

相關(guān)文章

  • 我的前端規(guī)范系列-圖標(biāo)工程化[好用的圖標(biāo)]

    摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。 為什么要有圖標(biāo)規(guī)范 1.文字和圖標(biāo)能更好的搭配使用圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識，即文字的一種延展，實際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準規(guī)范化設(shè)計的圖標(biāo)更容易對齊。2.圖標(biāo)適配變得更簡單，圖標(biāo)風(fēng)...

    KunMinX 評論0 收藏0

  • 我的前端規(guī)范系列--前言

    摘要：前言程序開發(fā)變是常態(tài)不變是非常態(tài)只有定好不變的規(guī)范并做得足夠好才能更好的應(yīng)付變化。該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學(xué)習(xí)和整理。 前言 程序開發(fā)變是常態(tài),不變是非常態(tài)只有定好不變的規(guī)范,并做得足夠好,才能更好的應(yīng)付變化。 該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學(xué)習(xí)和整理。 現(xiàn)主要涉及如下:圖標(biāo)工程化[好用的圖標(biāo)...

    史占廣 評論0 收藏0

  • 前端學(xué)習(xí)資源

    摘要：掘金日報第四期使用怎么能不知道這些插件合集掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分前端后端產(chǎn)品設(shè)計工具資源和一些有趣的東西。目前已經(jīng)涵蓋了的相關(guān)資源鏈接，供大家參考與學(xué)習(xí)。 【掘金日報】第四期 使用Sublime？怎么能不知道這些 Sublime 插件合集！ 掘金日報主打分享優(yōu)質(zhì)深度技術(shù)內(nèi)容，技術(shù)內(nèi)容分：前端、后端、Android、iOS、產(chǎn)品設(shè)計、工具資源和一些有趣的東西。 前端...

    xzavier 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<