📝 Chris Raroque Blog

Ключевые выводы и инсайты

• Для создания приложения с ощущением «в 10 раз лучше», чем стандартный iOS, важно использовать множество мелких, но продуманных деталей в дизайне и взаимодействии.
• Анимации и плавные переходы добавляют глубину и делают интерфейс более приятным, хотя Apple часто избегает их из-за масштабируемости и доступности.
• Кастомные иллюстрации (особенно для пустых состояний) придают приложению индивидуальность и выделяют его среди конкурентов.
• Гаптическая обратная связь усиливает взаимодействие и делает работу с приложением более увлекательной и «осязаемой».
• Правильный выбор и последовательное использование иконок сильно влияет на общее восприятие приложения и его стиль.
• Постоянное погружение в качественный дизайн (через соцсети и специализированные ресурсы) помогает развивать вкус и навыки дизайна.

Практические стратегии

• Добавляйте анимации там, где это уместно: переходы между вкладками, кнопки отправки с преобразованиями (например, поворот стрелки в галочку).
  – Разбивайте анимацию на отдельные подзадачи при использовании AI, чтобы добиться сложных эффектов.
• Используйте кастомные иллюстрации для пустых состояний, чтобы сделать экран более живым и информативным.
  – Можно начать с базового изображения, созданного художником, и дальше генерировать вариации через AI.
• Внедряйте гаптическую обратную связь с разной силой вибрации в зависимости от действия, чтобы избежать раздражения и повысить удовольствие от использования.
• Выбирайте иконки осознанно: учитывайте стиль (тонкие, жирные, сложные), сохраняйте единообразие и используйте разный стиль для активных и неактивных состояний.
• Для вдохновения и улучшения дизайна регулярно просматривайте работы других дизайнеров в Twitter и на специализированных сайтах, например Mobin.

Конкретные детали и примеры

• В приложении Luna анимация смены вкладок реализована как скользящий переход между страницами, что заняло 5 дней разработки без AI; сейчас с AI это может занять менее часа.
• В приложении Ellie реализована сложная анимация кнопки отправки с поворотом стрелки в галочку, расширяющимся фоном и плавным исчезновением текста с эффектом пружины.
• Для создания маскота Lily (призрак) использовался арт, нарисованный автором и его девушкой, с вариациями, сгенерированными AI.
• Анимации иллюстраций планируется делать через инструмент Rive.
• В Luna для иконок используется бесплатный набор Hero Icons в тонком варианте, что придает минималистичный чистый стиль.
• Различия между тонкими и жирными иконками влияют на восприятие и общую атмосферу приложения.
• Mobin — база с тысячами скриншотов приложений для изучения и вдохновения.

Предупреждения и распространённые ошибки

• Не пытайтесь получить сложную анимацию одним запросом к AI — разбивайте задачу на подзадачи.
• Избегайте смешивания разных стилей иконок в одном интерфейсе, это ухудшает восприятие и снижает целостность дизайна.
• Не злоупотребляйте гаптической обратной связью, чтобы не раздражать пользователей — используйте разные уровни интенсивности вибрации.
• Не ограничивайтесь только стандартными SF Symbols, они слишком универсальны и не выделяют приложение.
• Не пренебрегайте пустыми состояниями — отсутствие кастомизации в этих местах уменьшает пользовательский опыт.

Ресурсы и дальнейшие шаги

• Сайт Mobin (https://mobbin.design) — для поиска вдохновения и анализа UI лучших приложений.
• Hero Icons — бесплатный набор иконок для iOS-приложений.
• Claude Code и другие AI-инструменты для генерации кода и анимаций.
• Rive — инструмент для анимации иллюстраций.
• Подписаться на профиль автора в Instagram и TikTok для регулярных советов по разработке продуктивных приложений.
• Изучить базовое видео автора по процессу дизайна (мудборды, вайрфреймы), ссылка в описании видео.

Основные темы

• Использование анимаций для улучшения UX (переходы, интерактивные кнопки).
• Кастомные иллюстрации и их роль в создании уникального визуального стиля.
• Внедрение гаптической обратной связи для осязательного взаимодействия.
• Выбор иконок: стиль, последовательность и использование для разных состояний.
• Постоянное обучение и вдохновение через социальные сети и ресурсы с примерами дизайна.
• Практическое применение AI для ускорения разработки и генерации кода.
• Важность мелких деталей, которые в сумме создают премиальный пользовательский опыт.