ICONS8 的 Ouch：行为像系统的样式库

执行摘要

您希望在产品、网络、电子邮件、文档和广告中使用一种视觉声音。您还想按计划发货。每个屏幕的自定义艺术无法缩放。库存图片冲突。哎哟解决了风格系列的差距。每个家庭都是一种小型视觉语言，您可以在一天内采用并延续数月。回报很简单。屏幕看起来不再是拼接在一起的，而是开始像一个产品一样阅读。

盒子里装的是什么

哎呀，将艺术品分成连贯的风格。在样式内部，字符、对象和背景共享比例、线宽、间距节奏和颜色逻辑。各部分无缝结合。你可以得到登陆页面的英雄场景，解释者的中间场景，空白、错误和成功的小点，以及保持布局整洁的中性背景。当您需要控制时，文件以 SVG 形式到达；当您需要插入时，文件以 PNG 形式到达。两者都可以在密集的显示器上显示。

团队实际如何使用它

产品设计。空状态得到一个小位置和一个明确的行动。入职分为三个节拍：开始、进展、成功。专题页面借用了一个中间场景来暗示要完成的工作。你让文案贴近艺术，这样意义就可以成对传播。

营销。一位英雄主宰了整个战役。作物已准备好用于方形、垂直和水平框架。重复出现的角色或道具可以跨渠道获得认可。电子邮件使用严格压缩的 PNG。社交媒体以不同的比例获得相同的想法。

文档和帮助。复杂的步骤会在标注旁边形成一个紧凑的场景。无装饰性绒毛。视觉效果值得维持。

适合设计系统

将 Ouch 样式视为仅次于类型、标记、图标和网格的子系统。给它一个稳定的家和一页规则集。

 /品牌/视觉效果/

  /哎呀风格-a/

    自述文件.md

    令牌.json

    英雄/

    场景/

    斑点/

    背景/

自述文件解释了放置、允许的作物、出口尺寸和保留用途。标记图将填充和描边绑定到品牌颜色，因此主题更改不需要新的导出。将资产存储在拥有的屏幕旁边。按主人的名字命名，而不是按氛围命名。

根据证据而不是品味来选择

使用您的副本和布局构建四个真实的屏幕。只交换艺术品。

1. 主页英雄
2. 定价标注
3. 入职第一步
4. 产品中的一种空状态

向五个不参与该项目的人展示两种候选人风格。要求每个人说出三个形容词。保持与您的语音指南相匹配的风格。将另一组存档。一下午就决定了。没有情绪板。没有辩论。

解锁交付的入门套件

为下一个版本冻结一个小工具包，以便每张票都使用相同的块。

• 网站或旗舰功能的一位英雄
• 产品和内容的两个中间场景
• 空、成功、错误三个位置
• 一种可以在不抢走焦点的情况下填充布局的背景

项目中期，队友会询问在哪里浏览并确认覆盖范围。将干净的指针放在他们在复习时会看到的地方：插图。

通过代码审查的可访问性

仅当每个人都可以使用该页面时，图像才有用。将检查构建到拉取请求中。

另类决定。如果图像有意义，请写一个简短的替代品来说明该想法。如果它是装饰性的，请使用空的替代项，以便辅助技术跳过它。内联 SVG 应包含简洁的标题以及有用的描述。

 <svg角色=“img”aria-labelledby=“td”宽度=“512”高度=“256”>

  <title>团队定义分析目标</title>

  <desc>同事移动图表和便利贴，而另一位同事检查结果</desc>

</svg>

对比和状态。当图稿包含文本或使用颜色表达含义时，请遵循 WCAG 2.2 比例。将填充和描边与警报和按钮使用的相同标记联系起来，以便成功和错误在艺术和 UI 中以相同的方式读取。

表示。喜欢包容性的角色和日常活动。避免陈词滥调。与反映您的受众的小组进行测试。

在交通拥堵下保持性能

图片很重。将它们视为有预算的代码。

• 当纹理不重要时更喜欢 SVG
• 仅以您渲染的尺寸导出 PNG
• 始终设置宽度和高度以防止布局偏移
• 折叠下方的延迟加载
• 测量真实页面上最大的内容绘制

无框架的响应式栅格：

 <图片>

  <源类型=“图像/avif”>

  <源类型=“图像/webp”>

  <img src="/hero-ouch.png" alt="查看分析的同事" width="1280" height="720" loading="eager">

</图片>

与主题变量相关联的内联 SVG：

<风格>

  :root { --accent: #2563eb }

  @media（首选颜色方案：深色）{ :root { --accent: #7c3aed } }

  .hero [数据口音] { fill: var(--accent) }

</风格>

<svg class =“英雄”角色=“img”aria-labelledby =“ab”宽度=“480”高度=“240”>

  <title>趋势向上的增长图</title>

  <desc>线条在简单的网格上上升</desc>

  <路径data-accent =“”d =“M10 200 L120 140 L220 160 L360 80”填充=“无”笔画=“var（--accent）”笔画宽度=“6”/>

</svg>

基于角色的剧本

网络和用户体验

使用图像来阐明意图。空状态携带一个操作和一小行副本。在相同的演员阵容和背景下，《入职》清晰地读作开始、进展、成功。将 SVG 转换为设计工具中的组件，并将填充链接到颜色样式以实现快速主题翻转。在紧凑的布局中，选择一个小地点，而不是繁忙的场景。

营销和SMM

构建一个具有方形、垂直和水平框架的社交网格。按照这些比例预先裁剪场景，并将变体存储在简报旁边。在整个系列中保留一个重复出现的角色或道具以供回忆。电子邮件使用经过深思熟虑的压缩的 PNG，因为客户仍然存在差异。

开发商

存储库中的版本艺术作品。将资源放置在渲染它们的组件附近。内联 SVG 让您可以使用 CSS 变量对主题切换做出反应，而无需导出新文件。不要在关键路径上放置大量图像。当需要运动时对矢量进行动画处理。

教育

哎哟在课堂和学习管理系统中都很有效。学生通过重新混合场景来学习层次结构和节奏，而不是从无到有。提供样式包、固定调色板和三个目标屏幕。将许可证收据和归属说明存储在课程存储库中，以便作品集保持合规。

初创企业和小型企业

选择一种款式并将其冻结四分之一。将其应用于网站、平台、商店列表和顶级产品屏幕。今天的凝聚力。稍后为签名功能定制场景。

防止漂移的治理

添加拉取请求的清单。

• 需要时显示替代文本
• 正确标记的装饰图像
• 尺寸设置以避免布局变化
• 页面预算下的文件大小
• 在目标页面上验证 LCP

小规则胜过大重构。

证明价值的指标

• 在可行的情况下，切换到 SVG 之前和之后英雄艺术的有效负载共享
• 推出后主登陆页面上的 LCP 趋势
• 三个冲刺中图像不一致的审查标志数量
• 竞选活动从简短到首次获得批准的模拟需要花费数小时

限制你的计划

• 利基场景有时需要部分组合
• 动作仍然存在于你的动画堆栈中
• 如果没有简单的决策规则，大型目录会降低团队的速度

许可和记录保存

Icons8 发布了明确的许可条款。免费计划通常需要信用。付费计划消除了归属并扩大了使用范围。请阅读发布者网站上的当前政策。将收据保存在您的品牌文件夹中。跟踪每项资产的运送地点。当法律要求时，你就有线索。

底线

采用一种风格。构建一个紧凑的套件。将其连接到令牌。在审核时强制实施可访问性和性能。 Ouch 为您提供了一种按计划交付的视觉语言，并且看起来像是故意设计的。

参考

• WCAG 2.2 的 W3C WAI 文档，有关文本替代和对比
• 有关 SVG 可访问性和嵌入的 MDN 文档
• Web.dev 有关响应式图像和图像性能的指南
• NN Group 关于用户体验中视觉传达和理解的研究
• Shopify Polaris 和 Google Material Design 中的插图指南