10 KiB

Raw Blame History

تصميم تطبيق البنك الخاص بك باستخدام CSS الحديث

نظرة عامة على المشروع

حوّل تطبيقك البنكي الوظيفي إلى تطبيق ويب جذاب واحترافي باستخدام تقنيات CSS الحديثة. ستقوم بإنشاء نظام تصميم متكامل يعزز تجربة المستخدم مع الحفاظ على مبادئ الوصول والتصميم المتجاوب.

هذا التحدي يدعوك لتطبيق أنماط تصميم الويب المعاصرة، وتنفيذ هوية بصرية متناسقة، وإنشاء واجهة يجدها المستخدمون جذابة وسهلة التنقل.

التعليمات

الخطوة الأولى: إعداد ملف الأنماط

قم بإنشاء أساس 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;
}

الخطوة الثانية: متطلبات نظام التصميم

قم بتنفيذ هذه العناصر الأساسية للتصميم:

لوحة الألوان

اللون الأساسي: اختر لونًا احترافيًا للأزرار والعناصر البارزة.
اللون الثانوي: لون مكمل للإجراءات الثانوية والعناصر المساعدة.
الألوان المحايدة: درجات الرمادي للنصوص، الحدود، والخلفيات.
ألوان النجاح/الخطأ: الأخضر لحالات النجاح، الأحمر للأخطاء.

الطباعة

تسلسل العناوين: تمييز واضح بين عناصر H1، H2، و H3.
نصوص الجسم: حجم خط قابل للقراءة (16px كحد أدنى) وارتفاع خط مناسب.
تسميات النماذج: تنسيق نص واضح وسهل الوصول.

التخطيط والمسافات

مسافات متناسقة: استخدم مقياس المسافات (8px، 16px، 24px، 32px).
نظام الشبكة: تخطيط منظم للنماذج وأقسام المحتوى.
تصميم متجاوب: نهج يعتمد على الأجهزة المحمولة مع نقاط توقف.

الخطوة الثالثة: تنسيق المكونات

قم بتنسيق هذه المكونات المحددة:

النماذج

حقول الإدخال: حدود احترافية، حالات التركيز، وتنسيق التحقق.
الأزرار: تأثيرات التمرير، حالات التعطيل، ومؤشرات التحميل.
التسميات: تموضع واضح ومؤشرات الحقول المطلوبة.
رسائل الخطأ: تنسيق واضح للأخطاء ورسائل مساعدة.

التنقل

الرأس: منطقة تنقل نظيفة تحمل العلامة التجارية.
الروابط: حالات تمرير واضحة ومؤشرات نشطة.
الشعار/العنوان: عنصر مميز للعلامة التجارية.

مناطق المحتوى

الأقسام: فصل بصري واضح بين المناطق المختلفة.
البطاقات: إذا كنت تستخدم تخطيطًا يعتمد على البطاقات، قم بإضافة الظلال والحدود.
الخلفيات: استخدام مناسب للمساحات البيضاء والخلفيات الدقيقة.

الخطوة الرابعة: ميزات محسّنة (اختياري)

فكر في تنفيذ هذه الميزات المتقدمة:

الوضع الداكن: التبديل بين الوضع الفاتح والداكن.
الرسوم المتحركة: انتقالات دقيقة وتفاعلات صغيرة.
حالات التحميل: ردود فعل بصرية أثناء إرسال النماذج.
الصور المتجاوبة: صور محسّنة لأحجام الشاشات المختلفة.

إلهام التصميم

خصائص تطبيقات البنوك الحديثة:

تصميم نظيف وبسيط مع الكثير من المساحات البيضاء.
لوحات ألوان احترافية (الأزرق، الأخضر، أو الألوان المحايدة الأنيقة).
تسلسل بصري واضح مع أزرار بارزة للإجراءات.
نسب تباين قابلة للوصول تتوافق مع إرشادات 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 وحجم الملف الصغير.
اختبار عبر المتصفحات لضمان التوافق عبر المتصفحات المختلفة.

💡 نصيحة احترافية: ابدأ بتصميم الأجهزة المحمولة أولاً، ثم قم بتحسينه للشاشات الأكبر. يضمن هذا النهج الذي يعتمد على الأجهزة المحمولة أن يعمل تطبيقك بشكل جيد على جميع الأجهزة ويتبع أفضل ممارسات تطوير الويب الحديثة.

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

10 KiB Raw Blame History