يعد إنشاء نماذج أولية تفاعلية جزءا مهما من عملية تصميم موقع الويب وتطبيقات الأجهزة المحمولة. واحدة من أدوات النماذج الأكثر شعبية هو فيغما ، تطبيق قوي مع القدرة على إنشاء عناصر تفاعلية.
واحدة من أكثر الميزات المرغوبة في فيجما هي القدرة على ربط الأزرار معا. يتيح لك ذلك إنشاء نماذج أولية واقعية تعيد إنتاج حالات وإجراءات مختلفة عندما يتفاعل المستخدم مع الواجهة.
لربط الأزرار معا في فيجما ، تحتاج إلى اتباع بعض الخطوات البسيطة. أولا ، قم بإنشاء أزرار على التخطيط الخاص بك. ثم حدد الزر الأول وحدد علامة التبويب "النموذج الأولي" في لوحة الخصائص. في علامة التبويب هذه ، يمكنك تعيين إجراءات مختلفة للزر بناء على إجراءات المستخدم.
تتضمن إعدادات الإجراء للزر الانتقال إلى شاشات أخرى ، وفتح الروابط في علامة تبويب جديدة ، وعرض النوافذ المنبثقة ، والمزيد. بعد إعداد الإجراء للزر الأول ، من السهل ربطه بزر آخر.: حدد الزر الثاني وتعيين الإجراء الذي يتعين القيام به بعد النقر عليه. وبالتالي ، يمكنك إنشاء نماذج تفاعلية معقدة في فيجما عن طريق ربط الأزرار معا.
- ما هو فيجما ولماذا أحتاج إلى ربط الأزرار?
- الخطوة 1: إنشاء تصميم مع أزرار في فيجما
- الخطوة 2: تسليط الضوء على الأزرار وإضافة التفاعل
- الخطوة 3: إنشاء انتقالات بين الأزرار
- الخطوة 4: ضبط سلوك الأزرار عند التمرير والنقر
- الخطوة 5: الاختبار والفحص الصحي
ما هو فيجما ولماذا أحتاج إلى ربط الأزرار?
تتيح لك أزرار الربط تعيين إجراءات أو انتقالات محددة بين الشاشات أو المكونات المختلفة في المشروع. على سبيل المثال ، من خلال ربط زر الرجوع بالشاشة السابقة ، يمكن للمستخدم العودة إلى الصفحة السابقة. يمكن أن يكون هذا مفيدا بشكل خاص عند إنشاء نماذج أولية تفاعلية للتطبيقات أو مواقع الويب.
يعمل ربط الأزرار أيضا على تبسيط عمل فريق التصميم والتطوير. عند إنشاء نماذج أولية في فيجما ، يمكنك تحديد منطق التحولات وتفاعل عناصر الواجهة ، مما يسمح لك بتمثيل وظائف المشروع بدقة أكبر وتقليل وقت المناقشات والتصحيحات.
الخطوة 1: إنشاء تصميم مع أزرار في فيجما
انتقل إلى التطبيق فيغما وإنشاء مشروع جديد أو فتح واحد موجود. ابدأ بإنشاء صفحة جديدة حيث سيتم وضع التصميم الخاص بك مع الأزرار.
لإنشاء زر ، انقر فوق رمز المستطيل في شريط الأدوات وارسم مستطيلا سيكون بمثابة أساس للزر. يمكنك ضبط حجمها وأسلوب لجعلها تبدو وكأنها زر.
بعد إنشاء قاعدة الزر ، أضف نصا بالنقر فوق رمز" نص " في شريط الأدوات والنقر فوق الزر. أدخل النص الذي تريد عرضه على الزر واضبط أسلوبه وحجمه ولونه.
كرر هذه الخطوات لإنشاء بقية الأزرار التي ستحتاجها في التصميم الخاص بك. رتب الأزرار الموجودة على صفحتك بحيث تكون سهلة الاستخدام وتتناسب مع تخطيط أو تخطيط الواجهة.
يمكنك أيضا استخدام المجموعات والإطارات لتنظيم الأزرار والعناصر الأخرى للتصميم الخاص بك. تسمح لك المجموعات بدمج العناصر معا ، وتسمح لك الإطارات بإنشاء تخطيطات يمكن إعادة استخدامها أو تحديثها لاحقا.
| الخطوة 1: | إنشاء صفحة جديدة في فيجما أو فتح مشروع موجود. |
| الخطوة 2: | قم بإنشاء قاعدة الزر عن طريق رسم مستطيل. |
| الخطوة 3: | أضف نصا إلى الزر. |
| الخطوة 4: | كرر الخطوات من 2 إلى 3 لإنشاء الأزرار المتبقية. |
| الخطوة 5: | ضع الأزرار على صفحتك وقم بتنظيمها باستخدام المجموعات والإطارات. |
الآن لديك تصميم مع أزرار في فيجما ، وعلى استعداد لتكون مرتبطة.
الخطوة 2: تسليط الضوء على الأزرار وإضافة التفاعل
1. لتمييز الزر ، حدد أداة الإطار ، الموجودة في شريط الأدوات العلوي على اليسار. ثم قم بعمل إطار حول الزر بحيث يتم تمييزه.
2. بعد تحديد الزر ، سترى لوحة على اليسار مع الإعدادات. في هذه اللوحة ، يمكنك تخصيص معلمات مختلفة للزر ، مثل اللون والحجم والخط والمزيد.
3. لإضافة تفاعل إلى زر ، حدده وانقر على زر النماذج الأولية في شريط الأدوات العلوي. ثم اسحب المؤشر إلى شاشة أخرى لإنشاء اتصال بين الشاشتين.
4. بعد إنشاء اتصال بين الشاشات ، سترى لوحة على اليسار مع إعدادات هذا الاتصال. في هذه اللوحة ، يمكنك تكوين معلمات اتصال مختلفة مثل نوع الانتقال ومدة الرسوم المتحركة والمزيد.
5. كرر هذه العملية لكل زر في التخطيط لإضافة تفاعل إلى جميع الأزرار.
6. بعد الانتهاء من هذه الخطوة ، يمكنك عرض النموذج الأولي بالنقر فوق الزر "النماذج الأولية" في شريط الأدوات العلوي وتحديد "عرض النموذج الأولي". في النموذج الأولي ، يمكنك اختبار تفاعل الأزرار الخاصة بك.
الآن بعد أن أصبح لديك أزرار مخصصة مع تفاعل إضافي ، يمكنك متابعة العمل على جوانب أخرى من تصميمك ، مثل إضافة نص وصور وعناصر أخرى.
الخطوة 3: إنشاء انتقالات بين الأزرار
بعد إنشاء جميع الأزرار اللازمة على التخطيط الخاص بك في فيجما ، يمكنك إنشاء انتقالات بينهما. سيسمح لك ذلك بإنشاء نسخة نموذجية تفاعلية من التصميم الخاص بك.
لإنشاء انتقال ، حدد الزر الذي تريد الارتباط به وانقر عليه بزر الماوس الأيمن. في قائمة السياق ، حدد خيار" إنشاء اتصال". ثم حدد الزر الذي تريد الارتباط به. كرر هذه العملية لجميع الأزرار التي تريد إنشاء روابط بينها.
بعد إنشاء جميع الاتصالات الضرورية بين الأزرار ، يمكنك عرض نموذج أولي للتصميم الخاص بك للتحقق من كيفية عمل الانتقالات. في وضع النموذج الأولي ، يمكنك النقر فوق الأزرار والتنقل بين صفحات أو شاشات التخطيط الخاص بك.
يتيح لك إنشاء انتقالات بين الأزرار في فيجما إنشاء تصميمات أكثر واقعية ، حيث يمكنك أن توضح للمستخدم كيفية عمل التطبيق أو موقع الويب الخاص بك. كما أنه يساعدك على التحقق من أن وظيفة التصميم الخاص بك تعمل بشكل صحيح قبل البدء في تصميمه.
الخطوة 4: ضبط سلوك الأزرار عند التمرير والنقر
بعد إنشاء الأزرار وتصميمها ، يمكننا تخصيص سلوك التمرير والنقر. في فيجما ، يمكن القيام بذلك باستخدام وظيفة" الرسوم المتحركة التلقائية".
1. حدد الزر الأول وانتقل إلى علامة التبويب النماذج الأولية في اللوحة اليمنى.
2. في حقل"عند التمرير" ، حدد الزر الذي تريد أن يستجيب له عند تحريك المؤشر. على سبيل المثال ، يمكن أن يكون زرا أو نصا أو شكلا آخر.
3. حدد مدة الرسوم المتحركة (على سبيل المثال ، 0.3 ثانية) ونوع الرسوم المتحركة (المظهر ، تغيير الحجم ، تغيير اللون ، إلخ.).
4. كرر الخطوات من 1 إلى 3 للأزرار المتبقية.
5. لتكوين سلوك الأزرار عند النقر عليها ، حدد الزر الأول وفي حقل" عند النقر " حدد الصفحة أو الشاشة المستهدفة للانتقال إليها بعد النقر. يمكنك أيضا ضبط الرسوم المتحركة عند التبديل إلى شاشة جديدة.
6. كرر الخطوة 5 للأزرار المتبقية.
بعد الانتهاء من هذه الخطوات ، ستتمكن من عرض النموذج الأولي للتحقق من تشغيل الاتصال بين الأزرار عند التمرير والنقر. للقيام بذلك ، انقر فوق الزر "النماذج الأولية" في الزاوية اليمنى العليا من فيجما وحدد "عرض النموذج الأولي".
الخطوة 5: الاختبار والفحص الصحي
بعد ربط الأزرار معا في فيجما ، يجب عليك إجراء الاختبار والتحقق من أداء النموذج الأولي الخاص بك. ستحتاج إلى أداة يمكنها إعادة إنتاج تفاعل النموذج الأولي ، على سبيل المثال ، المكون الإضافي فيجما ميرور أو رابط إلى الإصدار عبر الإنترنت من النموذج الأولي.
انتقل إلى الشاشة حيث قمت بربط الأزرار وتحقق مما يلي:
- تسلسل الانتقال الصحيح: تأكد من أن الأزرار تتحرك بالترتيب الذي تحتاجه. انقر فوق كل زر وتحقق من أنه يؤدي إلى الشاشة المطلوبة.
- العرض الصحيح: تحقق من عرض جميع عناصر الشاشة بشكل صحيح بعد الضغط على الزر. تأكد من عدم اختفاء أي عناصر أو تداخلها.
- التفاعل: تأكد من أنه عند النقر فوق الزر ، تحدث الإجراءات المتوقعة. على سبيل المثال ، إذا كان يجب أن يفتح الزر قائمة منسدلة ، فتحقق من ظهور القائمة بعد النقر فوق الزر.
إذا وجدت أي مشاكل أثناء عملية الاختبار ، فارجع إلى الخطوات السابقة وقم بإصلاح الأخطاء. بعد حل جميع المشاكل ، أعد الاختبار للتأكد من أن النموذج الأولي الخاص بك يعمل بشكل لا تشوبه شائبة.