תמונה קרוסלות ב עיצוב אתרים - יתרונות & Best Practices

אין מחסור קרוסלה תכונות שקופיות ברשת. למעשה, מגמה זו לא עשתה דבר לגדול ב 5-10 השנים האחרונות עם תמיכה בדפדפן יותר עכשיו מאשר אי פעם. אבל הם קרוסלות תמונה באמת שווה את המאמץ? איזה סוג של הטבות הם מייצרים, וכיצד הם צריכים לשמש באופן פרודוקטיבי פריסה?

אני רוצה לשתף כמה מגמות נפוצות, דוגמאות חיות ורעיונות עבור מעצבי אתרים המעוניינים קרוסלות תמונה. המחוונים הדינמיים האלה מתווכחים במידה רבה, אבל אני חושב שהם מוסיפים ערך כאשר הם מעוצבים בהקשר הנכון.

קרוסלות מוצרים למסחר אלקטרוני

העולם של מסחר אלקטרוני מלא קרוסלות מסתובבת על דפי הבית ודפי המוצר. המטרה היא לשמור על צפיפות מידע ברורה עם תמונות וטקסט זה לספר סיפור ייחודי אך בעל ערך כדי לעזור למכור מוצרים.

יש שני מיקומים עיקריים עבור מחוון מוצר מסחר אלקטרוני:

1. בדף הבית של החנות
2. בדף מוצר

שניהם עובדים אחרת אבל לשרת את אותה מטרה - כדי למכור מוצרים באופן חזותי.

דוגמה 1: Au Lit Fine Linens - דף הבית

תסתכל על דף הבית עבור Au Lit בסדר פינות, זה משתמש קרוסלה אוטומטית מסתובבת מלא כדי להשוויץ מוצרים שונים, כגון שמיכות, כריות, כיסוי המיטה.

התמונות לקחת את רוחב מלא של דף הבית, והם מופיעים הרבה מעבר לקפל. למעשה, זה המחוון צריך להיות הדבר הראשון לתפוס את תשומת הלב שלך כאשר הנחיתה הראשונה בדף. כל שקופית מובילה לדף אחר באתר להדריך לקוחות באמצעות חוויית הקנייה.

מחוון זה יכול להיות מטיל אימה כאשר הנחיתה הראשונה על הדף, אבל עם כפתור הקישור ו טקסט שכבת על זה גם יכול להיות מאוד מעודד למבקרים מי רק רוצה לצלול בחנות.

דוגמה 2: מקרה הטלפון של עדן - דף המוצר

תוכל לראות דוגמה ספציפית יותר בדף המוצר של עדן לטלפון. היא משתמשת סיבוב אוטומטי המחוון כדי להציג תמונות של המוצר.

אני מוצא את אלה להיות קצת “יותר מדי” בעולם של מסחר אלקטרוני. כאשר מסתכלים על מוצר אני רוצה להיות בשליטה על מעבר בין תמונות.

הבחירה הטובה ביותר היא לעשות גלריה של תמונות עם שליטה ניתנה המבקר. לדוגמה, הדף Design by Humans משתמש תמונות ממוזערות עבור כל תמונה שהוא הרבה יותר מעודד, ומעניק יותר שליטה למשתמש.

קרוסלות של תיקי אינטרנט

תיקי אתר באינטרנט הם קצת שונה כי אלה שקופיות לא תמיד תלחץ על דף אחר. זה נכון שחלק יוביל מקרה או לכתוב על פרויקט, אבל קרוסלות רבות באתרי פורטפוליו נועדו רק כדי להראות את העבודה החזותית.

דוגמה 1: Biboun - דף הבית

האמן הצרפתי עובד תחת השם ביבון יש מחוון קרוסלה בדף הבית שמציעות קטעי אמנות. השקפים האישיים מובילים לדפים פנימיים בתיק אשר לכסות פרוייקט שלם עם מספר תמונות.

זה כנראה הדרך הטובה ביותר לעשות מחוון על אתר פורטפוליו. רק לראווה רשימה אקראית של עבודה הוא חסר טעם, אלא אם כן אלה עבודות ספציפיות יש סיבה להיות showcased.

כל החלקים הם מעולה במחוון של ביבון, וזה לא לוקח הרבה מקום או. למרות שאני יודע כמה אנשים שונאים את מצגות אוטומטי סיבוב סיבה טובה, על פרימיום מינימליסטי כזה יש לי זמן להתלונן על תכונה זו עיצוב.

דוגמה 2: אתר של אהרון בלייז - דף הבית

אני באמת אוהב את הדוגמה שנמצאה באתר של אהרון בלייז כי הוא מציג את עבודתו כתיק, אבל בעיקר משתמש באתר זה למכור קטעי וידאו האמנות שלו. אהרון בלייז עבד בדיסני במשך כמה עשורים, ויש לו מיומנות להוכיח זאת.

בעוד דף הבית המחוון באתר שלו עושה סיבוב אוטומטי, אני לא מוצא את זה מאוד מעצבן או לא במקום. כל שקופית יש קצת תוכן רלוונטי לתמונה, וזה עוזר אהרון למשוך תשומת לב לשיעורי הווידאו האחרונים שלו כי ללמד אמנים צעירים כיצד לשלוט מיומנויות ספציפיות.

קרוסלה תיק נהדר מתמקדת חזותיים, ו מוביל מבקרים נוספים לתוך האתר. אם אתה יכול לקבל את שני הדברים אז אני לא יהיה נגד תכונה כזאת באתר תיק אישי.

מגמות עיצוב נפוצות

אם תסתכל על כמה מהדוגמאות שלמעלה שלי תבחין שיש בדרך כלל שני סוגים שונים של מחוונים: מסך מלא ו רוחב קבוע.

בחירות סגנוניות אלה לעתים קרובות מתייחסים לפריסה וכמה תוכן הוא יכול להחזיק. אם פריסה משתרעת על רוחב מלא של הדף אז זה הגיוני להרחיב את המחוון מדי. אבל זה גם מכריח אותך למצוא תמונות באיכות גבוהה זה עדיין נראה טוב במסך מלא על צגים ברזולוציה גדולה.

אני אישית מעדיף את סגנון רוחב קבוע כמו שתראה את שתי דוגמאות פורטפוליו אמנות. אלו הם הרבה יותר קל לשלוט, והם לעתים קרובות לא גבוה - מה שמקל על המבקרים פשוט להתעלם מהם אם ירצו בכך.

גם לשקול את הערך של קידום אוטומטי שקופיות, ו כמה קשה זה יכול להיות עבור משתמשים כדי לתפוס את התוכן הזה. יש מקרה מבחן גדול על ידי קבוצת נילסן נורמן מראה שזה יותר טוב לא לקבל אוטומטית המחוונים מתקדמים.

אני על הלוח עם גישה זו במובן זה פחות אינטנסיבית בזיכרון עם פחות הנפשות ותנועה בדפדפן, ורוב האנשים לא אוהבים קרוסלות מסתובבות אוטומטית - וגם אתה צריך תמיד לשרת את הקהל שלך.

עם זאת אני לא יכול להגיד את זה אף פעם לא שווה הוספת אוטומטית המחוון קידום, במיוחד מאז עם מחוונים סטטי לך לא מקבלים כמו צפיות רבות, ואתה גם צריך להפוך את השקופית הראשונה החשובה ביותר כמו משתמשים רבים לא להמשיך לשקופית הבאה. החלטה אם להפוך את המחוון Auto-rotating או לא לצערי א שטח של ניסוי וטעייה.

מה להימנע בכל מחיר

הנה דבר חשוב שאני אישית חושב נופל תחת “להימנע בכל מחיר”. תסתכל או לחץ על המסך למטה, ולנסות לנחש מה זה יכול להיות.

אתר הקפה של Yozenn משתמש במחוון כותרת מלא במסך. זה לא אוטומטי לסובב וזה נהדר, אבל את השקופיות גם לשרת שום מטרה מלבד קישוט.

התמונות לא מקשרים בשום מקום, והם מראים חופן קטן של מוצרים. הם יכולים פשוט להיות נוסף על רקע דף הבית ללא המחוון כדי לשמור על בלבול ועוד קילובייט של JavaScript.

הייתי טוען כי תכונה זו הזזה רקע אינו מוסיף ערך רב לאתר כבר צפוף. אם התמונות היו קישורים או טקסט נלוות הם לפחות להיות רלוונטי יותר.

אל תהסס להשתמש בתמונות בקטע הכותרת שלך, אשר תופסות את הדף המלא, אך אם הן לא לקשר בשום מקום או להציע מידע אמיתי אז לא להפוך אותם לקרוסלה.

תכונות אינטראקטיביות

הדרך שבה משתמשים מנווטים בקרוסלה משפיעה על העיצוב עצמו. ישנם מגוון סגנונות ניווט, אבל אלה הם הפופולריים ביותר:

• ניווט מבוסס נקודה
• ניווט בחץ
• ניווט ממוזערות
• רשימת קישורים או פריטים כותרת

הנפוץ ביותר הוא ניווט נקודה אשר תמצא על מאות אתרי אינטרנט מודרניים.

דוגמה 1: שיק בבית - דף הבית

שיק בבית הוא דוגמה מצוינת באמצעות שלוש נקודות זעירות מתחת למחוון כדי לציין ניווט. כל תמונה מסתובבת באופן אוטומטי, ואת הנקודה בנושא בסדרה מתמלא בשחור. שתי הנקודות האחרות מציינים שקפים פוטנציאליים עבור משתמשים לגלוש.

זה דפוס עיצוב פופולרי כי משתמשים רבים כבר מכירים. זה נופל לתוך אותה קטגוריה כמו תפריט המבורגר כי מעצבים רבים לא אוהבים, אבל משתמשים כבר מזהים אותו, ו אינסטינקטיבית יודע איך להשתמש בו.

דוגמה 2: מחזורים טהורים - דף הבית

דף הבית של מחזורי טהור משתמש שילוב של נקודה וחץ ניווט. בדרך זו למשתמשים יש קדימה & ניווט לאחור, אבל ראה גם “באופן כללי” ניווט באמצעות קישורים נקודה בתחתית.

אני ממש מוצא את הקישורים נקודה בדוגמה זו קשה לראות. הקושי עם שקפים חזותיים הוא כי אלמנטים רבים אינם קלים להבדיל, כך החצים ואת הנקודות יכול בקלות לשלב לתוך הרקע.

דוגמה 3: IGN - דף הבית

בדף הבית של IGN תמצא עוד סיבוב אוטומטי קרוסלה אשר משתמש כותרת קישורים עבור ניווט. זה נפוץ מאוד עבור בעלי אתרים שרוצים למכור כותרות ולא מוצרים. כל קישור הולך לשקופית הפרט כי בסופו של דבר מוביל לדף המאמר.

קישורים אלה יכול להיות מוחלף עם תמונות ממוזערות, או אפילו לכלול תמונות ממוזערות מכל סיפור - עם זאת היבט חזותי מוצג בקרוסלה, כך השמטת התמונה הממוזערת למעשה חוסך מקום.

אתרים שונים משתמשים בסגנונות ניווט שונים מסיבות שונות. שקול את המטרה (ים) של המבקרים שלך, ועיצוב עבור חוויית המשתמש הטובה ביותר.

המנות העיקריות

אתה צריך לשאוף לייצר ערך אמיתי, או מידע נוסף עם קרוסלה. זה עשוי להיות מידע המבקר לא היה לפני, או שהוא עלול להוביל לדפים כי המבקר לא יכול למצוא אחרת.

נסו להימנע קרוסלות סיבוב אוטומטי, ו השתמש בהם רק בדפי נחיתה עיקריים (דף הבית הוא דוגמה אחת). כל עוד הקרוסלה יש מטרה, ו לא נראה כמו מודעה, העיצוב שלך צריך לעשות טוב.

אם אתה מחפש מידע נוסף על קרוסלות אינטרנט, לבדוק כמה הודעות הבאות:

• קרוסלות מאת בראד פרוסט
• 8 דרישות UX לעיצוב ידידותי למשתמש דף הבית קרוסלה
• Carousel שמישות: עיצוב ממשק משתמש יעיל עבור אתרי אינטרנט עם עומס תוכן