מערכת של סמלים וציורים

1) תפקיד הסמלים בתוצר

סמלים הם נושא קומפקטי של משמעות ומצב. הם מאיצים סריקה, עוזרים לשמור על החלל ולהגדיל זיהוי תבניות. בממשקי מוצר, הסמל משלים טקסט וצבע, במקום להחליף אותם.

1. כלומר> סגנון: לכל סמל חייב להיות תרחיש יישומי ברור.

2. עקביות: רשת יחידה, שבץ, זוויות, קצב מילוי.

3. זמינות: הסמל אינו האות היחיד; תמיד יש חתימה/טיפ/אריה.

4. ביצועים: צינור SVG אחד, ספריטים ואסימונים בצבע/גודל.

2) רשת וקווי מפתח

לוחות אומנות בסיסיים: 16 × 16, 20 × 20, 24 × 24 (ראשי), 32 × 32.
Keyline-A עיגול/ריבוע חרוט על 1-2 pX עבור שיווי משקל אופטי.
Pixel pitch: לצייר על קואורדינטות מספר שלם; שבץ הוא מרובה של 0. 5 px (בדרך כלל 1. 5 px ב 24 × 24).

• דיאגונלים ”עבים” נראים דקים יותר - להוסיף 0. 25 px לשבץ במקומות צרות.
• אנו שוקעים במקצת בפינות חדות בתוך קו המפתח על ידי 1 px כדי לא ”רעשן”.
• עיגולים ונקודות לעיתים קרובות דורשים + 1 px לקוטר עבור מסה חזותית שווה.

אזורי לחיצה: אזור אינטראקטיבי - 40 × 40 px (נייד), 32 × 32 px (שולחן עבודה); האייקון מרוכז.

3) סגנון הקלדה

• שבץ: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• ”סיבוב” עבור חברותיות או ”מיטר” עבור סגנון טכני (קבוע בקו המנחה).
• זוויות רדיוס בגאומטריה: 2-3 px (על ידי 24 × 24).

מלא-עבור אזורים צפופים וסמלי מצב.
דואטון מותר למצבים ריקים, אבל לא לאותות UI קריטיים.

• קווי מתאר - מצב בסיסי.
• מלא - נכס/הקצאה.
• שני צלילים, קישוט/עזרה.

4) צבע וניגוד (WCAG)

מצב היסוד הוא מונוכרום באמצעות ' Color': הסמל יורש את צבע הטקסט/הקשר.

• אייקון. שגיאה ↔ רקע 3:1, חתום בטקסט (לא רק צבע).
• אייקון. על פני השטח ↔ רקע 3:1; למידות קטנות תכוון ב-4. 5:1.
• בצבע מת, השתמש בצבעים 'על' (ניגודיות אוטומטית ממערכת הצבע).

5) מצבים ואינטראקציות

ברירת מחדל/Hover/Active/Docked/Focus: ההבדל אינו רק בצבע - שנה את האפיון/מלא/עובי/גלולת רקע, הוסף טבעת מיקוד.
תגים, ניגוד ספרות 4. 5:1 עד המוות; גודל ספרות 10-11 px.
סמלים (מועדפים, כמו): לשנות את נקודת המילוי ו/או הנקודה הפנימית, לא רק את הצבע.

6) סמל + טקסט

סמלים אינם מחליפים תוויות בפעולות מפתח. זוג מינימלי: טקסט מסמל + קצר (או tooltip by 'aria-label'). ברשימות ובשולחנות, הסמל מיושר עם גובה הכובע של הטקסט וקו הבסיס.

7) זמינות (A11y)

לאייקונים דקורטיביים: 'תפקיד =' img "אריה-מוסתר =" נכון "או להסיר נגישות מהזרם.
עבור סמנטי: '<svg תפקיד = "img" aria-labeledby = "id'>' + '<כותרת id = id'> תיאור </כותרת>' או 'אריה-תווית'.
הסמל אינו צריך להיות נושא הסטטוס היחיד: הוספת טקסט/רמז/תבנית איקונוגרפית (צורה, שבץ).
גודל טקסט וניגוד חתימה מתאים ל ־ WCAG (4 רגיל. 5:1).

8) צינור SVG וביצועים

למה SVG: בהירות וקטורית, סגנון באמצעות CSS, משקל קל עם אופטימיזציה.

• לאחסן קבצי מאסטר בפיגמה, לייצא ל-SVG עם אפשרויות: ללא תוספת ”קבוצה”, ללא ”מילוי-כלל” כברירת מחדל, עם תכונת ה-ViewBox וללא ”רוחב/גובה” קבוע (עקיפה ב-CSS).
• הפעל דרך SVGO (פרופיל פרוייקט): מחיקת metadata, הפחתת קואורדינטות, מיזוג נתיבים.
• נטישת גופני האייקון - נגישות ותרגום בעיות.

1. ספרייט SVG:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

חזרות זולות, אי אפשר בקלות לשנות את רוחב המכה בכמה צינורות.
2. Inline-SVG (רכיב תגובה): גמישות של סגנונות ואביזרים, ניעור עצים.
3. חיצוני '<img>' - לקישוט/איור בלבד.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) רכיב API (דוגמה מגיבה)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• כברירת מחדל, גודל =” 1em” ושבץ = 1. 5`.
• אם "דקורטיבי", להוסיף "אריה מוסתר =" נכון ".