عناصر واجهة الجوال¶
نظرة عامة¶
تُستخدم عناصر واجهة الجوال لإعداد كتل المحتوى المعروضة على الشاشة الرئيسية لتطبيق الجوال. أنشئ تجربة جوال مخصصة باستخدام الشرائح المتحركة، وشبكات التصنيفات، ومعارض المنتجات، واللافتات، والمزيد.
الوصول إلى عناصر واجهة الجوال¶
انتقل إلى: الإعدادات > عناصر واجهة الجوال من القائمة الجانبية
قائمة العناصر¶
تعرض الصفحة الرئيسية جميع العناصر المُعدّة في جدول قابل لإعادة الترتيب.
أعمدة القائمة¶
| العمود | الوصف |
|---|---|
| الترتيب | موضع العنصر (اسحب لإعادة الترتيب) |
| النوع | نوع العنصر معروض كشارة ملونة |
| العنوان | عنوان العنصر (إن وُجد) |
| مرئي | زر تبديل يشير إلى ما إذا كان العنصر معروضاً |
| آخر تحديث | تاريخ آخر تعديل |
إعادة ترتيب العناصر¶
اسحب العناصر من مقبض الترتيب لإعادة ترتيب مواضعها على الشاشة الرئيسية لتطبيق الجوال. تُحفظ التغييرات تلقائياً.
الفلاتر¶
- النوع: تصفية حسب نوع العنصر
- مرئي: تصفية حسب حالة الظهور
إنشاء عنصر¶
انقر على "عنصر واجهة جوال جديد" لإنشاء عنصر جديد.
إعداد العناصر¶
الإعدادات الأساسية¶
تشترك جميع العناصر في هذه الإعدادات الأساسية:
نوع العنصر مطلوب¶
اختر نوع كتلة المحتوى:
| النوع | الوصف |
|---|---|
| شريحة متحركة | عرض شرائح صور |
| التصنيفات | شبكة أو قائمة تنقل التصنيفات |
| المنتجات | قسم عرض المنتجات |
| لافتة | صورة ترويجية مع نص اختياري |
| نص | محتوى نصي مخصص |
| فاصل مسافة | مسافة عمودية بين العناصر |
| فاصل خطي | خط فاصل مرئي |
مرئي¶
- النوع: زر تبديل
- الافتراضي: مُفعّل
- الغرض: إظهار أو إخفاء العنصر في تطبيق الجوال
الترتيب¶
- النوع: إدخال رقمي
- الافتراضي: 0
- الغرض: موضع العنصر (الأرقام الأصغر تظهر أولاً)
أنواع العناصر¶
عنصر الشريحة المتحركة¶
أنشئ عرض شرائح صور للعروض الترويجية، أو المنتجات المميزة، أو الإعلانات.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| تشغيل تلقائي | التنقل تلقائياً بين الشرائح | مُفعّل |
| الفاصل الزمني (مللي ثانية) | الوقت بين الشرائح بالمللي ثانية | 4000 |
| الارتفاع (بكسل) | ارتفاع الشريحة بالبكسل | 180 |
الصور: تأتي صور الشرائح من عناصر الشرائح.
عنصر التصنيفات¶
اعرض تصنيفات المنتجات للتنقل السهل.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| عنوان القسم | نص العنوان فوق التصنيفات | "تسوق حسب التصنيف" |
| وضع العرض | نمط التخطيط | أفقي |
| الحد الأقصى | أقصى عدد من التصنيفات للعرض | 8 |
| المميزة فقط | عرض التصنيفات المميزة فقط | معطّل |
| إظهار عرض الكل | عرض رابط "عرض الكل" | مُفعّل |
| أعمدة الشبكة (الجوال) | الأعمدة على الهواتف (وضع الشبكة) | 4 |
| أعمدة الشبكة (التابلت) | الأعمدة على الأجهزة اللوحية (وضع الشبكة) | 6 |
أوضاع العرض:
- أفقي: قائمة أفقية قابلة للتمرير
- شبكة: تخطيط شبكي ثابت
عنصر المنتجات¶
اعرض المنتجات على الشاشة الرئيسية.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| عنوان القسم | نص العنوان فوق المنتجات | "منتجات مميزة" |
| مصدر البيانات | أي المنتجات سيتم عرضها | المميزة |
| التصنيف | تصنيف محدد (إذا كان المصدر "تصنيف") | - |
| وضع العرض | نمط التخطيط | أفقي |
| الحد الأقصى | أقصى عدد من المنتجات للعرض | 5 |
| إظهار عرض الكل | عرض رابط "عرض الكل" | مُفعّل |
مصادر البيانات:
| المصدر | الوصف |
|---|---|
| المميزة | المنتجات المحددة كمميزة |
| وصل حديثاً | المنتجات المضافة مؤخراً |
| الأكثر مبيعاً | المنتجات الأكثر مبيعاً |
| عروض | المنتجات المخفضة |
| تصنيف | منتجات من تصنيف محدد |
عنصر اللافتة¶
اعرض لافتات ترويجية مع صور ونص/أزرار اختيارية.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| صورة اللافتة | الصورة الترويجية | - |
| نوع العرض | كيفية حساب العرض | تلقائي |
| قيمة العرض | العرض بالبكسل أو النسبة المئوية | - |
| العنوان | عنوان اللافتة | - |
| العنوان الفرعي | النص الداعم | - |
| نص الزر | نص زر الدعوة للإجراء | - |
| رابط الزر | الرابط عند النقر على الزر | - |
| لون الخلفية | لون خلفية اللافتة | - |
أنواع العرض:
- تلقائي: عرض كامل
- نسبة مئوية: % من عرض الشاشة
- بكسل: عرض ثابت بالبكسل
عنصر النص¶
أضف محتوى نصي مخصص إلى الشاشة الرئيسية.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| المحتوى | النص المراد عرضه | - |
| المحاذاة | محاذاة النص | يسار |
| النمط | تنسيق النص | عادي |
المحاذاة: يسار، وسط، يمين
الأنماط:
- عادي: نص فقرة قياسي
- عنوان: نص كبير وعريض
- تعليق: نص صغير وباهت
عنصر فاصل المسافة¶
أضف مسافة عمودية بين العناصر.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| الارتفاع (بكسل) | ارتفاع المسافة بالبكسل | 24 |
عنصر الفاصل الخطي¶
أضف خط فاصل مرئي بين الأقسام.
الإعدادات:
| الإعداد | الوصف | الافتراضي |
|---|---|---|
| الهامش العلوي (بكسل) | المسافة فوق الفاصل | 16 |
| الهامش السفلي (بكسل) | المسافة أسفل الفاصل | 16 |
مثال على تخطيط الشاشة الرئيسية¶
إعداد نموذجي للشاشة الرئيسية للجوال:
- شريحة متحركة - عروض ترويجية رئيسية (الترتيب: 1)
- التصنيفات - تسوق حسب التصنيف (الترتيب: 2)
- فاصل مسافة - مسافة 16 بكسل (الترتيب: 3)
- المنتجات - منتجات مميزة (الترتيب: 4)
- لافتة - لافتة ترويجية (الترتيب: 5)
- المنتجات - وصل حديثاً (الترتيب: 6)
- فاصل خطي - فاصل مرئي (الترتيب: 7)
- نص - معلومات الاتصال أو إعلان (الترتيب: 8)
أفضل الممارسات¶
الأداء¶
- حدد عدد المنتجات/التصنيفات لكل عنصر
- استخدم صوراً بأحجام مناسبة للافتات
- لا تفرط في عدد العناصر
تجربة المستخدم¶
- ضع المحتوى الأهم أولاً
- استخدم الفواصل للفصل المرئي
- حافظ على فاصل زمني معقول للتشغيل التلقائي (3-5 ثوانٍ)
- اختبر على أحجام أجهزة مختلفة
المحتوى¶
- حدّث صور الشرائح بانتظام
- اعرض المنتجات/التصنيفات الموسمية
- حافظ على اللافتات حديثة وذات صلة
حفظ التغييرات¶
تُحفظ التغييرات عند إنشاء أو تحرير العناصر الفردية. إعادة الترتيب تُحفظ تلقائياً.
الأقسام ذات الصلة¶
- إعدادات تطبيق الجوال - أيقونة التطبيق ونظام الألوان
- عناصر الشرائح - إدارة صور الشرائح
- التصنيفات - إدارة تصنيفات المنتجات
- المنتجات - إدارة المنتجات