برنامج Framer Tutorial: 7 Micro Interactions البسيطة لتحسين النماذج الأولية الخاصة بك

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

لماذا يجب عليك وضع نماذج أولية للتفاعلات الصغيرة؟

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

الق نظرة على الأمثلة أدناه. يقوم المصممون في جميع أنحاء العالم بإنشاء هذه التفاعلات الدقيقة في العديد من المنتجات.

النماذج السبعة

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

هل رأيت مثل هذه التفاعلات من قبل؟ بالتأكيد لديك! تراهم كل يوم على هاتفك الذكي. حان الوقت لإنشاء الخاصة بك.

1. زر الإجراء

غالبًا ما يمثل زر الإجراء الإجراء الرئيسي للشاشة الحالية. في بعض الأحيان يحتوي على العديد من الإجراءات في الداخل. سنقوم بإنشاء تفاعل للحالة الثانية. قم بتنزيل النموذج الأولي العامل هنا: https://framer.cloud/ShBnH

الخطوة 1: قم بإنشاء ثلاثة أزرار على شكل دائرة

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

الخطوة 2: صمم حالتين لجميع الطبقات

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

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

الخطوة 3: أضف حدثًا

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

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

الخطوة 4: الربيع للرسوم المتحركة

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

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

زر الإجراء جاهز للعمل!

2. مفاتيح تفاعلية

ستمكنك الخطوات أدناه من إنشاء تفاعل التبديل الخاص بك. قم بتنزيل النموذج الأولي العامل هنا: https://framer.cloud/ieypV

الخطوة 1: تصميم ملعب تبديل

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

الخطوة 2: إنشاء الدول

هل تتذكر من المقالة الأولى كيفية تصميم الحالات مباشرة في Framer Studio؟ صمم حالاتك بالطريقة التي تريدها ، أو استخدم الإعدادات الخاصة بي:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

الخطوة 3: أضف حدثًا

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

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

الخطوة 4: اضبط التوقيت

لجعل كل شيء طبيعيًا ، اضبط الوقت والتأخير لجميع الحالات:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

الآن تم الانتهاء من النموذج الأولي لدينا!

3. عمل سحب عنصر القائمة

هذا تفاعل نموذجي لإزالة العناصر من القائمة أو أرشفتها أو حفظها. اسحب لليسار أو لليمين ، وسيتم مسح أحد العناصر. قم بتنزيل النموذج الأولي من هنا: https://framer.cloud/rzMWP

الخطوة 1: قم بإنشاء نموذج أولي في وضع التصميم

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

الخطوة 2: اجعل العناصر قابلة للسحب

لتبسيط الأمر ، سننشئ تفاعلًا لعنصر القائمة الأول فقط. أولاً ، اجعل عنصر القائمة قابلاً للسحب: item.draggable = true .

ثم اقفل المحور الرأسي: item.draggable.vertical = false .

قم بإعداد قيود المنطقة القابلة للسحب: item.draggable.constraints

وأخيرًا ، اضبط الحجم على حجم العنصر: size: item .

هكذا تبدو الكود بالكامل:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

يمكنك الآن التمرير إلى اليسار واليمين ، وسيعود العنصر دائمًا إلى موضعه الأصلي.

الخطوة 3: إنشاء الحالة

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

 item.states.a = x: -360

الخطوة 4: تغيير الحالة بعد التمرير

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

 item.onMove -> if item.x < -70 item.stateCycle("a")

في هذه الحالة ، نستخدم عبارة "if". يقول الكود أعلاه بشكل أساسي ، عندما ننقل طبقة العنصر أكثر من 70 بكسل ، نغير حالة العنصر إلى الحالة "أ". يمكنك أن تقرأ حول عبارات إذا في وثائق Framer Studio: https://framer.com/getstarted/programming/#conditional

الخطوة 5: التراجع عن الإجراء بعد النقر

نحن على وشك الانتهاء من هذا التفاعل. الشيء الوحيد المتبقي هو التراجع عن هذا الإجراء:

 item_bg.onTap -> item.stateCycle("default")

يجب أن تكون على دراية بهذا الرمز من البرنامج التعليمي السابق.

الخطوة 6 (اختياري): ضبط توقيت الرسوم المتحركة

إذا كنت ترغب في ذلك ، يمكنك ضبط توقيت الرسوم المتحركة:

 item.animationOptions = time: 0.75 curve: Spring

4. زر محمل

هذا تفاعل مفيد للغاية للإجراءات التي تتطلب تحميل أو أوقات انتظار للمستخدم. عندما نقوم بإنشاء هذا التفاعل ، ستتعلم كيفية إدارة العديد من الرسوم المتحركة التي تحدث واحدة تلو الأخرى. قم بتنزيل النموذج الأولي من هنا: https://framer.cloud/FxmHN

الخطوة 1: قم بإنشاء نموذج أولي في وضع التصميم

أنشئ زرًا بسيطًا من أربع طبقات فرعية: شريط تقدم وثلاث رموز لحالات مختلفة. لقد صممت زري برمز تحميل مرئي ، وشريط تقدم في الأسفل بعرض 0 ، واثنين من الرموز المخفية الأخرى.

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

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

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

هذا هو الرمز الذي كتبه Framer لك:

 button.onTap (event, layer) ->

الخطوة 3: تصميم الرسوم المتحركة

سنستخدم ميزات الكود التلقائي لـ Framer لتصميم جميع الرسوم المتحركة:

لقد صممت أربع رسوم متحركة بتوقيت مختلف:

• الرسوم المتحركة الأولى هي تغيير عرض شريط التقدم.
• والثاني هو إخفاء أيقونة التحميل مع التعتيم.
• والثالث يدور ويظهر أيقونة اللودر.
• آخر واحد هو إظهار وتحجيم أيقونة الاختيار.

هذا هو الكود الذي كتبه Framer لكل من هذه الرسوم المتحركة:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

الخطوة 4: إعادة تعيين الرسوم المتحركة للتحميل

كما لاحظت ، لم نخفي رمز أداة التحميل بعد انتهاء الرسوم المتحركة. لإنهاء هذا النموذج الأولي ، قم بتشغيل رسم متحرك آخر باستخدام هذا الحدث: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. اسحب للتحديث

يستخدم كل منتج تقريبًا مع قائمة بداخله هذا النوع من التفاعل. يسحب المستخدم القائمة بأكملها لتحديثها. من السهل جدًا إنشاءه. قم بتنزيل النموذج الأولي من هنا: https://framer.cloud/DgMDw

الخطوة 1: صمم قائمة بسيطة بأيقونة التحديث

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

الخطوة 2: إنشاء مكون التمرير

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

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

الخطوة 3: اجعل رمز التحديث مرئيًا

قم بإنشاء حالة بسيطة للرمز:

 icon.states.a = opacity: 1

الخطوة 4: أضف حدثًا بعد السحب لأسفل

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

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

مرة أخرى نحن نستخدم عبارة "if". إذا تم سحب القائمة لأسفل (تم نقلها على المحور ص) أكثر من 180 بكسل ، فسنقوم بتنفيذ إجراء. في هذه الحالة ، سنقوم بتحريك طبقتين: القائمة وأيقونة التحديث.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

نحن نستخدم "تحريك" لتحريك القائمة لأسفل 210 بكسل وتدوير أيقونة التحديث 360 درجة.

الخطوة 5: إعادة تعيين جميع الحالات

النموذج الأولي يعمل تقريبًا ، لكن يتعين علينا إعادة تعيين جميع الطبقات بعد تحديث الرسوم المتحركة. للقيام بذلك ، سنستخدم حدثًا بعد انتهاء الرسوم المتحركة:

 icon.onAnimationEnd ->

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

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

هذا هو!

6. سحب التفاعل

هل سبق لك أن لاحظت أنه أثناء قيامك بسحب عنصر داخل تطبيق ما ، هناك دائمًا شيء ما يحدث مع العنصر نفسه؟ في بعض الأحيان يتقلص العنصر ، أو ربما تكون العناصر الأخرى غير واضحة ، أو يتغير التعتيم. دعونا نتعلم كيفية إنشاء هذا النوع من التفاعل. قم بتنزيل نموذج العمل من هنا: https://framer.cloud/YstiW

الخطوة 1: صمم شبكة بسيطة بالبلاط

قم بإنشاء شبكة من المربعات ، وتأكد من وجودها داخل العنصر الأصل.

الخطوة 2: استخدم حلقة "for" لاستهداف كافة المربعات

قد تبدو كلمة " for loop" مخيفة ، لكنها بسيطة حقًا. إذا لم تكن معتادًا على حلقات for ، يمكنك قراءة القليل من الخلفية أولاً: https://framer.com/getstarted/programming/#loops-and-arrays

سنستخدم الحلقة for لاستهداف كل المربعات داخل شبكتنا:

 for item in grid.subLayers

باستخدام هذا السطر البسيط من التعليمات البرمجية ، قمت باستهداف جميع الطبقات داخل طبقة الشبكة.

الخطوة 3: اجعل البلاط قابل للسحب

اجعل كل عنصر داخل الشبكة قابلاً للسحب:

 for item in grid.subLayers item.draggable = true

الخطوة 4: تصميم حالة السحب

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

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

الخطوة 5: سحب الأحداث

يتعين علينا إنشاء أحداث لتشغيل حالات مختلفة أثناء سحب العنصر. سيطلق الحدث الأول إجراءً بينما نبدأ في السحب:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

لقد استخدمت this.bringToFront() للتأكد من أن العنصر دائمًا فوق الطبقات الأخرى.

سيعيد المشغل الثاني إعادة تعيين حالة العنصر:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

في هذه المرحلة ، لدينا نموذج أولي عملي.

الخطوة 6 (اختياري): العب مع التوقيت

يحدث التفاعل دائمًا على طول الخط الزمني. من الجيد ضبط الجدول الزمني لتحقيق تأثير مثالي:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. أزرار "إعجاب" متعددة (متقدمة)

في هذا النموذج الأولي ، سنستخدم تقنيات أكثر تقدمًا لتظهر لك طريقة مختلفة لاستهداف الطبقات في Framer Studio ، والتي ستنشئ تفاعلات أكثر استجابة مع وقت أقل. إذا لم تكن معتادًا على الترميز الأساسي ، فأنا أشجعك على قراءة هذه المقالة أولاً: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

بالنسبة لهذا التفاعل ، سنتخطى جزء التصميم ونستخدم نموذجًا أوليًا قمت بإنشائه خصيصًا لهذه المقالة: https://framer.cloud/SZMCH

الخطوة 1: إنشاء المصفوفات

ألق نظرة على هيكل الطبقات داخل Framer Studio:

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

 rows = list.children buttons = []

لقد قمت أيضًا بإنشاء مصفوفة فارغة لجميع طبقات "الزر": buttons = [] .

الخطوة 2: أضف طبقة فرعية إلى مجموعة

لنبدأ من "الحلقة for":

 for i in rows buttons.push(i.children[0])

لإضافة طبقات إلى المصفوفة ، سنستخدم: buttons.push() . هذا يعني أننا نضع الطبقة الأولى من كل مجموعة "صف" داخل مصفوفة.

الخطوة 3: إنشاء الدولة والحدث

سننشئ الآن حالة لأزرار "أعجبني" ، ونضيف حدثًا إليها أثناء النقر على:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

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

ملاحظة أخيرة

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

• • •

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

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