إنتقل إلى المحتوى الرئيسي

المعاينة المباشرة والتموضع

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

كيف تعمل المعاينة المباشرة​

المعاينة المباشرة تعكس حالتين:

  1. في الاستوديو: تظهر الطبقات كما ضبطتها — النصوص التجريبية، الصور الافتراضية
  2. في معاينة العميل: تظهر كما سيراها العميل — النص الذي يدخله، الخيارات التي يختارها

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

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > معاينة مباشرة UI State: لوحة الرسم تظهر كوبًا مع عدة طبقات مرئية: نص "أحمد" على الكوب، صورة لون بشرة، صورة تسريحة شعر. إحدى الطبقات محددة بإطار أزرق مع مقابض. What to Capture: لوحة الرسم الكاملة مع جميع الطبقات. RTL Note: لوحة الرسم فنية. النص العربي RTL. Size: 800×600px

تموضع العناصر​

السحب والإفلات (Drag and Drop)​

  1. انقر على العنصر في لوحة الرسم لتحديده
  2. اسحب العنصر إلى الموضع الجديد
  3. أفلت — العنصر يستقر في موضعه الجديد
  4. الإحداثيات (س، ص) تتحدث تلقائيًا في المفتش

تحريك دقيق بمفاتيح الأسهم​

  • مفاتيح الأسهم (↑ ↓ ← →): تحريك بمقدار ١ بكسل
  • Shift + مفاتيح الأسهم: تحريك بمقدار ١٠ بكسل

الإحداثيات في المفتش​

لضبط دقيق، أدخل الإحداثيات مباشرة في المفتش:

  • س (X): المسافة من الحافة اليسرى للوحة الرسم
  • ص (Y): المسافة من الحافة العلوية للوحة الرسم
  • العرض (Width): عرض العنصر بالبكسل
  • الارتفاع (Height): ارتفاع العنصر بالبكسل

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > سحب طبقة UI State: لقطة متحركة (أو لقطة ثابتة مع سهم) تظهر سحب طبقة نص من موضع إلى آخر على الكوب. مؤشر الفأرة + العنصر يتحرك. What to Capture: توضيح عملية السحب والإفلات. RTL Note: لوحة الرسم فنية. Size: 600×400px

التحجيم (Resize)​

تغيير حجم العنصر​

  1. حدد العنصر على لوحة الرسم
  2. اسحب مقابض الزوايا (المربعات البيضاء في الزوايا)
  3. اسحب للداخل: تصغير. اسحب للخارج: تكبير

الحفاظ على نسبة الأبعاد​

  • اسحب مقبض الزاوية مع Shift: يحافظ على نسبة العرض إلى الارتفاع
  • اسحب مقبض الزاوية بدون Shift: تغيير حر

التحجيم من المفتش​

أدخل العرض والارتفاع مباشرة في المفتش للتحكم الدقيق.

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > تحجيم طبقة UI State: طبقة محددة مع مقابض الزوايا ظاهرة. المؤشر على أحد المقابض. خطوط إرشاد (Guides) تظهر الأبعاد. What to Capture: طبقة مع مقابض التحجيم. RTL Note: لوحة الرسم فنية. Size: 500×400px

التدوير (Rotate)​

تدوير العنصر​

  1. حدد العنصر على لوحة الرسم
  2. ابحث عن مقبض التدوير (دائرة صغيرة أعلى العنصر)
  3. اسحب المقبض يمينًا أو يسارًا للتدوير
  4. أو أدخل زاوية التدوير مباشرة في المفتش (بالدرجات)

زوايا شائعة​

  • ٠°: الوضع الطبيعي
  • ٩٠°: تدوير ربع دورة
  • ١٨٠°: مقلوب
  • ٢٧٠°: تدوير ثلاثة أرباع
  • ٤٥°: مائل

تكييف النص تلقائيًا (Text Auto-Sizing)​

عند تفعيل الحجم التلقائي لطبقة نص:

  • النص القصير: يظهر بحجم كبير يملأ المساحة
  • النص الطويل: يُصغر تلقائيًا ليلائم عرض الطبقة
  • النص الطويل جدًا: يُصغر لأدنى حد ثم يُقطع (حسب الإعدادات)

إعدادات الحجم التلقائي​

  • الحجم الأقصى: أكبر حجم يمكن أن يصل إليه النص
  • الحجم الأدنى: أصغر حجم قبل أن يبدأ القطع
  • تفعيل/تعطيل: مفتاح في إعدادات طبقة النص

⚠️ قريبًا — بعض خيارات التحكم المتقدمة في الحجم التلقائي قيد التطوير

شبكة المحاذاة (Grid)​

للمساعدة في تموضع العناصر بدقة:

  1. في شريط أدوات لوحة الرسم، فعّل شبكة المحاذاة (Grid)
  2. تظهر شبكة من الخطوط المنقطة على لوحة الرسم
  3. العناصر "تلتصق" بنقاط الشبكة عند السحب (Snap to Grid)

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > شبكة المحاذاة مفعلة UI State: لوحة الرسم مع شبكة منقطة ظاهرة. طبقة يتم سحبها وتلتصق بنقاط الشبكة. What to Capture: لوحة الرسم مع الشبكة. RTL Note: لوحة الرسم فنية. Size: 600×400px

معاينة متجاوبة: حاسب وجوال​

التبديل بين وضعي العرض​

في شريط أدوات لوحة الرسم:

  • 🖥 حاسب: عرض بحجم سطح المكتب (افتراضي)
  • 📱 جوال: عرض بحجم شاشة الجوال

لماذا المعاينة المتجاوبة مهمة​

  • ٧٠٪+ من زوار متجر سلة يستخدمون الجوال
  • الودجت يظهر بشكل مختلف على الشاشات الصغيرة
  • تموضع العناصر قد يختلف بين الحاسب والجوال

⚠️ تنبيه: المعاينة في الاستوديو تقريبية لحجم الجوال. اختبر الودجت الفعلي على هاتف حقيقي للتأكد.

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة الرسم > وضع الجوال UI State: لوحة الرسم في وضع الجوال — أبعاد أضيق (٣٧٥×٦٦٧ بكسل). العناصر معاد تموضعها لتناسب العرض الأضيق. What to Capture: لوحة الرسم في وضع الجوال. RTL Note: لوحة الرسم فنية. Size: 400×700px

معاينة العميل​

زر "معاينة العميل" في الشريط الجانبي يفتح ودجتًا مصغرًا يظهر كيف سيرى العميل واجهة التخصيص:

  1. اختر قيمًا في الحقول (كما يفعل العميل)
  2. شاهد التغييرات مباشرة على المعاينة
  3. اختبر قواعد الظهور (هل تظهر/تختفي الحقول بشكل صحيح؟)
  4. اختبر التحقق (هل تمنع الحقول المطلوبة الإضافة للسلة؟)

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > الشريط الجانبي > تبويب معاينة العميل UI State: معاينة العميل تظهر الودجت كما سيراه العميل. الحقول: "الاسم على الكوب" (مدخل: أحمد)، "لون البشرة" (مختار: قمحي)، "تسريحة الشعر" (مختار: طويل). زر "أضف إلى السلة" معطل (حقل مطلوب غير مكتمل). What to Capture: معاينة العميل كاملة. RTL Note: الودجت RTL. Size: 500×600px

نصائح وأفضل الممارسات​

  1. استخدم الشبكة للمحاذاة الدقيقة: خاصة عند تموضع عدة عناصر بجانب بعضها
  2. اختبر على الجوال دائمًا: معظم العملاء على الجوال
  3. اقفل العناصر بعد ضبطها: يمنع التحريك غير المقصود
  4. استخدم الإحداثيات الرقمية: عندما تحتاج دقة متناهية
  5. فعّل الحجم التلقائي للنصوص: يضمن ظهور النص كاملاً
  6. اختبر النصوص الطويلة والقصيرة: "أحمد" و"عبدالرحمن" يجب أن يظهرا بشكل جيد

مقالات ذات صلة​

آخر تحديث: 2026-05-17

آخر تحديث في