# 图标

经过一段时间的积累,我们整合了开放平台的全套icon。对系统图标进行了改造,现在大家可以在我们网站上直接查看并使用新版的图标,同时在这里将我们的系统性思路分享给大家,期待有更多的设计师参与到其中,一起把图形设计这件事做好。

系统图标要求必须是风格统一的(包括大小、线条粗细、方角圆角、虚实占比等统一),因此我们会逐步建立一套有规范有调理的图标体系。

# 关键线及栅格

粗细一致: 首先使用统一的描边,线段粗细参数。

圆角一致: 使用-致的圆角数值,不要一下尖角一下圆角。

透视一致: 使用接近的透视角度,不要有的侧视有的正视图。

大小一致: 视觉的大小保持一致,有均衡的大小感受。

# 图标盒子

日常工作中基本都是多大尺寸的图标绘制多大的图标盒子,若绘制很大尺寸的图标,缩放后描边的数值往往会出现非整数和0.5的状态,虚边问题严重。实际项目中基本是一个项目绘制一套图标,不会去适配各种尺寸,所以Honeycomb绘制图标,掌握方法即可。

64x64px的像素盒子绘制方法(图标尺寸尽量以4的倍数为标准)。

blockchain

# 简档/卡片图标设计

图标是设计中必不可少的组成。提升界面的美观度。在我们的企业级应用设计范围中,在图形素材极度丰富并且便于获取的今天,在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系是非常重要的。HoneyComb design相信一整套优质的图标对于设计质量的影响是非常巨大的,这考验着设计师的协作能力,以及对图形塑造的系统性思维,同时也能反映一个团队对于细节的追求。

blockchain

# 交互状态

图标的设计是产品设计体系中是非常值得被重视的环节,需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。我们会建议在调用图标时,考虑具体业务对于图形化寄予的期望,企业级应用设计要求的一致性,以及用户操作时的心智模型等因素,我们规范化了图标悬浮/选中的交互状态。

blockchain

# 图标总览

● 线性图标(2px)(16*16px)

blockchain

blockchain

● 系统默认图标(1px)(16*16px)

blockchain

blockchain

● 状态图标

blockchain

● 其他

blockchain