حركة بهدف

الحركة يجب أن تشرح لا أن تزيّن. كيف نستخدم الحركة لجعل الواجهة أسهل فهماً.

التصميم

التصميم

حركة تعني شيئاً

الحركة أداة للوضوح لا حيلة استعراض.

نستخدم الحركة لإظهار من أين تأتي الأشياء وإلى أين تذهب، ولربط النقرة بنتيجتها، ولتوجيه العين, دائماً في خدمة الفهم لا للعرض فقط.

حركةٌ تستحق الإطار

تُظهر العلاقات

تكشف من أين تأتي الأشياء وإلى أين تذهب.

سريعة لا استعراضية

سريعة كفايةً لتُعلِم دون أن تُنتظِرك.

تحترم التفضيلات

تراعي تقليل الحركة لمن يطلبها.

المبدأ

الحركة يجب أن تشرح لا أن تزيّن

الحركة لغة؛ ومعظم التطبيقات تتحدّثها بسوء.

الانتقال المضبوط التوقيت يخبر العين من أين جاء الشيء وإلى أين ذهب، فتبدو الواجهة متماسكة بدل أن تقفز. الحركة لذاتها تفعل العكس, تلفت الانتباه إلى نفسها وتُبطئ الجميع.

نستخدم الحركة لإظهار السبب والنتيجة، وحفظ السياق عبر التغييرات، وطمأنة المستخدم أن النظام سمعه, ونبقيها سريعة كفايةً كي لا تصير ما تنتظره.

أبرز النقاط

كيف نستخدمها

تشرح

تُظهِر السبب والنتيجة.

تربط

تقرن الإجراء بنتيجته.

محتشمة

خفيّة وسريعة وقابلة للتخطّي.

نظرة أقرب

الحركة تفسير لا زخرفة

ينبغي لكل حركة أن تجيب عن سؤال لم يعرف المستخدم أنه يحمله: من أين جاءت هذه اللوحة؟ ما الذي حُفظ للتو؟ لماذا غادر هذا العنصر القائمة؟ الحركة التي تفسر السببية تستحق أجزاء الثانية التي تستهلكها؛ أما التي تؤدي «كاريزما» فحسب فهي تسرقها.

المدة لغة: التغذية الراجعة الدقيقة تعيش تحت ١٥٠ جزءاً من الألف، والانتقالات المكانية حول ٢٥٠, ٣٥٠، وكل ما تجاوز نصف الثانية فالأفضل أن يكون مسلياً لانتظار حقيقي. حين تبدو الواجهة متثاقلة، تكون الحركات غالباً صحيحة لكنها أطول من اللازم.

نبني على التحويلات والشفافية لمعدلات إطارات سلسة، ونعامل تفضيل تقليل الحركة كمتطلب صارم، ونجرب التوقيتات على أبطأ جهاز نملكه, فالحركة التي لا تبدو جيدة إلا على حاسوب المصمم نكتة خاصة لا يضحك لها المستخدم.

Team for Appsالمنتج والهندسة

نبني برمجيات لفرق تريد أدواتها أن تناسب طريقة عملها الفعلية — الويب والموبايل والذكاء الاصطناعي والأنظمة التي تربطها. نكتب هنا عمّا نتعلّمه أثناء إطلاقها.

لديك مشروع في ذهنك؟

أخبرنا بما تبنيه وسنعود إليك خلال يوم عمل واحد.