AuraБрендбук Файлы

Пружина

Нажми Approve (или клавишу A, когда курсор над стендом). Сумма летит туда, куда ушли деньги, счётчик вкладки катится, строка схлопывается, полоска выбора едет к следующей заявке. Подтверждение в месте результата, без тостов.

пружина без отскока200 мс: полоска, цифры400 мс: строка500 мс: панелиподсветка вкладки 1100 мс
Back Office
Withdrawals
Deposits
Players
Bonuses
Reports

Withdrawals

New requests, oldest first
New 5In progress 4Paid
Lukas BauerGermany · LuckyStar
WD-4812Review€2 400.00
Sofia RossiItaly · LuckyStar
WD-4813€860.00
Jan NovákCzechia · NordSpin
WD-4810$1 120.00
Emma LaineFinland · NordSpin
WD-4815€310.00
Pieter de VriesNetherlands · LuckyStar
WD-4816€1 950.00
Lukas Bauer · Germany · LuckyStar
€2 400.00
WD-4812
MethodNetPay, card •• 4418KYCVerifiedRiskLowRequested4 min ago
Движение объясняет, что произошло, и не украшает.
01

Длительности

Одна пружина без отскока: 200, 400 и 500 мс.

  • 200 мс: нажатие, цифры, полоска выбора.
  • 400 мс: строки, раскрытия, меню.
  • 500 мс: панели.
  • Подтверждение там, где результат.
  • Токены в brand.css: --spring, --t-fast, --t-base, --t-panel.
  • «Уменьшить движение» в системе выключает перемещения: все длительности 1 мс.
  • На лицевых поверхностях та же кривая, длительности дольше: числа появятся вместе с шаблонами.
  • Правило одно для продукта, сайта, презентаций и видео.

Чего избегать

  • Не добавляйте отскок, в том числе кривую back.
  • Не зажигайте свечение и кольца у кнопок.
  • Не показывайте тосты.
02

Жесты

Палец ведёт элемент один к одному, после отпускания та же пружина без отскока.

  • Движений два вида: без ввода человека и с ним. Здесь движение с вводом, без ввода в части «Длительности».
  • Пока палец держит, элемент идёт за ним один к одному.
  • За пределом элемент упирается с сопротивлением.
  • После отпускания решает порог: дальше трети или бросок; элемент доезжает той же пружиной со скоростью пальца.
  • Так же по умолчанию в iOS: пружина smooth, bounce 0.

Нажми на заявку, чтобы открыть лист. Тяни за любое место листа, кроме кнопок: вниз, вверх, брось. Тап по затемнению тоже закрывает.

9:41●●● 5G
LuckyStar
WD-4812 · Lukas BauerNeeds review · 4 min
€2 400.00
WD-4813 · Sofia RossiNew · 6 min
€860.00
WD-4810 · Jan NovákNew · 9 min
$1 120.00
WD-4815 · Emma LaineNew · 12 min
€310.00
Approve payout?
WD-4812 · Lukas Bauer · Germany
€2 400.00
MethodNetPay, card •• 4418KYCVerifiedRiskLowArriveswithin an hour
HoldApprove
Пока палец держитЛист идёт за пальцем один к одному, без кривой. Вверх за предел он упирается: чем дальше тянешь, тем сильнее сопротивление. После отпусканияЗакрывается, если протянут дальше трети высоты или брошен вниз быстрее 0,5 px/мс. Иначе возвращается. Бросок вверх всегда возвращает. ДоезжаетТой же пружиной без отскока, но со скоростью пальца в начале: брошенный резко лист улетает резко и останавливается точно на месте.
скорость при отпускании: -

Чего избегать

  • Не добавляйте отскок в лист.
03

Фирменный финал

Фирменное движение: аура расходится от знака после слогана.

  • «Serious brands» → «have an» → «aura.», пауза между долями 300 мс, затем знак и кольца ауры (мотив ауры).

«Serious brands», «have an», «aura.» с шагом 300 мс, пауза, фраза уходит, знак появляется, из него кольцо за кольцом расходится аура.

Serious brands have an aura.

Aura

Чего избегать

  • Не ставьте знак в кольцах со словом Aura под ним поверх линий.
  • Не показывайте слоган целиком или двумя долями и не растягивайте доли до 650 мс.
  • Не превращайте слово в ауру.