الحركة
استخدم الحركة لتوجيه الانتباه وشرح التغيير. حافظ على شكل الشعار واترك وقتًا للقراءة.
فكرة واحدة واضحة
وضّح التغيير
ادخل بتلاشي لطيف أو انتقال قصير، وثبّت المشهد بما يكفي للقراءة، ثم اختم بوضوح. تجنّب التكرار الزخرفي. هذا العرض مثال ويب، وليس رمز توقيت إنتاجي جديدًا.
حالة ثابتة · بديل تقليل الحركة
في التطبيق
حرّك الرمز كاملًا كوحدة واحدة. اختم بتوقيع ثابت وواضح.
تصبح الأفكار مفيدة عندما تترابط.
حوّل فكرة واضحة إلى مسار تعلّم. امنح الخطوة التالية مساحة لتصبح مفيدة.
يكشف التخطيط تفاصيل نافعة. يعلن الزر حالة التوسيع ويتلقى وضع الحركة المخفّضة المحتوى نفسه فورًا.
مكتمل، مع الحركة أو بدونها
التالي: شكّل الدرس
أكّد الإجراء بعلامة ونتيجة مقروءة. اجعل الانتقال قصيرًا.
01—12 / Figma
مبادئ التحريك
اثنتا عشرة دراسة من نظام الحركة في Figma. اختر مبدأً وأعد تشغيله، أو حرّك المؤشر لتفحص مسار القلم وتعبئة الحبر.
نزّل بيانات المصدر القابلة للتحريرهذه دراسات لبناء الشعار. في واجهة المنتج، حرّك الشعار المكتمل كوحدة واحدة. مددها الطويلة ليست قيم توقيت لواجهة المستخدم.
الانضغاط والتمدّد
افتح الدراسة في Figmaينضغط الحبر ثم يتمدّد ويعود إلى نسبه الأصلية.
موضع الاستخدام استخدمه في لمسات الحبر الزخرفية، مع إبقاء الشعار النهائي دون تغيير.
يقتصر التمدّد على طبقة الحبر الخضراء. يحتفظ الشعار الأبيض النهائي بحدوده المعتمدة.
اقرأ ملاحظات جميع الدراسات
الانضغاط والتمدّد
ينضغط الحبر ثم يتمدّد ويعود إلى نسبه الأصلية.
موضع الاستخدام استخدمه في لمسات الحبر الزخرفية، مع إبقاء الشعار النهائي دون تغيير.
افتح الدراسة في Figmaالتهيئة
تسبق الخطَّ حركةٌ قصيرة إلى الخلف. تستقر الحركة قبل اكتمال تعبئة الحبر.
موضع الاستخدام استخدمه قبل ظهور مقصود أو انتقال يبدأه المستخدم.
افتح الدراسة في Figmaتنظيم الانتباه
تظهر الخطوط بترتيب واضح، ليقود جزء واحد المشهد في كل لحظة.
موضع الاستخدام استخدمه حين تحتاج المقدّمة إلى ترتيب بصري واضح.
افتح الدراسة في Figmaالرسم المتتابع والوضعيات الرئيسية
يتحوّل مسار القلم المتصل إلى شكل ممتلئ عبر مراحل رسم محدّدة.
موضع الاستخدام استخدمه لشرح بناء الرمز خطوة بخطوة.
افتح الدراسة في Figmaالمتابعة والتداخل
تصل الخطوط الكبيرة أولًا، وتتبعها النقطة والوصلة السفلية ثم تستقرّان.
موضع الاستخدام استخدمه لعناصر مترابطة تصل كمجموعة، دون أن تتحرّك كلها في اللحظة نفسها.
افتح الدراسة في Figmaالتدرّج في البداية والنهاية
يتباطأ القلم والحبر عند طرفَي كل خط، بدل الحركة بسرعة ثابتة.
موضع الاستخدام استخدمه لظهور هادئ واستقرار يسهل تتبّعه.
افتح الدراسة في Figmaالمسارات القوسية
يتّبع الرسم مسارًا قوسيًا ثم يعود إلى موضعه الثابت.
موضع الاستخدام استخدمه لانتقال قصير ومحدود داخل مساحة العلامة.
افتح الدراسة في Figmaالحركة الثانوية
تتحرّك النقطة حركةً صغيرة بعد رسم الشكل الرئيسي.
موضع الاستخدام استخدم لمسة صغيرة واحدة بعد الحركة الرئيسية، مع إبقاء الانتباه على الشكل الأساسي.
افتح الدراسة في Figmaالتوقيت
تمنح مدد الخطوط والوقفات المختلفة إيقاعًا خاصًا لكل جزء.
موضع الاستخدام استخدم التوقيت للفصل بين الرسم والقراءة والاكتمال.
افتح الدراسة في Figmaالمبالغة
توضّح حركة اقتراب أطول وتجاوز محدود اتجاهَ الحركة.
موضع الاستخدام استخدمه في عرض كبير للعلامة، وقلّل مسافة الحركة في الواجهات الصغيرة.
افتح الدراسة في Figmaالتجميع المكاني
تصل أجزاء الحبر من مواضع منفصلة وتلتقي عند حدود الرمز الدقيقة.
موضع الاستخدام استخدمه لشرح اتصال الأجزاء، ولا تترك الشعار مفكّكًا.
افتح الدراسة في Figmaالجاذبية البصرية
يوازن المشهد بين إيقاع الرسم ونهاية ثابتة وواضحة.
موضع الاستخدام استخدمه حين يحتاج الشعار إلى وقت للقراءة بعد ظهوره.
افتح الدراسة في Figma
01—08 / Figma
مشاهد حركية مركّبة
ثمانية مشاهد تجمع مبادئ التحريك. قارن ترتيب الخطوط والوقفات وطريقة استقرار كل مشهد.
نزّل بيانات المصدر القابلة للتحريرهذه دراسات لبناء الشعار. في واجهة المنتج، حرّك الشعار المكتمل كوحدة واحدة. مددها الطويلة ليست قيم توقيت لواجهة المستخدم.
تتشكّل الفكرة
افتح الدراسة في Figmaتقدّم حركة تمهيدية صغيرة النقطة، ثم تتبعها الخطوط المتصلة ولمسة أخيرة.
موضع الاستخدام استخدمه كمقدّمة للعلامة بعد أن يختار المستخدم التشغيل.
اقرأ ملاحظات جميع الدراسات
تتشكّل الفكرة
تقدّم حركة تمهيدية صغيرة النقطة، ثم تتبعها الخطوط المتصلة ولمسة أخيرة.
موضع الاستخدام استخدمه كمقدّمة للعلامة بعد أن يختار المستخدم التشغيل.
افتح الدراسة في Figmaالتجميع الدقيق
تقترب الأجزاء المنفصلة من مواضعها النهائية، وتتباطأ ثم تستقر في الشعار.
موضع الاستخدام استخدمه لشرح المحاذاة والعلاقة بين أجزاء الشعار.
افتح الدراسة في Figmaتوقيع واثق
تقود تهيئة سريعة إلى دفعة الحبر، وتتبع الوصلة السفلية الخطَّ الأكبر.
موضع الاستخدام استخدمه للحظة توقيع قصيرة، واحصر أثر الدفعة في الحبر الزخرفي.
افتح الدراسة في Figmaاستقرار هادئ
يقود الشكل الرئيسي تعبئةَ حبر هادئة. تصل النقطة والوصلة لاحقًا، ثم يستقر المشهد.
موضع الاستخدام استخدمه حين ينبغي أن تظهر العلامة دون مقاطعة المحتوى المجاور.
افتح الدراسة في Figmaتعاقب الحركة
تنتقل دفعة صغيرة من المثلث الأيمن إلى النقطة والوسط والوصلة والمثلث الأيسر.
موضع الاستخدام استخدمه لإظهار اتصال ينتقل عبر الرمز من اليمين إلى اليسار.
افتح الدراسة في Figmaتوتّر محسوب
يتوقّف الرسم قليلًا، ويتراجع ثم ينطلق ويعود إلى موضعه الثابت.
موضع الاستخدام استخدمه لظهور مقصود واحد، وتجنّب تكرار التمهيد حول الإجراءات المعتادة.
افتح الدراسة في Figmaذاكرة الحبر
ينثني الخط العريض للحظة، وتتبع النقطة والوصلة قبل أن يستقر الحبر.
موضع الاستخدام استخدمه في الحبر الزخرفي للإيحاء بضغط القلم، مع الحفاظ على الشعار النهائي.
افتح الدراسة في Figmaتثبيت الانتباه
يحافظ ترتيب الرسم والوقفات على الانتباه لجزء واحد، قبل اكتمال الشعار.
موضع الاستخدام استخدمه لنهاية واضحة تتيح وقتًا كافيًا للتعرّف على الرمز.
افتح الدراسة في Figma
حين تستحق الحركة مكانها
تعمل الأمثلة مرة واحدة عند ظهورها بوضوح، وتُعاد عند التمرير إليها مجددًا. تتوقف خارج الشاشة أو عند إخفاء التبويب. يبقى الإيقاف وفحص المشاهد تحت تحكمك. يحافظ تقليل الحركة على الرسوم ثابتة.
القواعد والمصدر
وصول، تثبيت، خروج
ادخل بتلاشي لطيف أو انتقال قصير، وثبّت المشهد بما يكفي للقراءة، ثم اختم بوضوح. تجنّب التكرار الزخرفي. هذا العرض مثال ويب، وليس رمز توقيت إنتاجي جديدًا.
بديل ثابت
يحافظ وضع تقليل الحركة على المشهد الثابت المفيد نفسه. تتوقف الحركة الاختيارية عند خروج المثال من الشاشة أو إخفاء التبويب.
افعل
حرّك الشعار الكامل كوحدة سليمة.
لا تفعل
لا تحوّل الشكل أو تمدده أو تحرك أجزاء الشعار منفصلة.
افتح مصدر Figma القابل للتحريرصفحات المصدر 32