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