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