صورة دائري في تصميم المواقع الإلكترونية - الفوائد وأفضل الممارسات

ليس هناك نقص في دائري ميزة عرض الشرائح على الويب. في الواقع ، هذا الاتجاه لم يفعل شيئا سوى ينمو في الماضي 5-10 سنوات مع مزيد من دعم المتصفح الآن أكثر من أي وقت مضى. ولكن هل الصور الدائرية تستحق الجهد حقًا؟ ما هي أنواع الفوائد التي ينتجونها ، وكيف ينبغي استخدامها بصورة منتجة في التصميم?

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

دائري المنتج للتجارة الإلكترونية

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

هناك اثنين من المواضع الأساسية لشريط تمرير منتج التجارة الإلكترونية:

1. على صفحة المتجر الرئيسية
2. على صفحة المنتج

كلاهما يعمل بشكل مختلف ولكن خدمة نفس الهدف - لبيع المنتجات بطريقة بصرية.

مثال 1: الاتحاد الافريقي Lit غرامة البياضات - الصفحة الرئيسية

ألقِ نظرة على الصفحة الرئيسية لـ Au Lit Fine Linlin ، يستخدم ملء الشاشة دائري دائري لعرض منتجات مختلفة ، مثل الألحفة والوسائد وأغطية السرير.

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

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

مثال 2: قضية هاتف عدن - صفحة المنتج

يمكنك رؤية مثال أكثر تحديدًا على صفحة منتج حالة الهاتف لـ Eden. ويستخدم شريط التمرير التلقائي لاظهار الصور من المنتج.

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

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

محفظة الويب دائري

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

مثال 1: بيبون - الصفحة الرئيسية

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

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

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

مثال 2: موقع هارون بليز - الصفحة الرئيسية

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

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

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

اتجاهات التصميم المشتركة

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

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

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

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

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

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

ما يجب تجنبه بأي ثمن

هنا شيء مهم أعتقد شخصيا يندرج تحت “تجنب بأي ثمن”. إلقاء نظرة على أو انقر على الصورة أدناه ، ومحاولة تخمين ما قد يكون.

يستخدم موقع Yozenn cafe منزلق رأس ملء الشاشة. لا تدور تلقائيًا وهو أمر رائع ، لكن الشرائح أيضًا لا تخدم أي غرض آخر غير الديكور.

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

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

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

الميزات التفاعلية

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

• الملاحة القائمة على النقطة
• الملاحة السهم
• الملاحة المصغرة
• قائمة الروابط أو عناصر العنوان

الاكثر شيوعا هو نقطة الملاحة التي ستجدها في مئات المواقع الحديثة.

مثال 1: شيك في المنزل - الصفحة الرئيسية

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

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

مثال 2: دورات نقية - الصفحة الرئيسية

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

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

مثال 3: IGN - الصفحة الرئيسية

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

هذه الروابط يمكن استبدالها مع الصور المصغرة, أو حتى تشمل الصور المصغرة من كل قصة - ولكن يظهر الجانب البصري في دائري, حتى حذف الصورة المصغرة في الواقع يوفر مساحة.

تستخدم مواقع الويب المختلفة أنماط تنقل مختلفة لأسباب مختلفة. النظر في هدف (ق) من زوار موقعك, والتصميم للحصول على أفضل تجربة للمستخدم.

الوجبات الرئيسية

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

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

إذا كنت تبحث عن مزيد من المعلومات على صفحات الويب ، فتفقد بعض الوظائف التالية:

• دائري من براد فروست
• 8 متطلبات UX لتصميم كاروسيل سهل الاستخدام
• قابلية الاستخدام دائري: تصميم واجهة مستخدم فعالة لمواقع الويب مع الحمل الزائد للمحتوى