ICONS8 的 Ouch：行為像系統的樣式庫

已發表: 2025-11-18

執行摘要

您希望在產品、網絡、電子郵件、文檔和廣告中使用一種視覺聲音。您還想按計劃發貨。每個屏幕的自定義藝術無法縮放。庫存圖片衝突。哎喲解決了風格系列的差距。每個家庭都是一種小型視覺語言，您可以在一天內採用並延續數月。回報很簡單。屏幕看起來不再是拼接在一起的，而是開始像一個產品一樣閱讀。

盒子裡裝的是什麼

哎呀，將藝術品分成連貫的風格。在樣式內部，字符、對象和背景共享比例、線寬、間距節奏和顏色邏輯。各部分無縫結合。你可以得到登陸頁面的英雄場景，解釋者的中間場景，空白、錯誤和成功的小點，以及保持佈局整潔的中性背景。當您需要控制時，文件以 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 中的插圖指南