【规范】图标规范以及字体图标的使用

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
5225 2 3 2018-10-19

指导团队小伙伴的时候会发现他们对规范没什么概念,但是在实际工作中,我们的项目有很多的复用性,特别是B端后台类的,所以普及各种规范就比较必要了。

以下是实际工作中我总结的有关图标的规范,希望对大家也有帮助。



一、图标命名规范


做什么:图标的命名需要符合规范
为何:方便UED团队协同使用图标
何时:随时
谁来做:所有UED同学


  • 实心和描线图标保持同名,用【-o】来区分,比如【question-circle】(实心) 和【question-circle-o】(描线);
    • 有无-circle/-square区别于边框和非边框,有无-o区别于实心和空心

Image title

  • 命名顺序:【模块】-【图标名】-【形状?】-【描线?】-【方向?】? 为可选。
    • 模块,例如左侧导航栏模块的图标比较特殊,图标名前可加【sidebar】,常用模块英文:顶部导航栏【navbar】,底部导航栏【tabbar】,自定义模块命名根据实际需要选择性添加
    • 图标名,常用的图标命名用习惯的英文单词命名,非常用和自定义的图标命名可用拼音,多参考其他网站的命名方式
    • 描线,只在区分同一个功能的图标描线和非描线状态下使用,如果图标风格就是描线,不用每个图标后面都加此后缀。
  • PC端图标前缀【pc】,移动端图标前缀【mb】
  • Font Family:【公司名icon】,例如大院的项目名为【dyicon】

Image title


特殊模块的图标前缀


二、制作字体库——使用iconfont

做什么:制作字体库

为何:1. 方便UED团队同步图标;2. 避免重复造轮子;3. 方便前端使用字体

何时:随时

谁来做:所有UED同学

三、icon添加到设计稿

做什么:将iconfont的字体同步到设计稿

为何:1. 使设计稿和上线的产品尽可能地保持一致;2. 避免重复造轮子;3. 更好地和开发协同。

何时:随时

谁来做:所有UED同学

操作步骤:



1. 把字体文件下载到本地

Image title


2. 双击字体文件,安装到本地

Image title

3. 复制icon字体

Image title


Image title


4. 将icon字体粘贴到sketch设计稿中

Image title

Image title


Image title


5. 修改图层名称为fontclass,图标图层名称必须和fontclass名称保持一致,而且尽量不要去修改这个名称,方便前端直接在蓝湖复制引用该图标


Image title

Image title




Powered by Froala Editor

全部评论:2

  • 一口大双

    2019-10-30 13:22

    @Cyqin: 更新了哈

  • Cyqin

    2019-10-28 13:27

    图片都看不了了,可以重新编辑下吗

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票