UX AnimationsYouTube↗  IA↗(long shot)
Science & Technology  2K views 123 likes 1 dislikes   08 Jan 2021
NNgroup 252K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
- تبدو صور تجربة المستخدم الجيدة طبيعية ودقيقة وغير ملفتة.
Las buenas animaciones UX se sienten naturales, sutiles y no obstruyen.
" ، متخصص خبير في تجربة المستخدم" تبدو وكأن المنتج مادي
Casi se sienten como si el producto fuera físico
ومطابق لما يفعله المستخدم.
y que responde a lo que el usuario hace,
ليست مثل الرسوم المتحركة المثبتة من الأعلى.
no como un cartón que fue solo adherido.
جزء كبير من ذلك هو جعلها سريعة،
Una parte de ello es mantenerlos rápido,
وجعل الحركة دقيقة،
manteniendo los movimientos sutiles
والتأكد من أن لها غرضًا حقيقيًا لكونها في محلها.
y asegurándose de que tengan un propósito real.
أولًا، يجب أن تكون سريعة للغاية.
Primero, deben ser rápidas.
يجب أن تكون صور تجربة المستخدم المتحركة
Las animaciones de UX deberían durar
ما بين 100 مللي ثانية و500 مللي ثانية.
entre 100 milisegundos y 500 milisegundos.
وتلك أقصى مدة.
Y ese es el máximo absoluto.
أغلب الوقت
La mayor parte del tiempo no queremos que pasen
لا تريدونها أن تتخطى 300 مللي ثانية أو ما قاربها.
los 300 milisegundos aproximadamente.
ذلك سريع للغاية.
¡Eso es muy rápido!
ذلك حوالي 1/10 أو نصف ثانية
Es entre un décimo a medio segundo, mucho más rápido
وهو أسرع مما يتوقع أغلب المصممين.
que lo que la mayoría de los diseñadores esperan.
وقد تبدو على عجالة حينما تصممونها
Y puede parecer apresurado cuando lo estamos diseñando
وتشاهدونها مرارًا وتكرارًا.
y viéndolo una y otra vez.
ولكن تذكروا، كلما زادت مدة الصور المتحركة، زاد وقت تأخر
Pero recuerden que cuanto más larga sea la animación,
تجربة المستخدم.
mayor el lapso de tiempo de las experiencias del usuario.
يصبح ذلك مثيرًا للغضب
Eso se vuelve muy frustrante.
خصوصًا في المرة
Especialmente en la segunda, tercera o cuarta
الثانية أو الثالثة أو الرابعة التي ترونه فيها.
vez que la ves.
تريدون الواجهة أن تبدو سريعة وعالية الاستجابة.
Queremos que la interfaz se sienta ágil y reactiva.
القاعدة العامة للمزامنة هي
La regla general para el tiempo es:
كلما بعدت مسافة تحرك شيء ما على الشاشة
cuanto más lejos algo se tiene que mover en la pantalla
وزاد تعقيد الصور المتحركة،
y cuanto más compleja la animación,
زاد الوقت الذي ستحتاجون إليه لجعله يبدو طبيعيًا.
más tiempo necesitaremos para que sea vea natural.
يعني ذلك أن عليكم تفادي الحركة المبالغ فيها.
Eso significa que deberíamos evitar grandes movimientos
خصوصًا على الأجهزة المكتبية، حيث لديكم
exagerados, especialmente en el escritorio,
المزيد من المساحة لتغطيتها.
donde tenemos mucho más espacio para cubrir.
تتطلب الصور المتحركة المعقدة وقتًا أكبر
Las animaciones más complejas toman más tiempo
وتميل إلى أن تكون مُشتتة للانتباه.
y tienden a ser más molestas
لذا، اجعلوا التنقل بين الصور سهلة.
entonces, mantengan las transacciones simples.
لا تحتاج الأيقونات إلى أن تبهر المستخدمين بروتين راقص.
Los íconos no deben deslumbrar a los usuarios con una coreografía.
ظهور هالة مُغيرة للألوان يكفي كإشارة
Un simple halo que cambio de color que aparece es suficiente
إلى أن شيئًا ما قد نُقر عليه.
para señalar que se ha hecho clic sobre algo.
تفادوا التنقل ذهابًا وإيابًا
Eviten cosas rebotando de atrás hacia adelante
وتمديدها كما لو كانت مصنوعة من المطاط.
y estirándose como si estuvieran hechas de goma.
إن فهمتم المجاز المادي بشكل حرفي للغاية
Tómense la metáfora física literalmente también,
فيبدو الأمر كالرسوم المتحركة ومثير للتشويش.
se ve acortonado y marea.
تريدون أيضًا استخدام التسهيل لجعل التوقيت يبدو طبيعيًا.
También usen Easing para hacer que el tiempo se vea natural.
تريدون الأشياء أن تتسارع بشكل طفيف حين
Queremos que las cosas se aceleren de a poco
تبدأ الحركة وتبطئ قليلًا قبل
cuando comienzan a moverse y que se desaceleren un poco
أن تتوقف.
antes de que se detengan.
الأشياء في العالم الطبيعي لا تتحرك
Las cosas en el mundo natural no se mueven
بمعدل خطي مثالي.
en un ritmo perfecto.
تتسارع وتتباطئ قليلًا.
Se aceleran y desaceleran un poco.
لذا، يتحرك هذا الصندوق خطيًا.
Esta caja se está moviendo linealmente.
يبدو متكلفًا وغريبًا.
Se ve forzado y raro.
ولدى هذا، نوعًا ما، تسهيل مُطبق
Esta tiene un poco de Easing aplicado
في البداية والنهاية.
al comienzo y al final.
ألا يبدو أفضل؟
¿No se ve mejor?
لذا كمية صغيرة من التسهيل تجعل الأشياء تتحرك بشكل طبيعي أكثر
Una pequeña cantidad de Easing hace que las cosas
وتساعد عيني المستخدم على تتبع مسار حركة شيء ما.
se muevan naturalmente y ayuda al ojo del usuario a rastrear el lugar donde algo se está moviendo.
أخيرًا، يجب أن يكون للصور المتحركة غرضًا.
Finalmente, las animaciones necesitan tener un propósito
وتحتاج إلى أن توصل شيئًا ما إلى المستخدمين.
y necesitan comunicarles algo a los usuarios.
لا تدرجوها فقط لمجرد المرح
No las incluyan solo para intentar
أو توصيل الشخصيات.
y deleitar o comunicar personalidad.
يتقادم ذلك بسرعة.
Eso se convierte rápidamente en obsoleto.
تكون في غاية الإفادة لهذه الأسباب الـ3:
Son más útil por tres razones:
التقويم، والاكتشاف، والتنقل ما بين الصور.
devolución, descubrimiento y transiciones.
لذا، حين تستخدمونها للتقويم
Cuando se usan para devolución, manténgalas sutiles.
اجعلوها سهلة النقر عليها، الإضافة إلى عربة التسوق
Hacer clic en Agregar al carrito no necesita
لا تحتاج إلى أن تظهر صورة مصغرة للمنتج
mostrar la imagen miniatura del producto,
تتأرجح في قوس كبير عبر الشاشة في عربة التسوق.
balancear un arco a través de la pantalla hasta el carrito.
تغير طفيف في لون الزر
Un simple cambio de color en el botón
ومؤشر صغير على العربة أشياء كثيرة لتأكيد
y un pequeño indicador sobre el carrito son suficientes
أن النظام فهم نقرة المستخدم.
para confirmar que el sistema comprendió el clic del usuario
بينما يمكنكم استخدام الصور المتحركة لجذب الانتباه
Mientras que se puede usar una animación para llamar
إلى أشياء يمكن أن، بخلاف ذلك، تُتجاهل،
la atención a cosas que de otras forma pasarían inadvertidas
لا تستخدموا الصور المتحركة لتعويض الدلالات الضعيفة.
no usen la animación para crear significantes débiles.
عرض إشعار خطأ منزلق في
Mostrar una notificación de error deslizándose en vista
المشهد يمكن أن يكون جيدًا لأنه يساعد المستخدمين في ملاحظته.
puede ser buena porque ayuda a que los usuarios la noten.
عرض أيقونة سهم راقص
Tener un ícono de flecha bailando en una página
على صفحة بها أرضية مزيفة أمر سيء.
que tiene un falso piso es malo.
اجعلوا الصفحة تبدو قابلة للتصفح بدلًا من ذلك.
En lugar de eso, hagan que la página se vea desplegable.
يمكن أن تساعد الصور المتحركة في التنقل ما بين الصفحات
Las animaciones también pueden ayudar con transiciones,
لأنها يمكنها أن توفر المجاز البصري
porque pueden proveer una metáfora visual
لما يحدث.
para lo que está pasando.
يذهب هذا إلى ما هو أبعد من مؤشر تحميل بذخ.
Esto va más allá de un lindo indicador de carga.
يمكنكم استخدامها في المساعدة على إيصال نوع
También las podemos usar para ayudar a comunicar el tipo
التنقل الذي يحدث.
de transición que está ocurriendo.
في متجر التطبيقات هنا،
En la tienda de aplicaciones aquí,
حين تنقرون على بطاقة تطبيق، سرعان ما تتحول
cuando hacemos clic en una aplicación,
إلى وضع الشاشة بأكملها.
rápidamente cubre toda la pantalla.
ويساعد ذلك على إيصال
Eso ayuda a comunicar que estás viendo lo mismo,
أنكم تنظرون إلى الشيء نفسه. فقط تفاصيل أكثر.
solo que en más detalle.
إن لم تظهر النافذة على الفور
Si esa ventana solo apareciera de forma instantánea,
فلن تكون تلك نهاية العالم
no sería el fin del mundo
ولكن التنقل ما بين الحركات يساعد في إيصال العلاقة
pero la transición ayuda a comunicar la relación
ما بين مظهر النافذة الكاملة ذلك
entre esa vista de pantalla completa
والبطاقة في الشاشة السابقة.
y la tarjeta en la pantalla anterior.
كما تلمح بحذق أيضًا إلى أنكم يمكنكم التمرير لغلقها.
También sugiere sutilmente que puedo arrastrar para cerrarla
يمكن لذلك مساعدة المستخدم بلا وعي منه
Eso puede ayudar inconscientemente a que el usuario
في بناء النموذج الذهني له لكيفية عمل النظام.
construya su modelo mental de cómo funciona el sistema. SUSCRÍBASE A NUESTRO CANAL.
Similar videos:

CS:GO Animations

97.8K views 5K likes 144 dislikes 18 Aug 2017100% match

【アニメ】楓「私の勝ち！なんで負けたか明日まで考えといてください！」+他3本
ゲーム部プロジェクト
147.4K views 2.7K likes 885 dislikes 27 Aug 2019100% match

My Animations
TomSka & Friends
770K views 25.8K likes 152 dislikes 15 Apr 2016100% match

4 Trustworthiness Factors
NNgroup
2.1K views 65 likes 5 dislikes 30 Oct 202065% match

Footers are Underrated
NNgroup
3.9K views 85 likes 0 dislikes 04 Oct 201955% match

Animations are Distracting!
NNgroup
7.7K views 105 likes 6 dislikes 30 Nov 201846% match

Transitioning from UI to UX
NNgroup
5.3K views 105 likes 1 dislikes 29 Nov 201942% match

UX vs. Service Design
NNgroup
19K views 386 likes 9 dislikes 21 Jun 201941% match

Design Principles 101
NNgroup
10.1K views 233 likes 2 dislikes 22 May 202040% match

User Interface Design Fails
NNgroup
7.5K views 160 likes 1 dislikes 09 Oct 202039% match

The Halo Effect in UX Design
NNgroup
5.7K views 102 likes 0 dislikes 22 Nov 201937% match

Why Service Design
NNgroup
5.4K views 71 likes 1 dislikes 18 Oct 201937% match

Why Interaction Cost Matters to UX
NNgroup
2.7K views 46 likes 0 dislikes 13 Jul 201837% match

Design Ruts and Functional Fixedness
NNgroup
1.2K views 64 likes 0 dislikes 20 Nov 202036% match

DesignOps 101
NNgroup
5.2K views 104 likes 5 dislikes 26 Jul 201936% match

Usability Heuristic 5: Error Prevention
NNgroup
19.9K views 136 likes 2 dislikes 13 Sep 201934% match

Calculating ROI for Design Projects
NNgroup
4.5K views 159 likes 1 dislikes 26 Feb 202133% match

How to Present UX Design Ideas
NNgroup
11.5K views 356 likes 2 dislikes 12 Jul 201932% match

Inclusive Design Is a Welcome Mat
NNgroup
2.3K views 52 likes 6 dislikes 21 Jun 201932% match

Risk of Copying Famous Companies' Designs
NNgroup
2.8K views 89 likes 0 dislikes 20 Mar 202032% match

Why Didn't People Scroll? The Illusion of Completeness
NNgroup
4K views 73 likes 3 dislikes 06 Dec 201932% match

Website Design in High-Context Cultures like China
NNgroup
3.6K views 93 likes 8 dislikes 13 Mar 202032% match

Design Thinking & Agile
NNgroup
9.8K views 114 likes 6 dislikes 27 Sep 201932% match

Don't Listen to the Customers
NNgroup
8.6K views 248 likes 5 dislikes 17 Jan 202032% match

Checkboxes vs. Switches in Forms
NNgroup
6.2K views 62 likes 3 dislikes 20 Jul 201831% match

How to Test Visual Design
NNgroup
18.5K views 226 likes 1 dislikes 09 Nov 201831% match

Usability Heuristic 4: Consistency and Standards
NNgroup
26.5K views 132 likes 2 dislikes 06 Sep 201931% match

The Visual Principle of Scale in User Interface Design
NNgroup
1.3K views 40 likes 1 dislikes 06 Nov 202031% match

Learnability vs Efficiency in User Interface Design
NNgroup
4.7K views 143 likes 1 dislikes 07 Aug 202031% match

F-Pattern in Reading Digital Content
NNgroup
15.5K views 122 likes 4 dislikes 25 Aug 201731% match


Settings Privacy About Contact Donate