Material Design на русском. Часть 46 — Коммуникация: Офлайн состояние

Published in

Дизайн-кабак

4 min readMar 13, 2021

--

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Офлайн состояние приложения позволяет пользователям работать с приложением даже без доступа в Интернет.

Принципы

Адаптивность

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

Показывай функциональность

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

Показывай контент

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

Офлайн функциональность

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

Например, файлами можно управлять даже если Интернета нету.

Функциональность без доступа к сети

Чтобы сообщить о том, что приложение работает без доступа к сети, покажи какую-нибудь иконку с надписью «Не в сети» или «Нет доступа к Интернету» и т.д.

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

Тут также: иконка + надпись рядом с адресной строкой, если сайт не имеет доступа к сети по каким-то причина.

Отсутствие функциональности когда нет сети

Если функции недоступны в офлайн-режиме, покажи это, используя иконку «cloud off». Показывать подобный значок нужно только в офлайн-режиме. По возможности используй еще и надпись «Не в сети» или «Нет доступа к Интернету» и т.д.

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

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

Настройка офлайн-режима

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

Пункт навигационного меню “Офлайн-области” (5-й в списке) указывает на информацию, которая будет сохранена, если у пользователя не будет доступа к Интернету.

Интерактивность в офлайне

Загрузка файла

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

Текст для офлайн-режима

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

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

**Правильно**: иконка + надпись «Загрузить»

**Неправильно**: Не используй свитчер для загрузки файла. Свитчеры указывают на состояние “включено” или “выключено”, а не на загрузку.

Иконки

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

Анимация

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

На примере показан переход между состояниями иконок.

Удаление загруженного контента

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