Як поліпшити користувальницький досвід за допомогою анімації
Анімація в дизайні майстерно розповідає історії. Чи не довгі і не складні, а прості розповіді: «Гей, ви повинні подивитися на це зараз», або «Ура, ваша операція тільки що успішно завершена».
Мета анімації - НЕ розважати користувача, а допомогти користувачеві зрозуміти, що відбувається, і як найбільш ефективно використовувати вашу програму.
Більше не потрібно просто проектувати статичні екрани. Потрібно думати про те, що отримує в результаті користувач від взаємодії з цими екранами.
Анімація може бути використана в широкому діапазоні, щоб об`єднати красу і функціональність: вона може впливати на поведінку, спілкування, направляти увагу користувачів і допомогти користувачеві побачити результати своїх дій.
Завантаження не повинна бути нудною
Очікування завантаження сторінки можна зробити більш приємним, якщо використовувати цікаву анімацію замість всім звичного гуртка. Майже будь-який сайт або додаток може використовувати цікаві прелоадери, щоб зробити очікування не таким стомлюючим, і навіть підігріти інтерес користувача.
Переходи потрібно згладжувати
Анімація може бути використана, щоб зробити переходи між сторінками більш очевидними і плавними. Добре спроектований перехід дозволяє користувачеві чітко зрозуміти, на чому зосередити свою увагу.
Ось приклад того, як скролінг-анімація може допомогти зберегти контекст при натисканні на посилання. Просто порівняйте. Ось це різкий перехід:
А це згладжування за допомогою анімації:
І, як ви бачите, переходи допомагають користувачам зрозуміти потік інтерфейсу, логічно направляють користувача до наступного етапу взаємодії.
Відео: PAYDAY 2: Free to Play; Видалення DLC; Поліпшення Неткода і Нові Анімація
Поясніть відносини між елементами
Анімація може посилити почуття прямого маніпулювання.
Наприклад, іконка меню може плавно переходити на управління відтворенням, і назад. Цей ефект буде сповіщати про функції даної кнопки. Два дії пов`язані, і в той час як виконується одне, друге неможливо.
Інший приклад - при натисканні кнопки з варіативним дією, знак плюс перетворюється в олівець. Це вказує на те, що олівець є основним методом створення.
Використовуйте зворотний зв`язок, щоб підкреслити, що щось пішло не так
Анімація може підказати, коли користувач виконує дії невірно.
Наприклад, форма зворотного зв`язку стане ефективніше з використанням анімації. Якщо дані введені правильно, «Кивающая» анімація після завершення вкаже на це. Горизонтальне тремтіння може використовуватися для заперечення - якщо користувач заповнив дані неточно або не повністю.
Використовуйте зворотний зв`язок, щоб показати, що було зроблено
Анімація може бути використана, щоб допомогти людям візуалізувати результати своїх дій. Виходячи з принципу «покажи, не говори», ви можете використовувати анімовану зворотний зв`язок, щоб показати результати дій.
У прикладі нижче, коли користувач натискає кнопку «Оплатити», анімація показує стан успіху. Галочка анімації символізує легкість оплати, допомагає відчути задоволення виконаним дією.
висновок
Анімація - потужний інструмент для спрощення складних взаємодій. Про неї треба думати як про природною складовою проекту, тому що дизайн - це щось більше, ніж просто візуальна частина. Як казав Стів Джобс:
Відео: MBLT17: Анімація в мобільному дизайні. Микола Бабич
«Дизайн - це не те, як продукт виглядає і сприймається. Дизайн - це те, як він працює ».
