ניצוצות ברשת

מעברי עכבר: לא סתם עוד לינק כחול

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

שתפו כתבה במיילשתפו כתבה במייל
שתפו כתבה במיילשתפו כתבה במייל
מעבר לטוקבקים

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

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

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

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

פונקציונלי, אבל יותר קריאטיבי

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

תפריטי ניווט מונפשים

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

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

לרבע את העיגול

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

לחשוף ה-כל במעבר העכבר

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

עשו לנו לייק וקבלו את מיטב הכתבות והפרשנויות היישר לפייסבוק

להסתיר את האלמנט כשעוברים מעליו?

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

תזוזה קטנה אפקט גדול

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

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


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

את השוס השארתי לסוף

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


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

לחצו לטורים קודמים בסדרה

עגול זה יפה

שחור בולט: אתרים מהצד האחר

טופס שעושה חשק? יש דבר כזה

7 הטרנדים שיעצבו את הרשת ב-2012

7 הטרנדים שכבשו את הרשת ב-2011

אמנות הגלילה: לצלול בסטייל לתוך הרשת

המלך מת, יחי המלך החדש

הזינו שם שיוצג באתר
משלוח תגובה מהווה הסכמה לתנאי השימוש של אתר הארץ