كيفية عرض مجموعة متنامية من الحيوانات الأليفة الافتراضية الصغيرة

الحيوانات الأليفة الصغيرة هي عناصر بصرية في المقام الأول، لذا فإن الشبكة المنتظمة تُعد نقطة بداية جيدة. استخدم خلايا متساوية الحجم وحافظ على ترتيب قراءة ثابت من اليسار إلى اليمين (أو من اليمين إلى اليسار بحسب اتجاه اللغة)، ثم من الأعلى إلى الأسفل. هذا يجعل كل حيوان أليف جديد يشغل مكاناً متوقعاً ويساعد الجامع العائد على تفقد المعرض بسهولة. توصي شركة Apple بتنسيقات الصفوف أو الشبكات المألوفة للمجموعات البصرية، بينما يصف Material Design مربعات الشبكة خفيفة الوزن بأنها مناسبة لمعارض الصور. (Apple Human Interface Guidelines: Collections؛ Material Design: Cards)

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

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

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

تعامل مع المنطقة المميزة كنافذة صغيرة تطل على المجموعة، وليس كبديل لها. على سبيل المثال، اعرض عدداً قليلاً من الحيوانات المفضلة في الأعلى، ثم احتفظ بالشبكة الكاملة في الأسفل. يستخدم نموذج معرض الحيوانات الأليفة التكيفي من Android منطقة بارزة للحيوانات الأليفة وشبكة يمكنها إظهار المزيد من الحيوانات كلما اتسعت مساحة التخطيط. يدعم ذلك خيار التصميم العام المتمثل في إعطاء الأولوية البصرية للمنطقة المميزة مع الاحتفاظ بمعرض قابل للتصفح أسفلها. (Android Developers: Furry friends and adaptive APIs)

عندما تصبح الشبكة طويلة، قسّمها باستخدام فئات تتطابق مع طريقة تفكير جامع الحيوانات الأليفة بشأنها. تتضمن الخيارات المحتملة الفصيلة أو البيئة، أو مجموعة الاقتناء، أو عائلة الألوان، أو فترة الاقتناء — استخدم فقط الفئات الموجودة بالفعل في المجموعة. ابدأ بعدد قليل من المجموعات؛ فالعديد من الأقسام الصغيرة يمكن أن يجعل التصفح يبدو وكأنه تنقل بين مجموعات منفصلة.

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

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

إذا كان العرض جزءاً من موقع ويب أو تطبيق، فتأكد من توفر هوية الحيوان الأليف كنص وصورة على حد سواء. تشير إرشادات W3C إلى أن الصور الإعلامية تحتاج إلى بدائل نصية تنقل معلوماتها ذات الصلة؛ وعندما يقدم تصنيف مجاور نفس المعلومات بالفعل، فقد يكون تكرارها في النص البديل للصورة غير ضروري. من الناحية العملية، ادمج اسماً مرئياً مع تسمية ملائمة لتسهيل الوصول، وتجنب جعل الحيوان الأليف المميز قابلاً للتعرف عليه فقط من خلال اللون أو الصورة. (W3C WAI: Images Tutorial)

استخدم العرض المتاح لتغيير عدد الأعمدة بدلاً من فرض عدد ثابت عبر كل الشاشات. قد يعرض الهاتف الصغير عمودين؛ ويمكن لشاشة أوسع أن تعرض أكثر من ذلك، بشرط أن تظل كل صورة واسم مقروءين بوضوح. حافظ على تناسق المسافات واحتفظ بنفس الترتيب الأساسي مع إعادة تدفق التخطيط. يوضح مثال التصميم التكيفي من Android معرضاً من عمودين على الشاشات المدمجة، مع إظهار المزيد من المحتوى عندما تتوفر مساحة أكبر. (Android Developers: Furry friends and adaptive APIs)

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

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

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

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

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

• Apple Developer، "المجموعات" — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design، "البطاقات" — https://m1.material.io/components/cards.html
• Android Developers، "الأصدقاء الفرويون وواجهات برمجة التطبيقات التكيفية" — https://developer.android.com/design/ui/gallery/social/pawparazzi
• مبادرة إمكانية الوصول إلى الويب لـ W3C، "دليل الصور التعليمي" — https://www.w3.org/WAI/tutorials/images/