国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

KunMinX / 3123人閱讀

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

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

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

目標

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

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

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

圖標名 公用圖標名

舉例:[圖標名]
舉例:button
釋義:按鈕

非公用圖標名

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

修飾名定義 形狀

這里我們簡單分三種情況,一種被方框包圍-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è)計只需出一次圖,圖標集中處理,程序可批量改色改大小且不失真

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

工具管理示例

阿里UX矢量圖標庫

小結(jié)

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

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

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

圖標尺寸規(guī)范 規(guī)范

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

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

圖標切圖規(guī)范 規(guī)范

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103187.html

相關(guān)文章

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

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

    shengguo 評論0 收藏0

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

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

    史占廣 評論0 收藏0

  • 前端學習資源

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

    xzavier 評論0 收藏0

發(fā)表評論

0條評論

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