9 القواعد الأساسية لمعارض الصور سريعة الاستجابة
التصميم المستجيب هو جزء أساسي وضروري من تطوير الويب. واحدة من أكبر القضايا مع تصميم الويب استجابة في الآونة الأخيرة كانت الصور. يناقش الكثيرون أفضل طريقة لعرض الصور على موقع سريع الاستجابة. ثم ماذا عن معارض الصور؟
تتميز معارض الصور بكونها أكثر تعقيدًا بكثير من الصور الفردية ؛ هناك المزيد من المتغيرات والأشياء التي يجب التفكير بها عند تنفيذ معارض صور متجاوبة بالكامل على موقع الويب الخاص بك. لنلقِ نظرة على بعض النصائح المفيدة لتنفيذ معارض الصور المتجاوبة بالطريقة الصحيحة.
1) عروض الشرائح: إخفاء nav كلما أمكن ذلك
قد لا يكون لديك عناصر تنقل على جهاز لوحي أو جهاز محمول ، ولكن على سطح المكتب ، من المستحسن إخفاء هذه العناصر حتى يتم الاحتياج إليها. يجب تعيين عناصر مثل النقطتين الأمامية والخلفية والنقاط الملاحية لعرضها فقط عندما يرمز شخص ما إلى معرض الصور المنزلق. هذا يتجنب الانحرافات ، ويمكنك تجنب التضارب بين عناصر المحتوى والملاحة. التجربة بأكملها تشعر بأنها أقل تواضعا.
2) تجنب الكثير من الصور الشخصية
إذا كنت تنفذ معرضًا يمثل شبكة من الصور ، فستحتاج إلى اختيار صور ذات تنسيق أفقي ، أو مربعة إذا أمكن. هذا يجعل من السهل عرضها على شاشة صغيرة. ستكون الصور الشخصية رائعة على الهاتف الذكي في الوضع الرأسي ، ولكن منطقة العرض الواسعة للهاتف ذي المناظر الطبيعية تجعل من الصعب مشاهدة الصور الشخصية. يُعد المشهد أفضل ، ولكن يمكنك الاستقرار في مربع إذا لم يكن المشهد متاحًا. يمكن ضبط جميع الصور لتلائم مساحة العرض ، ولكن الصور الشخصية على الشاشة ذات المناظر الطبيعية ستظهر صغيرة جدًا. لن يتم عرض صورك بهدوء مثل الصور المربعة أو العرضية ، والتي ستملأ مساحة أكبر من الشاشة وتظهر أكبر. عند اختيار الصور ، تأكد من إبقاء الشخص الذي يراها في ذهنه.
3) استخدام الإيماءات على الأجهزة اللوحية والجوال
يحب الناس استخدام الإشارات على شاشات اللمس. يشعرون بمزيد من التمكين عندما يشعرون وكأنهم ينزلقون صورة ، لأن التجربة أكثر غامرة. إن محاولة النقر على أسهم صغيرة أو نقاط تنقل على جهاز محمول أمر مرهق للغاية. من الطبيعي أكثر أن تكون قادرًا على أخذ إصبعك وانتقاد صورة لأعلى أو لأسفل أو لليسار أو لليمين.
4) تجنب lightboxes: تعطيلها على الهاتف المحمول
إذا كان لديك صور للمنتجات ، مثل الآلات أو العناصر التي يجب أن يتم عرضها بمزيد من التفصيل (النسيج ، والمجوهرات ، إلخ) ، عندئذٍ يكون المنبثق ذو الصور الكبيرة معقولاً. حتى ذلك الحين ، يجب استخدامها فقط على سطح المكتب. عندما تتحلل إلى أحجام الشاشات اللوحية والجوال ، يجب تعطيل صناديق الضوء. يمكن أن تسبب عددًا من مشكلات تجربة المستخدم. إذا حدث شيء ما ولم يتغير حجم صندوق الضوء بشكل صحيح ، فقد لا يتمكن من الوصول إلى زر الخروج ، أو قد لا يتم عرض الصور بشكل صحيح.
5) عند استخدام عناصر الملاحة ، اجعلها غير مزعجة
إذا كان لديك معرض صور متحرك يحتوي على عدد كبير من الشرائح ، فستكون عملية التنقل منطقية. لا ترغب في جعل المستخدمين ينتظرون دورة كل شيء. يمكنهم النقر بسهولة من خلال السرعة الخاصة بهم ، والحصول ، والحصول على ما يحتاجون إليه ، والخروج. عند استخدام هذه العناصر ، تأكد من وضعها في أماكن بعيدة عن الطريق. لا توجد نقاط تنقل تنتقل عبر النص أو الروابط الأخرى. أيضا ، وتجنب الضوابط معقدة بشكل مفرط. هذه تستهلك الكثير من المساحة ، وتشتيت انتباه المستخدمين عن المحتوى ، وتخلق مظهراً مزدحماً. إن وجود النقاط التي يستطيع المستخدمون النقر عليها للتنقل أو الانتقال إلى بعض الصور ، ووجود سهام للأمام أو الخلف هو الكثير. لا تطرف!
6) لا تخلط الصور ومقاطع الفيديو
عادةً ما يكون خلط الوسائط المختلفة أمرًا مقبولًا ، ولكن اختلاط مقاطع الفيديو في الأماكن التي لا يتوقع منها ذلك قد يتسبب في حدوث مشكلات. لا تريد أن يبدأ المستخدم فيديو عن طريق الخطأ ، مما يؤدي إلى الاستماع إلى كل شيء. مقاطع فيديو وصور منفصلة ، حتى يعرفوا ما يمكن توقعه. لا أحد يحب تلك الأنواع من المفاجآت.
7) تأكد من أن الصور لا تتجاوز الحد الأقصى للعرض
هذا أمر مهم ، لأنه يمكنك تجنب تغيير حجم الصور التي تكون صغيرة جدًا للمساحة. يجب أن تكون الصور كبيرة بما يكفي لملء 100٪ من جهاز الجوّال (لمعظم الحالات) ، ولكن يجب أن تحدد مواقع حجم سطح المكتب الحد الأقصى للعرض إلى 100٪ فقط. لقد رأيت بعض الحالات التي يكون فيها شخص ما يحتوي على واحدة من تلك الشاشات الكبيرة مقاس 27 بوصة ، وعندما يسحب عرض المتصفح ، فإن الصورة تتسابق معه ، بعد حجمه المقصود.
8) قياس الصورة
إذا كان لديك مقياس للصور ، فتأكد من تقليص حجمها ، وليس للأعلى. من الأفضل تعيين الأبعاد الدقيقة لصورك. في كثير من الأحيان ، يتم استخدام النسبة المئوية لبُعد واحد ، بينما يتم تعيين البعد الآخر إلى تلقائي. على سبيل المثال ، إذا كنت تريد أن تمتد إحدى الصور بنسبة 50٪ من عرض المتصفح ، فيمكنك تعيين عرض الصورة على 50٪ والارتفاع إلى العرض التلقائي .
9) تجنب استخدام تعليق الصور
يمكن أن تتسبب التسميات التوضيحية للصور أو أي نص مرفق آخر في حدوث كل أنواع المشاكل لك وللمستخدمين. تتمثل المشكلة الأولى في صعوبة ملاءمة النص على جهاز محمول. مع الهواتف الذكية ، لديك مساحة محدودة كما هي ، ولكن محاولة إضافة نص يمكن أن تجعل التجربة بأكملها تشعر بالفوضى وتتكدس معًا. هناك مشكلة أخرى وهي أنك محدود في مقدار النص الذي يمكنك استخدامه. إضافة تسمية توضيحية أو أي نص إضافي ، يضيف متغير النص المتجاوب إلى المزيج. عليك التفكير في فواصل الكلمات ، وكيف ستنتهي خطوط النص المتعددة مع صورتك. إذا تم استخدام النص كتراكب ، يجب عليك أيضًا أن تهتم بالمكان الذي تقع فيه على الصورة. النص الضوئي على مساحة الضوء من الصورة سيجعل النص غير قابل للقراءة. التباين هو المفتاح ، وكل صورة مختلفة.
استنتاج
تتمثل النقطة الأساسية عندما يتعلق الأمر بأي جانب من جوانب تصميم الويب في أنه يجب أن تعمل بشكل جيد ، وأن تضع المستخدم في الاعتبار. إذا لم يكن بإمكان أي شخص استخدام موقعك على الويب ، فلن يعود. بعد هذه الدفاتر البسيطة والاحتياجات من معارض الصور المتجاوبة ستجعل المستخدم لا يواجه مشكلات شائعة عند عرض صورك.