نظرة عامة على مصمم واجهة المستخدم
شرح تفصيلي لواجهة AppMaster UI Designer لبناء تطبيقات الويب.
بعد إنشاء التطبيق بنجاح، سيتم توجيهك إلى علامة التبويب "مصمم واجهة المستخدم".
تم تصميم مصمم واجهة المستخدم في AppMaster ليكون سهل الاستخدام، مما يسمح لك بإنشاء صفحات تطبيقات ويب مذهلة دون عناء.
من خلال واجهة السحب والإفلات البديهية، يمكنك تصميم صفحات الويب وملؤها بالمحتوى بسلاسة، مما يلغي الحاجة إلى مهارات البرمجة المتقدمة.
ينقسم مصمم واجهة المستخدم إلى أربعة أقسام أساسية ليتفاعل معها المستخدمون:
- شريط الأدوات الأيسر
- اللوحة العلوية
- اللوحة السفلية
- منطقة القماش
- لوحة الخصائص
شريط الأدوات الأيسر
يوفر شريط الأدوات الموجود على الجانب الأيسر أدوات لتنظيم موقع الويب الخاص بك. من خلال النقر على الأيقونات الموجودة أعلى هذا الشريط الجانبي، سيتم الكشف عن اللوحات التالية:
- قائمة عناصر واجهة المستخدم
- شجرة العناصر
- شجرة الصفحات
- شجرة التخطيطات
- مدير الأصول
قائمة عناصر واجهة المستخدم (الاختصار: 1 )
توفر قائمة عناصر واجهة المستخدم جميع العناصر التي يمكن إضافتها إلى منطقة اللوحة القماشية عن طريق السحب من اللوحة.
يتم تنظيم عناصر واجهة المستخدم في فئات بناءً على الغرض منها، مما يسهل التنقل والعثور على الأداة المناسبة لتطبيقك.
للانتقال سريعًا إلى العنصر، يمكنك استخدام شريط البحث الموجود أعلى اللوحة.
شجرة العناصر (الاختصار: 2 )
من شجرة العناصر ، يمكنك إدارة وتنظيم جميع المكونات الموضوعة على الصفحة المحددة لتطبيق الويب الخاص بك.
هنا، يمكنك التفاعل مع هذه العناصر:
- نقل العناصر بين الشجرة عن طريق السحب،
- إعادة تسمية المكونات،
- تغيير حالة رؤية العناصر الموجودة على اللوحة القماشية (إخفاء/إظهار).
استخدم شريط البحث الموجود أعلى اللوحة لعنصر البحث السريع في الشجرة.
شجرة الصفحات (الاختصار: 3 )
تسمح لك شجرة الصفحات بتنظيم وإدارة صفحات موقعك. يمكنك إنشاء صفحات أو مجلدات جديدة هنا.
في "شجرة الصفحات"، يمكنك تكرار أو حذف الصفحات أو المجلدات.
استخدم شريط البحث الموجود أعلى اللوحة لصفحة البحث السريع أو المجلد الموجود في الشجرة.
قائمة التخطيطات (الاختصار: 4 )
تساعد شجرة التخطيطات في إدارة تخطيطات صفحتك. كما هو الحال في "شجرة الصفحات"، يمكنك تكرار التخطيطات أو حذفها.
استخدم شريط البحث الموجود أعلى اللوحة للحصول على تخطيط بحث سريع في الشجرة.
مدير الأصول (الاختصار: 5 )
يسهل مدير الأصول تحميل الأصول وتنظيمها (مثل المستندات والصور والرسوم المتحركة) لاستخدام موقع الويب الخاص بك.
سيتم الاحتفاظ بجميع الأصول التي تقوم بتحميلها أثناء التطوير في مدير الأصول ويمكن إعادة استخدامها دون إعادة التحميل.
يمكنك أيضًا إزالة أي أصل لم تعد بحاجة إليه.
الشريط العلوى
يوفر الشريط العلوي مجموعة إضافية من إعدادات العرض. بدءًا من الجانب الأيسر، بجوار زر القائمة، وامتدادًا إلى اليمين، لديك مجموعة الأدوات التالية:
- المستند الحالي: يعرض الصفحة أو التخطيط الذي تعمل عليه حاليًا.
- نقاط التوقف: تمكّنك أيقونات نقاط التوقف من التبديل بين نقاط التوقف المختلفة لمعاينة وتعديل كيفية ظهور موقعك على أحجام الأجهزة المختلفة.
- التراجع والإعادة: يتيح لك زرا التراجع والإعادة عكس الإجراءات التي قمت بها في المصمم أو إعادة تطبيقها، مثل تطبيق نمط أو إزالة عنصر. تتوفر أيضًا اختصارات: للتراجع عن الإجراء -
CRTL/⌘+Zولإعادة الإجراء -CTRL/⌘+SHIFT+Z.
شريط أسفل
تسمح لك اللوحة السفلية بتكبير عرض الصفحة أو تغيير حجمه.
على الجانب الأيسر من اللوحة، يمكنك ضبط دقة الصفحة المخصصة عن طريق ضبط ارتفاع وعرض اللوحة القماشية الخاصة بك.
على الجانب الأيمن يمكنك التحكم في المقياس:
- التكبير أو التصغير
- ضبط المقياس بالنسب المئوية
- ضبط الحجم الفعلي
- ملائمة النافذة الحالية للمنطقة المرئية
اللوحة القماشية
اللوحة القماشية هي مساحة العمل التفاعلية الخاصة بك. هذا هو المكان الذي يمكنك فيه التفاعل مع مكونات الصفحة. يمكنك تحديد العناصر وتغيير موضعها وتحرير المحتوى مباشرة على الصفحة.
يمكنك أيضًا نسخ ( CRTL/⌘+C ) ولصق عناصر ( CRTL/⌘+V ) بين الصفحات والتطبيقات أو تكرار العناصر داخل الصفحة الحالية ( CRTL/⌘+D ).
لوحة الخصائص
تسمح لك لوحة الخصائص الموجودة على الجانب الأيمن من المصمم بتخصيص المظهر المرئي وسلوك العنصر أو التخطيط أو الصفحة المحددة.
تتكون لوحة الخصائص من 4 لوحات رئيسية:
- لوحة المظهر
- لوحة الخيارات الإضافية (اختياري)
- لوحة استعلامات الوسائط
- لوحة منطق الأعمال
في رأس اللوحة، يمكنك إعادة تسمية العنصر المحدد من خلال النقر على اسم العنصر، أو قراءة الوصف، أو حذف العنصر من خلال النقر على أيقونة سلة المهملات.
لوحة المظهر
تسمح لك لوحة المظهر بالوصول إلى المحتوى والخصائص الثابتة المعروضة للعنصر المحدد. يمكنك إدخال هذه القيم أو تحديدها في الحقول المقابلة لها، وسيتم تطبيق الأنماط على الفور على العناصر الموجودة على اللوحة القماشية.
إذا لم يتم تحديد أي عناصر على اللوحة القماشية، فستعرض هذه اللوحة إعدادات الصفحة أو التخطيط الحالي.
لوحة الخيارات الإضافية
لوحة الخيارات الإضافية مخصصة للعناصر التي تتطلب بيانات أو خيارات إعداد إضافية.
يمكنك تعيين مصدر البيانات أو إدخال الخيارات يدويًا اعتمادًا على المكون المحدد.
لوحة استعلامات الوسائط
تمكنك لوحة استعلامات الوسائط من تجاوز خصائص العنصر لكل نقطة توقف محددة.
لوحة منطق الأعمال
توفر لوحة Business Logic Panel جميع المشغلات الخاصة بعنصر ما وتسمح لك بإنشاء تفاعل العنصر عند تشغيل المشغل.