image

NeverMind symbol

是一个给XMind内部定制的图标库,目前有300多个,涵盖9种字重和4种字号,为了更好的保持各个平台的统一性和更好的维护使用。

image image

将图标做成字体的好处包括:

  1. 可扩展性:字体图标可以随着字体大小的变化而无损失地缩放,适应不同分辨率的设备,从而实现更好的跨设备兼容性。
  2. 可定制性:字体图标可以通过CSS样式控制颜色、大小、阴影等外观属性,让网站设计师更容易地调整和修改图标的外观。
  3. 可维护性:将图标做成字体后,可以像管理字体一样管理图标,例如添加、删除、修改等,而不需要修改多个文件,提高了网站的可维护性。
  4. 减少HTTP请求:字体图标通常可以打包到一个字体文件中,这样可以减少HTTP请求的数量,从而提高网站的加载速度。
  5. 支持CSS动画:由于字体图标是文本,因此可以通过CSS动画实现更多交互效果,从而增强网站的用户体验。
  6. 跨平台统一:这样可以从一定程度,减少设计师的工作量,也更好的保持多个平台的图标表达是保持一致。

先来整体看下部分图标:

image image image image image image image

设计细节

目前,我们的图标库共有300多个图标,涵盖9种字重和4种字号。相较于1.0版本,我们通过建立更加相对合理的全局参考线、视觉补偿线和全局倒角,以及组件复用等措施,提升了图标的统一性,也更方便维护。值得一提的是,我们新增了“Size”这一轴,包含Mini、Small、Medium、Large这4种字体大小。这样的设计具有以下几个好处:

  1. 内部沟通成本降低,因为我们所有的图标都是使用同样的字重,只是在不同的字号下进行调整。如果没有这个轴,每个字号的笔画粗细都不同,可能需要使用不同的字重来保持在不同大小下的视觉一致性。
  2. 尽管我们采用了相同的设计来呈现4种字号,但是由于笔画的粗细不同,我们需要通过使用“Size”轴来实现视觉上的等价。
  3. 此外,我们还实现了动态字体,也就是可以随着字体大小的变化而变化。这在iOS系统中被称为dynamicTypeSize。

image image

设计参考线

当设计一套图标时,设计参考线是一个非常重要的考虑因素。设计参考线是设计过程中最常用的工具之一,用于保证各种图形和面积在视觉上的平衡和转换。在设计之前,需要先考虑和规划参考线,一旦建立后,需要经常对其进行修改和调整,以确保整个设计的视觉效果和平衡性。

image image image

设计的笔画

当涉及到设计中的笔画粗细避让时,需要进行各种取舍。通常来说,每个笔画都有一个基础的数值,但在设计过程中,需要考虑到图标的密集程度、笔画的重要性以及视觉透视的远近和嵌套关系等因素,以便在视觉上实现一定程度的笔画避让。因此,在进行设计时需要认真考虑这些因素,以确保最终的设计符合预期并能够有效地传达信息。

image

设计了个有趣的连体

图标库没有任何的字母,但是你输入xmind的时候,会变成xmind的logo:

image

检索和复制图标的小工具

因为图标和emoji之类的图标字体都是不容易被输入的,需要一个小公举更加方便的复制字符串,或者更好的检索到图标。用swiftui简单写了个跨平台的app。

image

设计难点

其实整体设计还是很不完美,因为数量大,总感觉很容易有疏漏。且很难保证任意挑选几个图标放一起,就是舒适的视觉。有一些特别异形的,可能需要一些更加特殊的规则,或则会人为的调整来实现更好的视觉效果。

最重要的是,对于整体设计,需要进行不断的评估和调整,以确保最终的效果符合设计目标并能够有效地传达信息。