كيفية إنشاء صفحة مقصودة مستجيبة مع رسم

مجموعة أدوات Anima 101

تتيح لك مجموعة أدوات Anima نشر مواقع الويب مباشرةً من Sketch ، دون الحاجة إلى الترميز. في مهمتنا المتمثلة في تمكين المصممين ، ندفع باستمرار المغلف على ما يمكن للمصممين تحقيقه دون كتابة التعليمات البرمجية.

إنشاء نماذج تفاعلية عالية الدقة سريعة الاستجابة وتفاعلية ، وتصدير HTML. كل من الداخل رسم

على هذا المنصب

  • ‍ إنشاء صورة البطل
  • تصميم ألواح الرسم للجوال والكمبيوتر اللوحي وسطح المكتب مع نقاط التوقف
  • أضف نموذجًا للعملاء للوصول إليه
  • نشر تصميمنا كموقع على شبكة الإنترنت
  • قم بتنزيل الملفات

هيا نبدأ!

بحاجة الى بطل؟

صورة جميلة من طرف إلى طرف في أعلى صفحتك تحدد الأجواء. أسهل طريقة لتحقيق ذلك هي وضع صورة واسعة للغاية ، وتفيض اللوحة الفنية وتوسيطها.

إذا كنت تريد أن تمتد ، فراجع نصائح الخروج في الأسفل.

تصميم استجابة

في Anima ، كل لوحة فنية هي صفحة ويب. من أجل إنشاء تصميم متجاوب يناسب كل من الأجهزة المحمولة وسطح المكتب ، سنستخدم ميزة Breakpoints.

سنختار إحدى اللوحات الفنية ، ضمن علامة تبويب النموذج الأولي> تدفق ، انقر فوق الزر + نقاط التوقف ووضع علامة في الثانية لنقول أنها في الواقع نفس صفحة الويب (ولكن لأحجام مختلفة للشاشة).

توصيل لوحتي رسم بنفس صفحة الويب (بأحجام مختلفة)

قاعدة الإبهام هنا هي أن اللوحة الفنية لن تتقلص أبدًا ، بل تنمو فقط إلى العرض التالي للوحة الفنية.

على سبيل المثال ، إذا قمت بتعيين عرض Artboards على 320 بكسل و 768 بكسل و 1024 بكسل:

  • لعرض المتصفح أقل من 320 بكسل ، سنحصل على تمرير أفقي.
  • 320-767 سوف تظهر اللوحة الفنية بعرض 320 بكسل.
  • سيعرض 768–1023 اللوحة الفنية بعرض 768 بكسل.
  • 1024+ سيعرض اللوحة الفنية بعرض 1024.
ستتغير اللوحة الفنية المعروضة بعرض المستعرض 1023 بكسل

من أجل تثبيت الأشياء على الجوانب أو تعيين قواعد أكثر تعقيدًا حول كيفية ظهور لوحة فنية 320 بكسل عند عرضها على شاشة 480 بكسل ، استخدم Layout Tab> Pins.

نماذج - تحدث إلى المستخدمين

في الغالب ، تحتوي الصفحات المقصودة على جهة اتصال أو نموذج اشتراك. من السهل للغاية صنع واحدة مع أنيما.

  • ابدأ بتصميمه - إدخال النص (أو متعددة) وزر الإرسال.
  • استخدم علامة التبويب Prototype> Smart Layers> Forms لجعلها مدخلات وزر إرسال.
إنشاء نموذج - حدد طبقات نصية لتكون الإدخال ، ثم طبقة لتكون زر إرسال
  • عند إجراء زر إرسال ، يمكنك تحديد ما يحدث مع البيانات المرسلة - إرسالها إليك بالبريد الإلكتروني و / أو إنشاء جدول بيانات.
  • يمكنك أيضًا تعيين صفحات "شكرًا لك" و "فشل".

المهم - تعيين منزلك

عند استخدام ألواح رسم متعددة (صفحات مواقع متعددة) ، أخبر Anima صفحتك الرئيسية بتوسيع اللوحة ، وحدد اللوحة الرئيسية وعلامة تبويب النموذج الأولي> تدفق> تعيين كصفحة رئيسية.

حدد لوحة فنية ، علامة تبويب النموذج> تدفق> تعيين كصفحة رئيسية

معاينة!

هل أنت مستعد للجزء الممتع؟ انقر فوق معاينة في المستعرض لمشاهدتها تظهر في الحياة

مشاهدة التصميم الخاص بك يصبح صفحة ويبانقر لرؤية النتيجة المباشرة

هل أنت جاهز للمشاركة؟

في المستعرض ، انقر فوق مزامنة لإضافته إلى مشروعك - المسودات خاصة للسماح لك بتلميع موقع الويب الخاص بك دون مشاركته نصف المخبوزات.

انقر فوق مزامنة لمزامنة المسودة الخاصة بك في المشروعانقر على قم بدعوة أصحاب المصلحة أو المشاركة مع الفريق أو الحصول على رابط عام

نصائح

  • اجعل امتداد بطلك بدلاً من تجاوز السعة باستخدام Layout> Pins:
اختياري: دبوس بطل لجعله تمتد
  • يتم تصدير الصور أثناء تعريفك لها في قسم "Exportable" ، بحيث يمكنك تعيين مجموعة على أنها "Exportable" لتسطيحها. ويمكنك تعيين بعض الصور لتكون JPG أو SVG أو PNG وفقًا لاحتياجاتك.
على سبيل المثال ، صورة البطل هي صورة كبيرة ، تتمثل أفضل الممارسات في استخدام تنسيق JPG مع 1x.
  • عادة ما تعمل التدرجات والمتجهات بشكل أفضل مع SVG أو PNG إذا فشل Sketch في تصدير SVG كما تريد.

التنزيلات

  • أنيما رسم البرنامج المساعد
  • ملف رسم
  • الخطوط (مونتسيرات و رالي)
  • تم التقاط جميع الصور من unsplash.com

أعرف أكثر

  • كيفية نشر موقع الويب الخاص بك
  • كيفية تصدير HTML
  • صفحة وثائق Anima: docs.animaapp.com
إنشاء نماذج تفاعلية عالية الدقة سريعة الاستجابة وتفاعلية ، وتصدير HTML. كل من الداخل رسم

للمناقشة ، لا تتردد في الانضمام إلى مجموعة Facebook الخاصة بنا
من أصدقائك في أنيما