1 of 4

Общие требования

Чек-лист для проверки состояний макетов

1/4

	Темная тема
Собраны все правила по отображению цветов элементов интерфейса �в темной теме

	Ошибки
Готовы правила отображения ошибок: �/ Нет интернета�/ Разлогинило�/ Не удалось загрузить данные�/ Ошибка отправки данных …

Штуки, которые стоит учесть перед передачей макетов �в разработку.

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

Гайд носит рекомендательный характер и может меняться

в зависимости от разрабатываемой вами фичи.

	Цвета
Для проекта подготовлена подробная цветовая схема

Чек-лист для проверки состояний макетов

Скорректируйте этот чек-лист под свой мобильный проект �и используйте его как при подготовке макетов /вы дизайнер/ или при их приемке /вы разработчик или аналитик/.

Хороших вам проектов )))

2 of 4

Данные на экране

Чек-лист для проверки состояний макетов

2/4

	По заполняемости полей
Много (все имеющиеся поля заполнены, все картинки � отображаются…) Мало (заполнены лишь обязательные поля или часть полей, � если обязательных нет)

	По объему заполнения
«Длинные» данные (длинные имена, названия в несколько строк, � большие сообщения в чате, 5-6-значные цифры …) «Короткие» данные (короткие названия в одну строку, � минимальное количество текста …)

Состояния экранов

	С данными
Данные пришли, всё ОК .

	Без данных
Пустое состояние (данных нет)

	Загрузка
Получение данных/загрузка — индикаторы загрузки, скелетоны

	Ошибки
Ошибки в зависимости от действий на экране

3 of 4

Чек-лист для проверки состояний макетов

3/4

Элементы интерфейса

	Поля ввода
Дефолтное (плейсхолдер) Заполненное Ошибка валидации

	Элементы загрузки
Пустое (пока не загрузили) Процесс загрузки Успешно загружено Ошибка загрузки

	Иконки/иллюстрации
Дефолтное состояние Активное состояние (при необходимости) Отсутствие масок у векторных иконок Зона экспорта размечена Отсутствие обрезки у изображений со скругленными углами � (используем скругление углов)

	Изображения (сервер)
Изображения Заглушки � (когда нет изображения)

	Системные сообщения
Системные сообщения и запросы � + кастомизация их текста � при необходимости

	Анимации
ИЛИ Описание анимаций � элементов экрана ИЛИ JSON-файл � анимированного элемента

	Кнопки
Дефолтное состояние Задизайбленная Нажатая (при необходимости)

4 of 4

Чек-лист для проверки состояний макетов

4/4

Элементы платформ

	Дефолтный
Основной формат

	Планшет
Большие экраны

Размер устройства

	Pull-to-refresh
Обновление данных касанием

Обновление данных на экране

Ориентация экрана

	Вертикально
Основной формат

	Горизонтально
При необходимости

	Маленькое устройство
iPhone SE и схожие по размеру девайсы

	Пагинация
Порционная загрузка данных �для экрана (списки, каталог …)

	Автоматическое обновление

	Показать как будут выглядеть идентичные элементы на разных платформах: �/ Navigation bar / App bar top …

Александра Маньковская | Mobile app designer, e-Legion

Актуально на 07/2021