ما هو أداة التخطيط الهيكلي؟

ارسم تخطيطات الصفحات ونماذج واجهات المستخدم في ثوانٍ. اسحب عناصر واجهة مستخدم شائعة — أزرار، كتل نصية، صور، حقول إدخال — إلى لوحة الرسم، ثم صدّرها بصيغة PNG أو احفظها كـ JSON لمتابعة التعديل لاحقاً.

اللوحة مبنية على fabric.js وتأتي بمجموعة عناصر كاملة: المستطيلات، كتل النص، الأزرار، حوامل الصور، حقول الإدخال، شرائط التنقّل، البطاقات، مربعات التحديد، القوائم المنسدلة، مجموعات الاختيار، أشرطة التقدّم، المنزلقات، وملاحظات لاصقة للتعليقات. التكبير وملاءمة الشاشة يبقيان التصاميم المزدحمة واضحة، ويمكنك تأطير اللوحة بعرض الهاتف أو اللوحي أو سطح المكتب. التراجع والإعادة والتجميع وفك التجميع وترتيب الطبقات كلها متاحة من لوحة المفاتيح. صدّر PNG أو SVG للمشاركة، أو ملف JSON يعيدك إلى الحالة نفسها للتحرير لاحقاً.

كيفية الاستخدام

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

متى تستخدم

• رسم ثلاث متغيّرات لشاشة واحدة في خمس عشرة دقيقة قبل اجتماع مراجعة مع الشركاء.
• إرسال فكرة تخطيط في محادثة Slack بدلاً من شرح الشكل بالكلمات.
• شرح الفرق بين العمل بدقة منخفضة وعالية لمصمم جديد في الفريق.

النتيجة

مدير منتج يرسم شاشة تسجيل الدخول لتطبيق جوال مع حاوية الشعار، وحقلي البريد الإلكتروني وكلمة المرور، وزر تسجيل الدخول، ورابط 'نسيت كلمة المرور' — ثم يصدر الصورة بصيغة PNG لمشاركتها في قناة Slack.

الأسئلة الشائعة

ما الفرق بين هذه الأداة وFigma؟

Figma مخصّصة للعمل بدقة عالية ومكوّنات قابلة لإعادة الاستخدام ونماذج تفاعلية وتعاون جماعي. هذه الأداة منخفضة الدقّة عمداً: مجموعة صغيرة من الأشكال الأساسية ودون تفاصيل تصميمية تسرقك. تنهي فكرة الشاشة بدقائق، والمخرَج هدفه توضيح التفكير لا التسليم.

كيف أنقل العناصر بكسلاً بكسل؟

اختر العنصر واستخدم مفاتيح الأسهم لتحريكه بمقدار بكسل واحد، أو امسك Shift مع السهم للقفز بمقدار عشرة بكسلات. لتغيير الحجم اسحب من ركن العنصر، أو امسك Shift أثناء السحب للحفاظ على النسب.

هل يمكنني نسخ عناصر من ملف إلى آخر؟

صدّر الملفين إلى JSON، ثم في محرّر نصوص انسخ مدخلات العناصر التي تريدها من الأول إلى الثاني، وأعد الاستيراد. لكن أغلب المستخدمين يكتفون بـ Ctrl+D داخل الملف نفسه بدل هذه الخطوات.

لماذا يكون JSON أحياناً أكبر من PNG؟

ملف JSON يحفظ كل خاصية لكل شكل (الموضع، التعبئة، الحدّ، الخط، النص) كنص قابل للقراءة، بينما PNG صورة نقطية مستوية. في تصميم مكثّف بالنص قد يتفوّق JSON بالحجم على PNG، لكنه الوحيد الذي يسمح لك بمواصلة التحرير.

هل يمكن إضافة أشكال مخصّصة خاصة بي؟

ليس مباشرة داخل الأداة، لكن يمكنك تجميع الأشكال الأساسية (Ctrl+G) لتكوين وحدة قابلة لإعادة الاستخدام، مثل شريط بحث أو شريط تبويب. احفظ JSON، انسخ تلك المجموعة، والصقها في ملفات جديدة لتكون مكتبتك المصغّرة.

أدوات ذات صلة