قاموس عناصر الواجهة بالصور

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

زر أقل بروزاً من الرئيسي، غالباً بإطار بلا تعبئة، لإجراء بديل أو ثانوي يظهر بجانب الزر الرئيسي — كزر «اعرف المزيد».

زر بلا خلفية أو إطار، مجرّد نص قابل للضغط، لأقل الإجراءات أهمية كالإلغاء أو التخطّي، فلا يزاحم الأزرار الأبرز.

زر صغير يحمل أيقونة فقط بلا نص، يوفّر المساحة للإجراءات المتكرّرة — كأزرار الإعجاب أو المشاركة أو الحذف.

زر دائري بارز يطفو فوق المحتوى في زاوية الشاشة، مخصّص للإجراء الأهم في الصفحة — كزر «إضافة» أو «محادثة جديدة».

مجموعة أزرار ملتصقة داخل إطار واحد تختار منها خياراً واحداً يُبرز فوراً — كالتبديل بين «شهري» و«سنوي».

خانة رقم بزرّي + و − لزيادة القيمة أو إنقاصها خطوة خطوة — كتحديد عدد القطع في سلة الشراء.

مربّع تكتب فيه نصاً قصيراً كالاسم أو البريد. غالباً له عنوان فوقه، ويتغيّر إطاره عند التركيز عليه لتعرف أنه نشط.

خانة إدخال كبيرة متعدّدة الأسطر للنصوص الطويلة — كرسالة أو تعليق — وغالباً يمكن سحب زاويتها لتكبيرها.

نص رمادي باهت داخل خانة الإدخال يوضّح ما يجب كتابته («اكتب بريدك الإلكتروني») ويختفي بمجرّد أن تبدأ الكتابة.

خانة تعرض خياراً واحداً، وعند الضغط عليها تنسدل قائمة بالخيارات لتختار منها. توفّر المساحة بدل عرض كل الخيارات دفعة واحدة.

مربّع صغير تضع فيه علامة ✓ للموافقة أو لاختيار عنصر. يمكن اختيار أكثر من مربّع في القائمة الواحدة، بعكس أزرار الاختيار.

دوائر صغيرة تختار منها خياراً واحداً فقط؛ اختيار واحد يلغي ما قبله — كاختيار طريقة الدفع.

مفتاح صغير ينزلق بين وضعين: مُفعّل ومُطفأ. يُستخدم للخيارات التي إمّا أن تكون مشغّلة أو لا — كتفعيل الإشعارات أو الوضع الليلي.

مقبض تسحبه على شريط لتختار قيمة ضمن مدى — كضبط السعر أو مستوى الصوت.

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

خانة عند الضغط عليها تفتح تقويماً صغيراً تختار منه يوماً بدل كتابة التاريخ يدوياً، فتتجنّب أخطاء الصيغة.

منطقة محدّدة بخطّ متقطّع تسحب إليها الملف أو تضغط لاختياره من جهازك لرفعه — كرفع صورة أو سيرة ذاتية.

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

أيقونة من ثلاثة خطوط أفقية، غالباً أعلى الصفحة في الجوال. الضغط عليها يفتح قائمة التنقّل المخفية لتوفير المساحة.

سلسلة روابط صغيرة أعلى الصفحة تبيّن موقعك في الموقع (الرئيسية ← الدورات ← اسم الدورة) وتتيح الرجوع لأي مستوى بضغطة.

صفّ من العناوين القابلة للضغط يقسّم المحتوى إلى أقسام، يظهر قسم واحد فقط في كل مرة — كتبويبات «نظرة عامة» و«التقييمات» في صفحة منتج.

صفّ مرقّم يقسّم عملية طويلة (كالتسجيل أو الدفع) إلى خطوات، ويُبرز خطوتك الحالية وما أنجزته منها لتعرف كم بقي.

صفّ من الأرقام وأسهم أسفل قائمة طويلة (نتائج، منتجات) يقسّمها إلى صفحات بدل عرضها كلها دفعة واحدة، فتنتقل بينها بالضغط.

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

لوحة تنزلق من جانب الشاشة لتعرض قائمة تنقّل أو فلاتر، وتُغطّي جزءاً من الصفحة حتى تُغلقها.

بطاقة صغيرة تظهر بجوار زر عند الضغط عليه لتعرض محتوى أو خيارات إضافية، وتُغلق عند الضغط خارجها — أكبر من التلميح وأكثر تفاعلاً.

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

فقاعة صغيرة فيها شرح مختصر تظهر عندما تمرّ بالمؤشر فوق عنصر أو أيقونة، لتوضّح وظيفته دون ازدحام الواجهة بالنصوص.

صندوق محدّد بحوافّ وظلّ خفيف يجمع محتوى مترابطاً (صورة، عنوان، نص، زر) في وحدة واحدة منفصلة عمّا حولها — كبطاقة المنتج أو المقال.

صفوف وأعمدة تعرض بيانات مرتّبة (كقائمة طلبات أو مستخدمين) ليسهل مسحها ومقارنتها، وغالباً مع رأس ثابت يسمّي الأعمدة.

شريط يعرض الصور أو البطاقات واحدة تلو الأخرى، تتنقّل بينها بالأسهم أو النقاط أسفله — كمعرض صور المنتج.

صورة صغيرة دائرية تمثّل المستخدم — صورته الشخصية أو أوّل حرف من اسمه — تظهر بجانب اسمه أو في أعلى لوحة التحكّم.

علامة صغيرة ملوّنة تحمل كلمة أو رقماً لإبراز حالة أو عدد — مثل «جديد»، أو رقم الإشعارات فوق أيقونة الجرس.

عنصر صغير بيضاوي يمثّل اختياراً أو تصنيفاً أو فلتراً، وغالباً يحمل زر ✕ لإزالته — كوسوم الاهتمامات أو الفلاتر المطبّقة.

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

صفّ من النجوم تضغط عليها لتمنح تقييماً من ١ إلى ٥، أو لتعرض متوسّط تقييم المنتج.

خطّ رفيع يفصل بين أقسام المحتوى ليريح العين ويوضّح أين ينتهي قسم ويبدأ آخر، وقد يحمل كلمة في منتصفه مثل «أو».

رسالة ودّية بأيقونة تظهر مكان قائمة فارغة (لا نتائج، لا طلبات بعد) لتشرح السبب وتقترح خطوة تالية بدل ترك الشاشة فارغة محيّرة.

رسالة صغيرة تظهر للحظات في زاوية الشاشة لتؤكّد حدوث شيء («تم الحفظ») ثم تختفي تلقائياً دون أن تعترض عملك.

شريط ملوّن عريض يظهر أعلى المحتوى ليُبلّغك بمعلومة مهمّة أو تحذير، ويبقى ظاهراً حتى تقرأه أو تغلقه — بعكس الإشعار المنبثق الذي يختفي وحده.

شريط يمتلئ تدريجياً ليُظهر نسبة إنجاز عملية — كرفع ملف أو نسبة إكمالك للدورة.

دائرة صغيرة تدور باستمرار لتُخبرك أن النظام يعمل وينتظر اكتمال عملية قصيرة — كتحميل أو حفظ.

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

تدوير زوايا العناصر (الأزرار، البطاقات، الصور) بدل تركها حادّة، فتبدو الواجهة أنعم وأكثر ودّاً. تُقاس بمقدار التدوير من خفيف إلى دائري بالكامل.

ظلّ خفيف أسفل العنصر يوحي بارتفاعه عن الصفحة، فيبدو أقرب وأبرز. كلّما زاد الظل بدا العنصر أعلى — كالبطاقات والقوائم المنبثقة.