Ouch โดย ICONS8: ไลบรารีสไตล์ที่ทำงานเหมือนกับระบบ

เผยแพร่แล้ว: 2025-11-18

บทสรุปผู้บริหาร

คุณต้องการเสียงภาพเดียวทั่วทั้งผลิตภัณฑ์ เว็บ อีเมล เอกสาร และโฆษณา คุณต้องการจัดส่งตามกำหนดเวลาด้วย งานศิลปะแบบกำหนดเองสำหรับทุกหน้าจอไม่ได้ปรับขนาด การปะทะกันของภาพสต็อก อุ๊ย แก้ปัญหาช่องว่างนั้นกับครอบครัวที่มีสไตล์ แต่ละครอบครัวเป็นภาษาภาพเล็กๆ น้อยๆ ที่คุณสามารถนำมาใช้ได้ภายในหนึ่งวันและขยายออกไปเป็นเดือนๆ ผลตอบแทนเป็นเรื่องง่าย หน้าจอหยุดมองต่อกันและเริ่มอ่านเหมือนผลิตภัณฑ์ชิ้นเดียว

สิ่งที่จัดส่งในกล่อง

Ouch จัดกลุ่มงานศิลปะให้เป็นรูปแบบที่สอดคล้องกัน ภายในสไตล์ ตัวละคร วัตถุ และพื้นหลังจะมีสัดส่วน น้ำหนักเส้น จังหวะการเว้นวรรค และตรรกะสีร่วมกัน ชิ้นส่วนรวมกันโดยไม่มีตะเข็บ คุณจะได้รับฉากหลักสำหรับแลนดิ้งเพจ ฉากกลางสำหรับผู้อธิบาย จุดเล็กๆ ที่ว่างเปล่า ข้อผิดพลาด และความสำเร็จ รวมถึงฉากหลังที่เป็นกลางที่ทำให้เลย์เอาต์เป็นระเบียบเรียบร้อย ไฟล์จะมาถึงในรูปแบบ SVG เมื่อคุณต้องการการควบคุม และ PNG เมื่อคุณต้องการดรอปอิน ทั้งสองไฟล์รองรับการแสดงผลที่มีความหนาแน่นสูง

ภาพประกอบ

ทีมใช้งานจริงอย่างไร

การออกแบบผลิตภัณฑ์ รัฐที่ว่างเปล่าจะได้จุดเล็กๆ และการดำเนินการที่ชัดเจน การเริ่มต้นใช้งานจะเปลี่ยนเป็นสามจังหวะ: เริ่มต้น ความคืบหน้า และความสำเร็จ หน้าฟีเจอร์ยืมฉากกลางที่บอกเป็นนัยถึงงานที่ต้องทำให้เสร็จ คุณเก็บสำเนาไว้ใกล้กับงานศิลปะ ดังนั้นหมายถึงการเดินทางเป็นคู่

การตลาด. ฮีโร่ตัวเดียวจะยึดแคมเปญ พืชผลพร้อมสำหรับกรอบสี่เหลี่ยม แนวตั้ง และแนวนอน ตัวละครหรือเสาที่เกิดขึ้นซ้ำๆ จะมีการจดจำข้ามช่องต่างๆ อีเมลใช้ PNG พร้อมการบีบอัดที่แน่นหนา สังคมมีแนวคิดเดียวกันในอัตราส่วนที่ต่างกัน

เอกสารและความช่วยเหลือ ขั้นตอนที่ซับซ้อนจะได้ฉากที่มีขนาดกะทัดรัดถัดจากคำบรรยายภาพ ไม่มีขนปุยประดับ ภาพได้รับการเก็บรักษา

ลงตัวกับระบบการออกแบบ

ถือว่าสไตล์ Ouch เป็นระบบย่อยถัดจากประเภท โทเค็น ไอคอน และตาราง ให้บ้านที่มั่นคงและชุดกฎหนึ่งหน้า

 /แบรนด์/ภาพ/

  /อุ๊ย-สไตล์-a/

    README.md

    tokens.json

    ฮีโร่/

    ฉาก/

    จุด/

    พื้นหลัง/

README อธิบายตำแหน่ง การครอบตัดที่อนุญาต ขนาดการส่งออก และการใช้งานที่สงวนไว้ แผนที่โทเค็นจะผูกการเติมและลายเส้นเข้ากับสีของแบรนด์ ดังนั้นการเปลี่ยนแปลงธีมจึงไม่จำเป็นต้องส่งออกใหม่ จัดเก็บทรัพย์สินไว้ใกล้กับหน้าจอที่เป็นเจ้าของ ตั้งชื่อตามเจ้าของ ไม่ใช่ตามความรู้สึก

เลือกด้วยหลักฐานไม่ใช่รสชาติ

สร้างสี่หน้าจอจริงด้วยสำเนาและเค้าโครงของคุณ สลับเฉพาะงานศิลปะ

ฮีโร่หน้าแรก
คำบรรยายราคา
การเริ่มต้นใช้งานขั้นตอนที่หนึ่ง
สถานะว่างหนึ่งสถานะในผลิตภัณฑ์

แสดงสไตล์ผู้สมัครสองแบบให้กับบุคคลที่ไม่ได้ทำงานในโครงการนี้ห้าคน ถามแต่ละคำคุณศัพท์สามคำ รักษาสไตล์ที่ตรงกับคำแนะนำด้วยเสียงของคุณ เก็บถาวรอีกชุดหนึ่ง การตัดสินใจในบ่ายวันหนึ่ง ไม่มีมู้ดบอร์ด ไม่มีการอภิปราย

ชุดเริ่มต้นที่ยกเลิกการปิดกั้นการจัดส่ง

ตรึงชุดอุปกรณ์เล็กๆ สำหรับการออกครั้งต่อไปเพื่อให้ตั๋วทุกใบใช้บล็อกเดียวกัน

ฮีโร่หนึ่งตัวสำหรับไซต์หรือฟีเจอร์หลัก
ฉากกลางสองฉากสำหรับผลิตภัณฑ์และเนื้อหา
สามจุดคือความว่างเปล่า ความสำเร็จ และข้อผิดพลาด
พื้นหลังเดียวที่เสริมเค้าโครงโดยไม่ขโมยโฟกัส

กลางโครงการ เพื่อนร่วมทีมจะถามว่าจะเรียกดูและยืนยันความครอบคลุมได้ที่ไหน วางตัวชี้ที่สะอาดไว้ตรงจุดที่จะมองระหว่างการตรวจสอบ: ภาพประกอบ

การเข้าถึงที่รอดพ้นจากการทบทวนโค้ด

รูปภาพจะช่วยได้ก็ต่อเมื่อทุกคนสามารถใช้เพจได้ สร้างการตรวจสอบในคำขอดึง

การตัดสินใจทางเลือก หากรูปภาพมีความหมาย ให้เขียน Alt สั้นๆ ที่ระบุแนวคิดนั้น หากเป็นของตกแต่ง ให้ใช้ Alt ว่างเพื่อให้เทคโนโลยีช่วยเหลือข้ามไป SVG ในบรรทัดควรมีชื่อที่กระชับและคำอธิบายหากมีประโยชน์

 <svg role="img" aria-labelledby="td" width="512" height="256">

  <title>ทีมกำหนดเป้าหมายการวิเคราะห์</title>

  <desc>เพื่อนร่วมงานย้ายแผนภูมิและบันทึกย่อช่วยเตือน ขณะที่อีกคนตรวจสอบผลลัพธ์</desc>

</svg>

ความแตกต่างและสถานะ เมื่ออาร์ตเวิร์คมีข้อความหรือใช้สีเพื่อความหมาย ให้ทำตามอัตราส่วน WCAG 2.2 ผูกการเติมและจังหวะเข้ากับโทเค็นเดียวกันกับที่ใช้โดยการแจ้งเตือนและปุ่ม เพื่อให้ความสำเร็จและข้อผิดพลาดอ่านในลักษณะเดียวกันในงานศิลปะและ UI

การเป็นตัวแทน ชอบตัวละครที่ครอบคลุมและกิจกรรมประจำวัน หลีกเลี่ยงถ้อยคำที่ซ้ำซากจำเจ ทดสอบกับกลุ่มเล็กๆ ที่สะท้อนถึงผู้ฟังของคุณ

ประสิทธิภาพที่ยึดถือภายใต้การจราจร

รูปภาพมีน้ำหนักมาก ปฏิบัติต่อพวกเขาเหมือนโค้ดที่มีงบประมาณ

เลือกใช้ SVG เมื่อพื้นผิวไม่จำเป็น
ส่งออก PNG ตามขนาดที่คุณแสดงผลเท่านั้น
ตั้งค่าความกว้างและความสูงเสมอเพื่อป้องกันการเปลี่ยนเค้าโครง
โหลดแบบขี้เกียจที่ครึ่งหน้าล่าง
วัด Contentful Paint ที่ใหญ่ที่สุดบนหน้าจริง

แรสเตอร์ที่ตอบสนองโดยไม่มีกรอบงาน:

 <ภาพ>

  <ประเภทแหล่งที่มา = "รูปภาพ/avif">

  <ประเภทแหล่งที่มา = "รูปภาพ/เว็บพี">

  <img src="/hero-ouch.png" alt="เพื่อนร่วมงานกำลังตรวจสอบการวิเคราะห์" width="1280" height="720" Loading="eager">

</ภาพ>

SVG แบบอินไลน์เชื่อมโยงกับตัวแปรธีม:

<สไตล์>

  :root { --สำเนียง: #2563eb }

  @media (ชอบโทนสี: มืด) { :root { --accent: #7c3aed } }

  .hero [สำเนียงข้อมูล] { เติม: var (--สำเนียง) }

</สไตล์>

<svg class="ฮีโร่" Role="img" aria-labelledby="ab" width="480" height="240">

  <title>แผนภูมิการเติบโตมีแนวโน้มสูงขึ้น</title>

  <desc>เส้นที่เพิ่มขึ้นข้ามตารางธรรมดา</desc>

  <path ข้อมูลสำเนียง = "" d = "M10 200 L120 140 L220 160 L360 80" fill = "ไม่มี" โรคหลอดเลือดสมอง = "var (--สำเนียง)" โรคหลอดเลือดสมองความกว้าง = "6"/>

</svg>

Playbooks ตามบทบาท

เว็บและ UX

ใช้ภาพเพื่อชี้แจงเจตนา สถานะว่างจะมีการดำเนินการหนึ่งรายการและมีสำเนาบรรทัดสั้นๆ การเริ่มต้นใช้งานจะอ่านได้อย่างชัดเจนว่าเป็นการเริ่มต้น ความคืบหน้า และความสำเร็จด้วยนักแสดงและฉากเดียวกัน แปลง SVG ให้เป็นส่วนประกอบในเครื่องมือออกแบบของคุณและลิงก์การเติมเข้ากับสไตล์สีเพื่อการพลิกธีมอย่างรวดเร็ว ในเลย์เอาต์ที่คับแคบ ให้เลือกจุดเล็กๆ เหนือฉากที่พลุกพล่าน

การตลาดและ SMM

สร้างตารางโซเชียลด้วยกรอบสี่เหลี่ยม แนวตั้ง และแนวนอน ตัดฉากล่วงหน้าตามอัตราส่วนเหล่านั้นและจัดเก็บตัวแปรไว้ข้างๆ บรีฟ เก็บตัวละครหรืออุปกรณ์ประกอบฉากที่เกิดซ้ำหนึ่งตัวไว้ในซีรีส์เพื่อเรียกคืน อีเมลใช้ PNG พร้อมการบีบอัดอย่างรอบคอบ เนื่องจากไคลเอนต์ยังคงแตกต่างกัน

นักพัฒนา

เวอร์ชันอาร์ตเวิร์คใน repo เก็บทรัพย์สินไว้ใกล้กับส่วนประกอบที่แสดงผล SVG แบบอินไลน์ช่วยให้คุณตอบสนองต่อการสลับธีมด้วยตัวแปร CSS แทนที่จะส่งออกไฟล์ใหม่ อย่าวางภาพหนักๆ บนเส้นทางวิกฤติ ทำให้เวกเตอร์เคลื่อนไหวเมื่อจำเป็นต้องมีการเคลื่อนไหว

การศึกษา

อุ๊ยทำงานในชั้นเรียนและใน LMS นักเรียนเรียนรู้ลำดับชั้นและจังหวะโดยการรีมิกซ์ฉากต่างๆ แทนที่จะวาดภาพจากความว่างเปล่า จัดเตรียมชุดสไตล์ จานสีคงที่ และหน้าจอเป้าหมายสามหน้าจอ จัดเก็บใบเสร็จรับเงินใบอนุญาตและบันทึกการระบุแหล่งที่มาไว้ใน repo ของหลักสูตร เพื่อให้พอร์ตการลงทุนยังคงเป็นไปตามข้อกำหนด

สตาร์ทอัพและธุรกิจขนาดเล็ก

เลือกหนึ่งสไตล์แล้วแช่แข็งไว้หนึ่งในสี่ นำไปใช้กับไซต์ สำรับ รายการร้านค้า และหน้าจอผลิตภัณฑ์ยอดนิยม ความสามัคคีในวันนี้. ฉากที่กำหนดเองในภายหลังสำหรับคุณสมบัติที่เป็นเอกลักษณ์

การปกครองที่ป้องกันการดริฟท์

เพิ่มรายการตรวจสอบเพื่อดึงคำขอ

ข้อความแสดงแทนปรากฏเมื่อจำเป็น
ภาพตกแต่งทำเครื่องหมายอย่างถูกต้อง
ขนาดที่กำหนดเพื่อหลีกเลี่ยงการเปลี่ยนเค้าโครง
ขนาดไฟล์ไม่เกินงบประมาณหน้า
LCP ตรวจสอบบนหน้าเป้าหมายแล้ว

กฎเล็กๆ เอาชนะปัจจัยขนาดใหญ่ได้

ตัวชี้วัดที่พิสูจน์คุณค่า

ส่วนแบ่งเพย์โหลดจากฮีโร่อาร์ตก่อนและหลังการเปลี่ยนไปใช้ SVG เมื่อเป็นไปได้
เทรนด์ LCP บนหน้า Landing Page หลักหลังการเปิดตัว
จำนวนธงการตรวจสอบสำหรับภาพที่ไม่สอดคล้องกันในการวิ่งสามครั้ง
ชั่วโมงตั้งแต่ช่วงบรีฟจนถึงการเยาะเย้ยที่ได้รับอนุมัติครั้งแรกสำหรับแคมเปญ

ขีดจำกัดที่คุณวางแผนไว้

สถานการณ์เฉพาะบางครั้งจำเป็นต้องมีการคอมโพสิตจากชิ้นส่วนต่างๆ
การเคลื่อนไหวยังคงอยู่ในกองภาพเคลื่อนไหวของคุณ
แคตตาล็อกขนาดใหญ่ทำให้ทีมช้าโดยไม่มีกฎการตัดสินใจง่ายๆ

อีเมล

การออกใบอนุญาตและการเก็บบันทึก

Icons8 เผยแพร่ข้อกำหนดสิทธิ์การใช้งานที่ชัดเจน แผนฟรีมักจะต้องใช้เครดิต แผนการชำระเงินจะลบการระบุแหล่งที่มาและขยายการใช้งาน อ่านนโยบายปัจจุบันบนเว็บไซต์ผู้จัดพิมพ์ บันทึกใบเสร็จรับเงินในโฟลเดอร์แบรนด์ของคุณ ติดตามว่าทรัพย์สินแต่ละรายการจัดส่งไปที่ใด เมื่อฝ่ายกฎหมายถาม คุณก็มีทางรอด

บรรทัดล่าง

นำรูปแบบหนึ่งมาใช้ สร้างชุดอุปกรณ์ขนาดกะทัดรัด โยงเข้ากับโทเค็น บังคับใช้การเข้าถึงและประสิทธิภาพในขณะที่ตรวจสอบ Ouch ให้ภาษาภาพที่จัดส่งตามกำหนดเวลาและดูเหมือนว่าได้รับการออกแบบมาโดยตั้งใจ

อ้างอิง

เอกสาร W3C WAI สำหรับ WCAG 2.2 เกี่ยวกับตัวเลือกข้อความและความคมชัด
เอกสาร MDN สำหรับการเข้าถึงและการฝัง SVG
คำแนะนำ Web.dev เกี่ยวกับรูปภาพที่ตอบสนองและประสิทธิภาพของรูปภาพ
การวิจัยของ NN Group เกี่ยวกับการสื่อสารด้วยภาพและความเข้าใจใน UX
คำแนะนำภาพประกอบใน Shopify Polaris และ Google Material Design