优化应用程序图标

Encora 2020年5月20日

在当今功能丰富的应用程序中,优化图标是必要的. 多种格式和大小的图标通常会把用户带到无聊的屏幕加载器上. 这样的体验可能会让用户在看到主应用之前就感到沮丧和沮丧,从而导致糟糕的用户体验. 
在这里,我们提供了优化移动和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%的图标设置. 通过减少加载时间和为用户提供快速响应,它有助于改善应用程序的用户体验. 此解决方案使您在为项目创建和维护图标方面处于领先地位.
如果你喜欢读这篇文章,这里还有一些你可能会感兴趣的,

了解的内容

类别

分享这篇文章

特色的见解