בפוסט הזה אראה לקט של דוגמאות דומות במהותן לאיך להקל על המשתמש להתמצא בממשק באמצעות אנימציה בין מעברים ולחיצות.
מאין באת ולאן תשוב
לחיצה על הטוויטר לוקחת את הצבע המוכר מהכפתור וממלאת את החלל אליו החלון נפתח, ברור לנו בזכות הצבע והכיוון ממנו באה האנימציה מה פתחנו:
![Materials Sharing Card](https://d13yacurqjgara.cloudfront.net/users/374035/screenshots/2091522/material_card.gif)
[sep]
הכפתור עליו לחצנו הופך בצורה אנימטיבית לחלון, זה מעבר נעים לעין וגם הגיוני:
![Material Message](https://d13yacurqjgara.cloudfront.net/users/162475/screenshots/2061245/yes.gif)
[sep]
מיקום הלחיצה הוא שפותח את החלון החדש, זה מקל על המעבר בין דפים ופידבאק מאוד חזק למשתמש על הלחיצה שלו:
![Card reader app design](https://d13yacurqjgara.cloudfront.net/users/463787/screenshots/2118061/material.gif)
[sep]
האלמנט עליו לחצת מתפקד כאן כעוגן, הוא נשאר וסביבו חלים כל השינויים:
![Exercise screen: Set Interaction](https://d13yacurqjgara.cloudfront.net/users/495792/screenshots/2108192/02.fin_15.06.gif)
[sep]
כאן הכפתור הוא האם שתחתיו יש ילדים, ולכן האנימציה, שכן היא ממש מגניבה, היא קונספטואלית גם מאוד נכונה:
![Add Exercises Interaction](https://d13yacurqjgara.cloudfront.net/users/495792/screenshots/2146618/draft_08.gif)
[sep]
נקודת מוצא לפתיחה של הדף – הלואדר עצמו:
![Page Transition](https://d13yacurqjgara.cloudfront.net/users/3375/screenshots/2073226/page-transition.gif)
[sep]
![Cloud Eval/Optimization App](https://d13yacurqjgara.cloudfront.net/users/44373/screenshots/2222008/mobile-cloud.gif)
[sep]
החיפוש כפעולה ראשונית וראשית שלאחר הצגת התוצאות עדיין היא פעולה שאנו רוצים להשאיר למשתמש. באופן אנימטבי להעביר את החיפוש מקום, נותנת אידיקציה למשתמש לאן לחזור ולהמשיך לחפש, אין לו צורך לחשוב אפילו לא לשבריר שנייה לאן החיפוש עבר, הוא חווה את השינוי שזה קרה:
![Translate](https://d13yacurqjgara.cloudfront.net/users/310724/screenshots/2220156/translate.gif)
[sep]
![Delivery Card](https://d13yacurqjgara.cloudfront.net/users/25514/screenshots/2121350/delivery_card.gif)
[sep]
כפתור הפתיחה הופך לכפתור הסגירה, גם במציאות אנחנו פותחים וסוגרים באותו מקום:
![Only Text Сontent App](https://d13yacurqjgara.cloudfront.net/users/463787/screenshots/2135531/shot_15.gif)
[sep]
![Material Card Interaction](https://d13yacurqjgara.cloudfront.net/users/685396/screenshots/2041970/mat.gif)
[sep]
על טוהר החוויה, ממש גורם לי לרצות גם לשלוח הודעה:
![Mail Widget Animation](https://d13yacurqjgara.cloudfront.net/users/288987/screenshots/2187162/mail-to-animation.gif)
[sep]
![Tab Bar Animation](https://d13yacurqjgara.cloudfront.net/users/495792/screenshots/2003376/tab_bar_animation_fin-02.gif)
[sep]
![Flinto prototype. 3D Touch.](https://d13yacurqjgara.cloudfront.net/users/673942/screenshots/2250944/flintos_5.gif)
[sep]
לסיכום
התרחשויות בממשק לא צריכות לקרות בבת אחת והן גם לא צריכות לקרות באנימציה מובהקת, זה יכול להיות אפילו לא מורגש לעין, אבל בתת מודע זה משפיע. יש מה ללמוד מעולם הגיימינג שעשו זאת הרבה לפני, ומעולם האנימציה שעשו את זה עוד יותר לפני. זה לא טרנד חולף, זה לקחת את ה"מכונות" שיצרנו ופיתחנו ולהתחיל "לאנש" אותם.
על גיפים, דריבל, השראה ועוד, תוכלו למצוא גם בפוסטים הבאים:
טרנדים וטיפים להצגת העיצוב שלכם בדריבל