المنزل
تفاصيل العمل
الصفحة المعروضة هي واجهة سؤال متعدد الخيارات (Quiz Interface) بتصميم بسيط ونظيف، وتهدف إلى اختبار معرفة المستخدم حول تاريخ الشعار الأردني. إليك تحليل التصميم خطوة بخطوة:
1. الهيكل العام للصفحة
خلفية عامة: لون فاتح جدًا (أزرق فاتح / أبيض رمادي خفيف) يعطي إحساسًا بالهدوء والراحة البصرية.
صندوق مركزي (Card): يوجد صندوق أبيض مُحدب الزوايا (Rounded Corners) مع ظل خفيف (Box Shadow) ليبدو كأنه "يطفو" فوق الخلفية — هذا يساعد على جذب الانتباه للسؤال والخيارات.
هذه تقنية شائعة في تصميم واجهات المستخدم (UI Design) لجعل المحتوى الرئيسي بارزًا.
2. المحتوى النصي
العنوان الرئيسي:
كم تعرف عن الشعار الأردني؟
خط كبير، سميك، بلون أزرق داكن.
تم إضافة أيقونة تحكم ألعاب () لإضفاء طابع تفاعلي وممتع — يوحي بأنها لعبة أو اختبار.
السؤال الفعلي:
متى تم اعتماد الشعار الوطني الأردني رسميًا؟
خط أصغر قليلًا، بلون أزرق فاتح أو رمادي داكن، مكتوب بخط نسخ (Regular Weight).
استخدام الخطوط والألوان المختلفة يخلق هرمًا بصريًا (Visual Hierarchy) يوجه المستخدم للقراءة من الأهم إلى الأقل أهمية.
3. خيارات الإجابة (Buttons / Cards)
هناك 4 خيارات، كل منها داخل مستطيل بأحرف مربعة مُحدبة (Rounded Rectangles).
الألوان: خلفية فاتحة جدًا (أزرق شبه شفاف) مع حدود رقيقة بلون أزرق فاتح.
النص: مركّز في المنتصف، بلون أسود أو رمادي غامق، وبخط واضح وسهل القراءة.
التنسيق: متباعدة بشكل متساوٍ، مما يسهل على المستخدم التفاعل دون تشويش.
️ ملاحظة مهمة: الخيار الثالث (1932) يبدو أنه مُحدد أو مُختار حاليًا، لأنه يظهر بلون خلفية أكثر وضوحًا (أزرق فاتح أعمق). هذا يشير إلى أن التصميم يدعم حالة "محدد" أو "منتخب".
4. ️ العناصر البصرية الإضافية
لا توجد صور أو رسومات معقدة — فقط نص وأيقونة صغيرة.
التركيز على البساطة والوضوح، وهو ما يناسب التطبيقات التعليمية أو الاختبارات القصيرة.
استخدام الألوان المتدرجة بين الأزرق الفاتح والأبيض يعطي إحساسًا بالاحترافية دون تعقيد.
5. ️ كيف يمكن تنفيذ هذا التصميم تقنيًا؟
إذا كنت مبتدئًا في تصميم الويب، يمكنك تنفيذ هذا التصميم باستخدام:
HTML: لبناء العناصر (العنوان، السؤال، الأزرار).
CSS: لتحديد الألوان، الزوايا، الظلال، المسافات، والمحاذاة.
JavaScript (اختياري): لتفعيل التفاعل (مثل تغيير لون الخيار عند النقر، أو عرض نتيجة).
مثال بسيط للكود (مختصر):
html
1
2
3
4
5
6
7
8
⌄
<div class="quiz-card">
<h1>كم تعرف عن الشعار الأردني؟ </h1>
<p>متى تم اعتماد الشعار الوطني الأردني رسميًا؟</p>
<button>1946</button>
<button>1921</button>
<button class="selected">1932</button>
<button>1952</button>
</div>
مع CSS:
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
⌄
⌄
⌄
.quiz-card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
max-width: 500px;
margin: 50px auto;
text-align: center;
}
button {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #cce5ff;
border-radius: 10px;
background: #f0f8ff;
font-size: 16px;
cursor: pointer;
}
.selected {
background: #d0e8ff;
}
ملخص الأسلوب التصميمي
النمط
بسيط – نظيف – موجه للمستخدم
الألوان
أزرق فاتح + أبيض + أزرق داكن للنصوص
الخطوط
واضحة، سهلة القراءة، مع تباين في الحجم/الوزن
التفاعل
خيارات قابلة للنقر، مع مؤشر اختيار (Selected State)
التجربة
ممتعة (بسبب الأيقونة)، وتعليمية
نصيحة للمبتدئين:
ابدأ بنسخ هذا التصميم بنفسك باستخدام HTML/CSS — ستتعلم كثيرًا عن التنسيق، الترتيب، والتفاعل البسيط. ثم حاول إضافة ميزات مثل:
عرض النتيجة عند الاختيار.
تغيير لون الخيار الصحيح.
إضافة زر "التالي" أو "النتيجة".