أيقونات خط أم ممتلئة: متى تختارها

يمكن لأيقونات الخط والأيقونات الممتلئة أن تعبّر عن الفكرة نفسها، لكنها لا تتصرف بالطريقة نفسها داخل الواجهة. الفرق ليس مجرد ذوق بصري. سماكة الخط، والمساحة السلبية، والتباين، وظروف الخلفية تؤثر كلها في مدى سرعة تعرف الناس على الأيقونة، ومدى ثباتها عبر الحالات المختلفة وأحجام الشاشات والتخطيطات الكثيفة. والاختيار بينهما هو في الحقيقة سؤال عن الوضوح والنبرة.

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

تعمل أيقونات الخط بشكل أفضل عندما تحتاج UI إلى مساحة وضبط بصري

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

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

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

الأيقونات الممتلئة أقوى عند الأحجام الصغيرة ولحظات الانتباه العالي

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

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

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

تغييرات الحالة ومزج الأنماط لا تنجح إلا عندما توجد قاعدة واضحة

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

وهنا تظهر أهمية التفكير بأسلوب Gestalt. فالمستخدمون يجمعون الأشكال والأوزان والسلوكيات المتشابهة في أنماط. وإذا كانت عائلة الأيقونات تمتلك نسبًا متسقة ومنطقًا موحدًا للخطوط، تبدو الواجهة متماسكة. أما إذا كان نصف المجموعة خفيفًا وهندسيًا بينما النصف الآخر كثيفًا وثقيلًا، يبدأ المنتج في أن يبدو وكأنه مجمّع من أجزاء متفرقة.

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

تحتاج لوحات المعلومات والمنتجات الغنية بالبيانات وUI المحمول إلى أولويات مختلفة

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

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

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

اختر الأسلوب الذي يناسب علامتك ومعيارك الأساسي في إمكانية الوصول

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

يجب أن تكون إمكانية الوصول جزءًا من هذا القرار. فأيقونات SVG تتدرج بسلاسة ويمكن تسميتها بشكل صحيح عندما تُستخدم كرسومات واجهة ذات معنى. وعندما يعمل SVG كصورة أو رمز مجمّع، توصي MDN بالتعامل معه كرسمة واحدة ذات معنى مع تسمية مناسبة. الأسلوب وحده لا يصنع الوضوح. فما زالت الأيقونة تحتاج إلى تباين كافٍ وحجم كافٍ وشكل يمكن التعرف عليه.

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