9.8 KiB

Raw Blame History Unescape Escape

עיצוב אפליקציית הבנק שלך עם CSS מודרני

סקירת הפרויקט

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

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

הוראות

שלב 1: הגדרת גיליון הסגנונות שלך

צור את הבסיס ל-CSS שלך:

צור קובץ חדש בשם styles.css בתיקיית הפרויקט הראשית שלך
קשר את גיליון הסגנונות בקובץ index.html שלך:
```
<link rel="stylesheet" href="styles.css">
```

התחל עם איפוס CSS והגדרות מודרניות:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

שלב 2: דרישות מערכת עיצוב

יישם את אלמנטי העיצוב החיוניים הבאים:

פלטת צבעים

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

טיפוגרפיה

היררכיית כותרות: הבחנה ברורה בין אלמנטים H1, H2 ו-H3
טקסט גוף: גודל גופן קריא (מינימום 16px) וגובה שורה מתאים
תוויות טפסים: עיצוב טקסט ברור ונגיש

פריסה וריווח

ריווח עקבי: השתמש בסולם ריווח (8px, 16px, 24px, 32px)
מערכת גריד: פריסה מאורגנת לטפסים ומקטעי תוכן
עיצוב רספונסיבי: גישה של מובייל תחילה עם נקודות שבירה

שלב 3: עיצוב רכיבים

עצב את הרכיבים הספציפיים הבאים:

טפסים

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

ניווט

כותרת עליונה: אזור ניווט נקי וממותג
קישורים: מצבי ריחוף ברורים ואינדיקטורים פעילים
לוגו/כותרת: אלמנט מיתוג ייחודי

אזורי תוכן

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

שלב 4: תכונות מתקדמות (אופציונלי)

שקול ליישם את התכונות המתקדמות הבאות:

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

השראה לעיצוב

מאפייני אפליקציות בנקאות מודרניות:

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

דרישות טכניות

ארגון CSS

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

דרישות נגישות

ניגודיות צבעים: ודא יחס של לפחות 4.5:1 לטקסט רגיל
אינדיקטורים לפוקוס: מצבי פוקוס נראים לעין עבור ניווט באמצעות מקלדת
תוויות טפסים: משויכות כראוי לשדות קלט
עיצוב רספונסיבי: שימושי במסכים ברוחב של 320px עד 1920px

קריטריונים להערכה

קריטריונים	מצטיין (A)	טוב (B)	מתפתח (C)	דורש שיפור (F)
מערכת עיצוב	מיישם מערכת עיצוב מקיפה עם צבעים, טיפוגרפיה וריווח עקביים לאורך כל הדרך	משתמש בעיצוב עקבי עם דפוסי עיצוב ברורים והיררכיה חזותית טובה	עיצוב בסיסי עם בעיות עקביות או אלמנטים חסרים	עיצוב מינימלי עם בחירות עיצוב לא עקביות או סותרות
חוויית משתמש	יוצר ממשק אינטואיטיבי ומקצועי עם שימושיות מצוינת ומשיכה חזותית	מספק חוויית משתמש טובה עם ניווט ברור ותוכן קריא	שימושיות בסיסית עם צורך בשיפורים מסוימים	שימושיות גרועה, קשה לניווט או לקריאה
יישום טכני	משתמש בטכניקות CSS מודרניות, מבנה קוד מאורגן ועוקב אחר שיטות עבודה מומלצות	מיישם CSS בצורה יעילה עם ארגון טוב וטכניקות מתאימות	CSS עובד נכון אך עשוי להיות חסר ארגון או גישות מודרניות	יישום CSS גרוע עם בעיות טכניות או בעיות תאימות לדפדפנים
עיצוב רספונסיבי	עיצוב רספונסיבי לחלוטין שעובד בצורה יפה בכל גדלי המכשירים	התנהגות רספונסיבית טובה עם בעיות מינוריות על חלק מהמסכים	יישום רספונסיבי בסיסי עם בעיות פריסה מסוימות	לא רספונסיבי או בעיות משמעותיות במכשירים ניידים
נגישות	עומד בהנחיות WCAG עם ניווט מקלדת מצוין ותמיכה בקוראי מסך	שיטות נגישות טובות עם ניגודיות נכונה ואינדיקטורים לפוקוס	שיקולי נגישות בסיסיים עם אלמנטים חסרים מסוימים	נגישות גרועה, קשה לשימוש עבור משתמשים עם מוגבלויות

הנחיות להגשה

כלול בהגשה שלך:

styles.css: גיליון הסגנונות המלא שלך
HTML מעודכן: כל השינויים שביצעת ב-HTML
צילומי מסך: תמונות המציגות את העיצוב שלך על שולחן עבודה ונייד
README: תיאור קצר של בחירות העיצוב שלך ופלטת הצבעים

נקודות בונוס עבור:

תכונות מותאמות אישית של CSS לתמיכה בעיצוב בר-קיימא
תכונות CSS מתקדמות כמו גריד, Flexbox או אנימציות CSS
שיקולי ביצועים כמו CSS אופטימלי וגודל קובץ מינימלי
בדיקות בין דפדפנים להבטחת תאימות בין דפדפנים שונים

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

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

9.8 KiB Raw Blame History Unescape Escape