插图

Shopify管理员使用精确的插图风格，以帮助商家快速和清楚地了解事物如何在每个体验中工作。

椅子的插图，简单的直线，然后是曲线和一些颜色的版本，然后是填充形状和阴影的最终版本。

原则

插图增加信息。它提供了上下文，增加了清晰度，或者引导到下一步。它让商家更深入地了解他们在做什么。

插图都是同一视觉家族的一部分。不一致会降低体验的整体质量，分散商家的注意力，或者让他们觉得自己走错了地方。

插图应该理解并支持商家的体验。每个插图都需要适合它所出现的任何情况。

每幅插图都传达了一件事。这个故事很容易理解，所以商人们凭直觉知道如何完成他们来这里做的任何事情。

调色板和使用调色板的插图

插图使用一组特殊的颜色，在它们出现的地方很好地发挥作用。调色板是有限的:单独的插图使用白色、灰色和两到三种颜色。颜色的饱和度也低于周围的UI，所以它们不会分散核心交互的注意力。

旗帜、茶壶、树叶的插图，以及不同种族的人的各种侧面。

物体有逼真的比例，所以很容易辨认。简单的几何形状与圆角构建清晰和平易近人的图像。人们的表现形式使用更有机的形状。

笔记本电脑的插图和白色背景上分开的运输箱子的插图

透视是平面的，二维的，所以整个区域的插图是同等重要的。在必要的时候，投影会给事物带来微妙的深度。如果从单面上看物体不容易识别，可以添加物体的另一侧。

每幅插图周围都有负空间，所以它在它所处的地方感觉是平衡的，所以它的视觉重量与其他插图在相同的地方是相同的。

一张用红线定义角度的椅子的风格化插图，旁边是一个人的侧面插图，用红线强调使用曲线的地方。

线条在空间中形成和排列形状。所有的插图线条流畅，没有纹理。较小的物体有更直的线条，而较大的物体可以有更细致、弯曲的线条。

交叉和连续的线条是管理插图风格的关键元素，但它们不是强制的。他们使一个简单的插图感觉优雅和视觉上有趣，而不会分散注意力。

一个复杂的运输标签的插图，接着是一个带有用户列表的表格的插图，然后是一个非常简单的URL地址栏的插图。

插图需要一些有意义的细节，但过多的细节可能会造成噪音。它们有最少的必要细节，使它们看起来真实，但仍然简单。精细细节的高度或宽度很少小于4px。

有些地方插图总是出现，有些地方插图只是偶尔使用。

剪刀剪优惠券以指示没有保存折扣代码的折扣代码管理页面的插图。

商家在第一次访问体验的新部分时，在他们有机会在那里做任何事情之前，就会看到一个空白的状态说明。它介绍了他们在这里可以做什么，并设定了对未来的期望。

一个管理主页，在描述如何自定义主题的文本旁边有一个小插图。

入职任务帮助新商人建立他们的商店。插图说明了每个任务的目的。当一项任务完成时，它们通过改变外观来加强。

庆祝商店周年纪念的插图。

公告让商家知道一些可能对他们的生意有帮助的事情。当公告庆祝一个重要的商业里程碑或介绍一个重要的产品时，插图有助于使其特别或引人注目。

一张关于Shopify Payments的卡片旁边的插图。

在一些罕见的情况下，独特的现场插图可以用来实现特定的目标，比如在繁忙的页面上吸引人们对重要内容的注意，或者解释一个技术概念。