مبادئ الأيقونات
متسقة
واضحة وسهلة التمييز
بسيطة
قابلة للقرأة
مكتبة الأيقونات
يعتمد نظام تصميم الشارقة على Font Awesome 6 Pro كمكتبة موحدة للأيقونات. ويعرض هذا القسم مجموعة من الأيقونات الأكثر استخدامًا، فيما يمكن الرجوع إلى Font Awesome 6 Pro للاطلاع على المكتبة الكاملة.
Font Awesome 6 Pro
خطية
خطية بوضوح
ممتلئة
سماكة الخط
يسهم سمك خطوط الأيقونات في تعزيز التسلسل الهرمي البصري ووضوحها. احرص على استخدام سماكة موحد للأيقونات في جميع أنحاء الواجهة.
رفيع
1px
خفيف
1.5px
عادي
2px
متوسط
2.5px
عريض
3px
الزوايا
ينبغي أن تتوافق زوايا الأيقونات مع الانحناء المعتمد في نظام تصميم الشارقة، بما يضمن الاتساق البصري والانسجام مع بقية عناصر الواجهة.
بدون استدارة (0 بكسل)
صغير (4 بكسل)
متوسط (8 بكسل)
كبير (12 بكسل)
دائري بالكامل (50%)
المحاذاة
تسهم المحاذاة الصحيحة للأيقونات في تحقيق التوازن البصري وتعزيز وضوح الواجهة. وينبغي محاذاة الأيقونات مع النصوص والعناصر المجاورة لضمان الاتساق وسهولة القراءة.
محاذاة الأيقونة مع خط الأساس للنص
الحفاظ على مسافات متسقة بين الأيقونات والعناصر
توسيط الأيقونات رأسيًا لتحقيق توازن بصري أفضل
أشكال الأيقونات
يمكن وضع الأيقونات داخل حاويات بأشكال مختلفة لإبراز العناصر المهمة أو تمييز الفئات بصريًا، مع الحفاظ على الاتساق والوضوح في واجهة المستخدم.
دائري
مربع
مستدير الزوايا
أفضل الممارسات لاستخدام الأيقونات
افعل
الإعدادات- • استخدم أحجامًا متسقة للأيقونات.
- • أرفق الأيقونات بتسميات واضحة عند الحاجة.
- • حافظ على مسافات متسقة بين الأيقونات والعناصر.
- • استخدم رموزًا مألوفة وسهلة الفهم.
تجنب
- • لا تخلط بين أنماط مختلفة للأيقونات داخل الواجهة.
- • لا تستخدم الأيقونات دون سياق أو معنى واضح.
- • لا تجعل الأيقونات صغيرة بحيث يصعب رؤيتها أو التفاعل معها.
- • لا تستخدم رموزًا غير مألوفة أو يصعب فهمها.
