在当今功能丰富的应用程序中,优化图标是必要的. 多种格式和大小的图标通常会把用户带到无聊的屏幕加载器上. 这样的体验可能会让用户在看到主应用之前就感到沮丧和沮丧,从而导致糟糕的用户体验.
在这里,我们提供了优化移动和web应用程序图标的解决方案.
需要解决的问题
- 图标文件大小-大图标大小可能需要更多的时间来显示在屏幕上.
- 图标缩放-相同的图标在不同的维度被视为一个新的图标.
- 图标格式-管理不同的图标格式在一个应用程序.
- 加载失败-由于任何原因图标加载失败.
可能的解决方案
- 可缩放矢量图形
- 图标字体-适用于Web, Android和iOS平台
创建图标
这里有一些创建图标的基本原则,可以让它们轻松使用:
- 单色图标
- 忽略中风
- 忽略文本元素. 转换为轮廓.
- 为每个图标设置一个单独的路径/图层(使用布尔运算)
- 为图标集中的每个图标绑定一个共同的图标(建议大小为24 x 24像素)
- 以SVG格式导出图标
- 不转换位图图像(PNG、JPEG等).)转换为SVG格式,它不会使其成为矢量. 嵌入在svg中的位图图像会被忽略.
转换笔画的技巧 & 文本填充(使用草图):选择要转换的形状并选择 图层→转换为轮廓.
使用Icomoon导入图标
使用上面列出的指导方针创建图标后,需要将图标转换为字体. 我们将使用 Icomoon.io的应用.
导入一个新的图标集
要导入图标,您可以使用 导入图标 按钮,然后选择图标或使用拖放功能.
在现有图标集中添加图标
你可以用 导入到集合 从汉堡包菜单中设置特定的图标
快速修改
IcoMoon应用程序提供4个选项:选择、移动、编辑和删除. 这些选项有助于在线修改图标. 在汉堡包菜单中提供了更多的编辑选项.
Select
您可以简单地单击图标单元格来选择或取消选择它. 您也可以拖动以选择一组图标. 如果您单击图标单元格以选择它,然后在选择另一个图标时按住Shift键, 所有在这两个图标之间的图标将被选中.
移动
使用 移动 按钮以选择图标并使用拖放移动.
编辑
要编辑图标,请使用 编辑/铅笔 按钮,然后单击图标单元格. 这将弹出编辑面板,允许您执行简单的修改,例如编辑标记, 更改网格大小, 等.
删除
要删除,请单击 删除 按钮并选择要删除的图标.
创建字体
步骤1:选择图标
选择您希望在字体中包含的所有图标,然后单击 生成字体 按钮在右下角. 这将生成字体,并为您提供具有各自信息的所有图标的预览.
步骤2:可以更改以下符号属性(如果需要)
- 类名
- 系统生成的字符代码
- 为每个字形分配一个唯一的字符
- 如果图标加载失败,建议使用符号
- 使用remove icon从集合中移除一个图标
点击一个图标将进入编辑面板
步骤3:偏好面板
- 使用首选项面板来更改字体名称,CSS选择器,字体度量,元数据和版本
- 您可以更改类的前缀和后缀
- 字体度量允许你设置/修改基线
- 可以设置文件的元数据
- 也可以维护文件版本
保存和加载
每个生成的字体包都包含一个 选择.json 文件,您可以将其导入到 Icomoon 应用程序使用 导入图标 或者拖放功能. 此文件可用于将来添加图标.
以下是要遵循的步骤,
- 点击 导入图标 button
- 选择 选择.json 文件从字体文件夹
- 控件在图标集中添加新图标 导入以设置选项 从汉堡菜单上
- 根据偏好安排新添加的图标(建议在集合的底部添加新图标). 这确保了早期图标的字符代码不会被更改)
可访问性
以防, 您的字体无法加载, 最好的退路是为你的图标使用合适的表情符号或Unicode字符代码. 现在,即使字体加载失败,系统字体也会显示您选择的适当的字形.
例如,您可以使用 ? 日期选择器图标或 用于收藏/喜欢按钮.
结论
通过创建图标字体文件来优化图标,可以获得出色的效果,因为它包含多达80%的图标设置. 通过减少加载时间和为用户提供快速响应,它有助于改善应用程序的用户体验. 此解决方案使您在为项目创建和维护图标方面处于领先地位.
如果你喜欢读这篇文章,这里还有一些你可能会感兴趣的,