iPhone 13 Pro уже в продаже
Пространство возможностей
ООО «Портативная техника», юр.адрес: 190031, Санкт-Петербург, наб. реки Фонтанки, д.109, литер А, пом. 13Н, ОГРН № 1057811930296
{"id":6707,"title":"\u041a\u0430\u043a Wi-Fi 6 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u043f\u0430\u0440\u043a\u0438 \u0438 \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430","url":"\/redirect?component=advertising&id=6707&url=https:\/\/vc.ru\/promo\/297406-step-logic&placeBit=1&hash=37dc3f26f28b858f8d08570ba01374feca24a62105000fe6fadd3f1f64d34c52","isPaidAndBannersEnabled":false}
Дизайн
e-Legion

Продуманные макеты или как предугадать вопросы коллег (+ чек-лист)

Саша
дизайнер e-Legion

Ты передал в разработку крутые макеты, уже спишь и видишь их на проде, но разработчики и QA не перестают писать тебе, чтобы уточнить всё новые детали. Знакомая ситуация? В этой статье я расскажу о том, как подходить к дизайну более вдумчиво и закрывать большую часть вопросов коллег из других отделов еще до их появления. А также поделюсь чек-листом, который будет полезен дизайнерам мобильных приложений для проверки своих творений перед передачей их в разработку.

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

Часто при подготовке концептов мы не задумываемся о том, что с приложением может быть что-то не так — пользователь находился в зоне слишком слабого сигнала Wi-Fi, на сервере произошел сбой… Например, при плохом интернете, данные могут долго не отображаться, что будет раздражать пользователей.

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

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

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

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

Получаем, что глобально у экрана могут быть следующие состояния:

  • данные получены
  • данные отсутствуют
  • данные загружаются
  • ошибка при получении данных

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

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

Посмотрите, как ваш макет будет выглядеть и для «Ивана Иванова», и «Константина Константинопольского». Комфортно должно быть всем.

Это касается и заполняемости содержимого экрана. Что, если пользователь напишет в строке с отзывом «Классно»? А что, если он сильно расстроился и хочет вылить душу в этом маленьком инпуте?

Всегда думайте и про «маленьких», и про «больших».

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

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

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

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

Девайс

На первых порах моей работы дизайнером данный пункт был просто моей болью. Я могла подготовить все макеты для обеих платформ, согласовать, выгрузить для разработки и расслабить булки, а потом ко мне внезапно подходили с вопросом: «А на планшете как оно будет?». Если ваше приложение работает не только на смартфонах под iOS и Android, но еще и на планшетах, не забудьте включить такой пункт в свой чек-лист для проверки.

Есть еще один момент, который я бы назвала не правилом, а особым случаем, который стоит держать в уме. Мы с коллегами всегда готовим макеты для каждой платформы в одном размере. Например, сейчас для iOS мы используем iPhone 11 Pro. У многих пользователей девайсы могут оказаться меньше. Поэтому при подготовке макета представьте, что увидит человек с iPhone 8 или SE. В «особо тяжелых случаях» подготовьте дополнительный макет. Вам не сложно, а разработчику будет намного проще.

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

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

Сейчас чек-лист успешно применяется на одном из проектов e-Legion при работе с дизайнерами из сторонней компании.

{ "author_name": "e-Legion", "author_type": "self", "tags": ["\u0447\u0435\u043a\u043b\u0438\u0441\u0442\u044b","\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435\u0441\u043e\u0432\u0435\u0442\u044b","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f","\u043c\u0430\u043a\u0435\u0442\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 3, "likes": 23, "favorites": 79, "is_advertisement": false, "subsite_label": "design", "id": 266494, "is_wide": true, "is_ugc": true, "date": "Mon, 05 Jul 2021 13:35:51 +0300", "is_special": false }
0
3 комментария
Популярные
По порядку

Умничка спасибо

2

Очень круто, без воды!

2

Довольно банальные рассуждения кроме учета системных ошибок

1
Читать все 3 комментария
Зачем платить больше?

Генеральный директор IPCodex, юрист Наталья Полианчик — о том, почему кинотеатрам не стоит обижать кинокомпозиторов

«Ж@па в дымоходе» триллер о ритейле в России. Антикейс

«Ж@па в дымоходе» — старинная фламандская поговорка. Означает она человека, который занимает руководящую позицию в организации, но его компетенций недостаточно, чтобы занимать эту должность. Не тянет. Такая «ж» затыкает собой условный дымоход, и весь дым идет в дом. В Нидерландах это явление называется «Ж@па в дымоходе», а у русских — эффективный…

Контроль доступа как сервис: интегрированное решение Gaskar Group на базе Sigur
Печальный опыт со СберМегаМаркет и Сберлогистик

Приветствую всех!

Как охватить 98% сотрудников кадровым электронным документооборотом

Кейс Альфа-Лизинга и EasyDocs

Китай запретил любые операции с криптовалютами

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

Канал в телеграме с нуля до 40 тысяч подписчиков, или как отказала модная железа

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

Разворотная фигура Бриллиант в техническом анализе

Фигуру «Бриллиант» (с англ. – «Diamond») называют также «Кристалл», «Алмаз», «Ромб». Формация состоит из двух конфигураций — расходящегося и симметричного (сходящегося) треугольников. Этот паттерн в теории служит сигналом для смены тренда или как минимум коррекцией в средне- или долгосрочном движении актива.

«Тинькофф Журнал» запустил сервис подбора ИТ-курсов на основе реальных отзывов Статьи редакции

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

Бывший дизайнер Apple Джонни Айв подписал многолетний контракт с Ferrari Статьи редакции

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

Продажа Mailchimp за $12 млрд возмутила сотрудников — им не давали бонусы опционами, обещая не продавать компанию Статьи редакции

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

null