الأيقونات
الأيقونة هي رمز يمثل عنصرًا أو إجراءً معينًا أو تصميمًا مرئيًا للمعلومات يتخطى مختلف الحواجز كحاجز اللغة أو ضعف البصر، إلا أنه يجب استخدام الأيقونات بحرص بغرض التوضيح للمستخدم والتقليل من عبئه الإدراكي.
مبادئ تصميم الأيقونات
على الأيقونات أن تكون، قبل كل شئ، جزءًا لا يتجزأ من السياق، كما يجب أن تتبع المقاييس العالمية وأن يسهل التعرف عليها.
معرض الأيقونات
لأن الهدف دائمًا هو الوضوح والالتزام بالتناسق وتجنب ازدحام التصميم، اخترنا Phosphor icons كمعرض للأيقونات، حيث يحتوي على 1,512 أيقونة، تضم كل منها الخفيفة والعادية والعريضة والمظللة ومزدوجة اللون، بإجمالي 9,072 أيقونة.
استخدام Phosphor بصيغة SVG
من أجل تحكم أفضل بوقت تحميل موقعك الإلكتروني، يفضَّل استخدام صيغة SVG في الكود بلغة CSS على شبكة تسليم محتوى CDN مستضافة وملف الخط.
- اختر من بين الأيقونات على موقع Phosphor.
- اختر أيقونة عادية أو مظللة بالكامل أو مزدوجة اللون (مظللة جزئيًا).
- اختر الأيقونة ثم اختر SVG RAW.
- اختر الأحجام والألوان المناسبة، مع العلم أنها اختيارية، أو قم بعمل تلك التغييرات في الكود مباشرةً.
استخدام أيقونات Phospor كصور
قد يتطلب تطوير موقعك الإلكتروني وضع الأيقونات داخل علامتة ` <img> ` بدلًا من ` <svg> `، إلا أنه لا يُنصح بذلك إلا عند الحاجة وفي غياب الحلول الأخرى.
وينصح في مثل هذه الحالات باستخدام ملف SVG كمرجع لك في علامة ` <img> `. وبالإشارة إلى SVG، يتم الحفاظ على صيغة الفيكتور ووضوح الشكل العام.
استخدام أيقونات Phosphor كشبكات تسليم للمحتوى (CDN)
يتوفر معرض الأيقونات كجزء من مجموعة خطوط وملف CSS يتم استضافة كل منهما على الخادم. ويتّبع Phosphor مذهبًا مماثلًا للكثير من معارض الأيقونات وهو توفيرها في شكل خطوط ويب في Unicode تستخدم رموز الأحرف بجزء الاستخدام الخاص Private Use Area لتحويل الأكواد التي عادةً لا تتحول من رموز إلى أيقونات بصورة تلقائية.
وبإمكانك استخدام هذا المذهب لتحميل جميع الأيقونات المطلوبة عن طريق شبكة تسليم المحتوى (CDN).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/bold/style.css" />
</head>
<body>
<i class="ph-bold ph-smiley"></i>
<i class="ph-bold ph-heart" style="color: blue"></i>
<i class="ph-bold ph-cube"></i>
</body>
</html>
استخدام الأيقونات
- على الحدود الخارجية للأيقونة أن تتماشى مع سمْك الخط المستخدم، فإذا كان السمك عادٍ (400)، فعلى عرض الحدود الخارجية الأيقونة أن يكون عادٍ أيضًا. وإذا كان سمْك الخط خفيفًا (200)، فعلى عرض الحدود الخارجية للأيقونة أن يكون خفيفًا أيضًا.
- يجب انتقاء الأيقونات المظللة ومزدوجة اللون بأقصى عناية، حيث يُنصح مثلًا باستخدام الأيقونات مزدوجة اللون مع الوضع الداكن، ولكن إذا توفرت درجة اللون التي تساعد على انسجام الألوان معًا، فيمكنك حينئذ استخدام أيقونة مزدوجة اللون أيضًا بدرجة أفتح للوضع الفاتح بموقعك.
- استخدم صيغة الفيكتور (SVG) لأفضل أداء ومظهر، حيث يتيح لك استخدام SVG أعلى درجة مرونة مع الأيقونات المتجاوبة وألوانها عند استخدام خاصيتيّ التظليل وتغيير لون خط الأيقونة.
سمْك الخط
نقطتان 2 pt هو المقاس الأصلي لسمْك خط الأيقونات ذات الحجم الرئيسي، فكما ذكِر تحت عنوان «الاستخدامات العامة»، فإن سمْك خط الأيقونة يعتمد على سمْك الخط بالعنصر الذي تمثله. وبالتالي، يتم تطبيق سمْك خط الأيقونات كما يلي:
الحجم
بإمكانك تغيير حجم الأيقونات إلى 28 بكسل أو 32 بكسل أو 48 بكسل، بناءً على السياق وأبعاد الشاشة، كما يمكنك تخطي حاجز الـ 48 بكسل بصفحات الحالة الفارغة.
ملحوظة: تنصح إرشادات WCAG 2.0 باستخدام 18 بكسل كحدٍ أدنى لحجم الأيقونات لوضوح وسهولة التعرف عليها من قبَل ضعاف البصر من المستخدمين. ويجب ألا يستخدم الحجم الصغير مع أي حجم للشاشات تحت 1024 بكسل.
اللون
ننصح بالتقليل من ألوان الأيقونات من خلال تركيبات الألوان التالية:
White colour on a dark background
White colour on a dark background
Primary colour on a white background
Black colour on a white background
ويمكنك أيضًا استخدام ألوان أخرى لأيقونات معينة في إطارات أو أقسام منفصلة كقسم الخدمات أو المبادرات على ألا تقل نسبة التباين بين لون الأيقونة وخلفيتها على 1:3.
ولأن إمكانية الوصول (أو نسبة التباين على وجه الخصوص) هي الهدف الرئيسي، فإنه يسمح باستخدام تركيبات لونية عالية التباين ضمن دليل الألوان، كما يمكنك أيضاً تطبيق الألوان الأساسية (أو الثانوية) 100 نفسها على الأيقونات والألوان الأساسية (أو الثانوية) 700 فما فوق للخلفيات.
المحاذاة
على الرغم من أن الطبقة الخلفية للأيقونات تكون مربعة الشكل، إلا أنه لا يشّترط للعنصر الرئيسي بالأيقونة أن يكون دائريًا أو مربعًا، ولذلك، تساعد المحاذاة الصحيحة في الحفاظ على مظهر التصميم عند وضع الأيقونات بجوار بعضها البعض داخل الشبكة.
واحرص دائمًا على وضع الأيقونات ذات الحجم المماثل في الوسط على المحور الرأسي والتأكد من أن النص بمنتصف الأيقونة على محورها الأفقي.
متى تستخدم الأيقونات؟
تُعرف الأيقونات الجيدة بتماشيها مع السياق أولًا وأخيرًا، فاحرص على استخدامها فقط لمساعدة المستخدم على فهم المحتوى.
وقد تنجح الأيقونة في بعض الأحيان في توضيح المعنى المقصود بشكل فعال، وقد يحدث في بعض الحالات الأخرى أن يفهم المستخدم المعنى بصورة غير صحيحة أو ألا يفهمه على الإطلاق، وهو ما يمكن تجنبه عن طريق اختيار الأيقونة الصحيحة للغرض الصحيح (لا للاستخدامات المماثلة) وإضافة إليها نصًا مساعدًا أو أداة بصرية تدعم النص.
ويؤدي الإفراط في استخدام الأيقونات إلى واجهة معقدة تشتت المستخدم.
يمكنك استخدام الأيقونات للآتي:
- المكونات مثل الأزرار والروابط وما تدعمها من روابط الدعوة إلى اتخاذ إجراء
- عناصر التصفح مثل أيقونة الهمبرغر التي ترمز لقائمة التنقل
- عناوين الصفحات والروابط الداعمة مثل تسجيل الدخول أو البحث أو اللغة
- الروابط الداعمة بالهامش السفلي كروابط صفحات التواصل الاجتماعي
- المكونات كالتقييمات والآراء
- قائمة أو عنصر تصفح ثانوي
- الهوية على بطاقة الخدمة
- لتقديم المساعدة والدعم بهدف سهولة الوصول
- مؤشرات الحالة مثل حالة التحميل
أيقونات الحالة
أيقونات الحالة هي عناصر مرئية تشير إلى حالات مختلفة مثل الرسائل والحالة الفارغة (أمثلة: «لم يتم العثور على نتائج» أو «استقبال الإشعارات») والمرفقات، وغيرها.
أما من حيث القياس، فيكون عرضها وارتفاعها 48 × 48 بكسل، وتكون في الأغلب ذات حدود خارجية أكثر سمْكًا، ويفضل أن تكون مزدوجة اللون وذات قدرة على التجاوب مع كافة الخطوط والأحجام.
عندما تكون صفحات الحالة الفارغة أكبر بحيث تمثل صفحة كاملة أو قسمًا يملأ الشاشة طولًا وعرضًا، فعلى الأيقونة أن تكون أكبر حجمًا مثل أيقونات صفحات الحالة الفارغة التي تمتد بعرض صفحة الويب، وقد تصل إلى 80 × 80 وتكون ذات ألوانٍ متعددة لتلائم اللون المنطفئ للحالة.
لم تتم إضافة أي أفراد أسرة بعد
ستظهر أسماء أفراد الأسرة هنا عند إضافتها إلى حسابك.
أشكال الأيقونات
اشتخدم الأيقونات على أشكال ونماذج محدّدة طالما لم تكن مستوحاة من هوية الجهة المرئية.
تجنب الأشكال المستوحاة من عناصر هوية الجهة
لا يسمح بالأشكال العشوائية والأشكال المستوحاة من هوية الجهة وأشكال الفقاقيع وما إلى ذلك.
الأيقونات مزدوجة اللون وثنائية الدرجة
تتكون الأيقونات مزدوجة اللون من طبقتين رئيسية وثانوية بنسبة تعتيم تلقائية تقدّر بـ40٪ لتظهر كظلٍ بدرجة أخف من الأيقونات الأصلية أو لتعديل درجة اللون مباشرةً.
كما تتكون الأيقونات ثنائية الدرجة أيضًا من طبقتين رئيسية وثانوية إلا أن درجة اللون بها لا تعتمد على نسبة التعتيم، بل تعد درجة لون مستقلة. ويُنصح باستخدام الأيقونات ثنائية الدرجة عند استخدام الألوان الثانوية، وينصح بها أيضًا في الأقسام الصغيرة أو لتوضيح خطوات عملية ما.