B端系统图标设计

用户头像
长沙/UI设计师/3年前/151浏览
B端系统图标设计
用户头像
领晨

图标,仓储,金融,运输

图标,也称为icon,是UI设计中的重要组成部分。它通过将业务概念概括、抽象和隐喻为清晰的图形,降低了用户的理解成本,并向用户传达功能和操作信息,提高了界面的美观度。优秀的图标系统不仅保证了图标基因元素的一致性,还为设计效率的提升提供了保障。

二、设计过程的心得:

2.1 设计原则

准确性:设计造型准确的图标(尽量保持偶数原则,去小数点);选择表意准确的图标,避免对用户的认知造成困扰。

简洁性:在表意清晰准确的基础上,尽量保持图形的简洁。

节奏感:图标应保持一定的秩序。

愉悦感:赋予图标适当的情感。

2.2 统一图标绘制大小

确保原始图标的大小一致,以确保前端使用统一尺寸。

2.3 出血位

设置出血位可以防止图标绘制不小心贴边后,在实际应用场景中出现缺失现象。出血位的默认数值可以调整大小,以保证视觉平衡。

2.4 元素调整规范

线条粗细:默认使用统一数值。如果业务需要变化,应设定线条粗细递增或递减的规律。

圆角大小:统一圆角度数的设置,保持正负内外型圆弧度数的统一。

颜色统一:设定色彩范围(主色和辅色),以确保界面色彩不杂乱,严谨有序。

2.5 分层打造主次秩序

图标不是一个平面,而是分层的。从底层到上层各层级应按照各自的规范来设计图标。根据图标业务属性分类来使用归纳图形,保证计构图上的节奏感和规整性。在遵循设计一致性的基础上,进行视觉上的平衡和微调。

三、图标的命名规范

命名规范:图标类型/图标名称(拼音)

四、图标的整理

  1. 删除多余的锚点,保持图形的整洁。轮廓化和合并图形,便于输出。
  2. 保持简洁清晰的图层结构。

1
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI通用设计素材1
【新年UI图标】体育icon
钱包ui模板
智能家居中心 简约 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
UI界面 组件
新能源APP应用UIKit
3D渐变流体抽象矢量UI背景图
户外旅行飞机情侣假日出行
拟物风质感写实UI卡片合集源文件
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
Security Camera UI kit
UI 登录界面设计模板包
【新年UI图标】礼物/活动icon
【新年UI图标】30个图标
手表表盘UI系列
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】会员icon
【新年UI图标】钱包icon
你可能喜欢
相关收藏夹
大家都在看
登录注册