خطوة بسيطة قبل أن نبدأ التصميم
اختَر أسلوب موقعك
اختر الشكل الذي تفضّله لكل جزء. تُحفظ اختياراتك تلقائيًا على هذا الجهاز، لذلك يمكنك التوقف والعودة لاحقًا. عندما تنتهي، حمّل ملف الإرشادات وأرسله لنا.
01
الأساسيات
ابدأ بهذه الاختيارات العامة؛ فهي تساعدنا على جعل جميع أجزاء الموقع متناسقة.
الاستدارة Corner radius
radius scale
وحدة التباعد Spacing base
4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 56 · 64
الكثافة Density
spacing frequency across reference screens
الظل والارتفاع Elevation
variants 3, 4, 16, 22
إيقاع الخط Type rhythm
type scales across reference screens
سماكة الحدود Border weight
02
المكونات
اختر النمط الأقرب لذوقك. يمكنك تغيير أي اختيار في أي وقت.
الأزرار Buttons
24 variants · sizes
الأحجام: صغير 32/40 · متوسط 40/48 · كبير 52/56
حقول الإدخال Text inputs
8 label placements · states
الحالات المطلوبة: افتراضي · تمرير · كتابة · مكتوب · خطأ · معطّل — بالإضافة إلى
focus-visible، وهي ضرورية لمستخدمي لوحة المفاتيح.منتقي التاريخ Date pickers
states + panel 280, cell 40 · range, 4 states
أزرار الاختيار Radio buttons
states and variants both named · 240×56
في النمطين 3 و4 تكون البطاقة كاملة هي منطقة اللمس، لا الزر وحده — الافتراض الصحيح للمس.
المفاتيح Toggles
8 variants · track 40×24, knob 20
النمطان 5 و7 وحدهما يوضّحان الحالة دون الاعتماد على اللون — يُفضّلان للإعدادات الحسّاسة.
شريط التنقل السفلي Bottom navigation
×8 · ×6 · ×7 indicators · ×6 named types
في RTL: أول تبويب (الرئيسية) هو الأقصى يمينًا.
مؤشر التقدّم Progress
8 variants · ring 64, inner 40
الأنماط 5 و6 و8 تذكر ما الذي يحدث وما التالي، لا نسبة فقط — الفرق بين انتظار المستخدم ومغادرته.
المنزلقات Sliders
8 variants · track 240, thumb 24, box 40×40
الأنماط 3 و4 و7 تُرفق أزرار − + — المنزلق وحده صعب الضبط باللمس ومستحيل مع إعاقة حركية. فضّليها إذا كانت القيمة الدقيقة مهمّة.
الوسوم Tags
5 variants · 152×32, avatar 24, gap 8
الشريط العلوي Top panel
web ×5 · mobile ×6 · bar 72, CTA 158×40, search 272×40
ترقيم الصفحات Pagination
4 variants · bar 80 · arrow 20 in a 32 circle · gaps 16 / 32 / 8 · go-to 80
النمط 4 وحده يتوسّع لما بعد 20 صفحة — والنقاط الثلاث فيه قابلة للنقر وتفتح قائمة صفحات.
مسار التنقّل Breadcrumb
5 variants · row 24 · separator 20 · gaps 8 / 24
النمط 5 وحده يتعامل مع التسلسل العميق — الاختصار في الوسط، وكل سهم يعرض الأشقاء لا الآباء فقط.
التبويبات Tabs
7 variants · tab 112 x 56 · padding 20 / 12 · icon 20 · gap 0
البحث Search
6 variants · 360×48
الأنماط ذات الزر توحي بأن البحث يُرسَل؛ الأنماط بلا زر توحي بأنه فوري أثناء الكتابة. اختر ما يطابق السلوك الفعلي.
التلميحات Tooltips
7 variants · rich card 320×128
الأنماط 1–4 تلميحات عابرة؛ 5–7 بطاقات إرشاد لها أزرارها ودورة حياتها. مكوّنان مختلفان لا واحد.
الإشعارات اللحظية Snackbars & toasts
four semantics, 5 variants
الدلالات الأربع: معلومة · نجاح · خطأ · تحذير. العدّاد التنازلي مرئي في كلتا المعالجتين — يستحق النقل.
القائمة الجانبية الموسّعة Sidebar
expanded 240 / collapsed 80, item 40, gap 4, icon 20
الحالة المطويّة (80px) تفقد العدّادات وتُبقي النقاط فقط — لا تضع رقمًا مهمًّا في شارة وحدها.
زر القائمة (جوال) Hamburger menu
8 open/close pairs · container 48, glyph 24
الحاوية لا تتغيّر شكلًا ولا موضعًا بين الحالتين — الرمز وحده يتبدّل. هذا ما يُبقي منطقة اللمس ثابتة.
أيقونة القائمة Icon menu types
all ten are named · container 48, icon 24
عُرف: Kebab = إجراءات هذا العنصر · Meatballs = إجراءات السياق · Hamburger = التنقّل الرئيسي.
تسجيل الدخول الاجتماعي Social login
6 variants · 216×48, icon 32, gap 32
الأنماط 3 و6 تلوّن الزر بلون المزوّد — وهو ما تشترطه إرشادات Google وApple فعليًا. أسماء المزوّدين لاتينية وتبقى LTR داخل
<bdi>.زر السحب للتأكيد Swipe button
8 variants · 240×56, padding 12, gap 4
تحذير RTL: المقبض يبدأ من اليمين ويتحرك يسارًا. هذا أكثر مكوّن يُبنى بالمقلوب. النمط 6 يعلّم الوجهة أيضًا، فيصبح السحب قابلًا للاكتشاف.
بطاقات التسعير Pricing cards
annotations are labelled: anchor point, favour annual billing, evolving illustrations
الأدوات المستعملة هنا: نقطة الارتساء (الخطة الوسطى مرتفعة وممتلئة) · تفضيل الاشتراك السنوي (مفتاح + شارة خصم) · رسوم متطوّرة (تعقيد الأيقونة يزداد مع الخطة) · الخطة العليا تستبدل السعر بـ«تواصل معنا».
البطاقات Cards
product & horizontal cards
شريط التنقل الجانبي Navigation rail
7 indicators · rail 224/192, item 40, gap 12
في RTL يقع الشريط على اليمين، وينتقل مؤشّر الحافة (النمط 3) إلى اليسار لأنه يحدّ منطقة المحتوى.
القوائم المنسدلة Dropdowns
6 variants · heights 40/48/56
تحذير: النمط 4 بسهمه المزدوج يوحي بتبديل قيمة لا بفتح قائمة — استخدمه فقط إذا كان الحقل يتنقّل بين قيم.