图标

Shopify管理中的图标是帮助商家完成任务的视觉辅助工具。它们简单,信息丰富,并建立在设计系统的视觉语言之上。

在Shopify管理中使用的各种图标的集合。


原则

简单多于详细

详细的图标会增加认知负荷。专注于简单性,帮助商家理解图标所代表的概念,并在较小的屏幕上识别图标。

字面上的文字

字面符号比抽象符号更容易理解。如果可能的话,使用代表最基本的想法或概念的符号,而不是隐喻性的符号。如果一个概念不能从字面上表达(园艺这样的活动,医生这样的职业),选择一个逻辑上相关的符号(铲子,听诊器)。

保持专业精神

图标的设计传达了一种基调,就像它所搭配的内容一样。关注信息的有效性,而不是让人愉悦的能力。换句话说,优先表示函数,而不是它看起来有多漂亮。


创建图标

五个图标按顺序排列:一个垃圾桶代表删除操作,一个齿轮代表设置,一个望远镜代表搜索,一个大针代表位置,一个铃铛代表通知。

使用已建立的图标

在世界范围内使用了很长时间的图标有更高的机会被快速识别和理解。不要重新创造一个已经被公认为惯例的图标。对于“删除”、“设置”和“搜索”等概念,有一些全局的、既定的约定。这些符号是有效的,不需要重新定义。

齿轮图标,表示Store、Product和全局设置。

限制的变化

使用单个图标来表示相同概念的变体。运输设置、存储设置、帐户设置和任何新设置都应该使用齿轮图标。不要为每一个概念都创建一个自定义图标——这会使图标库变得臃肿,并使商家很难围绕一个概念建立强大的联系。

各种与文本配对的图标,最引人注目的是带有“Home”字样的房子图标,带有“Desktop”字样的计算机图标,以及一个向上指向的箭头图标和一个指向向下的箭头图标,上面有“Sort”字样。

将图标与文本配对

图标的作用是通过提供视觉提示来阐明内容,并提高用户界面的易读性和可扫描性。一般来说,图标应该放在标签或标题附近。永远不要用图标来代替产品或功能的名称——很少有例外的是,图标是一个普遍理解的动作,就像代表删除的垃圾桶图标。

五个图标代表不同国家的货币:美元、欧元、英镑、印度卢比和日元。

牢记国际化

尽可能使用一个公认的图标。然而,有时候只有本地用户能够理解的图标才能有效传达概念。在决定使用什么符号时,要确保不同文化和背景的人一眼就能理解。


何时使用图标

图标是强大的视觉助手,应该谨慎使用。过度使用很快就会导致用户界面在视觉上难以承受或分散注意力。图标是常用的:

  • 在主导航中
  • 在页眉和节标题中
  • 在横幅中引起人们对特定主题的注意,例如公告或错误
  • 内联文本以增加清晰度
  • 将注意力引导到商家可以采取行动的事物上

要浏览所有可用图标,请访问图标库

系统图标

系统图标帮助商家找到方向,不应该是装饰性的。它们比斑点图标小,因为它们总是应用在产品体验中,重要的是它们是对用户体验的补充,而不是压倒它。它们应该代表一个特定的动作、对象或概念。

导航菜单中的图标。

主要icons-20×20

主要的系统图标有:

  • 主要用于导航以支持寻路
  • 用于帮助促进、加强或引起对特定区域或比喻的特别注意
  • 20×20大小
  • 在20×20边界框内

下拉菜单中的小图标

小icons-16×16

系统的小图标有:

  • 内联用于增加动作的清晰度
  • 用于表单元素(<输入>< >按钮等)。
  • 16×16大小
  • 在20×20边界框内

点图标

更大一点,望远镜的图标表示“结果未找到”错误,一个向上的箭头表示文件上传卡,一个感叹号表示“页面未找到”错误。

Spot图标可以加强产品体验中的信息传递,让用户多次看到。现货图标有:

  • 比系统图标更大,具有更强的笔画重量,以增加布局的视觉平衡
  • 60×60大小
  • 在60×60边界框内