Описание услуги
Набор иконок работает тогда, когда видно, что его рисовала одна рука. Поэтому начинаю не с картинок, а с самого интерфейса: смотрю сетку, толщину шрифта, насколько острые или мягкие у вас углы, какие размеры иконок реально встречаются на экранах. Из этого получается короткий свод правил — толщина линии, радиус скругления, оптические размеры, ритм штрихов, — и дальше он держится по всему набору. Двадцатая иконка, дорисованная через три месяца, встаёт рядом с первой и не выглядит гостьей.
Движение добавляю короткое и осмысленное. Вращение говорит «экран работает», галочка — «нажатие прошло», отклонение поля — «так не принято». Каждое движение отвечает на вопрос, который пользователь только что задал, а не развлекает его во время ожидания. Отдельно прорабатываю три состояния, которые в реальной работе весят больше всех: загрузка, успех и ошибка. Поверх них — переключатели, чекбоксы и кнопки с переходами нажатия, активности и недоступности. Набор сразу рисуется в двух темах: штрих, который отлично читается на белом, на тёмной панели часто пропадает.
Передача разработчику — часть работы, а не приложение к ней. Отдаю исходники и экспорт в форматах, которые подходят платформе: лёгкая векторная анимация для веба, спрайт или анимация кодом для мобильных, если так дешевле по весу и по батарее. Вместе с файлами идут числа: длительность каждого движения, кривая ускорения, задержка, порядок, в котором оживают части иконки. До передачи прогоняю набор на слабом устройстве — то, что плавно на рабочей машине, на трёхлетнем телефоне дёргается, а дёргающаяся иконка читается как поломка.
Что входит в работу:
— разбор текущего интерфейса и свод правил: толщина линий, радиусы, сетка, оптические размеры;
— набор иконок в едином стиле, светлая и тёмная тема;
— состояния загрузки, успеха и ошибки — тремя разными, узнаваемыми движениями;
— переключатели, чекбоксы и кнопки с переходами нажатия, активного и недоступного вида;
— исходники и экспорт в лёгких форматах для веба и для мобильных;
— спецификация разработчику: длительность, кривая, задержка и порядок движения по каждой анимации;
— прогон на слабом устройстве с названными и исправленными просадками кадров;
— анимация не заменяет текстовую подсказку: состояние подписывается словом, иначе смысл движения угадывают;
— долгие эффекты в рабочем интерфейсе мешают, поэтому длительность держится в десятых долях секунды;
— мигающих и резко контрастных вспышек не делаю.
Движение добавляю короткое и осмысленное. Вращение говорит «экран работает», галочка — «нажатие прошло», отклонение поля — «так не принято». Каждое движение отвечает на вопрос, который пользователь только что задал, а не развлекает его во время ожидания. Отдельно прорабатываю три состояния, которые в реальной работе весят больше всех: загрузка, успех и ошибка. Поверх них — переключатели, чекбоксы и кнопки с переходами нажатия, активности и недоступности. Набор сразу рисуется в двух темах: штрих, который отлично читается на белом, на тёмной панели часто пропадает.
Передача разработчику — часть работы, а не приложение к ней. Отдаю исходники и экспорт в форматах, которые подходят платформе: лёгкая векторная анимация для веба, спрайт или анимация кодом для мобильных, если так дешевле по весу и по батарее. Вместе с файлами идут числа: длительность каждого движения, кривая ускорения, задержка, порядок, в котором оживают части иконки. До передачи прогоняю набор на слабом устройстве — то, что плавно на рабочей машине, на трёхлетнем телефоне дёргается, а дёргающаяся иконка читается как поломка.
Что входит в работу:
— разбор текущего интерфейса и свод правил: толщина линий, радиусы, сетка, оптические размеры;
— набор иконок в едином стиле, светлая и тёмная тема;
— состояния загрузки, успеха и ошибки — тремя разными, узнаваемыми движениями;
— переключатели, чекбоксы и кнопки с переходами нажатия, активного и недоступного вида;
— исходники и экспорт в лёгких форматах для веба и для мобильных;
— спецификация разработчику: длительность, кривая, задержка и порядок движения по каждой анимации;
— прогон на слабом устройстве с названными и исправленными просадками кадров;
— анимация не заменяет текстовую подсказку: состояние подписывается словом, иначе смысл движения угадывают;
— долгие эффекты в рабочем интерфейсе мешают, поэтому длительность держится в десятых долях секунды;
— мигающих и резко контрастных вспышек не делаю.
