מנהיגי פרודקט

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

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

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

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

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

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

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

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

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

קונספט אנימציה בניסוי עם גרסת Material Design מעודכנת

דוגמאות לקונספטים של אנימציית ממשק משתמש (UI Animation)

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

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

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

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

תפריט צד נפתח

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

קונספטים של אנימציית UI בממשקים ריאליסטיים

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

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

 Business Card UI concept imitates the funny effect of pulling out the card from a profile avatar

Calendar app animation concept sets an elegant transition from the calendar screen to a schedule screen

 One more animation adding fun and supporting visual hierarchy to interactions with side menu

Key Benefit of UI Animation Concepts

In fact, creation and research of something innovative start from a concept in practically any industry or creative field. Look at automotive industry or architecture, remember how new art directions appeared and developed in history. Whatever is the sphere, the attitude to concepts will show two opposites from “that’s just a fantasy that has nothing to do with real life” to “why not…” Both variants are viable. Still, for better or worse, concepts from the power that makes progress possible.

The same situation is observed in the domain of UI animation. Most animations which today are taken for granted as an integral part of our interfaces were a kind of “unreal” concepts not so long ago. In the age of flat design, when shapes and colors are striving for simplicity and cleanness, animation becomes the proven way to make the apps and solutions stand out in terms of tense competition.

Original article found at UX Planet