Индикатор загрузки. Инновационные индикаторы загрузки: 10 креативных решений для улучшения пользовательского опыта — Производство и поставка электростанций, Бензиновые и дизельные генераторы от 1 до 100 кВт. Мини ТЭЦ на базе двигателя Стирлинга.

Как сделать ожидание загрузки контента более приятным для пользователей. Какие креативные индикаторы загрузки использовать вместо стандартных спиннеров. Почему важно показывать прогресс загрузки.

Содержание

Почему стандартные спиннеры уже не эффективны

Стандартные анимированные спиннеры, которые мы привыкли видеть при загрузке контента, уже не так эффективны, как раньше. Почему стоит отказаться от их использования:

Они не дают пользователю понимания, сколько времени займет загрузка
Создают ощущение неопределенности и ожидания
Не показывают реальный прогресс загрузки
При длительном отображении вызывают раздражение
Не позволяют оценить, работает ли система или произошел сбой

Вместо этого стоит использовать более информативные и креативные решения, которые сделают ожидание загрузки более приятным для пользователя.

Преимущества креативных индикаторов загрузки

Использование нестандартных анимированных индикаторов загрузки дает ряд преимуществ:

Привлекают внимание и развлекают пользователя во время ожидания
Создают позитивные эмоции и впечатления от использования продукта
Подчеркивают уникальность бренда и дизайна
Позволяют показать реальный прогресс загрузки
Снижают субъективное ощущение времени ожидания

Креативный подход к отображению процесса загрузки помогает удержать внимание пользователя и сделать его опыт более приятным.

Топ-10 креативных индикаторов загрузки

Рассмотрим несколько интересных примеров нестандартных индикаторов загрузки, которые можно использовать вместо обычных спиннеров:

1. Анимированные персонажи

Забавные анимированные персонажи, которые двигаются или выполняют какие-то действия во время загрузки, отлично отвлекают внимание и развлекают пользователя. Это могут быть как простые геометрические фигуры, так и детализированные иллюстрации в фирменном стиле.

2. Интерактивные мини-игры

Простые мини-игры, в которые можно поиграть во время загрузки, полностью захватывают внимание пользователя. Подойдут простые аркады или головоломки, не требующие сложного управления.

3. Анимация заполнения

Постепенное заполнение контуров логотипа или других элементов дизайна позволяет наглядно показать прогресс загрузки. При этом анимация может быть стилизована под фирменный стиль.

4. Текстовые подсказки

Отображение полезных советов, интересных фактов или цитат во время загрузки не только развлекает, но и приносит пользу. Главное не переборщить с объемом текста.

5. Трансформация элементов

Эффектная анимация трансформации простых геометрических фигур в более сложные элементы дизайна захватывает внимание и создает wow-эффект. Финальная форма может быть логотипом или частью интерфейса.

Как правильно использовать креативные индикаторы загрузки

При внедрении нестандартных индикаторов загрузки важно соблюдать несколько правил:

Анимация не должна быть слишком навязчивой и отвлекающей
Индикатор должен соответствовать общему стилю дизайна
Важно обеспечить плавные переходы между состояниями
Анимация не должна существенно увеличивать время загрузки
Необходимо предусмотреть запасной вариант для медленных устройств

При грамотном подходе креативные индикаторы загрузки могут значительно улучшить пользовательский опыт и выделить продукт среди конкурентов.

Примеры использования креативных индикаторов в реальных проектах

Рассмотрим несколько примеров успешного внедрения нестандартных индикаторов загрузки:

Анимированный персонаж на сайте Dropbox

При первой загрузке сайта Dropbox появляется анимированный персонаж-талисман, который весело прыгает во время загрузки страницы. Это создает позитивное первое впечатление и соответствует дружелюбному стилю бренда.

Интерактивная загрузка в приложении Google Maps

В мобильном приложении Google Maps во время построения маршрута отображается анимированная машинка, которая едет по дороге. Это наглядно показывает процесс и развлекает пользователя.

Трансформация логотипа на сайте Adobe

На сайте Adobe при переходе между разделами логотип компании красиво трансформируется, показывая процесс загрузки. Это выглядит эффектно и соответствует креативному духу бренда.

Как создать свой креативный индикатор загрузки

Если вы хотите разработать уникальный индикатор загрузки для своего проекта, можно воспользоваться следующим алгоритмом:

Определите ключевые ценности и характер бренда
Придумайте концепцию, отражающую эти ценности
Сделайте несколько простых набросков
Создайте векторные иллюстрации в графическом редакторе
Разработайте анимацию с помощью CSS или JavaScript
Протестируйте на разных устройствах и доработайте при необходимости

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

Выводы

Креативные индикаторы загрузки — это отличный способ улучшить пользовательский опыт и выделиться среди конкурентов. Они помогают:

Снизить субъективное ощущение времени ожидания
Создать позитивные эмоции от использования продукта
Подчеркнуть уникальность бренда
Удержать внимание пользователя
Сделать взаимодействие с интерфейсом более приятным

При грамотном подходе к разработке и внедрению креативные индикаторы загрузки могут стать важным конкурентным преимуществом и повысить лояльность пользователей к продукту.

10 креативных индикаторов загрузки | UXPUB

Все хотят сделать это, когда загрузка занимает слишком много времени.

Видимость системного статуса является одним из важнейших принципов дизайна пользовательского интерфейса.

Хороший дизайн взаимодействия обеспечивает обратную связь

Хотя мгновенный отклик приложения или веб-сайта это замечательно, но бывают случаи, когда ваш продукт не сможет соответствовать рекомендациям по скорости. Медленный ответ может быть вызван плохим подключением к Интернету или сама операция может занимать много времени. В таких случаях разработчики должны заверить пользователей, что приложение работает над их запросом, и что фактический прогресс уже сделан.

Анимированный индикатор прогресса – это наиболее распространенная форма предоставления пользователям статуса системы, когда что-то происходит или загружается. Но большинство таких индикаторов выглядят скучно, потому что создатели продукта используют индикаторы загрузки по умолчанию (независимо от того, под какую систему они создают предложение).

Бесконечный спиннер загрузки уведомляет пользователей о загрузке контента. Каждое второе приложение, представленное на рынке, использует его для информирования пользователей о времени загрузки.

Если вы не можете сократить ожидание, вы должны, по крайней мере, попытаться сделать ожидание более приятным для ваших пользователей.

Креативные индикаторы прогресса могут уменьшить воспринимаемое пользователем время. Если приложение во время ожидания дает пользователям что-то интересное для просмотра, это заставляет пользователей уделять меньше внимания самому ожиданию. Таким образом, чтобы люди не скучали, ожидая чего-то, дизайнер может предложить им отвлечение.

В этой статье я хочу изучить десять интересных концепций индикаторов загрузки.

1. Интервью загружается…

ueno. использует время ожидания, чтобы познакомить посетителей со своей командой.

2. Загрузка рождественских подарков

Выглядит как будто, приложение загружает подарки. Chuan²

3. Очаровательная кошка

Вместо того, чтобы использовать системный спиннер загрузки, дизайнеры могут использовать что-то, что создает сильные положительные (надеюсь) эмоции. Thomas Bogner

4. Двойная спираль

Эта анимация загрузки создает эффект 3D-преобразований. Drew Endly

5. Поиск лучших рейсов

Как только пользователи выбирают исходный и конечный пункт полета и нажимают кнопку «Поиск», анимация показывает полет от исходной точки до места назначения. Mark

6. Сохранение данных в облаке

Этот индикатор загрузки основан на метафоре загрузки файла в облако. Это почти буквально вертикальная полоса загрузки. Ben Mettler

7. Оживите процесс загрузки

Эта анимация делает процесс загрузки таким захватывающим, как наблюдение за тем, как кто-то идет по натянутому канату. xjw

8. Прекрасная анимация для экрана-заставки

Красивый дизайн заставки в сочетании с прекрасной анимацией может дать разработчикам приложений несколько лишних секунд, чтобы загрузить все необходимые данные. Behance

9. Потяните, чтобы обновить анимацию

Эта анимация, которую нужно потянуть, чтобы обновить страницу, имеет четкую функциональную цель. Она соединяет два состояния – до и после обновления. Ramotion

10. Анимация загрузки файлов

Эта анимация – отличный пример плавных переходов в состояние. Галочка в конце уведомляет пользователей о том, что операция прошла успешно. Eddy Gann

Вывод

Хотя все упомянутые выше эффекты могут улучшить пользовательский опыт, лучше не злоупотреблять ими. То, что выглядит забавно и восхитительно в первый раз, может показаться скучным и предсказуемым на 100-й раз. Также креативный эффект загрузки не может решить проблему медленной загрузки. Когда пользователи снова и снова видят один и тот же эффект загрузки, вскоре они начнут обвинять приложение в длительности загрузки.

Прекратите использовать спиннеры — есть кое что получше

Перестаньте использовать эти скучные колёса загрузки в своих пользовательских интерфейсах. Серьёзно. Это ухудшает опыт использования вашего приложения сильнее, чем вы можете подумать. Вам может показаться, что колесо загрузки является решением ваших проблем с загрузкой контента. Но я хочу вам доказать, что это не так.

Вы, возможно, используете какие-то другие причудливые индикаторы загрузки. Но и они не лучше.

Почему спиннеры не работают

Долгое время мы следуем или подвергаемся влиянию жёстких правил языков дизайна. Я вас в этом не обвиняю.

Ключ к мудрости — это постоянно и часто задавать вопросы. Сомнение ведёт нас к вопросу, а вопрос — к правде. — Пьер Абеляр

Колесо загрузки — один из самых используемых индикаторов процесса загрузки в UI дизайне. Но у него есть недостатки, которые стоит пересмотреть.

После того, как смотрел на столько загрузочных индикаторов…

1. Никакого прогресса

О чем говорит вам загрузочное колесо? Оно обозначает, что контент загружается. Но сообщает ли оно, как много уже загрузилось и сколько ещё осталось?

Нет. Более того, это сложно определить, иначе мы бы использовали прогресс бар, верно?

2. Период неопределенности

Как долго вы на это смотрели? Ожидали ли вы загрузки какого-либо контента? Простите за разочарование. Ок, предположим, что GIF полностью загрузился и появляется какое-то содержимое. Задайте себе эти вопросы и ответьте честно:

Когда вы смотрели на колесо загрузки, знали ли вы, сколько времени осталось до завершения?
Как много содержимого загрузилось?
Как много осталось загрузить?

Мы просто сидим и смотрим на индикатор загрузки. Надеясь, что он скоро загрузится, без ответа на эти три вопроса.

Более того, сетевое соединение может быть нестабильным. Поэтому мы никогда не можем быть уверены, что контент вообще загружается.

3. Более медленное восприятие

Колёса загрузки заставляют загрузку казаться дольше. Точка.

Это как постоянно тикающие часы. Они показывают вам время, которое вы потратили, смотря на них. Как та гифка сверху, на которую я заставил вас смотреть.

4. То, что дальше — сюрприз

До того, как все загрузится, знаете ли вы, что ожидать на экране? Спорю, что нет. Вы можете даже удивиться, когда интерфейс и контент появятся.

Подумайте о своих пользователях. До полной загрузки у них нет ни малейшего представления о том, чего ждать. Держу пари, что они будут удивлены. И это не их вина. Вы не сказали им, чего ожидать с самого начала.

Сюрприз — это не всегда хорошо.

Сюрприз — неожиданный или удивительный факт, событие и т.д.

Само определение говорит о том, что сюрприз — это что-то неожиданное. На такие события у людей обычно противоположные реакции: позитивная или негативная.

Сюрпризы не всегда положительно влияют на людей. Если это не их день рождения. Это зависит от восприятия человека. Следовательно, здесь находится проблема.

Взгляните на оба изображения. Могли ли бы вы сказать, что интерфейс справа в итоге будет выглядеть так? Уверен, что нет.

Да, финальный интерфейс на правой картинке — прототип. Но вы поняли мою точку зрения.

Я специально не брал примеры из существующих приложений, потому что мы все знаем, как они выглядят. В знакомом приложении вы уже знаете, как будет выглядеть интерфейс, до его загрузки.

5. Эмоции влияют на наше ощущение времени

Люди довольно точно могут предсказывать время. Но под влиянием наших эмоций, чувство времени сильно изменяется.

Мы все это испытывали: время летит, когда мы заняты чем-то приятным, и оно ползет, когда мы делаем то, что ненавидим. Даже когда вам скучно и вы смотрите на часы в ожидании любимого ТВ-шоу. Время идет еще медленнее.

То же самое работает и для наших интерфейсов.

Ваш контент может загружаться не так долго. Но эта загрузка может показаться пользователю дольше, чем на самом деле. Мы не можем изменить, как люди воспринимают время, но мы можем изменить, что они воспринимают. Мы можем убедить их в том, что наше приложение быстрее, чем есть на самом деле.

Примечание: Не слишком увлекайтесь имитированием. Вашему интерфейсу для успеха нужна комбинация реальной и воспринимаемой скорости.

Иллюзия выбора

Обычно у нас есть два варианта обозначения загрузки содержимого:

Конечный прогресс бар — если мы знаем точное время загрузки.
Бесконечный спиннер — если время точно не известно.

Давайте еще раз взглянем на опции. Вы понимаете, что здесь нет настоящего выбора?

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

Хороший индикатор прогресса

Хороший индикатор не должен включать в себя те минусы, о которых я упомянул выше. Вот список этих критериев:

Дает немедленную обратную связь.
Обеспечивает ощущение времени (сколько прошло и сколько осталось).
Устраняет сомнения (постепенный прогресс показывает людям, что приложение работает).

Немного доказательств

Некоторые из вас не поверят в то, что я сказал. На вашем месте я бы тоже себе не поверил. В конце концов, где доказательства? Действительно ли вредят индикаторы загрузки? Кто это испытывал?

Считайте, что вам повезло. Вы можете научиться на чужих ошибках.

Приложение Polar для iOS настоятельно рекомендует избегать колес загрузки.

Polar получили много жалоб на то, что их приложение медленно работает. Они были вызваны как раз работой спиннеров в приложении.

С индикаторами прогресса мы заставили людей смотреть на часы. В результате время замедлилось, как и наше приложение. Мы сфокусировались на индикаторе, а не на прогрессе, для того, чтобы дать вам ощущение движения к цели вместо простого ожидания. — Polar

Я думаю, что достаточно сказал о том, почему колеса загрузки плохие. Главная проблема — отсутствие прогресса. Однако мы можем это исправить.

Как? Ответ — “экраны-скелеты”.

Экраны-скелеты вам в помощь

В отличие от колес загрузки, когда интерфейс показывается целиком, экран-скелет позволяет загружать UI постепенно.

Это значит, что каркас интерфейса появляется в первую очередь. Затем загруженное содержимое постепенно проявляется.

Скелет экрана — это по сути пустая страница, на которой постепенно загружается информация. — Люк Вроблевски

LinkedIn недавно стали использовать экраны-скелеты при загрузке.

Такие интерфейсы смещают внимание пользователей. Они заставляют их ориентироваться на прогресс, а не на время ожидания. Экраны-скелеты визуально сообщают пользователям, чего им ожидать от интерфейса. Он дает им подсказку о том, что произойдет дальше и создает ощущение постепенного процесса.

Чаще всего он влияет на восприятие людей: сайт кажется быстрее, чем он есть на самом деле. Помните, что мы делаем интерфейсы для использования настоящими людьми. Мы должны дать им ощущение скорости.

Чем больше система дает информации о времени ожидания, тем более удовлетворен пользователь. — Как улучшить восприятия времени ожидания во взаимодействии человека и компьютера.

У экрана-скелета есть следующие преимущества:

Помогает людям воспринимать ваш экран, как более быстрый
Устраняет сюрпризы
Постепенная загрузка интерфейса — ясная индикация прогресса
Точно показывает, что загрузилось и что еще нужно загрузить

Постепенное развитие

Я знаю — это забавный термин. Он означает постепенную загрузку вашего содержимого. Ребята из веб-дизайна и разработки называют его “ленивой загрузкой”.

Ленивая загрузка — откладывание инициализации объекта до момента необходимости.

Сначала — основа интерфейса. Затем загрузите текстовые данные: пользователь будет знать, что он получает контент. Затем загружайте изображения.

Так вы дадите пользователям:

Чувство прогресса
Понимание, что ожидать дальше
Что осталось ждать

Смотрите, как Instagram умно справляется с загрузкой:

Сначала он недолго показывает загрузочное колесо. Затем он показывает основу интерфейса. Это экран-скелет или Placeholder. Он обозначает места, где затем появится контент.

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

Вот некоторые веб-сайты, которые используют экраны-скелеты для загрузки.

Вы можете поспорить, что эти веб-сайты используют колеса загрузки. Но обратите внимание, как они это делают.

Начало и конец не обозначаются одним индикатором. Колесо загрузки показывается на короткий период, за ним следует каркас экрана.

Подсказка Если ваше время загрузки дольше, вы можете ненадолго показать колесо загрузки перед скелетом UI. Это может дать вашему заданию немного больше времени для завершения.

Прогрессивная загрузка изображений

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

Medium действует немного по-другому. Веб-сайт использует изображение с маленьким количеством пикселей и размывает его. Затем он загружает более качественное изображение для того, чтобы его заменить интересным анимированным переходом.

Я уверен, что вы видели хотя бы один из приведенных примеров. Может быть, вы не знали, как это называется.

Последовательность шагов для прогрессивной загрузки изображений:

Покажите скелет экрана
Загрузите размытое изображение в очень низком качестве (или его основной цвет)
Загрузите высококачественный фон
Замените изображение более высококачественным

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

Экраны-скелеты на Android и iOS

Многие из примеров таких интерфейсов — это сайты. Но как сделать это на мобильных платформах? Все это не стоило читать, если бы я не дал вам подсказку для этого.

Shimmer от Facebook

Facebook выпустил библиотеку под названием Shimmer для Android и iOS. Она работает, как скелет UI от Facebook для загрузки контента. Мерцающая анимация показывает, что в данный момент контент загружается. Вы можете использовать эту библиотеку для создания каркасов экранов загрузки в своих приложениях.

Исправление сбоев с экранами-скелетами

Нет никакой гарантии, что запрос будет выполнен успешно. Поэтому мы не можем предполагать, что если контент загружается, то он загрузится до конца. Есть шанс, что из-за ошибок с соединением загрузка прервется.

Предположим, что вы начали загружать содержимое, появился экран-скелет, затем соединение неожиданно пропадает. Как вы справитесь с этим?

Вам нужно проинформировать пользователя и предложить попробовать ещё раз.

Помните, что обратная связь — это хороший интерактивный дизайн и позитивный пользовательский опыт.

Пустые состояния появляются, когда содержимое не может быть показано.

Подсказка: Рассмотрите возможность использования “пустых состояний”. Это позволит вам обеспечить понятную обратную связь с помощью кнопки призыва к действию (CTA).

Все началось с простого парадокса: Дизайн нового приложения Uber

Коннективити в Android и iOS

Вот пара ресурсов, которые помогут вам справляться с проблемами подключения.

Android:

Используйте Snackbar для обратной связи с помощью CTA-кнопки.
Connectivity — утилита для управления сетью.

iOS-Swift:

iOS Alerts — коллекция библиотек для оповещений.
Reachability — управление сетью.

Итог

Приложения становятся умнее. Люди начинают понимать, что спиннеры вредят их UX. Следовательно, пришло время понять и вам.

Экраны-скелеты привносят прогресс в загрузку вашего интерфейса. Такая обратная связь улучшает пользовательский опыт и уменьшает неуверенность. Более того, людям захочется подождать немного дольше.

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Какой индикатор загрузки выбрать

Представьте ситуацию: вы в магазине пытаетесь найти товар и спрашиваете консультанта где он находится. В ответ на это консультант просто стоит на месте, не предпринимая никаких действий. Скорее всего вы почувствуете разочарование и уйдете. Точно так же чувствуют себя пользователи, которые слишком долго наблюдают на своем мониторе индикатор загрузки типа «спиннер».

Спиннеры не для длительной загрузки

Спиннеры не сообщают пользователю насколько продолжителен процесс загрузки. Если вы используете этот индикатор для слишком длительного процесса, пользователи начнут думать, что что-то пошло не так и с приложением проблемы. Отсутствие информации создает неопределенность, которую посетители будут трактовать наихудшим образом.

Пользователи решат, что загрузка займет слишком много времени, а это, как вы понимаете, не скрасит их ожидания. Нетерпение будет накапливаться, и в итоге посетитель просто нажмет кнопку «обратно» или вообще выйдет из приложения.

Правило четырех секунд

Если вы хотите, чтобы пользователи оставались в вашем приложении, не используйте спиннеры при загрузке, время которой превышает четыре минуты. Научное исследование показало, что максимальный предел толерантности ожидания у пользователей составляет четыре минуты. Это значит, что после четырех секунд поведенческие намерения изменяются.

Когда использовать спиннер

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

Если у вас есть процесс, который длится больше секунды, используйте спиннер. Это даст понять пользователям, что приложение загружается, а это облегчит их ожидания и избавит от беспокойств.

Полоса загрузки для длительных процессов

Если процесс занимает более четырех секунд, вам нужно использовать полосу загрузки. В этом случае пользователи склонны проявлять больше толерантности при ожидании.

Все потому что вы даете четкое понимание того сколько времени займет ожидание. Полоса загрузки позволяет пользователям видеть прогресс, что поддерживает их в их ожидании. Если они видят только спиннер, то никакого прогресса наблюдать не могут, и вообще не могут уверены в том, что действие в принципе происходит. У посетителя просто нет стимула ждать.

Как оформить полосу загрузки

Полоса загрузки должна демонстрировать пользователям степень осуществления прогресса. Анимация должна происходить слева направо в постепенном и последовательном темпе. Если анимация останавливается на слишком долгое время, пользователи начинают думать, что процесс застопорился и не хотят больше ждать.

Также нужно добавить числовую оценку прогрессу. Если процесс занимает меньше минуты, отобразите загрузку в виде процента от загрузки или числа загруженных файлов. Информируйте пользователей о том какую именно активность производит приложение.

Если загрузка занимает больше минуты, вы должны дать информацию о том, сколько времени займет ожидание. Это даст пользователям понимание, что процесс будет идти дольше чем обычно. Укажите оставшееся время ожидания в минутах, чтобы у человек мог переключиться на что-то другое и вернуться к приложению в указанный срок.

Не злоупотребляйте спиннерами

У многих дизайнеров есть привычка использовать спиннеры при любом процессе загрузки. Но если вы используете их при длительно загрузке, это провоцирует разочарование пользователей. Избегайте этого, используя при необходимости полосы загрузки.

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

Кнопки с индикатором загрузки — правила использования в дизайне интерфейсов

Пользовательский опыт — главный критерий, который отличает плохой user interface от хорошего. Дизайнер должен забыть о красивых картинках и сосредоточиться на юзабилити. Если в процессе изучения интерфейса люди столкнутся с проблемами — они закроют приложение или сайт и воспользуются решениями конкурентов.

В этом материале поговорим о том, как использовать кнопки с индикатором загрузки для улучшения user experience.

Какие проблемы они решают

Каждый элемент в UI играет определённую роль. Кнопки запускают выполнение определённых действий: загрузка контента, добавление в корзину, переход на сайт. Некоторые дизайнеры знают, что баттоны бывают неактивными и активными. Ещё у них есть состояние загрузки.

Если загрузка выполняется больше 2 секунд, пользователю надо показать дополнительную информацию, иначе он потеряет контроль над ситуацией.

Представьте, что после установки новостного приложения юзера просят создать учётную запись. Он заполняет длинную анкету, выбирает категории интересов, привязывает социальные сети и отправляет информацию. Система долго обрабатывает информацию на сервере. Человек ждёт минуту-две, а потом закрывает и удаляет приложение.

Для решения проблемы надо привязать к кнопке индикатор прогресса. Эту задачу решает программист, но принцип работы может продумать дизайнер.

Пользователи хотят не просто установить на смартфон приложение. С его помощью они решают определённые задачи: просмотр контента, покупки или общение в социальных сетях. Если после клика на кнопку корзины нет никаких оповещений, человек не поймёт, что делать дальше. Из-за этого недочёта бизнес потеряет конверсию и лояльность клиента.

Индикатор прогресса — интерактивный диалог, который отображает состояние системы. Нажали кнопку отправки, появился progressbar и дополнительные объяснения не нужны. Хороший user interface в обязательном порядке предоставляет информацию о ходе выполнения операции. Бывают случаи, когда визуальные элементы спасают ситуацию. Они приходят на помощь, если действие выполняется слишком долго или система перегружена запросами.

Чтобы сохранить положительный пользовательский опыт, надо показать, что операция в обработке и через несколько секунд будет завершена. Такой подход можно применять не только для визуального отображения хода загрузки или скачивания. Он будет полезен при выполнении любых важных действий.

Хороший дизайнер доводит проекты до момента появления продукта в общем доступе. Он первым тестирует приложение или веб-сайт, находит недочёты по юзабилити и сообщает клиенту. Это выводит сотрудничество на новый уровень. Если у заказчика в будущем появятся новые проекты, есть все шансы, что он обратится к специалисту, который проявил себя хорошо.

Специалисты по юзабилити и UX советуют добавлять прогресс-бары или кнопки с индикатором для всех операций, которые выполняются больше двух секунд. Пользователь следит за ходом выполнения и понимает, сколько времени осталось до конца. Красивая анимация снизит негативные впечатления от ожидания и покажет, что разработчики поставили удобство на первое место.

Загрузка может длиться 5-10 секунд или даже несколько минут. Главное, чтобы время было сопоставимо с пользой, которую получит человек. Если он заполняет форму и на отправку данных уходит 5 минут, мало кто будет ждать. Когда речь идёт о скачивании важного файла, который сложно найти, подождать можно. Особенно, если загрузка осуществляется в фоновом режиме.

Типы индикаторов

Прогресс-бары отображают ход выполнения и показывают, сколько времени потребуется для завершения. Разработчики часто используют стандартные варианты, которые дают меньше информации.

Давайте разберёмся, как правильно использовать инструменты визуализации на примерах.

Петлевая анимация

Самый распространённый вариант для отображения активной операции. Использовать бесконечный спиннер можно для действий, которые длятся не больше 10 секунд. Если время ожидания перешагнёт отметку, юзер закроет сайт или приложение.

Петлевая анимация подходит для прелоадера и отображения загрузки контента. Её можно использовать на информационных и коммерческих сайтах. В первом случае для бесконечного скролла при подгрузке дополнительных блоков. Во втором — как анимацию для появления новых «плиток» товаров.

Процентный индикатор

Распространённый формат, который чётко отображает ход выполнения операции от 0 до 100%. Если добавить крутые эффекты, пользователи с удовольствием будут за ними наблюдать. Индикатор сопровождает нас везде: установка приложений на смартфоне и компьютере, загрузка файлов, просмотр видеоконтента.

В примере выше кнопка загрузки трансформируется в красивый блок. Анимация плавная и приятная.

Прогресс-бар

Элемент сообщает о выполнения действия, но не говорит сколько нужно ждать. Его можно представить в виде круга или линии. В двух случаях человек не видит процентов, но примерно знает, на каком этапе находится задача.

На картинке выше показан пример прогресс-бара в виде круга. Аналогичным образом можно использовать линию или разработать более сложную визуализацию. Наглядно, просто и контроль остаётся у пользователя.

Способы применения

Любой элемент UI надо использовать по назначению. Хороший интерфейс отличается логичностью, последовательностью и наличием обратной связи. Если добавить анимацию и progressbar без необходимости, можно запутать аудиторию, а не упростить решение задачи.

Отображение прогресса

Кнопка с прогресс-баром показывает состояние загрузки. Пользователи видят, что система обрабатывает информацию и не будут нажимать её снова. Они подождут, пока круг или линия заполнятся и поймут, что всё готово.

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

Индикатор прогресса должен быть оформлен в общем стиле, чтобы он не выглядел как чужеродный элемент. Текст должен быть хорошо виден поверх бэкграунда. Можно добавить полупрозрачный эффект и выделить прелоадер более ярким цветом.

Способ реализации, который отображен выше, состоит из нескольких шагов. После клика появляется окно с линией и поясняющим сообщением. Затем отображается уведомление об успешном выполнении задачи. В конце кнопка возвращается в привычное состояние.

Ошибки действий

Обратная связь должна присутствовать везде. Особенно, если речь идёт о кнопках, запускающих выполнение важных операций. Индикаторы загрузки информируют пользователей. С их помощью можно показать, что действие не выполнено. Люди поймут, что надо запустить процесс снова или вернуться через несколько минут.

Пример сделан почти идеально. Нестандартная анимация показывает, что скачивание началось и в определённый момент появляется ошибка. После перезапуска файл загружается полностью. Не хватает только пояснения о причинах неполадки. Можно добавить небольшой блок и написать, что загрузка не удалась из-за плохого соединения.

Проверка данных

Индикаторы можно использовать не только для отображения ошибок или прогресса. Способов применения много. При правильном подходе не составит труда адаптировать механизм под нестандартную задачу.

Посмотрите, как разработчик добавил проверку пароля на соответствие заданным требованиям. При наборе символов заполнитель линии показывает, сколько осталось до финиша. Через определённое время полоска становится зелёной и появляется галочка.

Анимация плавная, переходы чётко прослеживаются, задержка при сохранении комбинации минимальная. Способ реализации однозначно понравится аудитории.

Загрузка и выполнение действий

Чаще всего индикаторы и прогресс-бары используют для скачивания и загрузки файлов. Можно пойти дальше и добавить статус выполнения к важным действиям: подписка на обновления по email, активация sim-карты и другие операции.

Посмотрите, насколько изящно реализована анимация. Сначала тележка заполняется, затем показывается иконка, которая подтверждает успешное завершение.

Советы по использованию

Кнопки с индикатором загрузки оберегают пользовательский опыт, только если они правильно реализованы. До появления сайта или приложения в открытом доступе надо протестировать разные сценарии взаимодействия: плохое соединение, отказ системы, внутренние ошибки.

Объясните, что происходит

Если пользователь понимает, какая операция выполняется, он не будет беспокоиться. Текстовые подсказки дадут полезную информацию и будут держать в курсе событий.

Кнопка просто сохраняет данные, можно было добавить анимацию и не тратить время на разработку нестандартного сценария. Разработчики решили, что лучше добавить уведомление о завершении операции, чтобы юзер контролировал ситуацию.

Отвлекайте от ожидания

Задача прогресс-бара заключается не только в информировании. Нестандартная анимация переключает внимание и человек забывает про ожидание. Люди не любят тратить время. Если отправка анкеты или загрузка файла будет длиться слишком долго, пострадает user experience. Чтобы избежать этого, добавьте креативную анимацию.

Показывайте время

Подсказка с длительностью выполнения задачи покажет, что у процесса есть конец. Просто напишите: «Активация подписки займет не более 3 минут. Мы проверим данные кредитной карты у платёжного агрегатора».

Представьте, что на смартфоне появилось уведомление об обновлении. После перезагрузки смартфона появился процентный индикатор, который отображает ход установки. Если дополнить его примерным временем ожидания, пользователь может отложить телефон и вернуться к нему через 3-5-10 минут.

Укажите объём работы

В некоторых случаях progressbar теряет информативность. Если время выполнения нельзя предсказать заранее, добавьте отображение шагов.

Способ реализации на картинке ниже — идеальный вариант для сложных задач. Человек понимает, что 3 из 22 сообщений отправлены и надо ещё подождать.

Проведите тестирование

Если индикатор остановится на отметке 99% и пользователь не увидит поясняющих сообщений, он откажется от выполнения задачи. Надо проверить разные сценарии взаимодействия и добавить текстовые подсказки.

Если отправка данных была прервана из-за проблем с интернетом — юзер должен об этом знать. Тогда он захочет потратить время ещё раз и запустит процесс заново.

Добавьте плавность

Индикаторы, которые двигаются с рывками или чрезмерным замедлением сильно раздражают. Пользователю хочется, чтобы область заполнилась быстро, и загрузка прошла успешно. Сделайте анимацию плавной и красивой.

Можно использовать простой приём, чтобы создать эффект быстрого прогресса. Сначала замедлить загрузку, а ближе к концу ускорить движение. Эта небольшая деталь увеличит интерактивность и покажет, что система работает быстро.

Индикаторы прогресса отлично справляются с задачей, но они всего лишь сообщают об ожидании. Представьте, что надо 3 минуты смотреть на ход часов. В такие моменты кажется, что время замедлилось.

В некоторых случаях прогресс-бары можно заменить скелетонами или скелетами. Это визуальная структура макета, которая показывается перед загрузкой данных. Инструмент используют крупные сервисы вроде Youtube и Facebook.

Отображение «холста» уменьшает дискомфорт от ожидания и показывает, как выглядит контент. Через несколько секунд серые области заполняются текстом и картинками. Никаких прелоадеров и спиннеров.

Каким бы реактивным не был сайт или приложение, на решение определённых задач понадобится время. Кнопки с индикатором прогресса — отличный способ визуализировать ход выполнения операции и отдать контроль в руки юзеров.

Веб-студия IDBI ставит пользовательский опыт на первое место. Давайте вместе разработаем идеальный UI для вашего проекта.

%d0%b8%d0%bd%d0%b4%d0%b8%d0%ba%d0%b0%d1%82%d0%be%d1%80 PNG, векторы, PSD и пнг для бесплатной загрузки

Мемфис дизайн геометрические фигуры узоры мода 80 90 х годов

4167*4167

поп арт 80 х патч стикер

3508*2480

Мемфис шаблон 80 х 90 х годов стилей фона векторные иллюстрации

4167*4167

поп арт 80 х патч стикер

3508*2480

схема бд электронный компонент технологии принципиальная схема технологическая линия

2000*2000

80 основных форм силуэта

5000*5000

green environmental protection pattern garbage can be recycled green clean

2000*2000

ма дурга лицо индуистский праздник карта

5000*5000

80 летний юбилей дизайн шаблона векторные иллюстрации

4083*4083

аудиокассета изолированные вектор старая музыка ретро плеер ретро музыка аудиокассета 80 х пустой микс

5000*5000

поп арт 80 х патч стикер

2292*2293

милая ретро девушка 80 х 90 х годов

800*800

мемфис бесшовной схеме 80s 90 все стили

4167*4167

поп арт 80 х патч стикер

2292*2293

be careful to slip fall warning sign carefully

2500*2775

вектор поп арт иллюстрацией черная женщина шопинг

800*800

мусульманская пара хадж ка ба

2600*2600

большая распродажа со скидкой до 80% в конце сезона плоская этикетка темно синего и абрикосового цвета

4000*4000

скейтборд в неоновых цветах 80 х

1200*1200

каба хадж мабрур исламская икона паломничества

2776*2776

поп арт 80 х патч стикер

3508*2480

3d рекламная скидка 80 золота с сердцем

2000*2000

поп арт 80 х патч стикер

3508*2480

дизайн плаката премьера фильма кино с белым вектором экрана ба

1200*1200

ценю хорошо как плоская цвет значок векторная icon замечания

5556*5556

рисованной радио 80 х

1200*1200

поп арт 80 х патч стикер

3508*2480

Элементы рок н ролла 80 х

1200*1200

80 летнего юбилея векторный дизайн шаблона иллюстрация

4083*4083

поп арт 80 х патч стикер

3508*2480

blue series frame color can be changed text box streamer

1024*1369

плавный руки нарисованная мемфис модный хипстер 80 х 90 х годов творческих детей рисовать

5000*5000

Персонаж из партии 80 х годов

1200*1200

80 летие векторный дизайн шаблона иллюстрация

4167*4167

поп арт 80 х патч стикер

3508*2480

поп арт 80 х патч стикер

3508*2480

поп арт 80 х патч стикер

3508*2480

80 е этап пиксель ретро диско танцы неоновые иллюстрации обои

4724*2657

пентаграмма наклейки 80 х мультик звезд мультика стикер

2003*2003

80 летний юбилей дизайн шаблона векторные иллюстрации

4083*4083

поп арт 80 х патч стикер

3508*2480

облака комиксов

5042*5042

ретро стиль 80 х годов диско дизайн неон плакат

5556*5556

80 е брызги краски дизайн текста

1200*1200

Неоновый эффект 80 х годов Ретро вечеринка арт дизайн

1200*1200

три группы 3d реалистичное декоративное яйцо с золотым цветом на гнезде bd с золотым всплеском текстовый баннер

5000*5000

Диско вечеринка в стиле ретро 80 х art word design

1200*1200

Мода стерео ретро эффект 80 х годов тема искусства слово

1200*1200

Нарисованный 80 х годов ретро мужчина средних лет

2000*2000

prohibited use mobile phone illustration can not be used

2048*2048

Bootstrap — Progress (индикаторы выполнения)

В этой статье познакомимся с процессом создания такого элемента интерфейса как индикатор выполнения. Во фреймворке Bootstrap 3 и Bootstrap 4 это действие осуществляется с помощью компонента progress.

Что такое индикатор выполнения

Индикаторы выполнения или индикаторы процесса – это элемент графического интерфейса пользователя, который предназначен для отображения процесса выполнения какой-либо задачи, например, загрузки формы обратной связи на сервер.

Отображение процесса обычно осуществляется слева направо.

Простой индикатор выполнения (progress)

Компонент Progress (в Bootstrap 3 – Progress bar) создаётся с помощью двух элементов HTML, CSS для установки ширины и нескольких атрибутов. Bootstrap не использует HTML5 элемент progress.

Установка процента завершённости задачи осуществляется с помощью CSS свойства width, которое устанавливается индикатору выполнения (progress) с помощью атрибута style.

Примеры индикаторов выполнения (Bootstrap 3):


<!-- Bootstrap 3 -->
<!-- Завершено 0% -->
<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Завершено 50% -->
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Завершено 100% -->
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Примеры индикаторов выполнения (Bootstrap 4):


<!-- Bootstrap 4 -->
<!-- Завершено 0% -->
<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Завершено 50% -->
<div>
  <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Завершено 100% -->
<div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Индикатор выполнения с текстовым контентом

Добавление текста в индикатор выполнения осуществляется посредством его в помещения в элемент с классом progress-bar.


<!-- Завершено 27% -->
<div>
    <div role="progressbar" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100">
        27%
    </div>
</div>

Изменение высоты индикатора выполнения

Установка высоты индикатору выполнения осуществляется посредством добавления к элементу с классом progress CSS свойства height с нужным значением.


<!-- Высота равна 2px -->
<div>
  <div role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Изменение цвета индикатора выполнения

Изменения цвета индикатора выполнения в Bootstrap 4 осуществляется с помощью background-классов bg-success, bg-info, bg-warning, bg-danger и др. Один из этих классов необходимо к элементу с классом progress-bar.


<!-- Bootstrap 4 -->
<!-- Индикатор выполнения с темой success -->
<div>
    <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой info -->
<div>
    <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой warning -->
<div>
    <div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой danger -->
<div>
    <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

В Bootstrap 3 изменение цвета индикатора выполнения с помощью специальных классов progress-bar-success, progress-bar-info, progress-bar-warning и progress-bar-danger. Один из этих классов, как и в фреймворке Bootstrap 4, необходимо добавить к элементу, имеющему класс progress-bar.


  <!-- Bootstrap 3 -->
<!-- Индикатор выполнения с темой success -->
<div>
	<div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой info -->
<div>
	<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой warning -->
<div>
	<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Индикатор выполнения с темой danger -->
<div>
	<div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Несколько индикаторов на одной полоске

Компоненты «Progress» (Bootstrap 4) и «Progress bar» (Bootstrap 3) позволяют отобразить на одной полоске несколько индикаторов процесса.


<!-- Bootstrap 3 -->  
<div>
	<div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
	<div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
	<div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>


<!-- Bootstrap 4 -->  
<div>
	<div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
	<div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
	<div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Индикаторы процесса с полосатым фоном

Добавление полос к текущему цвету фона индикатора выполнения осуществляется посредством дополнительного класса progress-bar-striped. Этот класс необходимо добавить к элементу с классом progress-bar:


<!-- Bootstrap 3 -->  
<!-- Индикатор выполнения с темой warning и полосатым фоном -->
<div>
    <div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
</div>


<!-- Bootstrap 4 -->  
<!-- Индикатор выполнения с темой warning и полосатым фоном -->
<div>
    <div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Индикаторы с анимированным полосатым фоном

Полосатый градиент индикатора выполнения может быть анимирован. Осуществляется это посредством добавления дополнительного класса (в Bootstrap 3 — active, в Bootstrap 4 — progress-bar-animated) к элементу с классом progress-bar. Анимация полос в Bootstrap выполняется справа налево с помощью CSS3.


<!-- Bootstrap 3 -->  
<!-- Индикатор выполнения с темой warning и полосатым фоном -->
<div>
    <div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
</div>


<!-- Bootstrap 4 -->  
<!-- Индикатор выполнения с темой warning и полосатым фоном -->
<div>
    <div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ИНДИКАТОР ЗАГРУЗКИ ПК И SSD

USB монитор загрузки компьютера — это устройство на базе PIC18F2550, которое показывает производительность вашего компьютера с помощью двух аналоговых стрелочных измерителей и индикатора RGB LED. Конструкция основана на стандартном VU-метре, который управляется с помощью ШИМ от микроконтроллера.

Вместо одноцветного мигающего светодиода (как в типовом ПК) в этом проекте используется RGB-светодиод, интенсивность которого изменяется в зависимости от уровня использования загрузки процессора, а цвет — от чтения / записи HDD. Также была добавлена кнопка, позволяющая быстро включать и отключать устройство без необходимости делать это мышкой на экране.

Управляющая программа для PIC18F2550 написана на языке Hi-Tech C, а программное обеспечение хоста Windows на C # с использованием Open Source Framework для устройств USB Generic HID на основе PIC18F и Windows.

Аппаратная часть

Аппаратное обеспечение основано на микроконтроллере PIC18F2550, который имеет встроенный USB. Минимальное количество компонентов использовалось для подключения устройства к порту USB, а также к коммутатору, стрелочным индикаторам и LED RGB. Общая принципиальная схема приведена далее.

Два потенциометра включены в конструкцию, чтобы провести быструю калибровку мощности полного отклонения, требуемой VU-метром (поскольку это может меняться на разных стрелочниках). Резисторы RGB LED были выбраны в соответствии с техническими данными светодиодов, чтобы обеспечить максимальную яркость, так как будем контролировать выход с помощью ШИМ. МК PIC работает на частоте 20 МГц, что позволяет использовать полную частоту ФАПЧ 48 МГц (это полезно, поскольку плавное ШИМ-управление светодиодом требует максимально возможной скорости процессора).

Плата печатная монитора загрузки

Чтобы разместить устройство на минимально возможном пространстве, разработана односторонняя печатная плата. Тем не менее, конструкция достаточно проста для того, чтоб ее можно было легко собрать на макетке, если у вас нет возможности для травления печатных плат. Вот изображение печатной платы.

Обратите внимание, что разъем USB направлен вниз, это позволяет подключить соединение внутри корпуса, позволяя проложить кабель по задней панели устройства. Возможно заменить кабель USB, если требуется, на более длинный или короткий, либо вообще напрямую припаять кабель к печатной плате.

Все подключенные устройства соединяются с использованием разъемов в стиле Molex, что позволяет легко собирать и разбирать индикатор. Вот готовая печатная плата с деталями и со всеми подключенными периферийными компонентами.

Светодиод RGB тут с прозрачными линзами, это означает что смешение цветов трудно увидеть крупным планом, чтоб поправить это можете рассеять свет линзы, отполировав ее до молочно-белой. Например протерев её тонкой наждачной бумагой.

Чтобы изменить шкалу VU-метра, снимите пластиковую крышку с передней части и используйте острый нож, чтобы срезать существующую.

После удаления наклейки отсканируйте изображение в Фотошопе и проведите замену логарифмической линейной процентной шкалой.

Получив желаемый дизайн, распечатайте его на толстой глянцевой фотобумаге, а затем вырежьте по своим размерам. Затем новую шкалу снова приклейте к измерителю (с использованием полоски двухстороннего скотча) и снова соберите индикатор, используя клей.

Прошивка контроллера

Управляющая программа контролирует положение двух индикаторов с помощью двух встроенных модулей генератора ШИМ, включенных в PIC18F2550. Это обеспечивает точную ШИМ с 10-битным разрешением без нагрузки на сам процессор. Программа принимает процент от 0 до 100 и устанавливает соответствующий рабочий цикл для перемещения стрелок.

Единственная проблема здесь заключается в том, что измерители VU являются в основном логарифмическими (посмотрите на расстояния на исходной маркировочной панели, вы увидите, что разметка дБ не ровная, с правой стороны измерителя наблюдается гораздо большее деление на дБ). Это означает, что при рабочем цикле 50% стрелка будет указывать чуть вправо, а не прямо, как здесь нужно.

Для перевода из линейной шкалы в логарифмическую требуется немного работы и математики. Сначала настроим устройство и подключим мультиметр к выходу ШИМ от PIC, чтобы измерить эффективный выход в мВ. По мере увеличения рабочего цикла измерим выходную мощность в мВ, чтобы получить 25%, 50%, 75% и 100% по новой шкале. Это позволяет построить график, показывающий взаимосвязь между входным напряжением и отображаемым процентом:

Как видите на рисунке, когда была получена аппроксимация кривой логарифмического выхода, использовалась функция линии тренда в Excel, чтобы вычислить аппроксимацию полинома для кривой. Затем этот расчет был скопирован в программу, что позволило МК рассчитать правильную базу рабочих циклов ШИМ на желаемом процентном соотношении.

Для светодиода RGB устройству потребовалось еще 3 канала ШИМ, поскольку VU-метр использует 2 встроенных генератора ШИМ. Цикл широтно-импульсной модуляции светодиодных цветов составляет 60 Гц и дает 128 уровней яркости.

Чтобы получить правильное смешение цветов на LED индикаторе, важно учитывать относительные уровни яркости цветов, так как светодиод RGB не выдает одинаковую яркость для разных цветов. Это приведет к плохо согласованным уровням, когда попытаемся получить определенные комбинации RGB.

Чтобы обойти эту проблему, установил фототранзистор на макетке, подключенный к мультиметру. Фототранзистор выдает переменное напряжение в зависимости от количества света, которое он получает — как простейший экспонометр. Связав светодиод RGB и фототранзистор вместе с помощью черной изоленты, получилось установить ШИМ каждого цвета на разных уровнях. Выходное напряжение фототранзистора для каждого цвета и уровня было затем нанесено на график с использованием Excel. На графике видно что красный — самый яркий цвет, затем синий, а затем зеленый:

Опять же, используя функцию линии тренда в Excel, построите линейную линию и получите расчет, необходимый для аппроксимации яркости светодиода при известной входной мощности. Используя зеленый светодиод в качестве эталона (так как это самая низкая яркость), можете рассчитать остальные.

Выход каждого цвета измеряется с помощью фототранзистора, подключенного к источнику питания 5 В и мультиметра. К светодиоду применяется 256-шаговое разрешение ШИМ, а яркость выводится от 0 до 255 с шагом 32 уровня. Выходное напряжение красного, зеленого и синего измеряется отдельно. Все три цвета показывают линейный вывод.

Исходя из результатов, от 0 до 255 показаны линейные линии тренда, показывающие прогнозируемый уровень освещенности на всех выходных мощностях. Цвет с наименьшей максимальной интенсивностью (зеленый) используется с 0, представляющим выкл, и 255, представляющим максимальную яркость. Два других цвета масштабируются в соответствии с множителем линии тренда:

Красный = 0,0071 * х

Синий = 0,0064 * х

Где х — это шаг ШИМ. Затем надо должны масштабировать результат в соответствии с диапазоном цвета самой низкой интенсивности (зеленого), то есть для красного цвета, если x = 187:

Масштабная интенсивность = (255 / 1,1985) * (0,0047 * x)

Где 1,1985 — максимальная яркость зеленого светодиода, а 255 — количество шагов в шкале.

Затем, чтобы получить требуемый выход ШИМ (x) из масштабированной интенсивности (y), просто решаем уравнение и упрощаем:

х = 47 * у / 71

Таким образом, если яркость по отношению к зеленому равна 255, фактический выход ШИМ для красного должен быть 168,8.

Синий рассчитывается точно так же:

х = 47 * у / 64

Чтобы настроить шкалу, просто меняем последний номер (71 или 64). Если вы увеличиваете число, выходная линия тренда становится более плоской (меньше светоотдачи), а если уменьшаете — линия тренда становится круче (больше светоотдачи). Это можно использовать для настройки на ваш индивидуальный светодиод.

Программное обеспечение индикатора

Программа для Windows написана на C # и позволяет настроить USB-устройство для отображения нескольких индикаторов производительности. Вы можете контролировать следующие элементы:

Загрузка процессора (всего или на ядро)
Использование жесткого диска (всего или на физический диск)
Использование памяти
Использование сети (на карту / устройство)

Вот скриншот приложения в действии:

Кроме того, мониторинг сети позволяет сменить полосу пропускания по умолчанию (которая была бы 1000 Мбит / с для высокоскоростной карты Ethernet) и установить ее на более низкий уровень. У меня обычно это значение 15 Мбит / с, что является максимальной пропускной способностью моего широкополосного соединения.

Вы также можете настроить индикатор загрузки жесткого диска, чтобы установить цвет который должен отображаться если диск пишет, читает или обе операции сразу. Есть возможность изменять интенсивность отображаемого цвета в зависимости от использования HDD, то есть при интенсивном использовании винчестера светодиод становится ярче.

Приложение также поддерживает отображение статуса индикатора жесткого диска на панели задач. Это полезно если вы хотите чтобы и USB-устройство, и рабочий стол показывали, что происходит с жесткими дисками.

Программа также позволяет установить функцию аппаратной кнопки на устройстве. Вы можете использовать это дело чтобы отключить стрелочники, светодиод или оба сразу. Существует дополнительная опция «отключить USB», которая заставляет PIC контроллер вообще отключить порт USB. Файлы скачать можно тут

Форум по компьютерной электронике

Форум по обсуждению материала ИНДИКАТОР ЗАГРУЗКИ ПК И SSD

Прекратите использовать спиннер, есть что-то получше | Сулейман Али Шакир

Мы давно следуем жестким правилам языков дизайна или, скорее, находимся под их влиянием. Но я тебя не виню.

Ключ к мудрости — это постоянные и частые вопросы, потому что сомневаясь, мы приводим к вопросу, а задавая вопросы, мы приходим к истине. — Питер Абеляр

Загрузочный счетчик — один из наиболее часто используемых индикаторов прогресса в дизайне пользовательского интерфейса.Но у него есть свои недостатки, на которые обычно не обращают внимания.

Facebook с использованием загрузочных прядильщиков для изображений и разбивки на страницы

Каждый раз, когда я вижу такое количество загрузочных прядильщиков, у меня возникает небольшая тревожная атака.

Что вам сообщает счетчик загрузки? Это означает, что контент в настоящее время загружается. А там написано сколько загрузилось? Там написано сколько осталось загрузить?

Нет. Не

Тем более, что определить сложно. Если бы это было возможно, мы бы использовали индикатор выполнения, верно?

Автор: Чанпори Рит на Dribbble

Как долго вы смотрели на это? Вы ожидали, что контент загрузится через некоторое время? Извините, что разочаровал.

Хорошо, предположим, что загрузка GIF завершена и отображается некоторый контент. Задайте себе эти вопросы и дайте мне честный ответ. Я уверен, что вы посмотрели на достаточно загрузочных спиннеров, чтобы знать.

Когда вы посмотрели на загрузочное устройство, знаете ли вы:

сколько времени осталось до завершения?
сколько содержимого загружено?
сколько осталось загрузить?

Мы просто смотрим на загрузочную вертушку. Надеюсь, что он загрузится вовремя, но нет ответа ни на один из этих трех вопросов.

Кроме того, сетевые соединения могут быть нестабильными. Поэтому мы никогда не можем считать само собой разумеющимся, что контент всегда будет загружаться быстро.

Загрузочные спиннеры замедляют загрузку. Период.

Это как часы, которые постоянно тикают. Он показывает время, которое вы тратите, глядя на него. Как эта гифка выше, на которую я заставил вас смотреть.

Пока все не загрузилось, вы хоть представляете, чего ожидать на экране? Готов поспорить, что нет. Вы даже можете удивиться, когда отобразятся пользовательский интерфейс и контент.

А теперь подумайте о своих пользователях. Пока все не загрузилось, они совершенно не знают, чего ожидать на экране. Бьюсь об заклад, они тоже удивятся.

Это не их вина. Вы не сказали им, чего ожидать!

«Сюрприз» — не всегда хорошо.

Неожиданное или удивительное событие, факт и т. Д. — Сюрприз

Судя по самому определению этого слова, сюрприз указывает на « неожиданное » событие.Люди склонны к поляризующей реакции на такие события. Это могло быть как положительным, так и отрицательным.

Сюрпризы не всегда имеют положительное влияние на людей. Если только у них не день рождения. Это зависит от того, как человек это воспринимает. Таким образом, в этом и заключается проблема.

Внимательно посмотрите на оба изображения. Смотрите изображение справа. Можете ли вы честно предсказать, что пользовательский интерфейс, наконец, будет выглядеть так? Я уверен, что нет.

Хорошо, окончательный интерфейс — это дизайн с низкой точностью. Но вы поняли.

Я сознательно не брал примеры из существующих приложений. Потому что мы с тобой оба знаем, как это будет выглядеть. В известном приложении мы уже видели интерфейс еще до его загрузки.

Знаете ли вы? Мы, люди, действительно можем предсказывать время. Это тоже довольно точно!

Но под эмоциональным воздействием наше чувство времени значительно затуманивается.

Мы все это испытали. Кажется, что время летит, когда ты делаешь то, что любишь. Но если это то, что вы ненавидите, время, кажется, тянется.Даже когда тебе скучно, ты смотришь на часы в ожидании любимого шоу. Тогда время движется еще медленнее.

То же самое и с нашими интерфейсами.

Я хочу сказать, что загрузка вашего контента не займет много времени. На самом деле, это может не иметь большого значения. Но это может показаться дольше, чем на самом деле. Просто люди могут это воспринимать.

Что мы можем сделать, так это помочь изменить их восприятие. Мы можем заставить наше приложение «появляться» быстрее, чем оно есть на самом деле.

ПРИМЕЧАНИЕ:
Не слишком увлекайтесь, пытаясь подделать его.Для успеха вашему интерфейсу требуется сочетание реальной и предполагаемой скорости.

Ваш загрузочный спиннер — убийца UX!

Мы знаем, что вы ненавидите ждать. Все делают.

В исследовании 2017 года Google обнаружил, что:

Время загрузки 1-3 секунды увеличило показатель отказов на 32%.
Время загрузки 1–5 секунд увеличило показатель отказов на 90%.
1-6 секунд загрузки увеличили показатель отказов на 106%.

Люди не любят ждать, если для этого нет веской причины, и чем дольше длится ожидание, тем меньше эта причина складывается.Вот почему видимость состояния системы — одна из 10 эвристик юзабилити Nielsen для проектирования пользовательского интерфейса. Видимость состояния системы означает:

«Дизайн должен всегда информировать пользователей о том, что происходит, посредством соответствующей обратной связи в разумные сроки».

И здесь на помощь приходят индикаторы загрузки. Хороший индикатор загрузки:

Сообщает пользователям, что приложение работает.
Делает ожидание терпимым.
Дает пользователям возможность посмотреть.

Самым распространенным индикатором загрузки в дизайне пользовательского интерфейса является, как вы уже догадались, счетчик загрузки.

Но иногда приходится ставить под сомнение общепринятую практику, чтобы раздвинуть границы и найти инновационные решения. В этом случае загрузочный спиннер имеет недостатки, которые дизайнеры слишком долго не замечали.

Дизайн блесны

: почему загрузка блесны — отстой

Что касается анимации загрузки, то загрузочный счетчик — неудачный выбор, особенно для ожидания более 10 секунд.Почему?

Начнем с небольшого рассказа.

Мое первое воспоминание о загрузочном счетчике произошло более десяти лет назад, задолго до того, как я узнал о пользовательском опыте. Именно в школьной компьютерной лаборатории я столкнулся с роковой, страшной вещью, которую мы с друзьями научились называть Вращающимся Колесом Смерти. Оказывается, это не редкость для курсора ожидания в macOS.

Изображение ожидающего курсора macOS от How-To Geek.

Как и Spinning Wheel of Death, загрузочные спиннеры не дают обратной связи — никаких признаков прогресса.Они бесконечно крутятся, ничего не сообщая нам о прогрессе, достигнутом или не достигнутым приложением. Когда вы спешите, это расстраивает пользователей и вызывает откровенный гнев.

Вы задаете такие вопросы, как:

Когда закончится загрузка?
Это почти готово?
Это сломано?

Но твои вопросы остаются без ответа, поэтому ты сдаешься.

Хуже того, время торможения блесен.

Вы когда-нибудь были посреди тренировки, отчаянно нуждаясь в окончании таймера? Или не терпится сбежать из класса? В этих случаях наблюдение за часами и бесцельное ожидание заставляют время ползать.Спиннеры делают то же самое, за исключением обратного отсчета. Они как ждут еды в ресторане с урчанием в животе; только вы не знаете, получил ли ваш заказ шеф-повар.

Конечно, анимация загрузки на самом деле не контролирует время, но удовольствие от задачи влияет на наше восприятие задачи. Когда мы хорошо проводим время, часы ускоряются. Когда мы ненавидим ожидание, оно замедляется.

И снова счетчик побуждает пользователей сдаваться.

Более того, вы хотите, чтобы ваш контент был ценным для пользователей — соответствовал, если не превышал, их ожидания.Если случайно страница оказалась не той, на которую они надеялись, дополнительное разочарование от того, что вы слишком долго смотрели на счетчик, еще больше усугубит ущерб.

Для обзора, загрузочный спиннер:

Не подает никаких признаков прогресса.
Не отвечает на вопросы пользователя.
Делает ожидание дольше, чем оно есть на самом деле.
Не учитывает ожидания пользователей.

Параметры анимации загрузки

Лучший способ избавиться от разочарования пользователя загрузочным счетчиком — это с самого начала избавиться от этого разочарования.Это означает сокращение времени ожидания, пока оно не исчезнет, или использование альтернативного индикатора выполнения.

Опять же, хороший индикатор загрузки или прогресса:

Ускоряет восприятие времени пользователем.
Дает ощущение, что приложение работает.

Два основных типа индикаторов прогресса, используемых в UX-дизайне, — это неопределенные индикаторы прогресса и детерминированные индикаторы прогресса. Определяющий фактор — время.

Идея состоит в том, что вы используете типичный счетчик загрузки, когда не знаете, сколько времени займет загрузка, и вы используете определенный индикатор, например индикатор выполнения, когда вы точно знаете.Детерминированная анимация загрузки показывает, сколько еще пользователь должен ждать, с подсказками, такими как процент завершения, оставшиеся минуты или полоса, которая заполняется.

Неопределенный и определенный индикатор прогресса от Material Design.

Проблема этой стратегии в том, что вы никогда не знаете точно, сколько времени потребуется для загрузки. Вы можете сделать обоснованное предположение, но не более того. Вот почему многие индикаторы обратного отсчета считаются так: осталось 10 минут, осталось 9 минут, осталось 8 минут, осталось 7 минут, осталось 10 минут, осталось 8 минут и так далее.Он завершит загрузку и в конце концов наберет 0, но не раньше, чем пользователь отправится в путь.

Как максимально эффективно использовать анимацию загрузки

Мы обсуждаем альтернативное решение для счетчиков и индикаторов выполнения ниже. Тем не менее, если вы решили пойти по более традиционному пути или провели исследование UX и обнаружили, что это предпочтительный выбор для вашей аудитории, есть несколько рекомендаций, которым следует следовать.

Во-первых, используйте счетчик загрузки только для ожидания менее 10 секунд. Для задержек более 10 секунд создайте иллюзию прогресса с помощью определенных индикаторов, чтобы пользователи дольше интересовались.

Когда вы разрабатываете спиннеры или другую загрузочную анимацию:

Будьте как можно более креативными и интересными
Сделать на заводе
Предоставьте как можно более точную оценку завершения
Объясните, почему пользователь ждет.
— Подождите, пока мы рассчитаем ваши результаты.
— Подождите, пока мы все для вас настроим.
— Мы собираем ваши данные.
— 21 файл из 30 проверен.
Не используйте анимацию, если страница загрузится менее чем за секунду.

Пример гифок экрана загрузки от Hacker Noon.

Мы могли бы продолжить работу над улучшением анимации загрузки, но эта статья не об этом. Потому что какой бы увлекательной ни была ваша анимация загрузки, она подчеркивает время ожидания и не дает четкого представления о прогрессе.

Вот для чего нужны каркасные экраны.

Прогрессивная загрузка с каркасными экранами

Исследование, сравнивающее спиннеры и скелетные экраны, показало, что скелетные экраны воспринимаются как более быстрые и оставляют пользователей более счастливыми.Итак, что это за предполагаемый герой?

Как вы знаете, загрузочные счетчики занимают экран до тех пор, пока пользовательский интерфейс не будет полностью загружен, после чего все это появляется сразу.

Скелетные экраны используют другую тактику и раскрывают каждую часть пользовательского интерфейса по мере загрузки. Он начинается с каркаса дизайна интерфейса, а затем переходит к отображению элементов по мере их загрузки. Эта стратегия называется постепенной прогрессией, и детали обычно появляются в следующем порядке: контур скелета (также называемый пользовательским интерфейсом-заполнителем), текст, а затем изображения.

Пример экрана скелета Facebook от Facebook Engineering.

Используемые такими известными компаниями, как LinkedIn, Instagram, Facebook и Google, скелетные экраны предлагают лучший опыт загрузки экрана, превращая пассивное ожидание в активное ожидание.

Пассивное ожидание — это когда вы сидите и ничего не делаете, например, когда вы смотрите, как прядильщик крутится, кружится, кружится. Активное ожидание — это когда вы делаете что-то, что кажется прогрессом, пока вы ждете.Скелетная загрузка поощряет активное ожидание, предоставляя пользователю новую информацию для обработки при каждом обновлении экрана.

Таким образом, экран скелета переключает внимание на количество времени, которое вы ждете, и помещает его на фактическое доказательство прогресса, происходящего перед вами, делая процесс загрузки более быстрым. И поскольку он показывает, что загружено, а что осталось, это позволяет пользователю формировать точные ожидания пользовательского интерфейса.

Постепенная загрузка Instagram в действии.

При реализации скелета экрана убедитесь, что пользовательский интерфейс-заполнитель является точным представлением того, как будет выглядеть окончательный пользовательский интерфейс. В противном случае вы создадите разрыв между ожиданиями и реальностью.

Некоторые инструменты и веб-сайты, такие как Medium и Google Images, используют прогрессивную загрузку изображений, чтобы добавить еще один шаг в прогрессе. Прогрессивная загрузка изображения — это когда вы показываете преобладающий цвет или размытую версию изображения до его полной загрузки.

Вы также можете проектировать анимацию загрузки на скелетных экранах, чтобы указать загрузку.Facebook, например, имеет серые текстовые панели на скелетном экране, которые выполняют свое собственное загрузочное движение при загрузке страницы.

Пользователи воспринимают экраны с загрузочными движениями слева направо и медленными и устойчивыми движениями загрузки быстрее.

Проблемы с экраном скелета

Как всегда, есть критики — самая большая проблема заключается в том, что серые блоки являются скучным и непривлекательным решением для пользователей, которые ожидают увидеть отличный контент.

В некоторой степени эта забота упускает из виду суть экрана-скелета: намек на большой контент, который быстро развивается.Ни один пользователь вообще не ожидает и не хочет экран загрузки, но скелетные экраны обеспечивают комфорт, зная, что интерфейс работает и будет доступен в считанные секунды.

Конечно, серые блоки действительно раздражают, когда между каждой фазой прогресса слишком долгий период ожидания. Чем дольше время ожидания, тем хуже. Так обстоит дело со всеми индикаторами загрузки, потому что, как мы установили в начале, никто не любит долго ждать.

Благодаря каркасным экранам он помогает реализовать несколько этапов продвижения, чтобы постоянно активировать внимание пользователя.Существуют плохо спроектированные скелетные экраны, которые переходят от серого пользовательского интерфейса заполнителя ко всему сразу, что противоречит цели. Эффективная прогрессивная загрузка показывает контент, как только он готов, чтобы пользователи были в курсе, заинтересованы и полны надежд.

Если время ожидания немного больше идеального, вы можете подумать об использовании счетчика на пару секунд, прежде чем открывать пользовательский интерфейс заполнителя и загружать контент. Это может сэкономить вам немного времени, если пользовательский интерфейс заполнителя будет показывать существенный прогресс.

Если время загрузки слишком велико, сокращение времени ожидания всегда является лучшим вариантом и должно быть вашим приоритетом. Есть много причин, по которым ваш сайт может работать медленно.

Проверьте это: хороший UX начинается с пользователя

Пользовательский опыт начинается с пользователя, и ни один ответ не подходит для всех, даже если он подходит для большинства. Вот почему обеспечение хорошего пользовательского опыта начинается с тестирования ваших идей, чтобы определить, что лучше всего подходит для вашей аудитории.

В свое время предложение лучшего дизайна спиннера было лучшим, что вы могли сделать.

Теперь стоит рассмотреть хорошо продуманную прогрессивную загрузку. Это сокращает предполагаемое время ожидания, дает ощущение прогресса, подразумевает, что еще нужно загрузить, и дает рекомендации пользователям.

Но это не значит, что пора перестать ставить под сомнение передовой опыт. Дни использования длинных неинформативных загрузочных анимаций могут быть позади, но однажды что-то преодолеет ограничения скелетных экранов так же, как они используются для загрузки спиннеров.

А пока, если вы хотите узнать больше о том, как улучшить свой UX, свяжитесь с нами.Мы любим говорить о стратегии.

Вы все прочитали!

Вот что делать дальше:

Дайте нам свой адрес электронной почты.Мы будем относиться к нему как к золоту и добавим немного культуры в ваш почтовый ящик.

Поделитесь этой статьей в своей любимой социальной сети, особенно в Twitter или Linkedin.

Поделитесь с нами на своем любимом канале Slack.

Скарлетт Пейн — копирайтер UX в Laughing Samurai, которая стремится сделать продукты клиентов удобными, а их бренды узнаваемыми и запоминающимися.

спиннеров · Bootstrap

Указывает состояние загрузки компонента или страницы с помощью счетчиков Bootstrap, полностью построенных с использованием HTML, CSS и без JavaScript.

Около

«Спиннеры» Bootstrap можно использовать для отображения состояния загрузки в ваших проектах. Они созданы только с использованием HTML и CSS, а это значит, что для их создания не нужен JavaScript.Однако вам понадобится специальный JavaScript для переключения их видимости. Их внешний вид, расположение и размер можно легко настроить с помощью наших замечательных служебных классов.

Для удобства здесь каждый загрузчик включает role = "status" и вложенный Loading ... .

Бордюрный прядильщик

Используйте прядильщики бордюров для облегчения индикатора загрузки.

  
   Загрузка...

Цвета

Прядильщик границы использует currentColor для своего цвета границы , что означает, что вы можете настроить цвет с помощью утилит цвета текста. Вы можете использовать любую из наших утилит цвета текста на стандартном счетчике.

Загружается …

Загрузка…

  
   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка... 


   Загрузка ...

Почему бы не использовать утилиты border-color ? Каждый прядильщик границы определяет прозрачную границу по крайней мере для одной стороны, поэтому утилиты .border- {color} переопределят это.

Вертушка

Если вам не нравится прядильщик бордюров, переключитесь на счетчик роста. Хотя технически он не вращается, он постоянно растет!

  
   Загрузка...

Еще раз, этот счетчик построен с использованием currentColor , поэтому вы можете легко изменить его внешний вид с помощью утилит цвета текста. Здесь он выделен синим цветом вместе с поддерживаемыми вариантами.

Загружается …

  
   Загрузка... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка ... 


   Загрузка...

Выравнивание

Spinners в Bootstrap построены с rem s, currentColor и display: inline-flex . Это означает, что их можно легко изменить размер, перекрасить и быстро выровнять.

Маржа

Используйте маржинальные утилиты, например .m-5 , чтобы упростить интервалы.

  
   Загрузка ...

Размещение

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

Flex

  
  
     Загрузка ...

  
   Загрузка ...

Поплавки

  
  
     Загрузка ...

Выровнять текст

  
  
     Загрузка...

Размер

Добавьте .spinner-border-sm и .spinner-grow-sm , чтобы получить счетчик меньшего размера, который можно быстро использовать в других компонентах.

  
   Загрузка ... 


   Загрузка ...

Или используйте собственный CSS или встроенные стили, чтобы изменить размеры по мере необходимости.

  
   Загрузка... 


   Загрузка ...

Кнопки

Используйте счетчики внутри кнопок, чтобы указать, что действие в настоящее время обрабатывается или выполняется. Вы также можете поменять местами текст из элемента счетчика и использовать текст кнопки по мере необходимости.

Загружается … Загружается …

Индикатор загрузки | Продвинутые темы | Поток

Чтобы проинформировать пользователя о том, что загрузка выполняется и что UI в настоящее время не отвечает, отображается индикатор загрузки . Более длительное время загрузки может быть связано, например, с плохие сетевые условия. Платформа автоматически отображает индикатор загрузки после настраиваемой задержки при запуске запроса сервера, и скрывает его после завершения обработки ответа.

По умолчанию индикатор загрузки отображается вверху области просмотра после задержки. Вы можете выключить индикатор, изменить задержки или настроить внешний вид индикатора. Темы нацелены на

элемент, расположенный внутри элемента . Вам также необходимо отключить тематику по умолчанию .

  <тело>

Индикатор загрузки можно настроить из Java, обратившись к объекту конфигурации из UI .Самый простой способ сделать это — использовать PageConfigurator (дополнительную информацию см. В документации страницы начальной загрузки). и изменения применяются уже к первоначальному ответу.

  открытый класс MainLayout расширяет Composite , реализует PageConfigurator, RouterLayout {

    
    @Override
    public void configurePage (настройки InitialPageSettings) {
        LoadingIndicatorConfiguration conf = settings.getLoadingIndicatorConfiguration ();

        
        conf.setApplyDefaultTheme (ложь);
    }
}

Объект конфигурации может использоваться для настройки задержек, после которых индикатор меняет «стадии».По умолчанию индикатор отображается с задержкой в 300 мс, и ему присвоено имя класса , первый . Вы можете настроить две дополнительные задержки. После задержек имена классов второй и третий устанавливаются и могут использоваться для изменения стиля загрузки. индикатор по прошествии определенного времени.

  открытый класс MainLayout расширяет Composite , реализует PageConfigurator, RouterLayout {

    @Override
    public void configurePage (настройки InitialPageSettings) {
        LoadingIndicatorConfiguration conf = settings.getLoadingIndicatorConfiguration ();

                 * Задержка показа индикатора и установки «первого» имени класса.

        conf.setFirstDelay (300);

        
        conf.setSecondDelay (1500);

        
        conf.setThirdDelay (5000);
    }
}

Индикаторы выполнения — Элементы управления — iOS — Рекомендации по человеческому интерфейсу

Индикаторы выполнения

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

См. Также Загрузка.

Показатели деятельности

Индикатор активности вращается, пока выполняется не поддающаяся количественной оценке задача, такая как загрузка или синхронизация сложных данных. Он исчезает, когда задача завершается. Индикаторы активности не интерактивны.

Используйте индикаторы активности вместо индикаторов активности. Если активность поддается количественной оценке, используйте индикатор выполнения вместо индикатора активности, чтобы люди могли лучше оценить, что происходит и сколько времени это займет.

Держите индикаторы активности в движении. Люди ассоциируют стационарный индикатор активности с остановленным процессом. Держите его вращающимся, чтобы они знали, что что-то происходит.

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

Руководство разработчика см. В разделе UIActivityIndicatorView.

Прогресс-бар

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

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

Используйте индикаторы выполнения для задач с четко определенной продолжительностью. Индикаторы выполнения отлично подходят для отображения статуса задачи, особенно когда они помогают понять, сколько времени нужно для выполнения задачи.

Скрыть незаполненную часть дорожки на панелях навигации и панелях инструментов. По умолчанию дорожка индикатора выполнения включает как заполненные, так и незаполненные части. При использовании на панели навигации или панели инструментов, например, для обозначения загрузки страницы, индикатор выполнения должен быть настроен так, чтобы скрывать незаполненную часть дорожки.

Рассмотрите возможность настройки внешнего вида индикатора выполнения в соответствии с вашим приложением. Внешний вид индикатора выполнения можно настроить в соответствии с дизайном вашего приложения. Вы можете указать, например, собственный оттенок или изображение как для дорожки, так и для заливки.

Для руководства разработчика см. UIProgressView.

Индикаторы сетевой активности *

Индикатор сетевой активности устарел в iOS 13 и на устройствах с безрамочным дисплеем. В iOS 12 и более ранних версиях, а также на устройствах без сквозных дисплеев индикатор сетевой активности вращается в строке состояния в верхней части экрана при подключении к сети.Он исчезает, когда сеть будет завершена. Этот индикатор выглядит как индикатор активности и не интерактивен.

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

Загрузка | Наложение индикатора загрузки приложения

Наложение, которое может использоваться для обозначения активности при блокировании взаимодействия с пользователем.Индикатор загрузки отображается поверх содержимого приложения и может быть отключен приложением, чтобы возобновить взаимодействие пользователя с приложением. Он включает дополнительный фон, который можно отключить, установив showBackdrop: false при создании.

Индикатор загрузки можно закрыть автоматически по прошествии определенного времени, передав количество миллисекунд, чтобы отобразить его в длительность вариантов загрузки. Чтобы убрать индикатор загрузки после создания, вызовите dismiss () в экземпляре загрузки.В onDidDismiss Функция может быть вызвана для выполнения действия после закрытия индикатора загрузки.

Loading использует инкапсуляцию с заданной областью, что означает, что она автоматически ограничивает свой CSS, добавляя каждый из стилей с дополнительным классом во время выполнения. Для переопределения селекторов с заданной областью действия в CSS требуется селектор с более высокой специфичностью.

Мы рекомендуем передать пользовательский класс в cssClass в создать метод и использовать его для добавления пользовательских стилей к основным и внутренним элементам.Это свойство также может принимать несколько классов, разделенных пробелами. Посмотреть Раздел использования для примера того, как передать класс, используя cssClass .

 
ion-loading {
  цвет: зеленый;
}


.my-custom-class {
  цвет: зеленый;
}

Любое из определенных настраиваемых свойств CSS может использоваться для стилизации загрузки без необходимости нацеливания на отдельные элементы:

  .my-custom-class {
  --фон: # 222;
  --spinner-color: #fff;

  цвет: #fff;
}

Если вы создаете приложение Ionic Angular, стили необходимо добавить в файл глобальной таблицы стилей.Читать Размещение стиля в разделе Angular ниже для получения дополнительной информации.

Опции загрузки

  interface LoadingOptions {
  прядильщик ?: SpinnerTypes | значение NULL;
  сообщение ?: строка | IonicSafeString;
  cssClass ?: строка | нить[];
  showBackdrop ?: boolean;
  продолжительность ?: число;
  полупрозрачный ?: логический;
  анимированный ?: логический;
  backdropDismiss ?: boolean;
  режим ?: Режим;
  keyboardClose ?: boolean;
  id ?: строка;

  enterAnimation ?: AnimationBuilder;
  leaveAnimation ?: AnimationBuilder;
}

Лучшие практики для анимированных индикаторов выполнения — Smashing Magazine

Краткое резюме ↬ Видимость состояния системы — один из важнейших принципов разработки пользовательского интерфейса.Пользователи хотят чувствовать контроль над системой, которую они используют, а это означает, что они хотят знать и понимать свой текущий контекст в любой момент времени, особенно когда система занята выполнением работы. Индикатор выполнения анимации ожидания — это наиболее распространенная форма предоставления пользователям статуса системы, когда что-то происходит или загружается. Хотя мгновенный ответ от приложения — лучший вариант, бывают случаи, когда ваше приложение не может соответствовать рекомендациям по скорости. Медленный ответ может быть вызван плохим интернет-соединением или сама операция может занять много времени (например,г. установить обновление для ОС). В таких случаях, чтобы свести к минимуму пользовательское напряжение, вы должны заверить пользователей, что приложение работает по их запросу и что на самом деле наблюдается прогресс. Таким образом, вы должны предоставить пользователю обратную связь о том, что происходит с приложением, в разумные сроки.

Видимость состояния системы — один из важнейших принципов разработки пользовательского интерфейса.Пользователи хотят чувствовать контроль над системой, которую они используют, а это означает, что они хотят знать и понимать свой текущий контекст в любой момент времени, особенно когда система занята выполнением работы. Индикатор выполнения анимации ожидания — это наиболее распространенная форма предоставления пользователям статуса системы, когда что-то происходит или загружается.

Чтобы лучше понять, как ваши UI-дизайны могут получить выгоду от анимированных индикаторов прогресса, поможет набросать ваши (приложения) идеи. Несколько месяцев назад Adobe представила новое приложение для проектирования и создания каркасов под названием Experience Design (или Adobe XD), предназначенное для создания интерактивных каркасов и пользовательских интерфейсов.Приложение все еще находится в стадии публичной бета-версии, с функциями, добавляемыми на регулярной основе, и вы можете скачать и опробовать его бесплатно. В этой статье мы рассмотрим основные типы анимированных индикаторов прогресса и дадим рекомендации о том, когда и как использовать каждый из них.

Дополнительная литература по SmashingMag:

Хороший дизайн взаимодействия с обратной связью

Хотя мгновенный ответ от приложения — лучший вариант, бывают случаи, когда ваше приложение не может соответствовать рекомендациям по скорости.Медленный ответ может быть вызван плохим интернет-соединением или сама операция может занять много времени (например, установка обновления для ОС). В таких случаях, чтобы свести к минимуму напряжение пользователей, вы должны заверить пользователей, что приложение работает по их запросу и что на самом деле наблюдается прогресс. Таким образом, вы должны предоставить пользователю обратную связь о том, что происходит с приложением, в разумные сроки.

Больше после прыжка! Продолжить чтение ниже ↓

Всегда давать немедленную обратную связь

Время ожидания пользователя начинается с момента, когда он инициирует действие, и в худшем случае у него нет индикатора, что система его получила.Когда приложение не уведомляет пользователей о том, что для выполнения действия требуется время, пользователи часто думают, что приложение не получило запрос, и пытаются снова. Из-за отсутствия обратной связи появилось множество дополнительных щелчков и нажатий.

Любое действие, такое как нажатие кнопки или нажатие для обновления, должно иметь немедленную реакцию. Очень важно дать визуальную обратную связь сразу после получения запроса от пользователя, чтобы указать, что процесс начался.

Действие «Потяните для обновления» Изображение предоставлено: Behance

Используйте индикатор выполнения для любого действия, которое занимает больше одной секунды

Когда приложение принимает больше 0.1 секунда, но менее одной секунды, чтобы ответить на ввод пользователя, кажется, что приложение вызывает результат. Хотя пользователи замечают небольшую задержку, они остаются сосредоточенными на своей текущей задаче. Через секунду внимание пользователя начинает блуждать, и он замечает, что ждет ответа от медленного приложения.

Чтобы уменьшить неуверенность пользователя, предложите причину подождать с индикатором прогресса для любого действия, которое занимает больше, чем примерно за одну секунду (Примечание: использование анимации не рекомендуется для всего, что занимает менее одной секунды на load, потому что пользователи могут беспокоиться о том, что только что вспыхнуло на экране).Анимированные индикаторы прогресса смягчают негативные последствия ожидания и продлевают внимание пользователя на сайте или в приложении.

Типы индикаторов прогресса

Индикаторы выполнения сообщают пользователям, что приложению требуется больше времени для обработки последнего действия пользователя. Самая простая форма индикатора процесса — , неопределенный — эти типы индикаторов требуют от пользователей подождать, пока что-то завершится, но не указывают, сколько времени это займет.

Бесконечная зацикленная анимация указывает на то, что система работает, но не дает никакой информации о том, сколько времени пользователю придется ждать.Изображение предоставлено: Behance

Как правило, вы должны использовать этот тип индикатора выполнения для быстрых действий (2–10 секунд). Если заставить пользователя дольше смотреть на вращающееся колесо или бесконечную линейную анимацию, это может увеличить показатель отказов для вашего веб-сайта или заставить людей закрыть ваше приложение.

Другой тип индикаторов прогресса сообщает , сколько времени займет операция (приблизительно или точно). Эти типы индикаторов называются детерминированными. Это наиболее информативный тип обратной связи с анимацией ожидания, поскольку они показывают текущий прогресс, сколько уже было сделано и сколько осталось.Визуальный индикатор, приближающийся к завершению, успокаивает пользователя и увеличивает его готовность ждать.

Неопределенные индикаторы визуализируют неопределенное время ожидания, в то время как определенные индикаторы показывают, сколько времени займет операция. Изображение предоставлено: Material Design. (Превью в большом разрешении)

Два самых популярных анимированных индикатора прогресса

Существует два популярных типа анимированных индикаторов прогресса — зацикленная анимация и индикатор процента выполнения .

Циклическая анимация

Поскольку большая часть зацикленной анимации является неопределенной и обслуживает различные типы задержек, в том числе длинные, этот тип индикатора выполнения имеет отрицательную коннотацию. Например, значок загрузки по умолчанию в Apple iOS (счетчик серых линий, исходящих из центральной точки) обслуживает множество функций операционной системы, показывая состояние всего, от загрузки устройства до проблем с подключением к сети или загрузкой данных. Из-за этого пользователи не хотят видеть только счетчик загрузки без индикации прогресса или времени.

Наблюдать за загрузочным счетчиком — все равно что смотреть на часы, когда вы это делаете, кажется, что время останавливается. Изображение предоставлено: appance

Индикатор выполнения

Индикатор выполнения в процентах — это определенный индикатор выполнения, который заполняется от 0% до 100% и никогда не уменьшается в значении. Как линейные, так и круговые индикаторы прогресса могут быть выполнены в процентах.

Линейный индикатор выполнения в процентах Изображение предоставлено: Adobe Stock Круглые индикаторы выполнения в процентах Изображение предоставлено: Adobe Stock

Как правило, вы должны использовать анимацию выполнения в процентах для более длительных процессов, которые занимают 10 или более секунд.Основываясь на исследовании Якоба Нильсена о времени отклика, 10 секунд — это предел для пользователей, чтобы сосредоточить свое внимание на задаче, после этого времени пользователи быстро теряют терпение, если у них недостаточно информации о том, как долго им придется ждать результата.

Советы по индикаторам прогресса

Всегда старайтесь сделать ожидание более приятным, если не можете сократить очередь.

Объясните, почему пользователь ждет

Часто, если пользователи проинформированы, они могут быть более терпеливыми.Может быть полезно добавить дополнительную ясность, включив текст, который сообщает пользователю, что происходит, или объясняет, почему пользователь ждет.

Skyscanner сообщает пользователям, что ищет лучшие рейсы, проверяя всех доступных провайдеров.

Предоставьте общую оценку времени для трудоемких задач

Не пытайтесь быть точным, простого «это может занять пять минут» может быть достаточно для пользователей и побудить их подождать.

Оценка обновления программного обеспечения в Apple iOS

Показать абсолютный объем выполненной работы

Для трудоемких операций, когда заранее неизвестно, сколько работы нужно сделать, может быть невозможно использовать индикатор процента выполненных работ, но вы все равно можете предоставить информацию о ходе выполнения, касающуюся абсолютного объема проделанной работы.В этом случае подумайте о том, чтобы показать количество шагов, потому что знание количества шагов помогает пользователям, по крайней мере, составить приблизительную оценку.

Если невозможно точно отследить прогресс, подумайте о том, чтобы показать количество шагов, а не процентное значение.

Не останавливайте индикатор выполнения

Индикатор выполнения заставляет пользователей рассчитывать, насколько быстро выполняется действие. В результате будут замечены любые неожиданные зависания, которые повлияют на удовлетворенность пользователей. Худший возможный случай — когда индикатор выполнения приближается к 99% и внезапно останавливается.Большинство пользователей будут разочарованы таким поведением, потому что оно заставляет их думать, что приложение зависло. Надеюсь, есть простое решение — вы можете замаскировать небольшие задержки на индикаторе выполнения, перемещая его мгновенно и плавно.

Изображение предоставлено: Behance

Сделайте так, чтобы индикаторы прогресса казались пользователям быстрее

Имейте в виду, что восприятие может быть так же важно, как и чистая скорость. Чтобы индикатор выполнения казался более быстрым для пользователей , вы можете запускать прогрессивную анимацию медленнее и позволять ей двигаться быстрее по мере приближения к концу.Таким образом, вы быстро дадите пользователям представление о времени завершения.

Изображение предоставлено: Behance

Предлагает визуальное отвлечение

Индикаторы творческого прогресса могут уменьшить восприятие времени пользователем. Если приложение дает пользователям что-то интересное во время ожидания, это заставляет пользователей меньше обращать внимание на само ожидание. Таким образом, чтобы люди не скучали в ожидании чего-то, предложите им отвлечься. Например, это может быть что-то забавное…

Кредит изображения: Behance

Или что-то очаровательное…

Изображение предоставлено: Vimeo

Или что-то неожиданное, что привлекает внимание пользователей достаточно долго для загрузки вашего приложения.

Прекрасная анимация может отвлекать ваших посетителей и заставлять их игнорировать длительное время загрузки. Изображение предоставлено: Скелетные экраны Behance

: отличная альтернатива традиционным индикаторам прогресса

Как вы только что узнали, когда работа требует времени, мы сообщаем об этом людям с помощью индикаторов прогресса. Однако, хотя намерения, стоящие за индикаторами прогресса, хороши, конечный результат может оказаться плохим. Как сказал Люк Вроблевски в своей статье: «Индикаторы прогресса по определению обращают внимание на то, что кому-то нужно подождать.Это похоже на то, как часы тикают — когда вы это делаете, время кажется медленнее «. С введением индикаторов прогресса в наши пользовательские интерфейсы дизайнеры часто заставляют людей смотреть на часы. Хотя это лучше, чем ничего, при разработке пользовательского интерфейса всегда нужно стараться сделать ожидание более приятным.

Надеюсь, есть хорошая альтернатива индикаторам прогресса, техника, которая позволяет людям получить отличный опыт, пока они ждут. И у этой техники есть название, скелет экрана .Скелетные экраны (также известные как временные информационные контейнеры) — это, по сути, пустая версия страницы, на которую постепенно загружается информация. Вместо того, чтобы показывать индикатор загрузки, скелетные экраны фокусируются на фактическом прогрессе и создают предвкушение того, что должно произойти. Это создает ощущение, что все происходит немедленно, поскольку информация постепенно отображается на экране, и люди думают, что приложение действует, пока они ждут.

Medium использует этот трюк, показывая простой каркас в качестве заполнителя, пока загружается фактическое содержимое.Экран загрузки также знакомит пользователя с общей структурой загружаемого контента.

Средний фокус на загружаемом контенте, а не на том, что он загружается. Источник изображения: merhl (превью в большом разрешении)

Заключение

Независимо от того, насколько быстро мы создаем наше приложение и сайты, часто возникает что-то, что требует времени для обработки. Анимации ожидания, такие как загрузка счетчиков и индикаторы процента выполнения, уменьшают неопределенность, информируя пользователей о текущем рабочем состоянии и увеличивая вероятность того, что пользователь останется и будет ждать загрузки информации.Практическое правило — использовать зацикленный индикатор или скелетные экраны для достаточно быстрых операций, занимающих от двух до десяти секунд, и индикатор процента выполнения для операций, занимающих более десяти секунд. При выборе между зацикленной анимацией и скелетными экранами, вероятно, будет хорошей идеей отдать предпочтение последним, потому что они имеют одно важное преимущество — они могут улучшить ощущение любого действия, занимающего больше нескольких миллисекунд.

Эта статья является частью серии UX-дизайна, спонсируемой Adobe.Недавно представленное приложение Experience Design предназначено для быстрого и гибкого процесса проектирования UX, создания прототипов интерактивной навигации, а также их тестирования и обмена — все в одном месте.
Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также посетить блог Adobe XD, чтобы оставаться в курсе и быть в курсе. Adobe XD часто обновляется новыми функциями, и, поскольку он находится в общедоступной бета-версии, вы можете загрузить и протестировать его бесплатно.

(il, ms, vf, aa) .