أيقونات الويب: ماهي الأيقونات و كيف تستخدم و متى؟

يستحيل أن تجد موقعاً في الإنترنت لا يستخدم أيقونات، خاصة مع انتشار التصميم المسطح و بدء تبسيط واجهات المواقع. لعل الأيقونات أكثر الطرق التي تختصر الكلام في الويب. و هي أيضاً تساهم في تحسين واجهة المستخدم.
سنذكر لك بالسطور القادمة: أنواع الأيقونات؟ أهمية الأيقونات؟ كيف تستخدم الأيقونات؟ متى تستخدم الأيقونات؟ ما الأخطاء التي يقع بها المصممون عند استخدام الأيقونات؟

ملحوظة قبل البدء: ليس كل الزوار يفهم معاني الأيقونات، عليك أن تستخدم أيقونات سهلة الفهم و بسيطة و تناسب كل الفئات.

أنواع الأيقونات (أصنافها، امتداداتها)

يمكن للأيقونات أن تكون عبار عن صور نقطية Bitmap (بصيغة: PNG, JPG, GIF, BMP...)؛ و هي غالباً تفقد جودتها بسرعة عندما يكبر حجمها، وقد قل استخدامها كثيراً.
و النوع الثاني: أيقونات الفكتور Vector. غالباً ما يكون امتدادها SVG. و هو نوع من الصور يسمى: الصور المتجهة، و هو يخالف طبيعة الصور النقطية، بحيث لا تقل جودة الأيقونة أبداً مهما تم تكبيرها، وهي تستخدم كثيراً من قبل المواقع.
أما الثالث: أيقونات الخطوط Icons fonts، ويتم استعمالها مع خاصية Font face (@font-face). و هي التي تأخذ الحيز الأكبر من أيقونات الويب.

أهمية الأيقونات في الويب

لا أحد ينكر أهميتها، لأن الأيقونات أتت لتختصر العديد من العبارات في رمز واحد، و أكبر مثال على ذاك الاختصار تجده في أغلب برامج تحرير النصوص (Word, Wordpad...).
إقرأ أيضاً: «الألوان: كيف تختار الألوان المناسبة للتصاميم»
فعوض أن تكتب مثلاً: «حول هذا النص إلى التنسيق الغامق» تقوم بعمل أيقونة B المشهورة في أغلب برامج التحرير.

كيف تستخدم الأيقونات؟

لا أحد قد يواجه مشكلة مع هذا؛ يمكنك فقط استخدام مكتبة خطوط أيقونات أو مجموعة من أيقونات SVG.
إذا أردت استخدام خطوط أيقونات يمكنك أن تقوم بالدخول إلى بعض المواقع التي توفرها و اتباع تعليمات استخدامها. أفضل موقع يقدم تلك الخدمة هو Font awesome
أما إن أردت أن تقوم باستخدام SVG، فعليك تحميل حزمة أيقونات و التعامل معها كما تتعامل مع الصور العادية.

متى تستخدم الأيقونات؟

لا تستخدم الأيقونات إلا إن كنت في أمس الحاجة إليها. الاستخدام الكثير للأيقونات سيء.

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

ما الأخطاء التي يقع بها المصممون عند استخدام الأيقونات؟

الأخطاء  تحدث كثيراً عند استخدام الأيقونات، لكن سأذكر أغلبها و الذي يؤثر كثيراً على الواجهة.
الخطأ الأول: يقوم المصمم بعمل أيقونة و تحتها أو بجانبها اسم الرابط.
حل الخطأ: إذا وضعت أيقونة فلا يجب وضع اسم توضيح لها لأن الأيقونة يجب أن تكون مفهومة.
الخطأ الثاني: الأيقونات بها العديد من التفاصيل الغير مهمة.
حل الخطأ: الأيقونات يجب أن تكون بسيطة أقصى درجة و مفهومة (خير مثال: أيقونات Material design).
الخطأ الأول: استخدام الأيقونات في كل مكان.
حل الخطأ: لا يجب أن تكون الأيقونات في كل مكان إنها تلهي الزائر عن التركيز في المحتوى. لا يجب أن تستخد إلا عند الحاجة.
ها قد وصلنا للنهاية!