مكونات UI الأساسية (Core UI Components)

تعرف كيف تبدو الأزرار وForms وModals. لكن إذا شككت يومًا في اختياراتك للـ Components، أو واجهت صعوبة في شرحها لفريقك، فأنت لست وحدك. تعرض معظم الشروحات واجهات مكتملة من دون توضيح منطق كل قرار، فتترك لك استنتاجه بنفسك.

تشرح هذه الدورة UI Components الأساسية التي ستواجهها في كل مشروع تصميم حديث تقريبًا. ستتعلم بنية الأزرار وInputs وSelection Controls وCards وMenus وModals، وسلوكها عبر Interaction States المختلفة، ومتى تختار كل نوع. والأهم أنك ستفهم المبادئ وراء هذه Patterns، لتطبّقها بثقة وتشرح قراراتك بوضوح.

يغطي النصف الأول العناصر الأساسية: بنية Components، وحالات مثل Hover وFocus، وButton Hierarchies وكتابة التسميات، ثم Selection Controls بما فيها Checkboxes وRadio Buttons وToggles. ويركّز النصف الثاني على تنظيم المحتوى وعرضه عبر Inputs وForms وProgress Trackers وCards وMenus وModals. يركّز كل جزء على القرارات العملية: أي Component يناسب الموقف، وكيف تنسّقه باتساق، وما الذي يجعل فهمه أسهل للمستخدم.

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

بنية Components وحالاتها أزرار وتسميات ذات غرض واضح Selection Controls فعّالة Inputs وForms سهلة الاستخدام Cards وMenus وModals متعددة الاستخدامات