30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Atomic
Webdesign

تعلم كيفية إنشاء نموذج في ATOMIC

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Maiszad (you can also view the original English article)

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

لدينا النموذج

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

في ما يلي عرض توضيحي لما سننشئه:

أصول البرنامج التعليمي

هناك بعض الأشياء التي ستحتاج إليها لمتابعة الأمر:

  1. حساب Atomic : ابدأ باستخدام إصدار تجريبي مجاني (هناك أيضًا خطة مجانية).
  2. أصول التصميم : هذا هو الملف الذي ستجد فيه أصول التصميم وتنشئ نموذجك الأولي.
  3. مصدر البيانات : ملف ورقة Google يحتوي على البيانات التي سنستخدمها في النموذج الأولي.
  4. Atomic iOS App : قم بتنزيل التطبيق من App Store لاختبار نموذجك الأولي على هاتفك.
httpsatomicio
atomic.io

إذا كان لديك سؤال في أي وقت طوال البرنامج التعليمي ، فلا تتردد في الاتصال بي ( femkesvs ) ، أو فريق الدعم الذري ( we_are_atomic ) على Twitter.

لنذهب!

1. قم بنسخ الأصول إلى حسابك

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

copygif

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

2. قم بتحميل البيانات إلى Atomic

قبل البدء في إنشاء نموذجنا الأولي ، سنحتاج أولاً إلى إضافة مصدر البيانات إلى Atomic. لقد وضعت ورقة Google مع بعض البيانات الأساسية التي سنستخدمها في النموذج الأولي.

يمكنك الوصول إلى البيانات هنا . عند فتح مصدر البيانات ، توجه إلى ملف> إضافة إلى ملفاتي (ستحتاج إلى حساب Google لهذا).

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

نحن جاهزون!

3. إنشاء دولة التحميل

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

أولاً ، حدد مكون التحميل من صفحة الأصول لنسخ (CMD-C ولصق (CMD-V) إلى الصفحة 1. سيكون كبيرًا ، بدلاً من تغيير حجمه ، ضعه في موضع البداية.

ثم انسخ عنصر التحميل الذي وضعته للتو على الصفحة 1 ، هذه المرة لصقه في الصفحة 2. أعد وضعه في حالته النهائية (استدار في اتجاه عقارب الساعة 75 درجة بحيث يتم وضع الطائرة على الجانب الأيمن من اللوحة).

page-action-1gif

لإنشاء الانتقال ، عُد إلى الصفحة 1. في لوحة خصائص جهة اليمين ، سترى قسمًا باسمإجراءات الصفحة . انقر فوق زر زائد ثم قم بتعيين ما يلي:

  • حقق شيئًا ما: بعد فترة محددة
  • انتظر: 0
  • اذهب إلى: الصفحة 2
  • الحركة: انتقال مخصص
  • التخفيف: سهولة في الخارج
  • المدة: 2000

دعونا معاينة ونرى تحولنا في العمل - سترى الطائرة تنزلق من اليسار إلى اليمين على مدار ثانيتين. أنيق!

ولمزيد من ذلك ، يمكنك أيضًا نسخ شعار Fly والصقه في كل من الصفحة 1 والصفحة 2 (أسفل مكون التحميل في لوحة الصفحات ووضعها خلفها). تأكد من اتباع نفس الأسلوب لوضعها في موضع البداية والنهاية على كل صفحة. ربما يتعين عليك ضبط ترتيب طبقاتك لجعلها تظهر من الخلف.

وأخيرًا ، سنحتاج إلى إنشاء إجراء يأخذ المستخدم تلقائيًا إلى الصفحة 3 من الصفحة 2. في الصفحة 2 ، أضف إجراءً آخر في الصفحة المحددة. هذه المرة سنستخدم الإعدادات التالية:

  • اجعل حدثاً ما يحصل : بعد فترة محددة من الوقت
  • Wait: 1000
  • Go to: Home
  • Motion: Slide up
  • Easing: Ease in-out
  • Duration: 300

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

4. فهم المكونات

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

جميع العناصر اللازمة لهذه الصفحة تقريبًا هي مكونات.

كلمة عن المكونات

مكونات في Atomic هي مثل الرموز. يمكن تعديل أي مكون وإعادة استخدامه طوال المشروع. سيتم تحديث أي تعديلات يتم إجراؤها على أحد المكونات في كل حالة. يمكن أيضًا أن تكون المكونات تفاعلية وتحتوي على حالات متعددة لرمز. هذا يجعل من السهل بالفعل بناء النموذج الأولي الخاص بك.

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

نعلم أن المستخدم لديه ثلاث رحلات ونرغب في أن يتمكنوا من التمرير عبر كل منها. هناك أيضًا رمز رمز الاستجابة السريعة الذي ، عند التفاعل معه ، يجب إظهار رمز المرور الخاص به.

إذا نظرت إلى لوحة الطبقات ، فستلاحظ أن كل صفحة عبارة عن مثيل لمكون يسمى "boardingCard". دعونا نفتح مكون بطاقة الصعود الآن لنرى كيف تم تطبيق البيانات.

5. استخدام البيانات

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

مع فتح مكون boardingCard ، سترى صفحتين ؛ الجبهة والظهر من الممر. هذا هو المكان الذي يتم فيه تخصيص البيانات لعناصر النص الفردية.

Text Properties
البيانات الموروثة من الوالدين

حدد النص ABC وإلقاء نظرة على خصائص النص . ستلاحظ ما يلي:

  • المحتوى: التعيين من عمود البيانات
  • البيانات: اكتساب من الوالد
  • العمود: رمز المغادرة

بعد ذلك ، إذا نظرت إلى ورقة Google حيث يتم سحب هذه البيانات منها ، فسترى عمودًا بعنوان "رمز المغادرة". وهذا يعني أن عنصر النص ABC سيعرض أي بيانات تظهر في العمود "رمز المغادرة".

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

6. إضافة تفاعل للوجه

بعد ذلك سنقوم بإعداد الانتقال المستند إلى الصفحات للتنقل بين التمرير ورمز الاستجابة السريعة. في الصفحة الأمامية من مكون boardingCard اضغط H لإظهار أداة نقطة الاتصال. ثم ، ارسم نقطة ساخنة فوق رمز رمز الاستجابة السريعة على الصفحة الأمامية.

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

  • لفتة: انقر أو اضغط
  • اذهب إلى:> الصفحة التالية
  • الحركة: الوجه
  • التخفيف: سهولة في الخارج
  • المدة: 300MS

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

  • لفتة: انقر أو اضغط
  • اذهب إلى:> الصفحة السابقة
  • الحركة: الوجه
  • التخفيف: سهولة في الخارج
  • المدة: 300MS

حان الوقت لاختبار تفاعلك! في الركن السفلي الأيسر ، اضغط على الزر معاينة . يتيح لك وضع المعاينة اختبار انتقالاتك والتفاعل مع نموذجك الأولي عبر النقاط الفعالة. حاول النقر على بطاقة QR أو رمز الإغلاق ؛ يجب على البطاقة التغيير بين الدولتين.يمكنك إغلاق المعاينة عن طريق الضغط على X .

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

7. توصيل البيانات إلى الوالد

للرجوع ، انقر على زر الرجوع الأرجواني في أعلى اليمين. الآن يجب أن تعود في مكون boardingPasses. في هذا المكون ، لدينا ثلاثة ممرات تعرض حاليًا البيانات نفسها. دعونا نقوم بتحديث هذا الآن.

تذكر كيف تم تعيين البيانات داخل مكون boardingCard على Inherit from parent ؟ في هذه الحالة ، يكون الأصل هو مثيل المكون.

في صفحة الرحلة 1 ، اختر مثال بطاقة الصعود على الطائرة. في خصائص المكوّن ، اتركالولاية كما هي. ضمن بيانات ، حدد مصدر البيانات وتأكد من تعيين الصف على الصف 1. يجب أن يعرض المثيل الآن البيانات من الصف الأول من ورقة البيانات.

إذا قمت بالتبديل إلى الصف ستلاحظ أن البيانات المعروضة التحديثات. دعنا نحفظه في الصف 1 حتى الآن ، ولكن في الرحلة رقم 2 والطيران 3 ، اضبط هذا الخيار لعرض البيانات من الصف 2 والصف 3 على التوالي.

8. إضافة إيماءات انتقاد

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

قم بإنشاء نقطة ساخنة (H) ورسمها على الجانب الأيسر من صفحة الرحلة 1 (تأكد من ترك بعض المساحة في الجزء العلوي لنقطة الاتصال فوق رمز الإغلاق في الصفحة الخلفية لمكون لوحة الصعود ، وأنه لا يوجد ر ﺗﻐﻄﻴﺔ رﻣﺰ QR ﻓﻲ اﻟﺼﻔﺤﺔ اﻷوﻟﻰ). fhnf☻

  • إيماءة: اسحب إلى اليسار
  • انتقاد المسافة: 200
  • اذهب إلى:> الصفحة التالية
  • الحركة: ادفع لليسار
  • التخفيف: سهولة في الخارج
  • المدة: 300MS

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

9. إنشاء متغير

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

سيتم استخدام المتغير الذي سننشئه لتحديث نقاط التقدم بناءً على بطاقة الصعود.

لإنشاء متغير ، اضغط على V لفتح متغيرات Modal . انقر هنا على إنشاء متغير جديدواكتب "flightDisplayed" في حقل الاسم . اترك القيمة الافتراضية فارغة.

عظيم ، لديك إعداد المتغير الخاص بك! أغلق متغيرات الوسائط عن طريق الضغط على Xأو الهروب على لوحة المفاتيح.

10. باستخدام المتغيرات

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

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

للقيام بذلك ، افتح مكون boardingPasses. في صفحة 1 دعنا ننشئ إجراء الصفحة التالية:

  • بعد وقت محدد
  • انتظر: 0
  • تعيين: flight العرض (متغير)
  • إلى قيمة...
  • القيمة: 1

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

لقد أخبرنا بشكل فعّال العنصر boardingPass لتحديث قيمة الرحلة المتغيرة Dictplayed ، حسب الرحلة (الصفحة) المعروضة. يمكننا الآن استخدام هذه القيمة للتأثير على حالة نقاط التقدم.

في ما يلي كيفية إجراء ذلك: عد إلى النموذج الأولي وافتح مكون progressDots.

ستلاحظ ثلاث صفحات (دول) مسماة 1 و 2 و 3. هذه التسمية مطابقة للقيم التي تم تعيينها في flightD المتغير المتغير. من المهم أن تطابق أسماء الصفحات هذه القيم المحددة.

عد إلى النموذج الأولي ، وحدد مكون progressDots ، و:

  1. في قسم المكون في لوحة الخصائص ، افتح القائمة المنسدلة للولاية .
  2. حدد الرحلةغير تغيير المتغير.

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

جرّب معاينة النموذج الأولي الآن ، والتفاعل مع تصاريح الصعود عن طريق التمرير السريع ومعرفة ما إذا كانت نقاط التقدم قد تم تحديثها أم لا.

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

نصيحة : يمكنك معرفة ما إذا كان يمكنك معرفة كيفية الحصول على مكون promoCard لتحديث حالته استنادًا إلى الرحلة المعروضة. ستحتاج إلى إنشاء متغير جديد يسمى cardDisplayed.

Ta-da!

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

أحسنت لاتباع هذا البرنامج التعليمي حتى النهاية. يجب أن يكون لديك الآن فهم شامل لكيفية إنشاء النموذج الأولي الخاص بك في Atomic. إذا كان لديك أصول موجودة في Sketch ، فيمكنك استيرادها باستخدام Atomic Plugin for Sketch ، أو تصميم أصلي في Atomic إذا كنت ترغب في ذلك.

الأسئلة؟ تعليقات؟ اتركها أدناه أو تواصل معي على Twitter ( femkesvs ).

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.