التنقل في استوديو المنتجات
دليل شامل لواجهة استوديو المنتجات V2. تعرف على الأقسام الثلاثة الرئيسية — الشريط الجانبي، لوحة الرسم، والمفتش — بالإضافة إلى شريط الحالة، اختصارات لوحة المفاتيح، وطريقة التنقل بين المنتجات. واجهة الاستوديو مصممة بالعربية أولاً (RTL) لتناسب التجار العرب.
نظرة عامة على الواجهة
ينقسم استوديو المنتجات إلى ثلاث مناطق عمل رئيسية:
| المنطقة | الموقع | الوظيفة |
|---|---|---|
| الشريط الجانبي (Sidebar) | يمين الشاشة | إضافة العناصر، إدارة الحقول والطبقات، المعاينة، والمكتبات |
| لوحة الرسم (Canvas) | وسط الشاشة | معاينة مباشرة للمنتج، شريط الأدوات، التبديل بين المناظر |
| المفتش (Inspector) | يسار الشاشة | تحرير خصائص العنصر المحدد — حقل، طبقة، أو هدف ديناميكي |
في الأعلى، شريط الحالة (Status Bar) يعرض اسم المنتج، حالة المسودة، أزرار الحفظ والتحقق والتفعيل.
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > الواجهة الكاملة UI State: الاستوديو في طور التحرير مع منتج تم إعداد بعض الحقول والطبقات فيه. الأقسام الثلاثة مرئية: الشريط الجانبي (يمين)، لوحة الرسم (وسط)، المفتش (يسار). شريط الحالة في الأعلى. What to Capture: الواجهة الكاملة للاستوديو مع تعليقات توضيحية (Annotations) تشير إلى كل قسم: "الشريط الجانبي"، "لوحة الرسم"، "المفتش"، "شريط الحالة". RTL Note: كامل الواجهة RTL. الشريط الجانبي على اليمين، المفتش على اليسار. جميع النصوص عربية. Size: 1440×900px
الشريط الجانبي (Sidebar)
الشريط الجانبي هو مركز التحكم لإدارة عناصر منتجك المخصص. يقع على الجانب الأيمن من الشاشة ويحتوي على عدة تبويبات:
تبويبات الشريط الجانبي
| التبويب | الأيقونة | الوظيفة |
|---|---|---|
| الحقول (Fields) | قائمة | عرض وإدارة جميع حقول التخصيص — بحث، تحديد، تحرير، ترتيب، حذف |
| الطبقات (Layers) | طبقات متراكبة | عرض وإدارة طبقات الرسم — ترتيب، إظهار/إخفاء، ربط بالحقول |
| الأصول (Assets) | صورة | رفع وتصفح مكتبة الصور والملفات المستخدمة في المنتج |
| المكتبات (Libraries) | كتب | إدارة مجموعات الخيارات والخطوط والألوان القابلة لإعادة الاستخدام |
| المعاينة (Preview) | عين | معاينة ودجت العميل كما سيظهر على المتجر |
في أسفل الشريط الجانبي، زر "+ إضافة عنصر" يفتح قائمة إضافة العناصر (حقول، طبقات، أهداف).
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > الشريط الجانبي > تبويب الحقول UI State: الشريط الجانبي مع تبويب الحقول نشط. يظهر ٣-٤ حقول في القائمة (مثال: "الاسم على الكوب"، "لون البشرة"، "تسريحة الشعر"، "النص المخصص"). شريط بحث في الأعلى. زر "+ إضافة عنصر" في الأسفل. What to Capture: الشريط الجانبي كامل مع قائمة الحقول. إظهار أيقونات التبويبات في الأعلى. RTL Note: الشريط الجانبي RTL. أسماء الحقول عربية من اليمين. أيقونة كل حقل على اليمين. Size: 350×800px
قائمة إضافة العناصر
عند الضغط على "+ إضافة عنصر" تظهر قائمة بأنواع العناصر التي يمكنك إضافتها:
- حقل نصي — إدخال نص من سطر واحد
- حقل نصي متعدد — إدخال نص متعدد الأسطر
- رفع ملف — رفع العميل لملف أو صورة
- اختيار صورة — اختيار من مجموعة صور
- اختيار لون — اختيار من لوحة ألوان
- طبقة نص — موضع عرض النص على الرسم
- طبقة صورة — موضع عرض الصورة المرفوعة على الرسم
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > الشريط الجانبي > قائمة "+ إضافة عنصر" UI State: مربع حوار "إضافة عنصر" مع قائمة أنواع العناصر كاملة. كل نوع يظهر مع أيقونة واسم عربي. What to Capture: مربع الحوار كامل مع جميع أنواع العناصر. RTL Note: القائمة RTL. النص والأيقونات من اليمين. Size: 400×500px
لوحة الرسم (Canvas)
لوحة الرسم هي المساحة المركزية التي تعرض معاينة مباشرة لمنتجك. هنا ترى تأثير كل حقل وطبقة وهدف على الشكل النهائي للمنتج.
مكونات لوحة الرسم
- منطقة المعاينة: تظهر المنتج مع كل الطبقات (نصوص، صور، أهداف ديناميكية) مركبة حسب الإعدادات
- شريط أدوات الرسم: في أعلى لوحة الرسم، يتيح:
- تبديل بين عرض الحاسب وعرض الجوال لمعاينة متجاوبة
- تبديل شبكة المحاذاة (Grid) للمساعدة في تموضع العناصر
- تكبير/تصغير المعاينة
التفاعل مع لوحة الرسم
- تحديد عنصر: اضغط على أي طبقة أو هدف في الرسم لتحديده — ستفتح إعداداته في المفتش
- سحب وإفلات: اسحب الطبقات والأهداف لتغيير موضعها على الرسم
- تغيير الحجم: اسحب زوايا العنصر المحدد لتكبيره أو تصغيره
- تدوير: استخدم مقبض التدوير أعلى العنصر المحدد
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > لوحة الرسم > معاينة مع طبقات UI State: لوحة الرسم تعرض كوب أفاتار مع طبقات: صورة خلفية للكوب، طبقة نص "أحمد" في الموضع المخصص، طبقة صورة لون البشرة. شريط الأدوات في الأعلى. إحدى الطبقات محددة (مؤشر تحديد أزرق). What to Capture: لوحة الرسم كاملة مع شريط الأدوات والطبقات المرئية. إظهار مؤشر التحديد على طبقة. RTL Note: المعاينة نفسها غير RTL (الرسم فني). شريط الأدوات RTL. Size: 800×600px
التبديل بين المناظر (Views)
في أعلى لوحة الرسم، يمكنك التبديل بين مناظر المنتج المختلفة:
- المنظر الرئيسي (Main View): المعاينة الأساسية التي يراها العميل
- منظر الطباعة (Print View): مخصص لملفات الطباعة عالية الدقة
للمزيد عن المناظر وأسطح الإخراج، راجع المناظر وأسطح الإخراج.
المفتش (Inspector)
المفتش هو لوحة تحرير الخصائص على الجانب الأيسر من الشاشة. يتغير محتوى المفتش حسب نوع العنصر المحدد:
| العنصر المحدد | ما يظهر في المفتش |
|---|---|
| حقل نصي | التسمية، النص التوضيحي، مطلوب/اختياري، الحد الأقصى للأحرف، الخط |
| حقل اختيار صورة | التسمية، مطلوب/اختياري، الخيارات والصور، وضع العرض |
| حقل اختيار لون | التسمية، مطلوب/اختياري، لوحة الألوان، وضع العرض |
| حقل رفع ملف | التسمية، مطلوب/اختياري، أنواع الملفات المسموحة، الحجم الأقصى |
| طبقة نص | الموضع (س، ص)، الأبعاد، الدوران، الخط، الحجم، المحاذاة |
| طبقة صورة | الموضع (س، ص)، الأبعاد، الدوران، ملاءمة الكائن |
| هدف ديناميكي | الموضع (س، ص)، الأبعاد، الدوران، ملاءمة الكائن |
أقسام المفتش المشتركة
بغض النظر عن نوع العنصر، يحتوي المفتش على هذه الأقسام المشتركة:
- الإعدادات الأساسية — التسمية، النص التوضيحي، إجباري/اختياري
- قواعد الظهور — شروط إظهار أو إخفاء الحقل بناءً على اختيارات العميل
- ربط المعاينة — ربط الحقل بطبقة على الرسم
- ربط سلة — ربط الحقل بخيارات وسلة (للتسعير والمخزون)
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > المفتش > إعدادات حقل نصي مع جميع الأقسام UI State: المفتش يعرض إعدادات حقل نصي محدد. الأقسام الأربعة ظاهرة: الإعدادات الأساسية، قواعد الظهور، ربط المعاينة، ربط سلة. بعض الأقسام مطوية (Collapsed) وأخرى مفتوحة. What to Capture: لوحة المفتش كاملة مع إظهار الأقسام المختلفة. يفضل إظهار الأقسام بالتناوب (بعضها مفتوح وبعضها مطوي) لتوضيح التنظيم. RTL Note: المفتش RTL. العناوين والمحتويات من اليمين. Size: 400×800px
شريط الحالة (Status Bar)
شريط الحالة في أعلى الشاشة يعرض معلومات مهمة عن حالة المنتج:
| العنصر | الوصف |
|---|---|
| عنوان الاستوديو | "استوديو المنتجات" مع أيقونة |
| اسم المنتج | اسم المنتج الحالي من سلة |
| مؤشر المسودة | نقطة برتقالية تظهر عند وجود تعديلات غير محفوظة |
| حالة المنتج | "مسودة" (Draft) أو "نشط" (Active) |
| زر حفظ | حفظ التعديلات الحالية في المسودة |
| زر تجاهل | التراجع عن التعديلات غير المحفوظة |
| زر تحقق | التحقق من صحة التكوين — يظهر عدد الأخطاء والتحذيرات |
| زر تفعيل | تفعيل التكوين الحالي لينتقل إلى المتجر |
📸 Screenshot Needed
Dashboard Section: استوديو المنتجات > شريط الحالة UI State: شريط الحالة في الأعلى مع اسم المنتج "كوب أفاتار"، مؤشر مسودة برتقالي (تعديلات غير محفوظة)، حالة "مسودة". أزرار حفظ، تجاهل، تحقق (مع عداد "٠ أخطاء")، تفعيل. What to Capture: شريط الحالة كامل بعرض 1440px. إظهار جميع الأزرار والمؤشرات. RTL Note: شريط الحالة RTL. الترتيب: تفعيل ← تحقق ← تجاهل ← حفظ ← اسم المنتج ← العنوان (من اليسار لليمين في RTL). Size: 1440×80px
اختصارات لوحة المفاتيح
| الاختصار | الوظيفة |
|---|---|
Ctrl + S (أو Cmd + S) | حفظ المسودة |
Delete | حذف العنصر المحدد |
Ctrl + Z (أو Cmd + Z) | تراجع عن آخر إجراء |
Ctrl + Shift + Z | إعادة آخر إجراء تراجعت عنه |
Esc | إلغاء التحديد / إغلاق النافذة المنبثقة |
↑ ↓ | تحريك العنصر المحدد في القائمة (عند التركيز على الشريط الجانبي) |
Ctrl + D (أو Cmd + D) | نسخ العنصر المحدد |
التبديل بين المنتجات
للتبديل إلى منتج آخر دون مغادرة الاستوديو:
- اضغط على اسم المنتج في شريط الحالة
- ستظهر قائمة منسدلة بمنتجات متجرك
- اختر المنتج الذي تريد العمل عليه
⚠️ تنبيه: إذا كانت هناك تعديلات غير محفوظة على المنتج الحالي، سيُطلب منك حفظها أو تجاهلها قبل التبديل.
RTL ودعم اللغة العربية
استوديو المنتجات V2 مصمم بالعربية أولاً:
- جميع النصوص والواجهات بالعربية
- تخطيط RTL كامل (الشريط الجانبي يمين، المفتش يسار)
- دعم الخطوط العربية: Amiri، Cairo، Tajawal، Noto Sans Arabic
- أسماء الحقول الحقيقية المستخدمة في أمثلة كوراسا:
لون البشرة،تسريحة الشعر،النص المخصص - الودجت في معاينة العميل يظهر بتخطيط RTL
مقالات ذات صلة
- أول منتج مخصص في ٥ دقائق: جولة عملية سريعة
- دورة المسودة والتحقق والتفعيل: فهم شريط الحالة وأزراره
- إعدادات الحقول المشتركة: تفاصيل أقسام المفتش المشتركة
آخر تحديث: 2026-05-17