מערכות תכנון ותיעוד

1) מהי מערכת תכנון ומדוע היא נחוצה

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

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

2) ארכיטקטורת מערכת עיצוב (שכבות)

1. אסימונים לעיצוב (יסודות): צבעים, טיפוגרפיה, ממדים, רדיוס, צללים, חריצים, מדינות, כמו גם אסימונים סמנטיים (צבע. פני השטח. אזהרה, מרחב. xs').
2. רכיבי UI: כפתורים, שדות קלט, חלונות מודליים, טיפות, טבלאות, טוסט, כרזות, התראות, מצבים ריקים, שלדים.
3. תבניות וקומפוזיציות: צורות KYC, זרימת תשלום, אפס תוצאות, מאסטרי שלב, כרטיסי תוכן.
4. מדריך תוכן (מיקרוקופיה): טון, מילון מונחים, תבניות שגיאה/הצלחה, דחיפה/באנרים.
5. תשתית: מדריך A11y, בדיקות, לוקליזציה, גרסאות, תורמים (תורמים).

3) אסימונים לעיצוב: עקרונות

סמנטיקה> סגנון ”נא”. השתמש בצבע. טקסט. מעומעם במקום '# 6B7280'.
נושא ופלטפורמות. Source tokens # platformation mappings (רשת, iOS, אנדרואיד, דוא "ל).
נושא בהיר/כהה וניגוד WCAG ברמת האסימון.
מאזניים גלובליים וקונטקסטואליים: 2 ',' רדיוס. md', 'הגבהה. 1 ',' אטימות. נכים ".
ורסינינג טוקן: שינויים - באמצעות מדיניות פיחות ורשימות הגירה.

4) רכיבים: דרישות והרכב הדף בתיעוד

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

5) תבניות קומפוזיציה (מתכונים)

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

6) מדריך תוכן (קול וטון, מיקרוקופיה)

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

7) נגישות (A11y) כסטנדרט מערכת

קריטריונים בסיסיים: WCAG 2. 1 איי איי לניגודיות, מיקוד תמיד נראה לעין, ניווט מקלדת.
תפקידים ותכונות: מרכיבים מתארים 'תפקיד', 'אריה-לייבל', 'אריה-מתאר', אזורים חיים עבור טוסט/התראות.
קוראי מסך: דוגמאות לביטויים, סדר קריאה, סטטוסים נכונים (”אסרטיביים/מנומסים”).
בדיקות: בדיקות אוטומטיות + תסריטים ידניים.

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

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

9) תיעוד: מבנה וניווט

1. מבוא: משימה, עקרונות, תחומי אחריות.

2. אסימונים: צבעים, טיפוגרפיה, רשת, ממדים, צללים, מדינות, נושאים.

3. רכיבים: קטלוג עם מסננים (לפי תפקיד, לפי פלטפורמה, על ידי A11Y).

4. תבניות: תרחישים (טפסים, תשלומים, מצבים ריקים, הצלחה/שגיאות).

5. מדריך תוכן: קול וטון, מילון, תבניות מיקרו-קופתיות.

6. נגישות: סטנדרטים, רשימות בדיקה, מקרי בדיקה.

7. לוקליזציה: עקרונות, דוגמאות, גלוסקמאות בשוק.

8. אינטגרציה וקוד: התקנה, גרסאות, דוגמאות, כיצד להגר.

9. תרומה: תרומת תהליכים, סקירת עיצוב, סקירת קוד, הגדרת נעשה.

10. Changelog ו-Roadmap: שחרור, פחת, תוכנית פיתוח, נושאים ידועים.

10) ממשל ותהליכים

תפקידים: בעל מערכת (Designal Ops/UX Platform), מתחזקים (עיצוב/FE), יועצים (BE, A11y, לוקליזציה).
ועדת שינוי: הערכת בקשה, עדיפות, פיוס API/Token.
תהליכים: RFC לרכיבים חדשים, צורות פנימיות, SLA לבאגים.
הגדרה של Diamond: Design (פיגמה) ↔ code (חבילת UI) ↔ dock (דוגמה + מדריך) ↔ בדיקות.

11) תורם: כיצד להוסיף/לשנות

תבנית RFC: אפשרויות profession _ professions = = ההחלטה שנבחרה = = A11y i18n = nigeration = סיכונים.
Flow PR: review code review # UX copywriter ac A11y check ach records.
כללי תאימות לאחור: קטין/תיקון עבור לא הרסני, עיקרי - עם הפחתה ונדידה אוטומטית, איפה שאפשר.

12) ורסינינג, שחרור, נדידה

SemVer לחבילות ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts').
הערות שחרור: שינויים סמליים, רכיב API, התנהגות ברירת מחדל, שינויים שבירה, מדריכי נדידה.
סימונים: סימון מזח, חוקי לינטר, מודי קוד להחלפה המונית.
Design-tokens pipeline: מקור יחיד (JSON/YAML).

13) בדיקת איכות

בדיקות יחידה של התנהגות ותנאים.
תמונות ויזואליות (רגרסיה של נושא/מצב).
A11y בדיקות: תסריטים אוטומטיים + ידניים של קורא המסך.
E2E מקרים להזרמה קריטית (רישום, תשלומים, KYC).
תקציבי Perf: צרור/להפוך מגבלות וחרם התמכרות כבד.

14) מדדי הבגרות של מערכת העיצוב

אימוץ:% מסכים/מאגרים באמצעות DS.
זמן מהפריסה למשלוח.
איכות: פגמים UI/A11y לשחרור 1.
עקביות: מספר רכיבים חד פעמיים/סגנונות מחוץ ל DS.
Docs: כיסוי רכיבי עגינה, קהל פנימי NPS (מעצבים/מפתחים/אנליסטים).

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

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

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

[ ] שמות ומטרה סמנטיים.

[ ] איי איי בשני הנושאים.

[ ] סקיילס ושימושים מתועדים.

[ ] אפשרויות/מדינות מכוסות.

[ ] A11y-description, 'אריה', להתמקד.

[ ] דוגמאות מיקרוקופיה (תוויות, שגיאות, רמזים).

[ דוגמאות קוד ] ומקרי קצה (תורים ארוכים, טעינה, ריק).

[ ] הבדיקות Unit/visual/A11y ירוקות.

[ ] שחרר הערות עם דוגמאות לפני/אחרי.

[ מדריך הגירה ].

[ סיפורים/דמואים מעודכנים ], קישורים במזח.

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

• כפתורי יסוד שונים: צבעים/רדיוס/אינדנטים אינם תואמים; טקסטים שונים של סי-טי-איי.

• "כפתור" יחיד עם אסימונים: "גודל = md", "וריאנט = ראשוני", "רדיוס = lg", "מרווח = md", טקסט בסגנון "action + object'.

• הודעות טכניות, ללא הערות.

• רכיב ' פורמט תאריך לא תקף. השתמש ב DD. כן, כן. '+ מיקוד אוטומטי.

18) תבנית דף רכיב (שלד)

שם: כפתור

תיאור: מתחיל פעולה; 1 ראשי לכל מסך.
אפשרויות: ראשי, משני, רוח רפאים, הרסני; ממדי sm/md/ilg.
מצהיר: ריחוף, מיקוד, פעיל, טעינה, נכה.
A11y: זמין מהמקלדת; 'Aria-לחוץ' להחלפה.

מיקרוקופיה: "שמור שינויים", "המשך אימות. "להימנע "בסדר"

קוד (דוגמה API): ”כפתור [וריאנט], גודל, סמל, טעינה”.
דוגמאות נגד: פריימריז כפולים באותה רמה היררכית.
בדיקות: תמונות חזותיות, ניגוד, מיקוד-טבעת.

19) מערכת עיצוב משחק (rollout)

1. ביקורת ממשק: מלאי של צבעים/טיפוגרפיה/רכיבים/תבניות.
2. אסימונים MVP ורכיבים עיקריים: כפתור, קלט, בחר, מודל, התראה, מצב התראה, טוסט.
3. תיעוד וספר סיפורים: דוגמאות חיות, קטעי קוד, מדריכים.
4. מוצר פיילוט: החלפת וידג 'טים, איסוף משוב.
5. מדריך הגירה: קוד מודים, כללי הפחתה.
6. הארכת הסט: שולחנות, עבודת אלילים, הקמת פורומים, צעדי אשף.
7. סקאלה: תבניות מוצר (תשלומים, KYC), אינטגרציה עם אנליטיקה ו A/B.
8. תמיכה: ערוץ שאלות, SLA, סדנאות פנימיות.

20) תבניות תיעוד מהירות

• שם: "צבע. גבול. אזהרה &fft
• מטרה: מסגרות אזהרה ובאנרים שימו לב/אזהרה
• ניגוד: אלכוהוליסטים אנונימיים נגד צבע. פני השטח. Defaulte &pos
• אל: השתמש בטקסט בגודל קטן
• קשור: "צבע. פני השטח. אזהרה, אייקון. אזהרה &fft

תבנית תבנית: מצב ריק (תוצאות)

מטרה: לתקן שאילתה מבלי להרגיש ”לא בסדר” ‏

קומפוזיציה: כותרת (סיטונאית), טקסט (1-2 משפטים), CTA, CTA משני, סמל/איור

מיקרוקופיה: ”שום דבר לא נמצא על ידי” לאפס את המסננים או לזקק את השאילתה"

A11y: "תפקיד =" סטטוס "", אריה-לחיות = "מנומס" "

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

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