אפקטים מרחפים ואינטראקטיביות

1) תפקיד הדרכה ב ־ UX

• ”האם זה אינטראקטיבי?” (ריחוף/סמן/הדגשה)
• ”איפה אני?” (סגנון מיקוד),
• ”מה קורה בלחיצה?” (מעמד וזמנם),
• ”האם הפעולה עבדה?” (פעיל/לחץ ולאחר מכן משוב).

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

2) מודל מדינה וסמנטיקה

הגדרת בסיס: ”ברירת מחדל” * ”hover” * ”focus” ”active/לחוץ” * ”active” ”active 'action” ”influggated” ”action” ”ac” ”abduction” (אופציונלי).
עבור קישורים אנו מוסיפים ”ביקר”, עבור מתגים - ”מסומן”.

• בין מצבים - הבדל חזותי בצורת/עובי/סמל, לא רק צבע.
• טקסט/סמל ניגוד לרקע: 4. 5:1 (טקסט רגיל), 3:1 (גדול/מודגש).
• הפוקוס נראה ללא הצבעה (קורא מקלדת/מסך).

3) מכשירים ובקשות לתקשורת

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• על התקני מגע, אפקטי הצבעה אינם קריטיים לאיתור פעולות - שימוש במפורש בזמינות: צבע/סמל/פריים/רמז.
• אל תסתיר ניווט/בקרה רק ”תחת ריחוף”.

4) משך זמן ועקומות

• ריחוף: 120-180ms
• מיקוד: 120-180ms
• פעיל/לחץ: 80-120
• אדווה/דיו (אם משתמשים בו): 240 ms, 1 cycle

עקומת ברירת המחדל היא cubic-bezier (0. 2, 0, 0. 2, 1)`

פעיל - מהר יותר ('cubic-bezier (0. 4, 0, 1, 1) ", הפלט רך יותר ('cubic-bezier (0, 0, 0. 2, 1)`).

5) אסימוני מערכת עיצוב (דוגמה)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) כפתורים: תבנית התייחסות

ברירת מחדל: טקסט קריא 4. 5:1 למלא.
ריחוף: LL רקע 0. 02–0. 04, צל קל, מצביע '.
פעיל: האם עוד L 0. 02–0. 04, צל/הזחה מקוצרת (סולם 0. 98), נמשך. 80-100 ms.
מוקד: טבעת ניגוד 2-3 px ללא טשטוש.
מנוטרל: country 'officied '/' ברירת מחדל', officious name 0. 38, אין השפעות מרחפות.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) קישורים ופעולות טקסט

הבחנה לא רק לפי צבע: תחתון כברירת מחדל או על ריחוף/מיקוד.
להדרכה: שיפור קו תחתי (עובי/קיזוז), שינוי קל בטון.
'ביקר' הוא גוון שונה של אותו לוח, הניגוד נשמר.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) קלפים, רשימות, שולחנות

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

• רקע ריחוף עם TransLL 0. 02–0. 04; השורה הפעילה היא גבול ברור.
• קליקים על קו מורשים רק עם זמינות מפורשת (”ac” סמל, רמז).

• הגבל בזהירות את ”הסולם” של עיכובי מפל - מקסימום 6-8 יסודות (stagger 20-30 ms).

9) צורות קלט ושדות

ריחוף לשדות: תאורה אחורית דקה של המסגרת (Tenness L ~ 0. 05), מבלי לשנות את גודל הבלוק.
מיקוד: טבעת ניגוד + שינוי צבע מסגרת; ממלא מקום נשאר מובחן (3:1).
שגיאה: צבע + סמל/טקסט; ”שייק קצר” בתוקף 6 px, 140 ms, פעם אחת.

10) סמלים ומטרות קטנות

הגדל את אזור הלחיצה ל- 32 × 32 (שולחן עבודה )/40 × 40 (נייד), גם אם הסמל עצמו הוא 20-24 px.
ריחוף: משנה אפיביות/מילוי/עובי, 1-2 תכונות מקסימום.
פעיל: ”סנאפ” קצר בסולם 0. 98.
מיקוד: טבעת על ידי מיכל אזור לחיצה.

11) נגישות (A11y) ומקלדת

תמיכה ': פוקוס-גלוי' (אנחנו לא מראים סגנונות מיקוד לעכבר, אנחנו מראים אותם למקלדת).
אלמנטים שיוצרים רמזים מרחפים חייבים להיות בעלי מקבילי מיקוד (אותו תוכן מופיע על מקש Tab/Enter).
אריה-תכונות: לאינטראקטיבים יש 'תפקיד', 'אריה-לחוץ '/' אריה-מורחב '/' אריה-זרם' על ידי מצב.
מעדיף-מופחת-תנועה: להחליף קנה מידה/הזזה עם מינימום (אופטיביות/מילוי), לכבות אדוות.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) ביצועים

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

13) כוונות מרחפות ו ”דביקות”

• סף ההשהייה הוא 80-120 מ "מ לפני הצגת תפריט/כלים מורכב.
• ”דביקות” של הסמן: אם המשתמש עובר מהפריט לתפריט בזווית, אנחנו נותנים 200-300 ms של ”מסדרון” (משולש פיטס).
• עם ריחוף החלפת מגע בלחיצה או עם כפתור ”יותר” מפורש.

14) ערכת כלים/תפריטים/נפילות

פתיחה: כוונת ריחוף (שולחן עבודה )/עיתונות (מגע), סגירת - טיפול/טשטוש/ESC.
מיקום - למקור, החץ מיושר; רוחב מקסימלי וקינוף מופעלים.
זמינות: "תפקיד =" tooltip "", לשייך 'אריה-תיאור "; לתפריט - תפקיד = ”תפריט” + שליטה על החץ.

15) הפרטים של iGaming

מקדמים/לוחות מובילים: ריחוף מדגיש את השורה/תא, אך אינו משנה את מדדי המיקום (ללא ”קפיצות”).
כרטיסי טורניר/בונוס: ריחוף יכול ”להחיות” את הפריים/אייקון, אבל הטקסט CTA והתנאים נשארים קריאים (rame 4. 5:1).
הודעות אחראיות (18 +, גבולות): ללא השפעות הסחה; ריחוף מאפשר רק הזנחה של קישורים והתמקדות ברורה.
הימור/קניית כפתורים: אקטיבי-משוב הוא חובה (לחיצה ויזואלית/אינדנטית) ובלתי משתמע לשתי פנים לאחר שליחה.

16) דוגמאות של מתכוני ממשק

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) אנטי דפוסים

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

18) רשימת QA

זמינות

[ ] כל האינטראקציות ניתנות להשגה על ידי מקלדת; מיקוד שאנחנו רואים.

[ תוכן ] Hover זמין על ידי 'פוקוס '/' אריה'.

[ ] הניגוד בין הטקסט לאייקונים תואם ל-WCAG.

התנהגות

[ ] Hover/פעיל/נכה/ביקר ניתן להבחין על ידי צורה וצליל.

[ ] אין עיכוב תגובה> 120ms.

[ ] יש חלופה לרחף על המגע.

ביצועים

[ ] רק ”שינוי צורה ”/” אפיון” מונפשים.

[ ] אין טשטוש/צללים כבדים על יסודות מרובים.

[ ] ברשימות ארוכות, ההשפעות ממוזערות.

19) תיעוד במערכת התכנון

טבלת מצב לרכיבים בסיסיים (כפתורים, קישורים, קלפים, שדות, שורות שולחן).
אסימוני משך/עקומה/צל וקוד דגימה לאור/כהה.
סעיף ”Hover vs. Touch”: כללים של חלופות ודוגמאות.
”דו/אל” עם קטעים קצרים וציוני ניגוד.

תקציר

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