В этой статье
Scott
Мобильная таблица данных не становится удобной от простого уменьшения всех столбцов. Сначала определите решение, которое должен принять пользователь, затем расставьте приоритеты полей, действий и состояний. В Pixso можно разобрать компонент таблицы данных и превратить настольную структуру в понятный мобильный сценарий.
Сначала определите нужное решение
Решение может состоять в открытии строки, одобрении или сравнении состояний. Критерий для оставшегося столбца — не наличие информации, а её необходимость для следующего шага. Идентификатор, состояние, срок и сумма обычно важнее пояснений, которые можно перенести на экран деталей.
| Роль поля | Показ на мобильном | Следующее действие |
|---|---|---|
| Идентификация | Название, номер и состояние в начале строки. | Открыть строку и увидеть детали. |
| Решение | Значения, необходимые для одобрения или изменения. | Одобрить, вернуть или сменить исполнителя. |
| Фильтрация | Текущий фильтр и количество результатов видны всегда. | Изменить условие и обновить список. |
| Дополнительные данные | Длинное описание и история собраны в деталях. | Открыть их при необходимости. |
Если поле скрывается, покажите, что его значение доступно в строке или деталях. Не полагайтесь только на значки: оставляйте подписи и названия состояний, которые помещаются на экране.
Определите границу скролла и деталей
Даже при горизонтальной прокрутке на первом экране должны читаться основные идентификаторы и данные для решения. Фиксированный столбец, перенос строки или карточный вид выбирайте по длине строки и частоте действия.
- Запишите решение пользователя и условие завершения.
- Расставьте поля для решения по приоритету.
- Перенесите скрытые поля в детали или раскрываемую строку.
- Явно покажите фильтр, сортировку и выбранное состояние.
- Проверьте загрузку, пустой результат, ошибку и отсутствие прав.
Описание строки должно быть коротким, а важное значение — первым. После изменения фильтра показывайте условие и количество результатов; при нулевом результате дайте вернуть условие.
Сделайте выбор и массовые действия безопасными
При использовании флажков одновременно показывайте количество выбранных строк, область действия и результат. До массовой операции дайте просмотреть объекты, а недоступные из-за роли или состояния действия объясните.
| Что проверить | Какие данные показать | Какой сбой предотвратить |
|---|---|---|
| Что выбрано? | Количество, идентификаторы строк и фильтр. | Создать впечатление, что выбраны строки с другой страницы. |
| Что изменится? | Название действия, новое состояние и отмена. | Скрыть последствия массового изменения. |
| Каков результат? | Успех, частичный успех, строки с ошибкой и причины. | Считать ошибки успешными. |
| Можно ли отследить? | История, время и исполнитель. | Оставить только исчезающее уведомление. |
Обрабатывайте конфликты и страницы
Другой человек может изменить строку, пока загружается следующая страница, или изменить фильтр в другой вкладке. Ориентируйтесь на последнее состояние сервера и покажите разницу между старым и текущим значением. Если выбор нельзя сохранить, попросите проверить область действия.
При бесконечной прокрутке сообщайте текущую позицию и загрузку. При постраничной навигации сохраняйте фильтр и сортировку, чтобы после возврата можно было найти ту же строку.
Проектируйте пустые, ошибочные и закрытые состояния
«Нет данных», «условие не найдено», «ошибка загрузки» и «нет прав» — разные состояния. Коротко объясните причину и доступное действие, не позволяя по тексту ошибки угадать наличие конфиденциальных данных.
Если не удалось изменить только часть строк, разделите успешные и доступные для повторной попытки. При неизвестном результате не отправляйте операцию снова без проверки; при наличии идентификатора обработки покажите его.
Проверяйте сценарии на реальных данных
Сравните отображение для администратора, исполнителя и читателя. Проверьте длинные названия, несколько состояний, ноль результатов, отсутствие прав, восстановление после офлайн-режима, клавиатуру и поворот экрана. Убедитесь, что первый экран не ведёт к ошибочному решению.
В Pixso соедините настольные и мобильные кадры в одном файле и сравните приоритет полей, раскрытие строки, выбор и ошибки. На проверке обсуждайте следующее действие пользователя, а не только внешний вид.
Передайте приоритеты для разработки
В финальном дизайне зафиксируйте обязательные поля, поля в деталях, область массовой операции, пустые, ошибочные и закрытые состояния, а также требования доступности. Определите безопасные события для измерения: загрузку, изменение фильтра, открытие строки и результат действия. Персональные и конфиденциальные значения не должны попадать в логи.
