Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / תנועה לאתר ולממשק→ מושן גרפיקס
ממשקים שמרגישיםחיים.
סיפורי גלילה, מיקרו-אינטראקציות ומעברי עמודים שהופכים אתר לקל יותר להבנה וקשה יותר לשכוח, בלי לפגוע במהירות או בנגישות.
רואים את המלאכה
מעבדת התנועה: שבע אינטראקציות שאפשר לגעת בהן
תנועת ממשק אמיתית שעובדת, לא וידאו. לחצו, רחפו, גררו והחליפו. כל מה שכאן מכבד את הגדרות הפחתת התנועה.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
נוצר בסטודיו של Roaswell כדי להראות איך אנחנו עובדים. לא עבודה של לקוח, ולא מותג אמיתי.
מה מקבליםכל מה שנדרש
כל מה שנדרש
כדי לצאת לאוויר.
תוצרים מוגדרים, שמוסכמים לפני תחילת העבודה, כדי שההיקף לא יהפוך להפתעה.
01
עקרונות תנועה
טוקנים של easing, תזמון ו-spring, כך שכל אינטראקציה מרגישה שייכת לאותו מוצר.
02
מעברי גלילה ועמודים
רצפי גלילה מובילי סיפור ומעברי ניתוב שמנחים את תשומת הלב, כמו אלה באתר הזה.
03
ספריית מיקרו-אינטראקציות
כפתורים, מתגים, תפריטים, כרטיסים וטפסים שמגיבים במטרה.
04
קוד ייצור או ייצוא
CSS ו-JavaScript נקיים, או ייצוא Lottie ווידאו, מוכנים לסטאק שלכם.
05
גרסאות נגישות
חלופות להפחתת תנועה והתנהגות פוקוס שתוכננו מההתחלה, לא הודבקו אחר כך.
06
תקציב ביצועים
התנועה נמדדת מול זמן טעינה והשהיית אינטראקציה לפני שהיא יוצאת לאוויר.
איך זה רץמהבריף
מהבריף
ועד לתוצר גמור.
ארבעה שלבים, לכל אחד תוצר ברור, כך שתמיד ברור מה נוצר ולמה.
אודיט
מוצאים איפה תנועה תבהיר משהו ואיפה היא רק תוסיף רעש.
קובעים עקרונות
מגדירים את אוצר המילים של easing ותזמון, כך שהחלטות מפסיקות להיות מקרה למקרה.
אבטיפוס בדפדפן
בונים במדיום האמיתי, כך שמה שאתם מאשרים הוא מה שיוצא לאוויר.
משחררים ומודדים
משחררים עם תקציב ביצועים ורואים מה משתמשים באמת עושים.
איפה זה מתחברסטודיו אחד.
סטודיו אחד.
מערכת אחת.
אנימציה עובדת הכי קשה כשהבריף שלה מגיע מנתונים והיא מסופקת במקום שבו נמצא התקציב.
שאלותשאלות טובות,
שאלות טובות,
תשובות ישירות.
לא מצאתם מה שחיפשתם? שאלו אותנו ישירות ואיש בכיר ישיב.
האנימציה תאט את האתר?
לא אם בונים אותה נכון. אנחנו קובעים תקציב ביצועים, מנפישים עם המאפיינים הזולים ביותר ובודקים על מכשירים אמיתיים.
אתם כותבים את הקוד?
כן. אנחנו יכולים לספק קוד מוכן לייצור, או למסור מפרטים וייצוא לצוות שלכם ליישום.
מה לגבי נגישות?
לכל תנועה יש חלופה להפחתת תנועה, והתנהגות מקלדת וקורא מסך מתוכננת לצד האנימציה.
זה עובד עם ה-CMS או הפריימוורק שלנו?
אנחנו עובדים עם רוב הסטאקים המודרניים. ספרו לנו על מה אתם רצים ונאשר את הגישה הטובה ביותר.
אפשר לראות את זה עובד?
אתם מסתכלים על זה עכשיו. רצפי הגלילה, המונים והחשיפות באתר הזה בנויים באותה גישה.