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