שיעור 6: תנועה ומיקרו-אינטראקציות — מינון ונגישות
הוספת אנימציית קפיצה של 600ms לכל כפתור, וזה הרגיש מגניב — עד שמשתמש עם רגישות לתנועה התלונן שהמסך גורם לו לסחרחורת. השיעור הזה מלמד אותך תנועה מבוססת-טוקנים: מעברים עדינים, מיקרו-אינטראקציות עם כוונה, וכיבוד `prefers-reduced-motion` — לא בכיבוי המשוב, אלא בהחלפת תנועה גדולה במשוב רגוע. כך תנועה מ
תנועה היא כמו תיבול: קצת משפרת את המנה, יותר מדי הורסת אותה, ויש אנשים רגישים. למי שביקש פחות תנועה לא מגישים מנה גרועה יותר — מגישים גרסה רגועה: מחליפים את התיבול החריף בעדין, בלי לוותר על הטעם. ככה גם באנימציה: מורידים את התנועה הגדולה, אבל משאירים את המשוב.
- טוקן מעבר
- ערך משך (duration) ו-easing קבוע מתוך סט מצומצם — למשל `duration-200 ease-out` — כך שכל המעברים בממשק מרגישים אחידים ולא אקראיים.
- מיקרו-אינטראקציה
- משוב חזותי קטן לפעולת משתמש — שינוי קל ב-hover, לחיצה או פוקוס — שמאשר שמשהו קרה, בלי להסיח את הדעת.
- prefers-reduced-motion
- העדפת מערכת שבה משתמש מבקש להפחית תנועה (לרוב בגלל רגישות וסטיבולרית). 'הפחתה' אינה 'איפוס': ממשק נגיש מסיר את התנועה הגדולה אבל שומר על המשוב — למשל שינוי מצב מיידי במקום אנימציה.
- variant של motion-reduce
- ה-variant ב-Tailwind שמחיל classes רק כשהמשתמש ביקש פחות תנועה — למשל `motion-reduce:transition-none` שמבטל מעבר עבורו.
