עיצוב נייד בטוח

1) עקרונות ניידים ־ בטוחים

1. אגודל-ראשון: אזורי פעולה - בתוך האגודל (ניווט תחתון, FAB/primary מימין למטה).
2. ידידותי למגע: מטרות 40-48 px עם שדות; מרחק 8-12 px.
3. אזור בטוח לפי עיצוב: ניקח בחשבון אזורי חיתוך/מחווה ("env (safe-area-inset-") ".
4. מהירות חשובה יותר מ ”יופי”: LCP 2. 5, INP/200ms, CLS/0. 1 (p75).
5. איפוק: מינימום מודלים, מינימום צורות, מקסימום השלמה אוטומטית.
6. רשתות וסוללות: תנועה חסכונית, מצב לא מקוון, מגשים מוכשרים.

2) רשת, נקודות שבירה ואזור בטוח

נקודות שבירה: 480 (נייד), 481-768 (לוח אנכי), 769-1024 (לוח אופקי).
מכולות עם רוחב מקסימלי, כרטיסים גמישים 1-2 עמודות.
לוחות תחתונים 56 px, מלאי לניווט מחווה.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) טקסט, כפתורים ואינטראקציות

טקסט: 16-18 px בסיס, קו-אל-קו 1. 4–1. 6, קו באורך 40-70 תווים.
כפתורים: גובה 44-52 px, ברור פוקוס/נכס/נכה; אייקון + טקסט, לא רק אייקון.
למחוות תמיד יש אלטרנטיבה (כפתור/תפריט/נקודה חמה).
אנימציות הן על ”שינוי צורה/אופייה” וכבוד ”מעדיף-מופחת תנועה”.

4) טפסים, מקלדות והשלמה אוטומטית

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

המסכות רכות (אנחנו מראים את הפורמט, אבל לא שוברים את הקלט).

5) ניווט וארכיטקטורת מסך

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

6) ביצועים וחסכונות

פיצול קוד ווידג 'טים עצלנים; תרשימים/כרטיסים מעמיסים ”לפי דרישה”.
משאבים קריטיים - ”טעינה מראש”, השאר - ”לדחות ”/” עצלן”.
תמונות AVIF/WebP +' srcset/dies', 'טעינה' =” עצלן”.
גופנים: 1 משתנה WOFF2, 'פונט-תצוגה: החלפה', טעינה מראש בסיסית בלבד.
מטמון וכבוי באמצעות עובד שירות (PWA), 'מעופש בזמן-חידוש'.

7) רשתות, מנותקות ומגשים מחדש

חברותיות 3G/high: הגבלת בקשה, חבטות, גיבוי עצבני.
מסך לא מקוון עם מטמון נתונים קריטי ותור סינכרון.
כבדו את כלכלת המידע: רמזים לקוח/שמירת נתונים * תמונות אור, ללא וידאו אוטומטי.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) זמינות (A11y) בנייד

מקלדת מלאה/מתג שליטה ומיקוד קריא.
חדות WCAG AA, טקסט אלטרנטיבי ("alt'," aria-label ").
מטרות גדולות והפסקת אנימציות; מחוות משוכפלות עם כפתורים.
לדיאגרמות - סיכום טקסט קצר וטבלת נתונים.

9) נושא אפל, בהירות והאפטיקה

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

10) פרטיות, היתרים וביטחון

הרשאות רק ברגע של ערך (מצלמה = סריקת מסמך).
הסבר של ”למה” ונסיגה ללא רשות.
WebWarthn/biometrics במקום סיסמה; מנהלי סיסמאות נתמכים.
הסתר שדות רגישים בעת קיפול; פסקי זמן אזהרה.

11) דחוף הודעות ומשימות רקע

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

12) תמונות, מדיה וכושר הסתגלות

ממלא מקום מוגדר = אפס CLS.
וידאו כברירת מחדל ללא ניתוח אוטומטי, עם כתוביות ובקרה; סיביות הסתגלות.
סמלים - וקטור (SVG) או ספרייט; אל תטען סטים של 1 MB.

13) סניפטים והגדרות

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

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

14) תוכנית מבחן (מינימום)

מכשירים: 1 iOS + 1 אנדרואיד (מסך קטן/בינוני/גדול), דיוקן/נוף.
רשתות: offline, 3G, 4G (מצערת); אפשר שמירת נתונים.
זמינות: Recover Over/TalkBack Scripts, כרטיס מקלדת, ניגודיות.
ביצועים: Web-Vitals (רום), מאבחן; רשימות גדולות, הקלדה/גלילה/מחוות.
יציבות: סיבוב, קיפול/חזרה, הריגת התהליך.
אבטחה: הרשאות, פסק זמן, הסתרת מידע פרטי, ביומטריה.

15) מדדים ניידים ־ בטוחים

LCP/INP/CLS (p75, נייד בלבד).
זמן לפעולה (לפני לחיצת המטרה העיקרית).
דיוק סטפס (חלק ברזים כוזבים של יסודות קרובים).
הפעלות ללא קריסה/שיעור ANR (יישומים/webview).
נתונים לכל הפעלה ופגיעת סוללה.
Opt-in/Oft-Out מוך ואירוסין.

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

כפתורים 28-32 px, רשימות צפופות, ”קלפים” ללא שדה - מפספסים.
טקסט 12-14 px על רקע אפור בהיר.
מודלים מעל מודלים; סגירת ידי מחווה בלבד.
ניתוח אוטומטי וידאו/אנימציות על 3G/Save-Data.
מאפייני מחווה בלבד, אין כפתור/תפריט.
חסר אזור בטוח = = תוכן חופף עם ”פוני” או לוח swipe.

17) רשימת בדיקות מסך

[ מטרות ] 48 px, indents 8-12 px

[ ] Safe-Area ”Saffort-fit = כיסוי, env (אזור בטוח - inset -)”

[ ] טקסט 16 px, ניגוד AA, מיקוד/נכס גלוי

[ צורות ]: נכון ”סוג/inputmode/autocomplete”, עבודות השלמה אוטומטית

[ ] LCP 2. 5, INP/200ms, CLS/0. 1 (נייד)

[ ] עומס עצלות בלוקים כבדים, הורדת רשימות

[ ] מסך לא מקוון, מגש מחדש עם גיבוי, מצב שמירת נתונים

[ ] פלפים ואישורים - לפי דרישה, עם הסבר וסירוב

[ ] נושא אפל ותנועה מופחתת נתמכת

[ מבחני ]: iOS/Android, דיוקן/נוף, 3G/offline, מעבר SR

18) תוכנית יישום (3 איטרציות)

• רשת ואזור בטוח, 48 מטרות px, סוגי מקלדת/השלמה אוטומטית, סיסמאות רשת-חיוניות בסיסיות, תמונות עצלות, נושא אפל.

• פיצול קוד, ראות תוכן, לא מקוון + SW, מצב שמירת נתונים, מגש/תורים, שחזור מצב, ביקורת A11y.

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

19) מיני ־ FAQ

האם אני צריך ”תפריט נייד” נפרד?
כן, אבל העדיפות היא ניווט תחתון עם 3-5 נקודות; המבורגר - עבור המשני.

איך להפחית את החמצות הכפתור?
הגדלת יעדים ל ־ 48 px, הוספת שדות מסביב, התפשטות אנכית, שימוש ב ־ haptic עבור ”הצלחה/שגיאה”.

לא מקוון נדרש?
לתרחישים קריטיים, כן: מטמון, תור של פעולות והערות כנות למשתמש.

תוצאות

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