Чашка кофе и экраны в приложении
![](/file/bca2e123effc7c2cf56b8.png)
Анас Ка разобрался в том, что общего между чашкой и UI. Публикуем перевод его статьи.
Чашка кофе может существовать в пяти состояниях:
- Пустая
- Наполняемая
- Наполовину полная/пустая чашка
- Сломанная
- Полная горячего превосходного кофе!
Что если я скажу вам, что и экраны в приложениях очень похожи на такую чашку и должны учитывать все пять состояний?
1. Состояние пустоты
![](https://i0.wp.com/apptractor.ru/wp-content/uploads/2017/01/1-5.jpeg?resize=629%2C373)
Подумайте о начальном состоянии UI – в первый запуск, когда никаких данных у пользователя еще нет. Это состояние «пустой чашки».
Создавайте экран так, чтобы на нем присутствовал призыв к действию. Видите кнопку «Займитесь шопингом» на скриншоте приложения eBay выше?
Посетите сайт Empty States, чтобы почерпнуть там вдохновение для создания пустых экранов.
2. Состояние загрузки
![](https://i1.wp.com/apptractor.ru/wp-content/uploads/2017/01/2-4.jpeg?resize=629%2C373)
Когда данные загружаются, UI должен информировать об этом.
Для этого есть «Индикатор активности» и «Скелетные экраны». Выше показан пример скелетного экрана «Моих заказов» из Flipkart.
3. Наполовину полное состояние
![](https://i0.wp.com/apptractor.ru/wp-content/uploads/2017/01/3-5.jpeg?resize=629%2C373)
Если данных на экрана не хватает, то пользователю можно напомнить добавить информацию или использовать приложение более часто.
Приложение LinkedIn напоминает пользователю о необходимости заполнить профиль, показывая экран с указателями и необходимой информацией.
4. Ошибка
![](https://i0.wp.com/apptractor.ru/wp-content/uploads/2017/01/4-4.jpeg?resize=629%2C373)
Подумайте обо всех ошибках, которые могут случиться, отображении информации о них и том, как помочь пользователю выйти из этого состояния.
Посмотрите на экран Uber выше – сообщение предлагает сразу две возможности разрешить создавшуюся проблему.
5. Идеальное состояние
![](https://i2.wp.com/apptractor.ru/wp-content/uploads/2017/01/5.jpeg?resize=629%2C373)
Мы все знаем, что это такое, правда? Оно самое первое создается в любом проекте. Экран, полный данных, представленных удобным и красивым способом.
Вот как в музыкальном приложении Gaana, например.
Выводы
![](https://i0.wp.com/apptractor.ru/wp-content/uploads/2017/01/6-2.jpeg?resize=629%2C629)
Когда вы создаете UI- думайте о чашке кофе. Выходи за рамки идеального состояния, и учитывайте четыре другие возможности.
В конце концов, наша цель – помочь пользователям и сделать их жизнь лучше!
Есть новость, статья или комментарий? Пришлите нам в чат @mts24chat.