Splash screen что это
Хитрости разработчика под iOS. Splash Screen
Вступление
В ходе разработки приложений под iOS у меня накопились некоторые хитрости, которыми я хотел бы поделиться с Вами.
Сразу предупрежу, что я стараюсь шагать в ногу со временем, поэтому примеры будут под iOS >=5.0 и использовать Storyboard и ARC, но ничего не мешает их портировать на 4.*.
Если вы давно разрабатываете под iOS — для вас бОльшая часть сказанного мною будет очевидной, но при этом я хотел бы, чтобы вы присоединились к обсуждению и рассказали, как вы реализуете подобное.
Заинтересовавшимся — прошу под кат (Пост содержит скриншоты областей Interface Builder-а, поэтому предупреждаю о траффике).
Splash screen
По умолчанию, iOS предоставляет механизм отображения картинки загрузки приложения в виде указания png-файлов под определённые разрешения, этим сейчас никого не удивишь. Но iOS славится своими transition-ами, анимациями и прочим, это смотрится прикольно и благодаря API Core Animation делается совсем не сложно.
Мне всегда нравился стартовый экран у Skype.app, когда логотип приложения после загрузки уходил вверх, а на экране появлялись элементы ввода. Красиво и легко.
Используя Storyboard, задача становится тривиальной:
Допустим, у нас есть некоторый экран, на который мы попадаем при старте приложения: 
А наш Default.png выглядит примерно так:
Если сейчас запустить приложение, то сначала мы увидим Default.png, а потом сразу же попадём на стартовый экран. Выглядит не очень, согласитесь? Чтобы исправить это, мы создадим ещё один экран, начальное состояние которого будет идентично по виду нашему Default.png и будет содержать outlet UIImageView. сделаем его стартовым и укажем базовый класс, например, SplashScreenViewController:
View очень простой, фон + UIImageView с логотипом по центру. Он будет связан с SplashScreenViewController посредством аутлета с именем imageView.
Теперь создадим Segue от только что созданного экрана к стартовому экрану.
Для тех, кто только изучает Storyboard, или просто забыл, напоминаю, что чтобы создать Segue не по событию, а просто как связь, вы должны начать тянуть его от StatusBar-а исходного ViewController-а и вызывать его вручную (как — покажу дальше в коде):
Код для этого примера будет выглядеть примерно так:
Теперь если мы запустим наше приложение, то сначала мы увидим логотип с Default.png, потом (незаметно для пользователя) экран сменится на наш SplashScreen, проиграет анимация движения логотипа вверх, после чего так же незаметно экран сменится на стартовый.
Я сам данной платформой занимаюсь относительно недавно и порой мне не хватает таких вот уроков, и я уверен, что найдутся те, кому это так же будет полезно, так что не судите строго, если для вас он оказался бесполезным;)
UPD:
Добавил видеодемонстрацию эффекта в эмуляторе
Заставка
Запуск приложения Android занимает некоторое время, особенно при первом запуске приложения на устройстве. На экране-заставке может отображаться ход выполнения, или для обозначения фирменной символики.
Обзор
Запуск приложения Android занимает некоторое время, особенно во время первого запуска приложения на устройстве (иногда это называется холодный запуском). На экране-заставке может отображаться ход выполнения для пользователя или сведения о фирменной символике для обнаружения и продвижения приложения.
В этом руководством рассматривается один прием для реализации экрана-заставки в приложении Android. В нем рассматриваются следующие шаги.
Создание изображаемого ресурса для экрана-заставки.
Определение новой темы, которая будет отображать рисуемый ресурс.
Добавление нового действия в приложение, которое будет использоваться в качестве экрана-заставки, определенного темой, созданной на предыдущем шаге.
Требования
Весь код и XML в этом разделе можно найти в примере проекта SplashScreen для этого руководством.
Реализация экрана-заставки
Самый быстрый способ отображения экрана-заставки — создать пользовательскую тему и применить ее к действию, которое покажет экран-заставку. Когда действие отображается, оно загружает тему и применяет рисуемый ресурс (на который ссылается тема) к фону действия. Такой подход позволяет избежать необходимости создавать файл макета.
Экран-заставка реализуется как действие, которое отображает нарисованную марку, выполняет инициализацию и запускает все задачи. После начальной загрузки приложения действие экрана-заставки запускает основное действие и удаляет себя из стека приложения.
Создание рисунка для экрана-заставки
На экране-заставке будет отображаться XML, отображаемый в фоновом режиме для действия заставки. Для вывода изображения необходимо использовать точечный рисунок (например, PNG или JPG).
Пример приложения определяет нарисованный, вызываемый splash_screen.xml. Для этого можно использовать список слоев для центрирования изображения экрана-заставки в приложении, как показано в следующем коде XML:
layer-list В данном случае изображение-заставка выравнивается по цвету фона, заданному @color/splash_background ресурсом. Образец приложения определяет этот цвет в файле Resources/Values/colors.xml :
Реализация темы
Чтобы создать пользовательскую тему для действия на экране-заставку, измените (или добавьте) значения файла/styles.xml и создайте новый элемент для заставки. Пример файла значений и style.xml показан ниже с именем мисеме. Splash:
Мисеме. Splash — очень Spartan — он объявляет фон окна, явно удаляет строку заголовка из окна и объявляет, что он находится в полноэкранном режиме. Если вы хотите создать экран-заставку, который эмулирует пользовательский интерфейс приложения до того, как действие будет расровнить первый макет, можно использовать windowContentOverlay вместо windowBackground в определении стиля. В этом случае необходимо также изменить splash_screen.xml нарисованной, чтобы она отображала ЭМУЛЯЦИЮ пользовательского интерфейса.
Создание действия-заставки
Теперь нам требуется новое действие для запуска Android, которое имеет образ заставки и выполняет любые задачи запуска. Следующий код является примером полной реализации экрана-заставки:
Важно установить NoHistory=true атрибут таким образом, чтобы действие было удалено из стека назад. Чтобы кнопка «назад» не отменила процесс запуска, можно также переопределить OnBackPressed и сделать это не так:
Альбомный режим
Экран-заставка, реализованный на предыдущих шагах, будет правильно отображаться в книжном и альбомном режиме. Однако в некоторых случаях необходимо иметь отдельные экраны-заставки для книжных и альбомных режимов (например, если изображение-заставка находится в полноэкранном режиме).
Чтобы добавить экран-заставку для альбомного режима, выполните следующие действия.
В папке Resources/Draw (ресурсы и нарисованная ) добавьте альбомную версию изображения экрана-заставки, которую вы хотите использовать. В этом примере splash_logo_land.png является альбомной версией эмблемы, которая использовалась в приведенных выше примерах (она использует белую букву вместо синего).
В папке Resources/Draw (ресурсы и нарисованная ) создайте альбомную версию рисунка, которая была определена ранее (например, splash_screen_land.xml). В этом файле задайте путь к точечному рисунку для альбомной версии изображения экрана-заставки. В следующем примере splash_screen_land.xml использует splash_logo_land.png:
Создайте папку » Resources/Values-Land «, если она еще не существует.
Добавьте файлы colors.xml и style.xml в значения-Land (они могут быть скопированы и изменены из существующих значений/colors.xml и файлов значений и style.xml ).
Выполните сборку и запуск приложения еще раз. Переворачивайте устройство в альбомный режим, пока экран-заставка все еще отображается. Экран-заставка изменится на альбомную версию:
Обратите внимание, что использование экранной заставки с альбомным режимом не всегда обеспечивает удобство работы. По умолчанию Android запускает приложение в книжной ориентации и переходит в альбомный режим, даже если устройство уже находится в альбомном режиме. В результате, если приложение запускается, когда устройство находится в альбомной ориентации, устройство ненадолго отображает портретный экран-заставку, а затем анимируется поворот с книжной страницы на альбомный экран-заставку. К сожалению, этот начальный переход на книжную ориентацию происходит даже при ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape указании флагов действия Splash. Лучший способ обойти это ограничение — создать одно изображение экрана-заставки, которое правильно визуализируется как в книжной, так и альбомной ориентации.
Итоги
В этом руководством обсуждался один из способов реализации экрана-заставки в приложении Xamarin. Android. а именно, применение пользовательской темы к действию запуска.
Делаем вездесущий Splash Screen на iOS
Я расскажу о реализации анимации перехода со сплэш скрина на другие экраны приложения. Задача возникла в рамках глобального ребрендинга, который не мог обойтись без изменения заставки и внешнего вида продукта.
Для многих разработчиков, участвующих в крупных проектах, решение задач, связанных с созданием красивой анимации, становится глотком свежего воздуха в мире багов, сложных фичей и хот-фиксов. Такие задачи относительно просты в реализации, а результат радует глаз и выглядит очень впечатляюще! Но бывают случаи, когда стандартные подходы не применимы, и тогда нужно придумывать всевозможные обходные решения.
На первый взгляд, в задаче обновления сплэш скрина самым сложным кажется создание анимации, а остальное — «рутинная работа». Классическая ситуация: сначала показываем один экран, а потом с кастомным переходом открываем следующий — всё просто!
В рамках анимации нужно сделать на сплэш скрине отверстие, в котором отображается содержимое следующего экрана, то есть мы точно должны знать, какой view показывается под сплэшом. После запуска Юлы открывается лента, поэтому было бы логично привязаться ко view соответствующего контроллера.
Подготовка сплэш скрина
Тут всё просто: imageView с градиентным фоном и imageView с логотипом.
Как известно, этот экран анимировать нельзя, поэтому нужно создать еще один, визуально идентичный, чтобы переход между ними был незаметен. В Main.storyboard добавим ViewController :
Теперь нам нужен презентер, который будет отвечать за логику показа и скрытия слэш скрина. Запишем протокол для него и сразу создадим класс:
Возможно, вам покажется странным, что создание splashViewController и splashWindow вынесено в отдельные функции, но позже это пригодится.
Мы еще не начали писать логику анимации, а в SplashPresenter уже много кода. Поэтому я предлагаю создать сущность, которая будет заниматься непосредственно анимацией (плюс это разделение ответственностей):
Добавим в SplashPresenter :
и поправим у него методы present и dismiss :
Всё, самая скучная часть позади, наконец-то можно приступить к анимации!
Анимация появления
Начнем с анимации появления сплэш скрина, она несложная:
С учетом этого, в SplashAnimator реализуем метод animateAppearance() :
Сам объект удаляем из памяти после скрытия сплэша.
Ура, можно запускать!
Анимация скрытия
К сожалению (или к счастью), с анимацией скрытия 10 строчек кода не справятся. Нужно сделать сквозное отверстие, которое будет еще вращаться и увеличиваться! Если вы подумали, что «это можно сделать маской», то вы совершенно правы!
Проверим, что получилось?
Знаю, сейчас это выглядит не очень впечатляюще, но всё впереди, идем дальше! Особо внимательные могли заметить, что во время анимации логотип становится прозрачным не мгновенно, а в течение некоторого времени. Для этого в mainWindow поверх всех subviews добавим imageView с логотипом, который фэйдом будет скрываться.
Итак, у нас есть отверстие в виде логотипа, а под отверстием сам логотип.
а в методе viewDidLoad() добавим:
Еще нужно пробросить этот объект через конструктор в SplashAnimator (аналогично foregroundSplashWindow ) и добавить туда свойства:
Чтобы вместо черного фона мы видели всё тот же сплэш скрин, прямо перед скрытием foregroundSplashWindow нужно показать backgroundSplashWindow :
Убедимся, что план удался:
Как вы могли заметить, угол поворота рассчитывается исходя из размеров экрана, чтобы Юла на всех девайсах крутилась до верхнего левого угла.
Анимация масштабирования логотипа:
Стоит обратить внимание на finalScale : конечный масштаб также рассчитывается в зависимости от размеров экрана (пропорционально высоте). То есть при высоте экрана 667 поинтов (iPhone 6) Юла должна увеличиться в 18 раз.
Но сначала она немного уменьшается (в соответствии со вторыми элементами в массивах scales и keyTimes ). То есть в момент времени 0.2 * duration (где duration — общая продолжительность анимации масштабирования) масштаб Юлы будет равен 0,85.
Мы уже на финишной! В методе animateDisappearance запускаем все анимации:
1) Масштабирование главного окна ( mainWindow ).
2) Вращение, масштабирование, исчезновение логотипа ( maskBackgroundView ).
3) Вращение, масштабирование «отверстия» ( mask ).
4) Исчезновение текста ( textImageView ).
Заключение
Таким образом, на выходе у нас получился компонент, не зависящий от контекста запуска приложения (будь то диплинк, push-уведомление, обычный старт или что-то другое). Анимация сработает корректно в любом случае!
Делаем экран загрузки Android приложения правильно
Splash Screen (прим.: тут и далее — экран загрузки) просто отнимает ваше время, верно? Как Android разработчик, когда я вижу экран загрузки, я тут же представляю как некоторые плохие разработчики добавляют трехсекундную задержку в коде.
Я должен смотреть на какое-то изображение в течении нескольких секунд, и до тех пор я не могу использовать приложение. И я должен это делать каждый раз после запуска приложения. Я знаю какое приложение я запустил. Я знаю что оно делает. Просто позвольте мне использовать его!
Что рекомендует Google
Вы будете удивлены, узнав что сторонники Google используют Splash Screen. Это описано прямо вот тут, в спецификации к Material Design.
Так было не всегда. Google был против Splash Screen, и даже назвал его анти-паттерном.
Правильный Splash Screen
Я считаю, что Google не противоречит сам себе. Старый совет и новые рекомендации хорошо сочетаются. (Тем не менее, все-таки не очень хорошая идея использовать экран загрузки который отнимает время пользователя. Пожалуйста, не делайте так)
Однако, Android приложениям требуется некоторое количество времени для запуска, особенно при холодном запуске. Существует задержка которую вы не можете избежать. Вместо того чтобы показывать пустой экран, почему бы не показать пользователю что-то хорошее? Именно за этот подход Google и выступает. Не стоит тратить время пользователя, но не показывайте ему пустой, ненастроенный раздел приложения, когда он запускает его впервые.
Если вы посмотрите на последние обновления Google приложений, вы увидите подобный способ использования экрана загрузки. Например, взгляните на приложение YouTube:
Количество времени, которые вы тратите на просмотр Splash Screen, точно соответствует количеству времени, которое требуется приложению для запуска. При холодном запуске, это означает что Splash Screen будет виден дольше. А если приложение уже закэшировано, заставка исчезнет почти сразу.
Реализация Splash Screen
Реализация Splash Screen правильным способом немного отличается от того что вы можете себе приставить. Представление Splash Screen, который вы видите, должно быть готово немедленно, даже прежде чем вы можете раздуть (прим.: inflate) файл макета в вашей Splash Activity (прим.: Activity — активность, деятельность).
Поэтому мы не будем использовать файл макета. Вместо этого мы укажем фон нашего Splash Screen в фоне темы своей Activity. Для этого, сначала необходимо создать XML drawable в res/drawable.
Здесь я задал цвет фона и изображение.
Дальше, вы должны установить этот drawable в качестве фона для темы вашего Splash Screen Activity. Перейдите в файл styles.xml и добавьте новую тему для Splash Screen Activity:
В вашей новой SplashTheme установите в качестве фона ваш XML drawable. И установите эту тему в своей Splash Screen Activity в вашем AndroidManifest.xml:
И, наконец, ваш класс SplashActivity должен перенаправить вас в ваше основное Activity:
Обратите внимание, что вы не настраивает вид для SplashActivity. Представление берется непосредственно из темы. Когда вы задаете вид вашей Splash Screen Activity через тему, он доступен немедленно.
Если у вас есть файл макета для вашей Splash Activity, он будет показан только после того как ваше приложение будет полностью инициализировано, а это что очень поздно. Ведь мы хотим чтобы Splash Screen отображался только небольшой промежуток времени, до того как приложение будет инициализировано.
Делаем это правильно
Как только шаги выше завершены, вы получите Splash Screen реализованный правильным путем:
Вооруженные этим знанием, заставьте ваш Splash Screen работать правильно. Не тратьте время пользователей попусту, но дайте им то, на что им будет приятно смотреть пока они ждут.
Создание идеального экрана-заставки (Splash Screen) для мобильных приложений
Splash Screen (экран-заставка) — Обычно первое что видит пользователь на экране (в нашем случае мобильного телефона). Это изображение которое появляется во время загрузки программы/игры. Обычно логотип или просто картинка с информацией. Но не всегда это изображения, бывает что это просто текст, или splash screen вообще отсутствует.
Вы вероятно задаетесь вопросом: «Насколько трудно создать идеальный splash screen?» Вы скажите, да ведь мы говорим об экране, который будет отображаться всего пару секунд. Экран, который перед тем, как исчезнуть просто покажет логотип. Так что, конечно же, это не может быть слишком сложно.
Идеальный splash screen скрывает несколько ключевых функций, которые должно иметь ваше приложение, как с точки зрения пользовательского опыта, так и с точки зрения функциональности. Хотя вы не можете видеть эти функции в действии, они скрываются под поверхностью большинства splash screen, которые вы видите на своем мобильном устройстве. Зная, что эти функциональные возможности означают, вы можете спроектировать элегантную и эффективную заставку, которая подойдет для различных сценариев.
С точки зрения дизайна splash screen устанавливает сцену для остальной части приложения, приглашая ваших пользователей из холодных, стерильных приложений, которые они ежедневно используют, и погружает их в ваше видение на следующие 3 или 4 минуты, когда вы завладеете их вниманием. Сделайте splash screen правильно, и ваши пользователи войдут в приложение с ожиданием и предвкушением. Сделайте ее неправильно, и они быстро покинут ваше приложение.
Итак, что же такое splash screen?
Splash screen появился, потому что приложению требуется несколько секунд на организацию, прежде чем пользователь сможет двигаться дальше. Независимо от того, как быстро ваше приложение запускается, почти всегда существует несколько небольших задач, которые либо операционная система, либо ваш собственный код приложения должны сделать, прежде чем пользователь сможет начать использовать кнопки и навигационные экраны.
Возможно, вашему приложению нужно загрузить некоторые базовые данные, чтобы на первом экране был контент для просмотра пользователем. Возможно, ваш пользователь нуждается в повторной аутентификации, потому что он не использовал приложение некоторое время. Возможно, некоторые ключевые изображения должны быть загружены с сервера до появления первого экрана. Независимо от причины, заставка прекрасно для этого подходит.
Verse сохраняет максимальную простоту
В наши дни ведется много дискуссий о необходимости создания splash screen, поскольку операционные системы продвинулись, а приложения могут запускаться практически мгновенно, но заставки по-прежнему присутствуют практически во всех основных приложениях и дают нам отличный шанс провести подготовительную работу перед отображением основного экрана.
Правило 3-х секунд
Прежде чем мы начнем анализировать, как сделать идеальную заставку, мы должны рассмотреть несколько ограничений. Во-первых, заставка должна быть быстрой. Насколько быстрой? Как можно быстрее, но не более 2 или 3 секунд. Любой пользователь, который регулярно использует ваше приложение, расстроится, если ему придется сидеть и ждать более нескольких секунд пока приложение откроется. И с чего бы вам хотеть заставлять их ждать – вы хотите, чтобы они зашли в приложение, нажимали на кнопки, покупали продукты и общались с другими пользователями? Поэтому, независимо от вашей стратегии заставки, убедитесь, что, если она нарушит правило 3-х секунд, вы придумаете новую стратегию.
Парадный вход
Почему, по вашему мнению, отели и крупные предприятия тратят так много денег на парадные входы? Поскольку в тот момент, когда вы проходите через эту дверь, вы знаете, что находитесь в качественном месте. То же самое касается приложений. В тот момент, когда пользователь нажимает иконку на главном экране, он переносится в ваш мир. Это ваш шанс произвести впечатление. Чтобы показать пользователям, что ваше приложение красиво и тщательно разработано и, что пользователь будет наслаждаться каждую секунду, проведенную в нем.
Итак, как должен выглядеть splash screen? Дизайн должен быть простым, ярким и визуальным. В те драгоценные 3 секунды (или меньше) ваш пользователь не успевает переварить много информации (и не должен), поэтому сосредоточьтесь на том, чтобы в первый раз представить приложения визуально привлекательным образом.
Самые простые заставки будут отображать сплошной или градиентный фон с иконкой приложения и гаснущим заголовком. Сделайте еще один шаг и анимируйте иконку приложения, чтобы дать реальное ощущение качества. Только не забудьте анимация должна быть сфокусированной и простой и определенно не нарушать правило 3-х секунд. Работаете с партнерами или спонсорами? Сейчас самое время представить их (но помните, что это не самая интересная информация для пользователей, поэтому вы можете показать это в другом месте приложения). Независимо от того, что вы решите, сохраняйте простоту. Это не лучший момент заставлять ваших пользователей сосредоточиться. Просто нежно погрузите их в созданный для них опыт, одновременно демонстрируя качество прекрасно созданного приложения.
splash screen uber
Примечание об анимации: не относитесь к этому слишком серьезно. У некоторых дизайнеров есть привычка переусердствовать и разрабатывать анимацию, которая рассказывает огромную историю – это здорово, если у вашего приложения есть история. Но помните, что, в первый раз, когда пользователь видит анимацию, не имеет значения, какую историю вы расскажете. Поэтому сохраняйте простоту, и, если вы действительно хотите сходить с ума, попросите своих разработчиков сделать так, чтобы сложная анимация отображалась только при первом запуске приложения, а более простая и легкая версия использовалась для последующих сеансов.
https://dribbble.com/sammedve сделал убойную анимацию заставки, но она слишком длинная, чтобы отображать ее каждую сессию
Какой код следует использовать?
Спросите любого разработчика приложений, и он даст вам список из 100 вещей, которые он хочет отразить в коде, пока загружается экран-заставка. Но трюк здесь заключается в том, чтобы сосредоточить этот короткий промежуток времени на абсолютном минимуме, который вам нужен, чтобы на следующем экране появилось достаточно контента для плавного перехода. Для UX дизайнера опыт пользователя имеет первостепенное значение, и, если вы ошибетесь, сейчас на первом экране приложения, вы можете саботировать всю свою работу в остальной части приложения. Пообщайтесь с вашими разработчиками и найдите способ сократить этот список из 100 вещей до 3 или 4 ключевых моментов.
В большинстве случаев это будет означать аутентификацию вашего пользователя, если они ранее вошли в систему, и загрузку базового количества данных, нужных чтобы приложение работало плавно. Возможно, ваш первый экран показывает несколько продаваемых продуктов, если это так, вы можете загрузить эти продукты (и их изображения, возможно), чтобы они немедленно отображались на следующем экране, и пользователь не увидит экран полный изображений-плейсхолдеров. Возможно, ваше приложение имеет чат для обмена сообщениями – в этом случае вам нужно будет узнать, есть ли новые сообщения (но это не значит, что вам нужно загружать фактические разговоры, что может занять гораздо больше времени). В любом случае, обсудите с разработчиками, какой минимальный объем данных требуется вашему приложению, чтобы оно сразу начало работать, и сделайте это прямо здесь, в заставке. Все остальное должно быть сделано позже, когда пользователь войдет в основное приложение.
Итак, что, если загрузка данных нарушает правило 3-х секунд?
Хороший вопрос, и, конечно, это может произойти. Не только потому, что вашему приложению придется загружать большое количество данных, но также потому, что даже при минимальных данных устройство может иметь ограниченное подключение к Интернету, и даже загрузка одного изображения может занять более нескольких секунд. В этом случае вам нужно будет использовать индикатор загрузки – небольшое вращающееся колесо или полосу загрузки, чтобы ваши пользователи знали, что приложение что-то делает.
Есть один потрясающий трюк – показать индикатор загрузки после завершения анимации заставки. Таким образом, ваш пользователь никогда не увидит индикатор, если не будет проблем с загрузкой контента, но, если он его увидит, он будет знать, что приложение все еще работает, и ему надо подождать. Некоторые приложения зацикливают анимацию экрана-загрузки – но это не сообщает пользователю, что приложению требуется больше времени, и поэтому у него останется ощущение, что вы просто тратите его время на повторную анимацию. Итак, покажите индикатор загрузки, как только пройдет 3 секунды.
Говоря о загрузке изображений заранее многие приложения не делают этого во время заставки. Почему бы и нет? Для контента, который, вероятно, каждый раз будет разным, когда пользователь заходит в приложение (например, приложение для доставки еды), это будет означать, что заставка всегда будет «медленной», потому что каждый раз, когда вы открываете приложение, ему будет необходимо загрузить новые изображения. Сравните это с приложением, которое меняет ассортимент продукции очень редко (где изображения могут быть кэшированы, и поэтому только иногда во время заставки нужно будет загружать новый контент). В этих случаях вам лучше сразу дать своим пользователям контент, тогда воспринимаемое время загрузки уменьшится в 2 раза. Сложно подобрать правильный баланс, поэтому не забудьте проверить свое приложение на медленном Интернет-соединении, чтобы узнать длительности загрузки, когда люди используют ваше приложение.
Для постоянного изменения контента лучше загружать изображения после завершения заставки
Что насчет ошибок?
Конечно, иногда может произойти ошибка. Возможно, у вашего пользователя нет подключения к Интернету, но вам необходимо подключение к Интернету для аутентификации пользователя. Или, может быть, ваш сервер работает слишком медленно. Хотя большинство ошибок в приложении можно отображать с помощью всплывающего окна, всплывающее окно на экране-заставке будет уродливым и раздражающим пользователя.
Лучшая стратегия – это прежде всего изолировать только критические ошибки. Если изображение загружается долго, вам не нужно удерживать пользователя – вы можете проигнорировать эту ошибку и попробовать перезагрузить ее на следующем экране. Но если подключение к Интернету отсутствует, и вы не можете аутентифицировать своего пользователя, вы не можете позволить ему пройти дальше этого экрана. Поэтому, во-первых, убедитесь, что вы показываете ошибку только, если проблема критическая, когда пользователю не разрешается продолжать использовать приложение.
Представьте себе приложение, которое сразу же после завершения анимации заставки показывает уродливое всплывающее окно, чтобы сообщить, что у вас нет подключения к Интернету. Не элегантно и примитивно. Вместо этого, почему бы не интегрировать ошибку в экран-заставку (или даже представить ее, как отдельный экран). Мы почти всегда указываем сообщение об ошибке на самом экране-заставке, а также добавляем кнопку обновления страницы. В большинстве случаев проблема будет простым отсутствием Интернета, поэтому кнопка обновления (или автоматическое обновление при восстановлении соединения) является лучшим решением. Делая ошибку, встроенной в этот экран, вы поддерживаете профессиональный вид приложения, а также явно предлагаете вашему пользователю принять меры с помощью кнопки «Обновить».
Приложение XConfessions показывает ошибки и обновляет запрос непосредственно на экране-заставке, чтобы избежать всплывающих окон
Поддержание приложения в актуальной версии
Последняя хитрость создания идеальной заставки – проверить, использует ли пользователь правильную версию приложения. Представьте себе, что вы запускаете приложение (версия 1.0), и в какой-то момент вам нужно обновить некоторые ключевые функции. Вы создаете новое приложение версии 2.0, и готовы разместить его в магазинах приложений, но вам нужно убедиться, что все ваши пользователи обновили приложение до новой версии. Большинство разработчиков сделают все возможное, чтобы этого не произошло, написав код, который работает как для старой версии, так и для новой, но это требует времени и это дорого. Некоторые менеджеры по развитию просто выберут вариант блокировки пользователей из старой версии приложения и принудят их обновиться, чтобы сэкономить время и деньги. Это особенно характерно в начале проекта, когда его функциональность более изменчива и нуждается в свободе развития без затрат на поддержку старой версии.
В настоящее время нет способа заставить пользователей обновлять свое приложение через App Store или Play Store. Поэтому нам нужен механизм, чтобы проверить, действительно ли установленное приложение правильной версии. Чтобы это сработало, попросите своих разработчиков добавить минимальную версию приложения в бэкэнд. В примере выше минимальной версией приложения будет установлено значение 2.0, а если в настоящее время установлено приложение (1.0) меньшее, чем 2.0, мы покажем на экране-заставке сообщение: «Вам нужно обновить приложение, чтобы продолжить использовать нашу платформу».
Упростите обновление для пользователей, предоставив им кнопку, которая направит их прямо в магазин для обновления приложения. И после обновления они смогут продолжить пользоваться вашим приложением.
«Это обязательно?», – спросите вы. Ну, и да, и нет. Если вы пропустите этот шаг, вы на 100% привязаны к поддержке более старых версий вашего приложения. А это означает, что у ваших разработчиков будет больше работы, и ваше приложение становится более сложным. Тем не менее, экран, принуждающий ваших пользователей обновиться до последней версии – это бестактно и его следует использовать только в крайних случаях. Я бы сказал, что обычно он создается с целью никогда его не использовать. Если он вам понадобится в чрезвычайной ситуации, он у вас будет и возможно, выручит вас.
Добавление чего-то особого
А тех, у кого достаточно бюджета, времени и навыков, могут пройти лишнюю милю, полностью интегрируя свой экран-заставку в остальную часть пользовательского опыта. Несколько приложений делают это очень элегантно, но общая стратегия заключается в разработке фона вашего экрана-заставки, чтобы он мог легко слиться с первым экраном вашего приложения. Shazam отлично справляется с этим, при этом иконка приложения оживает, прежде чем появятся другие элементы основного экрана, и даже логотип становится главной кнопкой действия приложения.
Shazam легко интегрирует свой логотип в основной интерфейс
Не обманывайте себя, думая, что это простая задача – такой переход может работать только с определенными приложениями – особенно с теми, где главный логотип появляется на экране, или главный экран приложения – это один экран с относительно минимальным контентом на нем. Это также будет стоить времени и усилий на разработку и графический дизайн. Но это вполне осуществимо, и вы будете пожинать плоды, предлагая плавный переход в функциональность приложения.
В приложении HQ сделан шикарный анимированный переход от экрана-заставки
Идеальный экран-заставка
Если вам понравилась эта статья, вскоре появятся другие публикации из серии «Все, что вам требуется знать об UX приложений». Подписывайтесь на автора на Medium, Facebook или Instagram, чтобы читать подобные статьи.