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