איך ליצור אנימציה באינטרנט בצורה נכונה?

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

אל תאנימו כמה אלמנטים בבת אחת

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

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

בדוגמה הנהדרת הזו של Anton Aheichanka מ-InVision עבור Craft, אפשר לראות איך להנפיש כמה אלמנטים מבלי להגזים:

**Master Sketch עם מדריכי וידאו חינמיים מאת Anton Aheichanka**

תנו לזה משמעות

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

"פשוט תגידו לא לאנימציה חסרת משמעות."

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

**GIF לאפליקציית Timeline, מאת Sergey Valiukh**

**Open, מאת Joe Jordan**

**פשוט תגידו לא לאנימציה ליניארית ומשעממת**

תנועה במסלול פשוט מ-A ל-B בלי easing מרגישה רובוטית, אז נסו להוסיף easing שונה. התנועה צריכה גם לחקות כוחות מהעולם האמיתי, כמו כבידה.
Remix Jobs מצטיינת בשמירה על אנימציות מעניינות מבלי להגזים – עם מעברים חלקים ונעימים בשיטת material design.

**עיצוב אתר לאירוע, מאת Julien Renvoye**

אנימציה לא צריכה להיות מחשבה מאוחרת

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

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

פוסטים נוספים

עיין בכל