מחוות ו ־ UX במכשירי מגע

1) מדוע מחוות ומתי הן מתאימות

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

עקרונות: קודם יסודות UI מפורשים. ואז מחוות רמזים. ואז מחוות נסתרות מתקדמות. פעולות קריטיות - תמיד לשכפל עם כפתורים מפורשים.

2) טקסונומיה מחווה

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

3) ארגונומיה ואזורי אגודל

אזורי אצבע: להגיע לאזור - חצי נמוך יותר של המסך; סי-טי-איי, מסנני שבבים ולשוניות נמצאים בתחתית.
פגיעה במטרה: מינימום 44 × 44 pt/48 × 48 dp. הוסף רפש להיט עבור פריטים קטנים.
חריצי קצה: להפחית סחיבת קצה כוזבת; אינטראקציות קריטיות - לא קרוב לקצה.
אוריינטציה: דיוקן - ברירת מחדל; ייעול נוף לשני אגודלים (במיוחד במשחקים/סרטונים).

4) ניתוק ואימון

מזמין: רמזים של מחווה (כרטיס חצי גלוי בצד, ”עט” בתחתית לגיליון).
מיקרו-עלייה למטוס: רמזים חד-פעמיים (”Swipe to delete”), לא פולשניים, עם ”הבנתי”.
מחווה למשפט: אנימציה דמו בהופעה הראשונה של הדפוס.
חזרה: מחוות צריכות לפעול באותה צורה בכל המקומות בעלי תוכן דומה.

5) משוב: חזותי, מישוש, שמע

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

6) סכסוכי מחווה וסדרי עדיפויות

היררכיית זיהוי: מגילה פנימית> swipe card> system edge-back (ברשת - להיפך). הגדרת זירת מחווה/סדר עדיפויות.
גלילה אנכית נגד סחרור אופקי: נעל ציר אחד לאחר 10-15 px של תנועה.
תוסיף מחווה פנימית או ”עט” כדי לא ליירט את המערכת.
מחווה אחורית גלובלית (Android/iOS): לא לשבור את הניווט הצפוי - לשכפל פעולות חשובות עם הכפתור ”Back”.

7) תבניות מתוסרטות

7. 1 רשימות וכרטיסים

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

7. מפות 2, גלריות, גרפים

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

7. 3 ניווט ומגנים

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

7. 4 משחקים ותרחישים מהירים

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

8) זמינות (A11y)

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

9) ביצועים ואמינות

(INP (Interaction to Next Paint 200

איחור מגע: המטרה <50-100ms לפני התגובה הראשונה (לכידה ויזואלית/הארה).
60 FPS: חלקות לגרור/גלילה; לכבות צללים כבדים ולטשטש בעת תנועה.
בדיקה: הימנע מחפיפות (z-index/overflow) - מלכודות הן ”רכות”.
מבחני אחיזה: ימני/שמאלי, אגודל/אצבע קטנה, עומד/בתחבורה.

10) רשת נגד ילידים

Web/PWA: מאזינים פסיביים (”passive: true”) לגלילה, ”touch-action” לצירי נעילה, להימנע מיירוט מחוות מערכת שלא לצורך.
iOS/Android Native: השתמש בזיהוי מערכת (UigestureInterizer/Android GestureGetureGalector), haptics סטנדרטי, חיזוי ”Back” (אנדרואיד 14 +).
גשרים ואזורים בטוחים, סגירת מגנים חיזוי - בתוך הרשת, מבלי לשבור את המערכת ”בחזרה”.

11) מחוות מולטי מגע ומתקדמות

שתי אצבעות: פנינג תוך זום נעול; על הקלפים - מחווה ”שתי אצבעות למטה” עבור השכבה.
שלוש אצבעות: למשתמשי כוח בלבד; תמיד לתת אלטרנטיבה.
קומבינציות: long-press + grag עבור בחירת טווח/תנועה קבוצתית.

12) אימות, טלמטריה, מדדים

”מחווה של התחלה”, ”מחווה של התחייבות”, ”מחווה של ביטול”, ”latency _ ms',” distance _ px ”,” overcroll', ”missfire” (”missire”), ”undo _ used”.
KPI: קצב הצלחה, קצב אש לקוי, קצב ביטול, INP, זמן לפעולה, ירידה לקונפליקט מחווה.

13) לוקליזציה והבדלים תרבותיים

שפות RTL: מחוות אופקיות מראה ואייקונים.
סמליות: ”swipe left = להסיר” אינה אוניברסלית - לאשר בעלייה.
תבניות המגע: השתמש בפרופילי המערכת, הם כבר מוכרים למשתמש.

14) ביטחון וחרקים

מחוות הרסניות - רק עם ביטול/אישור.
סוויפס אדג 'לא צריך בטעות לסגור תהליכים קריטיים (תשלום/CCM).
הגנה צמרמורת: סף תנועה (5-10 px) לפני תחילת המחווה.
ביטול מחוות במצבי חסימה (מטעין תשלום, מודל אישור).

15) טבלת מגע/תבניות לוח

תרחישים בשתי ידיים: הפרדת אזורי שליטה.
מצב מרובה משתמשים: מחוות אינן מתנגשות, מגע עדיפות זמן.
מטרות פגיעה גדולות: 56-64 dp; מדריכים חזותיים לפעולות גרירה.

16) תרופות אנטי ־ פטריות

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

17) רשימת מימושים (צעד אחר צעד)

1. מפת מחוות: איפה ומה - עם אלטרנטיבות A11y.
2. סדר עדיפויות להכרה: מנעול צירי, אזורי קצה בטוחים, מחווה-זירה.
3. משוב: מלכודת ויזואלית, פרופילי האפטיקה, אנימציות הקיימות 200 ms.
4. ביצוע: INP/60 FPS, פרופיל גרירה/גלילה.
5. על העליה למטוס: הערה ומחוות ניסיון עם היכולת לכבות.
6. טלמטריה: הצלחה/עוון/ביטול, נגיעות מפת חום.
7. מטריצת מבחן: התקנים, צפיפות, שמאלי/ימני, מקרי רשת גרועים.
8. תיעוד: מדריך מחווה במערכת העיצוב, דוגמאות ואנטי מקרים.

18) השורה התחתונה

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