קו מנחה UX ותקני ממשק

1) עקרונות

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

2) רשת, חריצים וקצב

רשת: 4/8-pt המגרש; עמודות: 12 (שולחן עבודה), 6 (לוח), 4 (נייד).
רכיבים פנימיים: כפולות של 4; חיצוני - 8/ 12/16/24.
קצב אנכי: כותרת = כותרת = = תוכן פעולה (CTA).
גבולות ומחלקים: חסכוני; מעדיף ”אוויר” ואת ההיררכיה של טיפוגרפיה.

3) טיפוגרפיה

סולם סיכות: 12/14/ 16/20/24/32/40 (גוף 16).
גובה שורה: 1. 4–1. 6 עבור טקסט, 1. 2–1. 3 עבור תארים.
אורך הקו: 45-75 תווים (שולחן עבודה), 35-55 (נייד).
הדגשה: נועז עבור מבטא סמנטי; כובעים - רק בתוויות.
קריאות בקול: טקסטים צריכים להישמע טבעיים.

4) צבע וניגודיות

סמנטיקה: ”הצלחה/מידע/אזהרה/שגיאה/ניטראלית”.
ניגוד: WCAG מינימום 2. 1 AA (טקסט/רקע 4. 5:1; גדול 3:1).
צבע על האות היחיד. הוסף סמל/טקסט/טופס.
טבעת מיקוד: תמיד נראית לעין (לא לנטרל ב ־ CSS).

5) ארכיטקטורת ניווט ומידע

נתיב המשתמש: "איפה אני? מה יש כאן? מה הלאה? - כמובן.
היררכיית התפריט: רמות 2 חסומות בניווט הראשי.
פירורי לחם: עבור חלקים עמוקים.
חיפוש: זמין באופן גלובלי בספריות מורכבות; הוקי '/'.
הניווט קובע: לשונית/דף פעיל מודגש באסימונים.

6) רכיבים ותבניות

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

7) צורות, אימות וטעויות

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

8) תנאים ומשוב

הצלחה: טוסט 2-4 אס, ניטראלי-חיובי, CTA ”מה הלאה”.
מידע/הודעה: כרזה רכה/סוג, אינה חוסמת את הזרם.
אזהרה/שגיאה/קריטית: היררכיה ויזואלית/סמנטית; קריטי - מודאלי/באנר עם פעולה מפורשת.
טעינה: שלד> ספינר; הערכה של זמן המתנה> 3 s.

9) תוכן ומיקרוקופיה

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

10) זמינות (A11y)

ניווט מקלדת מלא; סדר לשוניות הגיוני.
תפקידים ו 'אריה' לאזורים אינטראקטיביים, חיים עבור טוסט/סטטוס.
ניגודים, טבעות מיקוד, גודל אינטראקטיבי 44 × 44 px.
חלופות טקסט עבור סמלים/תמונות; שולחנות עם כוונת.
בדיקות: אוטומטי (לינטר/סורק) + תסריטים ידניים של קורא המסך.

11) לוקליזציה ואינטרנציונליזציה

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

12) היענות ואו

נקודות שבירה: 360/768/1024/1280 +.
מוביל-ראשון: נתיב קריטי זמין ביד אחת, CTA באזור האגודל.
מחוות ומקלדת: מחוות משוכפלות עם כפתורים; על שולחן עבודה - חמים.
צפיפות: על שולחן העבודה - ”אוויר”, על חסכונות ניידים ־ אנכיים מבלי להתפשר על קליקים.

13) נושא אפל

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

14) אנימציות ותנועה

משך: 120-200 ms (קטן), 200-300 ms (מעברים).
פונקציות האצה הן טבעיות (cubic-bezier עם האטה קלה).
אנימציות לא צריכות לחסום זרימה ופגיעה בקריאה.
כבוד 'מעדיף-מופחת תנועה'.

15) ביצועים

בדיקת LCP 2. 5S, TTI/TBT בירוק; שחבור קוד; טעינת מדיה עצלה.
וירטואליזציה של רשימות ארוכות; מטמון נתונים.
שלד לתפיסת מהירות; למזער פריסה ”זבל”.

16) ביטחון ופרטיות ב ־ UI

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

17) מדדי איכות UX

המרת שלב וזמן להשלמה.
קצב שגיאה על ידי שדות/שלבים וזמן לתקן.
CTR על ידי CTA ותרחיש חזרה.
הורדה לאחר שגיאה/לאחר טעינה> N שניות.
שיחות תמיכה לפי נושא (לפני/אחרי שינויים).
A11y-defects לשחרור (מטרה - 0 קריטית).

18) רשימות בדיקה

מסך שחרור מראש

[ ] מטרה עיקרית אחת וסי-טי-איי-טי-איי אחד.

[ הניווט ] ואיפה-אני סטטוס הם ברורים.

[ ] תוכן קצר: 1-2 משפטים לבלוק.

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

[ ] A11y: AA ניגוד, להתמקד גלוי לעין, 'aria -' על אינטראקטיבי.

[ ] לוקליזציה: מסומן אורכי מחרוזת/פורמטים/RTL.

[ ] ביצועים: אין בלוקים ”כבדים” ללא צורך.

טופס טרום שחרור

[ ] תוויות ופורמטים מדגם נוכחים.

[ ] אימות אינליין + סיכום להגשה.

[ ] גלול לשגיאה הראשונה, התמקד בתיבה.

[ הודעות ]: מה/איך/למה; בלי 500/400 קודים למשתמש.

[ ] דאטה אינו אבוד על שגיאות/אתחול מחדש.

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

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

20) לפני/אחרי דוגמאות

שגיאת צורה

לפני: ”שגיאה 400”

אחרי: "תבנית תאריך לא תקפה. השתמש ב DD. M.M. YYY"

מדינה ריקה

לפני: ”זה ריק כאן”

אחרי: "ההיסטוריה של פעולות לאחר חידוש הראשון תופיע כאן. [ למעלה למעלה ]"

הודעת הצלחה

ל: ”נעשה”

לאחר מכן: "התשלום התקבל. איזון מעודכן. [ ראה היסטוריה ]" ‏

ניווט

לפני: לא ברור היכן נמצא המשתמש

לאחר: לשונית פעילה + פירורי לחם + כותרת עמוד מפורשת

21) תבניות לביקורת עיצוב

מסגרת המסך

& gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & g

מסגרת עובש

Hander # prompt ach field (תווית + מסייע + שגיאה) * CTA # פעולות משניות = הערות.

תבנית מיקרוקופיה

כותרת (לשעבר)

1-2 משפטים: הקשר + השלב הבא

CTA: פעולה + אובייקט

קישור משני: עזרה/כללים

22) תהליכים ותחזוקה של סטנדרטים

הגדרה של מבוצעת (UX): פריסה + טקסטים + מצבים + A11y + i18n + מדדים.
סקירת UX ביחסי ציבור: רשימה מקטעים 18-21.
תיעוד: כל תכונה מוסיפה/מעדכנת מדריך ל ־ Wiki/Storybook.
ביקורת פעם ברבע דולר: תוכן, A11y, ביצועים, עקביות.

גיליון רמאות סופי

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

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