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

استخدام Anima Toolkit لتصميم نماذج واقعية بشكل أسرع

النماذج الأولية الثابتة التي تشبه العرض التقديمي تعتبر رائعة لمشاهدة تدفق المنتج. ولكن عندما يتعلق الأمر بالشعور الحقيقي بالمنتج ، وإجراء اختبارات قابلية الاستخدام ، نحتاج عادة إلى أن يكون لدينا مطور في هذه العملية.

النماذج الأولية عالية الدقة تسمح لنا باختبار تجربة المستخدم ، دون المرور بعملية تطوير.
High-Fidelity Prototype - تم إنشاؤه بالكامل في Sketch ، خلال دقائق.

Anima Toolkit هي أداة لإنشاء نماذج تفاعلية عالية الدقة سريعة الاستجابة وتفاعلية ، كل ما في Inside Sketch

أساسيات جدا في 20 ثانية

ابدأ بتثبيت Anima Toolkit لـ Sketch.

  • إنشاء رابط - حدد طبقة ، وانقر فوق "نموذج أولي> تدفق> + رابط" ، واختر لوحة الرسم الهدف. أوه ، يمكنك استخدام روابط Sketch الأصلية أيضًا.
  • معاينة في المستعرض - حدد لوح الرسم المنزلي ، وانقر فوق "معاينة موقع الويب".

يمكنك الآن رؤية تصميمك المباشر في المتصفح. فقاعة.

الأساسيات: إنشاء روابط ومعاينة الموقع

عينة لوحة القيادة

في هذه المقالة ، سنستخدم مثال Dashboard لتجاوز الميزات الرئيسية ، وكيفية إنشاء نماذج أولية رائعة تبدو حقيقية في دقائق.

  • قم بتنزيل ملف رسم هنا.
  • زيارة النموذج الأولي الحية هنا.
https://dashboard-sample.animaapp.io

الروابط

حدد طبقة لإضافتها رابط. انقر فوق الزر Links في لوحة Anima ، ثم حدد اللوحة الفنية الهدف.

إنشاء رابط. يمكنك استخدام الروابط الأصلية للرسم أيضًا.
نصيحة: الروابط داخل الرموز - إذا كان لديك مجموعة متكررة من الروابط ، مثل الشريط الأيسر في لوحة التحكم الرئيسية لدينا ، ضع Symbol Masters على نفس الصفحة مع التصميم الخاص بك. ثم ، ببساطة إنشاء رابط من داخل هذا الرمز. الحيلة هي إنشاء لوحة فنية أخرى ، وتحويلها إلى رمز. سيبقى على نفس الصفحة.

تعيين لوحة فنية منزلية

عند استخدام ألواح رسم متعددة (صفحات مواقع متعددة) ، أخبر Anima صفحتك الرئيسية عن طريق توسيع اللوحة ، وحدد اللوحة الفنية الرئيسية وانقر فوق علامة التبويب Prototype> Flow> Set as Home.

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

معاينة في المتصفح

حتى الآن ، قمنا بتعيين لوحة فنية منزلية وقمنا بإنشاء رابط ، حان الوقت لنرى ذلك. اضغط على "معاينة في المتصفح".

تخطيط استجابة مع علامة التبويب تخطيط

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

إذا لم تكن قد شاهدت أدوات التنسيق الخاصة بنا من قبل (كانت تستخدم التنسيق التلقائي) ، فإليك دليل سريع:

إليك كيفية استخدام الدبابيس لجعل المثال أعلاه سريع الاستجابة. تعمل الدبابيس في داخل Sketch ، وعند المعاينة في المتصفح.

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

التفاعلات

باستخدام محرر التفاعل ، يمكنك إنشاء تفاعلات رائعة داخل Sketch مباشرة. دعنا نبدأ مع مثال التبديل في صفحة "الإعدادات" في Dashboard.

تبديل السلوك على النموذج الأولي لدينا

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

خلق تفاعل من رمز

حدد رمز التبديل ، وانتقل إلى علامة التبويب النموذج الأولي وانقر فوق "إنشاء" في قسم التفاعل.

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

لإضافة إجراء ، اختر الطبقة التي تريد إضافة إجراء إليها ، ثم انقر أيقونة البرق الصغيرة.

باستخدام الجدول الزمني في الأسفل ، يمكنك ضبط التوقيت والمنحنيات لإتقان الرسوم المتحركة الخاصة بك.

تأثير التحويم

بالنسبة إلى هذا التفاعل ، قمنا بإعادة استخدام رمز تفاعلي واحد ، واستخدمنا تخطيات Sketch لتغيير محتوى التصنيف.

باستخدام أداة التفاعل في علامة التبويب Prototype ، قمنا بإنشاء تفاعل من حالتين. أحداث الإجراء التي استخدمناها هنا هي "إدخال الماوس" و "ترك الماوس" لجعلها تعمل على التحويم.

إنشاء تأثير التحويم في محرر التفاعل Anima

الرسوم المتحركة القائمة على الوقت

عند إنشاء تفاعلات باستخدام محرر التفاعلات في Anima ، يكون من المفيد استخدام حدث مؤقت. بمعنى أن المستخدم لا يقوم بأي تفاعل - يبدأ الانتقال من تلقاء نفسه.

في محرر Anima Interaction ، استخدم حدث Timer

إظهار تراكب

تشبه التراكبات الارتباطات إلى حد كبير ، إلا أنها تتمتع بخلفية شفافة وتظهر أعلى الصفحة الأصلية. في مثالنا ، في صفحة الإعدادات ، طريقة الدفع عبارة عن تراكب.

https://dashboard-sample.animaapp.io/settings

تمامًا كما أنشأنا رابطًا ، حدد طبقة لإضافتها ارتباط تراكب. انقر فوق الزر + Link وحدد اللوحة الفنية الهدف. الآن قم بتمييزها على أنها تراكب في لوحة Link

يمكن أن تظهر Anima Links اللوحة الفنية المستهدفة كتراكب عائم

نصائح:
1. تغيير لون خلفية لوح الرسم إلى لون شفاف.
2. عندما يكون على الشاشة الأصلية التمرير ، ولكن لا يحتوي التراكب على أي شيء ، حدد لوح الرسم المتراكب وجعله ثابتًا. هذا بجوار Overlay.

حقل النص المباشر ، الفيديو والمزيد

حدد طبقة النص التي تريد إدخالها. علامة تبويب النموذج الأولي> الطبقات الذكية> النماذج ، حدد إدخال النص.

علامة تبويب النموذج الأولي> الطبقات الذكية> النماذج

تحت Smart-Layers ، يمكنك أيضًا العثور على زر Video ، مما يتيح لك أخذ المستطيلات وجعلها فيديو مدمج. يتم تشغيل مقاطع الفيديو فقط في المتصفح ، وليس في Sketch. تأثيرات التحويم ، الرسوم المتحركة للمدخل ، المواضع الثابتة ، رمز التضمين ممكن أيضًا باستخدام الطبقات الذكية.

تريد معرفة المزيد؟

  • فريق التعاون
  • كيفية تصدير HTML
  • أنيما صفحة وثائق كاملة: docs.animaapp.com
  • المزيد من الدروس في مركز الدعم الخاص بنا

هذا كل شيء في البرنامج التعليمي اليوم ، نأمل أن تكون قد أعجبت به.

انضم إلى المناقشة ، أو اظهر تصميماتك على Facebook أو Twitter.
فريق أنيما