فهم تصميم الويب وتجربة المستخدم

Name: فهم تصميم الويب وتجربة المستخدم
Author: Matthew Brown

تعرف على عناصر تصميم التحكم في المدخلات لتشمل الأزرار وقوائم المنسدلة وأزرار الاختيار وأشرطة التمري

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ6.

دورة تدريبية: عند الطلب

عناصر التصميم: أزرار CTA، وأزرار الإجراءات الأولية، والرموز مرحبًا في هذا الفصل سوف نتناول تصميم الويب من منظور تجربة المستخدم وعناصر التصميم سيتم تجميع عناصر واجهة المستخدم إلى أربع فئات ضوابط الإدخال هذه تسمح للمستخدمين بإدخال المعلومات في النظام مكونات التنقل، تسمح للمستخدمين للتنقل في التطبيق أو موقع الويب الخاص بك سوف تسمح المكونات المعلوماتية للمطور لمشاركة أي معلومات وثيقة الصلة بالمستخدمين تسمح لك الحاويات بتجميع المحتوى ذي الصلة معًا سنبدأ بالنظر إلى بعض ضوابط الإدخال الأكثر شيوعًا التي يجب أن يكون كل المصممين والمطورين على دراية بها أول هذه الأزرار هذه هي الشكل الأكثر شيوعًا لمدخلات المستخدم التي يتم عرضها غالبًا كأشكال مع تسمية عليها هذا يسمح للمستخدمين بأداء الإجراءات مثل حفظ أو إرسال Save, Submit ثم لدينا مربعات اختيار التي تسمح للمستخدمين بالقيام بالاختيارات على أساس الخيارات المتاحة القوائم المنسدلة تسمح للمستخدمين بالاختيار من قائمة العناصر حقول الإدخال، مكان يدخل فيه المستخدمون النص أو المحتوى مثل المرفقات في النظام ولدينا أيضًا أزرار اختيار هذه عناصر دائرية تسمح للمستخدمين بالاختيار من بين الخيارات وأخيرًا، لدينا عناصر تحكم شريط التمرير تستخدم للسماح للمستخدم بتحديد قيمة من مجموعة من القيم كما نرى هنا لدينا صفحة بسيطة مفتوحة في ++Notepad مع بعض الأمثلة على عدد قليل من عناصر التحكم في الإدخال الممكنة أولاً، لدينا إدخال النص وهذا مجرد إدخال نصي للاسم الأول واسم العائلة نحن نستخدم نوع إدخال النص input type, text إذا كان لدينا الاسم الأول ID أو firstname ثم الاسم هو fname حسنا؟ ومن ثم لدينا تسمية لاسم العائلة Last Name ومن ثم لدينا إدخال لاسم العائلة ثم لدينا أيضًا نوع الإدخال للإرسال submit وهو الزر الخاص بي عنصر التحكم التالي في هذه الصفحة هو زر الاختيار Radio Button لدينا فقرة بسيطة التي تنص على ما هي لغة البرمجة المفضلة لديك لدينا نوع إدخال من زر الاختيار المعرف ،HTML الاسم واللغة المفضلة والقيمة HTML لدينا تسمية أخرى لـ HTML ولدينا زر اختيار إدخال آخر لـ CSS وزر اختيار إدخال آخر لجافا سكريبت لذا عندما نقوم بتشغيل هذا، سنرى كيف يبدو ذلك عنصر التحكم التالي الذي قمنا باستدعاؤه هنا هو مربع اختيار مع سؤال ما هي وسيلة النقل لديك؟ فقرة بسيطة لكن النوع الذي يتم استخدامه هذه المرة هو مربع الاختيار ولدينا ثلاث قيم لمربع الاختيار لدينا مركبة 1 وهو لدي دراجة I have a bike لدي مركبة 2، ولدي سيارة Car والمركبة الثالثة لدي قارب I have a Boat ويمكنك أن ترى بناء الجملة معها ثم لدينا القائمة المنسدلة وهي تسمية للسيارات اختيار سيارة هو التسمية Choose a car ثم الخيارات نستخدم علامة الخيار لدينا فولفو وساب وفيات وأودي ومن ثم فإن عنصر التحكم النهائي الذي لدينا هو عنصر تحكم شريط التمرير نوع الإدخال الخاص بي هو نطاق المعرف هو نقاط والاسم نقاط ID=points, Name = points الحد الأدنى للقيمة هو صفر الحد الأقصى للقيمة هو 10 إذن الآن سنقوم بتشغيل هذا ونرى كيف تبدو في الواقع مرة أخرى، هذه مجرد صفحة بسيطة حيث لدينا حقل الإدخال للاسم الأول حقل إدخال لاسم العائلة ثم لدينا زر إرسال نظرًا لعدم وجود كود خلف زر الإرسال هذا فلا يفعل أي شيء في الواقع ثم لدينا أزرار الاختيار ما هي لغة البرمجة المفضلة لديك؟ وبعد ذلك يمكننا أن نرى أنه يمكننا اختيار أي من الأزرار ثم لدينا مربع الاختيار ما هي وسيلة النقل الخاصة بك؟ لدي دراجة، لدي سيارة، لدي قارب؟ ويمكنني اختيار أي من خانات الاختيار هذه أو كل منهم ثم لدينا القائمة المنسدلة، اختر سيارتك فولفو، Saab، فيات ومن ثم لدينا التحكم في شريط التمرير الحد الأدنى للقيمة صفر أقصى قيمة 10 شكرا للانضمام في الدرس التالي سننظر في مكونات التنقل للتصميم

مبتدئ مقدِّم الخدمة : Matthew Brown 6 الدروس · 21m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

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

ما ستتعلمه

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

النقاط الرئيسية

يتناول الفصل عناصر تصميم التحكم في المدخلات بما فيها الأزرار والقوائم المنسدلة وأزرار الاختيار وأشرطة التمرير.
تُستخدم حاويات HTML لتنظيم محتوى صفحات الويب.
يستند تصميم واجهة المستخدم الحدسي إلى الألفة والاتساق والتصميم المرن غير المرئي.
تشمل عناصر التصميم لتجربة المستخدم الألوان والتدرجات اللونية ورسائل الخطأ وأنماط النصوص والخطوط وطبقات تراكب الصور.

الأسئلة الشائعة

ما الذي سأتعلمه في هذا الفصل؟

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

ما عناصر التصميم التي يتناولها هذا الفصل؟

يتناول أزرار الدعوة إلى الإجراء وأزرار الإجراء الأساسي والأيقونات وطبقات تراكب الصور وأزرار الاختيار والقوائم المنسدلة والألوان والتدرجات اللونية ورسائل الخطأ وأنماط النصوص والخطوط.

هل يتناول هذا الفصل تجربة المستخدم وتصميم الواجهة؟

نعم. يتناول عناصر تصميم واجهة المستخدم الحدسي، بما فيها الألفة والاتساق والتصميم المرن غير المرئي.

ما المهارات التي يساعد هذا الفصل على بنائها؟

يُنمّي المهارات في مكونات HTML وعناصر التحكم في HTML وتصميم التفاعل وتصميم الواجهات وتصميم واجهة المستخدم (UI) وتصميم واجهة الويب.