نظام الرموز والرسوم التوضيحية

1) دور الأيقونات في المنتج

الرموز هي ناقل مدمج للمعنى والحالة. إنها تسرع المسح الضوئي وتساعد في توفير المساحة وزيادة التعرف على الأنماط. في واجهات المنتج، تكمل الأيقونة النص واللون، بدلاً من استبدالهما.

1. المعنى> الأسلوب: يجب أن يكون لكل رمز سيناريو تطبيق واضح.

2. الاتساق: شبكة واحدة، سكتة دماغية، زوايا، إيقاع ملء.

3. التوافر: الأيقونة ليست الإشارة الوحيدة ؛ هناك دائما توقيع/تلميح/أغنية.

4. الأداء: خط أنابيب SVG واحد، العفاريت ورموز الألوان/الحجم.

2) الشبكة والخطوط الرئيسية

اللوحات الفنية الأساسية: 16 × 16، 20 × 20، 24 × 24 (الرئيسية)، 32 × 32.
خط المفاتيح 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).
• linecap/linejoin: 'جولة' للود أو 'ميتر' للأسلوب التقني (مثبت في المبدأ التوجيهي).
• زوايا نصف القطر في الهندسة: 2-3 px (بمقدار 24 × 24).

مملوءة بالمناطق الكثيفة وأيقونات الحالة.
يُسمح لـ Duotone بالحالات الفارغة التوضيحية، ولكن ليس لإشارات واجهة المستخدم الحرجة.

• الخطوط العريضة - الحالة الأساسية.
• ملء - الأصول/التوزيع.
• نغمتين - زخرفية/مساعدة.

4) اللون والتباين (WCAG)

الوضع الأساسي أحادي اللون عبر «اللون الحالي»: ترث الأيقونة لون النص/السياق.

• أيقونة. خطأ ↔ الخلفية ≥ 3:1، موقعة بالنص (وليس فقط اللون).
• أيقونة. الخلفية السطحية ↔ ≥ 3:1 ؛ للأحجام الصغيرة تهدف إلى 4. 5:1.
• عند موت اللون، استخدم الألوان «on-» (التباين التلقائي من نظام الألوان).

5) الدول والتفاعلات

الافتراضي/التحليق/النشط/المعوق/التركيز: الاختلاف ليس فقط في اللون - قم بتغيير العتامة/الملء/السماكة/حبوب الخلفية، أضف حلقة التركيز.
الشارات - تباين الرقم ≥ 4. 5:1 إلى الموت ؛ حجم الرقم ≥ 10-11 px.
قم بتبديل الأيقونات (المفضلة، مثل): قم بتغيير الملء و/أو النقطة الداخلية، وليس اللون فقط.

6) أيقونة + نص

لا تحل الرموز محل الملصقات في الإجراءات الرئيسية. الحد الأدنى للزوج: icon + short text (أو tooltip by 'aria-label'). في القوائم والجداول، يتم محاذاة الأيقونة مع ارتفاع الحد الأقصى للنص وخط الأساس.

7) التوافر (A11y)

للأيقونات الزخرفية: "الدور =" img "aria-hidden =" صحيح "أو إزالة إمكانية الوصول من التيار.
للدلالة: '<svg role = «img» aria-labelledby = «id»>' + '<title id = «id»> الوصف </العنوان> «أو» aria-label'.
لا ينبغي أن تكون الأيقونة هي الناقل الوحيد للحالة: أضف النص/التلميح/النمط الأيقوني (الشكل، السكتة الدماغية).
ويقابل حجم النص وتباين التوقيع الفريق العامل (≥ العادية 4. 5:1).

8) خط أنابيب وأداء SVG

لماذا SVG: وضوح المتجه، والتصميم عبر CSS، وخفة الوزن مع التحسين.

• قم بتخزين الملفات الرئيسية في Figma، وقم بالتصدير إلى SVG مع الخيارات: بدون «مجموعة» إضافية، بدون «قاعدة ملء» افتراضيًا، مع سمة «صندوق العرض» وبدون «عرض/ارتفاع» ثابت (تجاوز في 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 (مكون رد الفعل): مرونة الأنماط والدعائم، اهتزاز الأشجار.
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`.
• إذا كانت كلمة "زخرفية"، تضاف عبارة "aria-hidden =" true ".