חזרה

אנימציה בעיצוב ממשק משתמש: מרעיון למציאות

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

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

מהי אנימציה קונספטואלית?

אנימציה קונספטואלית היא תחום באמנות הקונספט. זוהי יצירת עיצוב תנועה שנוצרת כדי להעביר רעיון מסוים לפני שהוא מיושם למוצר אמיתי. בעיצוב ממשקי משתמש, ניתן למצוא אנימציה קונספטואלית במגוון קונספטים עבור אינטראקציות, מעברים, מניפולציות עם פקדים, אנימציה המסמנת את המשוב מהמערכת וכו'. מעצבי תנועה משתמשים במגוון כלים ביניהם ניתן למנות את Adobe After Effects, Principle, Figma ו-InVision.

למה אנימציה קונספטואלית נחוצה בעיצוב ממשק משתמש?

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

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

דוגמה לקונספט אנימציה לאינטראקציות במשחקים ניידים

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

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

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

קונספט אנימציה מתנסה בעיצוב חומרי מעודכן

דוגמאות למושגי אנימציה של ממשק משתמש

גלילה של רשימת פריטים

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

מעבר מהרשימה לפריט

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

פתיחת תפריט צד

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

מושגי אנימציה של ממשק משתמש בממשקים ריאליסטיים

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

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

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

קונספט אנימציה לממשק המשתמש של אפליקציית Home Budget מוסיף דינמיקה לפתיחת תפריט ההמבורגר

Business Card קונספט ממשק המשתמש מחקה את האפקט המצחיק של שליפת כרטיס מאווטאר של פרופיל

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

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

היתרון המרכזי של קונספטים של אנימציית ממשק משתמש

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

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