برنامج تعليمي للمبرمجين: كيفية إنشاء نماذج أولية تفاعلية مذهلة

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

أطلق Framer أحدث إصدار له قبل أسبوع ، ولن يكون سوق النماذج الأولية كما هو. كان من الصعب إتقان أداة النماذج الأولية Framer ولكنها مفيدة باعتبارها أكثر برامج النماذج الأولية دقة ولا حدود لها. الآن ، تغيرت الأمور. يأتي Framer الآن مع ميزات Design + Code + Collaborate ، مما يعني أنه يمكنك إنشاء النموذج الأولي الخاص بك مباشرة داخل Framer ، وتطوير نموذج أولي يعمل بكامل طاقته دون أي برنامج تابع لجهة خارجية وبدون أي مهارات في البرمجة.

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

أساسيات المبروز

هيا بنا نبدأ! ما عليك سوى الانتقال إلى Framer.com وتنزيل نسخة تجريبية. إنهم يمنحونك أسبوعين من العرض التوضيحي الكامل الوظائف ، وصدقوني ، إنه وقت كافٍ لتعلم الكثير عن برنامج النماذج الأولية هذا.

بعد التثبيت ، قد ترغب في الاطلاع على بعض الأمثلة التي يقدمونها واللعب معهم قليلاً. عند الانتهاء ، حان الوقت لبدء عمل النماذج الأولية.

(في هذا البرنامج التعليمي Framer ، سأركز على إنشاء نماذج أولية مباشرة في Framer.js. يجب أن تعرف أيضًا أن هناك طرقًا أخرى لبدء النماذج الأولية في Framer. على سبيل المثال ، يمكنك العمل مباشرة مع ملفات Sketch. وسأغطي سير العمل هذا في مقال آخر.)

المبروز الجديد كليًا - وضع التصميم

في هذه المقالة ، سننشئ ثلاثة نماذج أولية رائعة في غضون دقائق مع الحد الأدنى من استخدام الرمز: التفاعلات الأساسية ومكون التمرير ومكون الصفحة

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

لنقم بإنشاء تصميم من نوع التطبيق

في الجزء الأول من هذا البرنامج التعليمي ، سنجهز ملعبًا لنموذج Framer الأولي الخاص بنا. سننشئ تصميمًا من نوع التطبيق ، بثلاثة أنواع مختلفة من الطبقات: المتجه والصورة والنص.

الخطوة 1: إنشاء زر وخلفية بسيطين.

لبدء تصميمك ، حدد علامة التبويب الأولى - وهي وضع التصميم - وأضف لوحة فنية ، تمامًا كما هو الحال في Sketch. في هذا البرنامج التعليمي ، سنعمل على نموذج أولي لـ iPhone 7 ، لذلك اخترت هذا الإعداد المسبق كحجم لوح الرسم الخاص بي. لقد أضفت أيضًا تعبئة خلفية زرقاء.

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

الخطوة 2: أضف بطاقة بها صورة.

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

الخطوة 3: أضف عنوان التطبيق.

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

الخطوة 4: أخبر Framer عن الطبقات التفاعلية.

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

الخطوة 5 (المكافأة): حدد ألوانك العالمية.

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

عندما تقوم بإعداد ألوانك ، ما عليك سوى تسميتها في محرر الكود ، وتقديم قيم HEX أو RGB أو RGBa بعد علامة "=" المناسبة. تذكر أن تحتفظ بجميع المتغيرات في أعلى الكود الخاص بك.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

الخطوة 6 (المكافأة): إضافة موضع نسبي.

مع Framer الجديد ، من السهل جدًا الحفاظ على استجابة النموذج الأولي الخاص بك. يمكنك تعيين المواضع النسبية من وضع التصميم ، كما هو موضح أدناه:

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

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

أنت الآن جاهز - فلنبدأ مشروعنا

لقد أنشأنا أنواعًا مختلفة من طبقات Framer. الآن ملعب التفاعل لدينا جاهز للانطلاق.

أخيرا! لقد انتهى الجزء الممل. حان الوقت الآن لبعض التصميم التفاعلي.

قم بتنزيل النموذج الأولي بالكامل هنا.

1. إنشاء تفاعل ملاحظات الزر

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

الخطوة الأولى: إنشاء الحدث للتفاعل.

سنبقيها بسيطة. لنقم بإنشاء تعليقات على الزر عند النقر فوقه ، باستخدام الأمر التالي:

 layerA.onTap (event, layer) ->

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

الخطوة الثانية: إضافة الرسوم المتحركة إلى الحدث.

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

أضاف Framer بضعة سطور أخرى من التعليمات البرمجية. (لا داعي للقلق - لا يزال بإمكانك تعديل الرسوم المتحركة باستخدام لوحة الرسوم المتحركة.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

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

الخطوة 3: إعادة ضبط الرسوم المتحركة.

أضف حدثًا آخر ، كما فعلنا من قبل. الفرق هو أننا نبحث عن حدث عندما تنتهي الرسوم المتحركة:

هذه المرة ، سيبدو الرمز الذي أضافه Framer كما يلي:

 button.onAnimationEnd (event, layer) ->

لذلك ، عند انتهاء الرسم المتحرك على طبقة الزر ، يمكننا إضافة الرسم المتحرك التالي الذي سيعيد تعيين معلمات طبقة الزر :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

هذا هو! لدينا الآن ملاحظات العمل بعد الضغط على زرنا.

2. إنشاء حالات مختلفة لتفاعلات طبقة البطاقة

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

الخطوة 1: إضافة وإنشاء حالات لطبقة البطاقة.

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

يرجى الانتباه إلى المسافة البادئة للرمز. يجب أن يبدأ من الصف الأول.

لقد صممت حالتين مختلفتين لطبقة البطاقة الخاصة بي:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

الخطوة 2: إضافة الأحداث.

هناك خطوة واحدة فقط لإنجاحه. علينا إنشاء حدث لتغيير هذه الدول.

 button.onTap -> card.stateCycle()

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

 button.onTap -> card.stateSwitch("b")

يكون هذا المقتطف مفيدًا عندما تريد تشغيل حالة معينة من الطبقة.

التعديل الأخير الذي أجريته على النموذج الأولي الخاص بي هو تغيير سرعة الرسوم المتحركة والمنحنى بين الحالات:

 card.animationOptions = curve: Spring time: 0.8 

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

تسريع عملك في Framer: المكونات

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

1. المكون الأول: التمرير

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

الخطوة 1: إنشاء الطبقات وإعداد المكونات.

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

 scroll = new ScrollComponent width: Screen.width height: Screen.height

ينشئ هذا الرمز منطقة غير مرئية بعرض وارتفاع الجهاز الحالي.

الخطوة 2: أخبر Framer عن الطبقات التي تريد تمريرها.

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

 list.parent = scroll.content

الخطوة 3: قفل التمرير العمودي.

يُسمح لنا بالتمرير الآن ، لكن هذا يحدث في جميع الاتجاهات. علينا قفل التمرير على محور عمودي:

 scroll.scrollHorizontal = false 

رائع! لقد أنشأت تمريرًا داخل تطبيقك بخمسة أسطر فقط من التعليمات البرمجية البسيطة.

2. مكون الصفحة: تمرير الشاشة إلى الشاشة

التفاعل الشائع جدًا للتبديل بين الشاشات هو التمرير السريع. الفكرة هنا مشابهة جدًا لمكون التمرير. يمكنك تنزيل نموذج أولي عامل هنا.

الخطوة 1: إعداد المكون.

أولاً ، علينا إنشاء "مربع" في محرر الكود حيث سيحدث السحر:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

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

الخطوة 2: إنشاء الطبقات

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

في البداية ، يجب أن نجعل لوح الرسم أعرض مرتين. في لوحة خصائص لوح الرسم ، ابحث عن العرض واضربه في اثنين (أو أضف *2 فقط). ضع البطاقات بجانب بعضها البعض ، وقم بتنشيطها بالنقطة الزرقاء ، وقم بتسميتها بشكل صحيح: card1 و card2 .

الخطوة 3: إضافة طبقات إلى مكون الصفحة.

في نهاية الكود الخاص بنا في محرر الكود ، يتعين علينا إضافة:

 card1.parent = page.content card2.parent = page.content

هذا يعني أننا نضيف هذه الطبقات إلى المكون.

مكون الصفحة جاهز الآن للذهاب!

كلمة أخيرة

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

إذا كنت ترغب في التعمق أكثر داخل Framer ، فحاول قراءة وثائق Framer.

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية