关于HackerNoon像素图标库的构建

在当前设计快速发展的数字时代，每个微小的细节都会显着影响整体用户体验 (UX)。例如，图标可以显着增强产品的视觉吸引力。

最初是为了减少我们对第三方资源的依赖，现在已经变成了一项更重要的事业。

这个像素化图标的开源集合采用 24 像素网格设计，可实现完美对齐和一致性，从而丰富您的网络/应用程序/产品/页面/生活体验。受到 HackerNoon 复古设计氛围的启发，这些图标概括了互联网黄金时代的精髓。

我们的像素图标库背后的概念

作为设计师，我们经常寻求解决方案来简化我们的流程。

在 HackerNoon，我们最初转向使用 Font Awesome 图标来为网站添加必要的功能和美观性。这些图标提供了一致性和广泛的选择，为我们提供了很好的帮助。然而，通过依赖预先存在的库，我们无法再为我们的品牌标识的发展提供服务。

我们的创始人David和Linh最初在我们的一次产品会议上提出了过渡到内部图标库的想法。第一阶段的重点是用我们自己的图标替换 HackerNoon 上现有的 Font Awesome 图标。后者专注于将这些图标作为图标库分享给社区。

这种转变使我们能够创造性地挑战自己。虽然这段旅程并非没有挑战，但我们精心制作的每个像素化图标都让我们的品牌个性得以彰显。这些像素化图标已经不仅仅是视觉元素；它们现在是 HackerNoon 的反映。

设计我们的内部图标：从概念到创作

创建图标库是一次充满创造力、精确度和解决问题能力的令人兴奋的旅程。以下是制作这些充满 HackerNoon 精髓的像素化图标背后的过程。

1. 定义设计语言

2. 构思与草图

3. 设计并将想法变为现实

4. 准备社区发布：Figma 和 GitHub

   
   

定义设计语言

我们的旅程从定义一种有凝聚力的设计语言开始。这涉及到决定我们希望图标传达的细节程度、插图风格和情绪。建立这个基础确保了整个图书馆的一致性。

• 对于细节水平，我们选择了极简主义方法并致力于干净的图标。我们确保图标在缩放时不会造成视觉混乱，这有助于我们消除不必要的细节。

• 我们的插图风格特别受到HackerNoon 徽标的启发。复古、80 年代风格的像素块设计风格与我们的品牌完美契合。这确保了设计语言与整体视觉识别一致。我们称它们为像素化图标。

  
  

  
  

  

• 为了保持一致性，我们选择了 24px 网格。 （设计图标时，24px 网格被认为是理想的，因为大多数系统图标都以 24x24 显示）。这使我们能够创建以 100% 比例查看并具有像素完美精度的图标，为我们提供：

  
  

  • 图标内容的 22px 活动区域

  • 活动区域周围有 1 像素的内边距

    
    

    

    
    

    
    

构思与草图

构思过程首先列出当前图标所代表的功能及其各自的用例。然后我们集思广益，讨论如何重新设计这些功能的图标。然后进行快速涂鸦和草图。这些粗略的草图帮助我们以较小的比例可视化图标，从而实现更快的迭代并丢弃不合适的想法。

设计像素化图标

下一个关键步骤是将这些手绘概念转换为像素化图标。此阶段主要涉及使用 Adobe Illustrator 创建这些像素化图标，然后以不同的格式和大小导出它们以测试可扩展性。

• 我们首先将这些粗略的草图导入 Illustrator。

  
  

  

• 然后我们使用网格工具创建了一个 24 像素的网格来开始像素化过程。

• 我们利用实时绘制工具并填充了每个占用空间超过 50% 的方块。

  
  

• 一旦我们对设计感到满意，我们就扩展实时绘制（对象菜单→扩展）以形成形状。

• 接下来，我们利用形状生成器工具来简化这些形状，瞧！我们的像素化图标已准备就绪。

  
  

• 然后，我们将图标导出为 SVG、PNG，尺寸为 12 像素、16 像素、24 像素和 48 像素。 （我们根据构思阶段列出的用例选择了这些尺寸）

  
  

• 此外，我们还记录了有关图标的具体细节，例如它们的类型。目前，我们有三种类型：实心（填充）、常规和浅色图标。对于那些不属于前三种的图标，还有另一种类型，即品牌徽标。 （记录图标有助于保持设计的一致性并促进未来的更新）

  
  

准备社区发布：Figma 和 GitHub

一旦我们以所需的格式导出了所有图标，我们就会组织这些图标并为社区发布做好准备。为此，我们选择 Figma 社区文件和 GitHub 存储库。

以下是我们准备一切的方式：

• 分组和组织：我们根据图标类型将图标分为四组：纯色、常规、浅色和品牌徽标，使用户更容易搜索特定图标。

  
  

• 命名约定和文件夹结构：我们建立了清晰且描述性的命名约定，使用户更容易识别图标。对于 GitHub 存储库，我们选择的文件夹结构如下：文件类型/颜色主题（如果有）/大小/图标类型/图标名称.文件扩展名（例如： PNG/For Dark Mode/24px/ Solid/Ad.png和SVG/Solid/Ad.svg ）

  
  

• 在 Figma 中创建组件库并定义变体： Figma 的组件系统允许我们为每个图标创建主组件。我们为每个图标创建了尺寸变体，使用户能够直接通过实例缩放图标，没有任何麻烦。这简化了更新图标的过程，并确保了不同设计文件之间的一致性。

• 设置 GitHub 存储库：我们为像素图标库创建了专用的 GitHub 存储库，使我们能够管理并与更广泛的设计和开发社区共享我们的图标。

  
  

• Github 上的文档：我们在 GitHub 存储库中制作了全面的自述文件。其中包括像素图标库的介绍、有关在项目中使用这些像素化图标的所有可能方法的信息、许可详细信息、明确定义的贡献指南以及其他特殊注意事项。

  
  

  
  

• Figma 文档：对于Figma，我们创建了一个单独的“关于”页面，其中包括对像素图标库的深入介绍以及有关使用组件库和变体的教程。我们还提供了一个图标列表及其名称以方便参考。

  
  

• 许可：我们明确定义了图标库的许可条款。像素图标库 GitHub 存储库和 Figma 文件根据 CC BY 4.0 许可证获得许可，允许在正确归属于 HackerNoon 的情况下使用。

成品：

我们创建像素图标库的旅程充满了创造性的探索、挑战和成长。从我们最初使用 Font Awesome 图标到在站点范围内使用内部图标，最后创建我们自己的 Pixel 图标库。

这个过程告诉我们，图标不仅仅是符号，而且本身就是故事讲述者。

加入我们的创意之旅，成为第一批尝试 HackerNoon 的像素图标库的人。

保持创意，保持标志性。