سیستم آیکون ها و pictograms

1) نقش آیکون ها در محصول

آیکون ها یک حامل جمع و جور از معنی و حالت هستند. آنها سرعت اسکن، کمک به صرفه جویی در فضا و افزایش تشخیص الگو. در رابط های محصول، آیکون متن و رنگ را تکمیل می کند، نه جایگزین آنها.

1. معنی> سبک: هر آیکون باید یک سناریوی برنامه روشن داشته باشد.

2. سازگاری: شبکه تک، سکته مغزی، زاویه، ریتم پر کردن.

3. در دسترس بودن: آیکون تنها سیگنال نیست ؛ همیشه یک امضا/راهنمای ابزار/آریا وجود دارد.

4. عملکرد: یک خط لوله SVG، sprites و نشانه های رنگ/اندازه.

2) خطوط شبکه و کلید

هنرهای پایه: 16 × 16، 20 × 20، 24 × 24 (اصلی)، 32 × 32.
کلید-A دایره/مربع محاط در 1-2 پیکسل برای تعادل نوری.
زمین پیکسل: قرعه کشی بر روی مختصات عدد صحیح ؛ stroke مضربی از 0 است. 5 پیکسل (معمولا 1. 5 پیکسل در 24 × 24).

• قطر «ضخیم تر» نگاه نازک تر - اضافه کردن 0. 25 پیکسل به سکته مغزی در نقاط مشکل.
• ما کمی نوک گوشه های تیز داخل کلید را با 1 پیکسل فرو می کنیم تا «سر و صدا» نکنیم.
• دایره ها و نقاط اغلب نیاز به + 1 پیکسل به قطر برای جرم بصری برابر دارند.

مناطق کلیک کنید: منطقه تعاملی ≥ 40 × 40 پیکسل (تلفن همراه)، ≥ 32 × 32 پیکسل (دسکتاپ) ؛ آیکون متمرکز شده است.

3) سبک تایپ کردن

• سکته مغزی: 1. 5 پیکسل (24 × 24)، 1. 25 پیکسل (20 × 20)، 1 پیکسل (16 × 16).
• linecap/linejoin: 'round' برای دوستی یا 'miter' برای سبک فنی (ثابت در راهنما).
• زاویه شعاع در هندسه: 2-3 پیکسل (24 × 24).

پر شده برای مناطق متراکم و آیکون های وضعیت.
Duotone برای حالت های خالی تصویری مجاز است، اما نه برای سیگنال های حیاتی UI.

• خلاصه - وضعیت پایه.
• پر - دارایی/تخصیص.
• دو تن - تزئینی/در کمک.

4) رنگ و کنتراست (WCAG)

حالت پایه از طریق «currentColor» تک رنگ است: نماد رنگ متن/متن را به ارث می برد.

• چیزی نیست. خطا '↔ پس زمینه ≥ 3:1، امضا شده با متن (نه فقط رنگ).
• چیزی نیست. بر روی سطح 'پس زمینه ↔ ≥ 3:1 ؛ برای اندازه های کوچک هدف در 4. 5:1.
• در رنگ می میرد، استفاده از 'on-' رنگ (کنتراست خودکار از سیستم رنگ).

5) کشورها و تعاملات

پیش فرض/شناور/فعال/غیر فعال/تمرکز: تفاوت نه تنها در رنگ - تغییر کدورت/پر کردن/ضخامت/قرص پس زمینه، اضافه کردن حلقه تمرکز.
مدالها - ≥ کنتراست رقمی 4. 5:1 به مرگ ؛ اندازه رقم ≥ 10-11 پیکسل.
تغییر آیکون (مورد علاقه، مانند): تغییر پر کردن و/یا نقطه داخلی، نه فقط رنگ.

6) آیکون + متن

آیکون ها برچسب ها را در اقدامات کلیدی جایگزین نمی کنند. حداقل جفت: آیکون + متن کوتاه (یا راهنمای ابزار توسط 'aria-label'). در لیست ها و جداول، آیکون با ارتفاع کلاه متن و پایه هماهنگ شده است.

7) در دسترس بودن (A11y)

برای آیکون های تزئینی: "role =" img "aria-hidden =" true "یا حذف دسترسی از جریان.
برای معنایی: <svg role = "img" aria-labelledby = "id"> "+" <title id = "id"> Description </title> "یا" aria-label ".
نماد نباید تنها حامل وضعیت باشد: الگوی متن/اشاره/نماد را اضافه کنید (فرم، سکته مغزی).
اندازه متن و کنتراست امضا مطابق با WCAG (منظم ≥ 4 است. 5:1).

8) خط لوله SVG و عملکرد

چرا SVG: وضوح بردار، یک ظاهر طراحی شده از طریق CSS، وزن سبک با بهینه سازی.

• ذخیره فایل های اصلی در Figma، صادرات به SVG با گزینه: بدون گروه اضافی، بدون «پر کردن قانون» به طور پیش فرض، با ویژگی «viewBox» و بدون ثابت «عرض/ارتفاع» (لغو در CSS).
• اجرا از طریق SVGO (نمایه پروژه): حذف ابرداده، کاهش مختصات، ادغام مسیرها.
• رها کردن آیکون فونت - دسترسی و ارائه مسائل.

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 (کامپوننت React): انعطاف پذیری سبک ها و پروکسی ها، تکان دادن درخت.
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 (مثال React)

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;
};

• به طور پیش فرض، «size =» 1em «و» stroke = 1. 5`.
• اگر "تزئینی"، "aria-hidden =" true "را اضافه کنید.