Таблица данных в Pixso: компоненты, состояния и Auto Layout

Чтобы собрать таблицу данных в Pixso, сначала определите поля, действия и правила работы с записями. Затем создайте ячейки, строки, заголовки и панель действий как повторно используемые компоненты с Auto Layout — автоматическим размещением элементов. На примере счетов на оплату разберём плотность, выделение, сортировку, загрузку, ошибки и узкий экран. Результатом станет редактируемая система компонентов и описание поведения для разработки.

Определите данные и действия в таблице счетов

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

Для каждой колонки запишите тип и формат данных, важность, минимальную полезную ширину, выравнивание, правила сокращения, пустое значение, сортировку и поведение на узком экране. Суммы выравниваются одинаково и содержат валюту. Для дат заранее выбирают формат, а для значений со временем — ещё и часовой пояс. Статус обозначается текстом, а не только цветом. Действия строки получают видимые подписи либо доступные названия в реализации.

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

Соберите небольшие повторно используемые ячейки

Начните в файле дизайна Pixso не с целой строки, а с компонентов ячеек: текстовой, числовой, со статусом, флажком и действием. Внутри каждой настройте Auto Layout для отступов и выравнивания. Сразу добавьте длинное название клиента и большую сумму: короткие заглушки скрывают проблемы с шириной.

Варианты нужны там, где действительно меняется структура или состояние. Значения статуса можно представить вложенным компонентом метки, не создавая отдельную строку таблицы для каждого статуса. Выбор записи относится к флажку, направление сортировки — к ячейке заголовка. Такое разделение не даёт набору вариантов разрастись во все возможные сочетания.

Используйте имена по назначению, например Table/Cell/Text и Table/Header/Sortable. В Pixso есть компоненты и варианты; правила их создания и связи с экземплярами описаны в руководстве по компонентам на английском. Auto Layout задаёт компоновку содержимого, а действия с реальными данными позднее реализуются в приложении.

Собрать компоненты своей таблицы в Pixso →

Соберите строку и заголовки

Поместите экземпляры ячеек в горизонтальный Auto Layout. Задайте ширину колонок осознанно: фиксированную для управляющих элементов и статуса, гибкую для клиента, с устойчивым выравниванием для суммы. Подготовьте обычную строку, наведение, видимый фокус при работе с клавиатурой и выделение. Недоступное состояние добавляйте только там, где его требует правило продукта.

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

Соберите набор крайних значений: клиент из одного символа и из 70 символов, нулевая и большая сумма, неназначенный ответственный, просроченный счёт, отсутствующий срок оплаты. Auto Layout показывает, где содержимое не помещается, но решение о переносе, сокращении или перемещении поля принимает команда.

Меняйте плотность без потери смысла

Компактный и свободный варианты нужны, если у пользователей действительно различаются задачи. Опытному оператору бывает важно видеть больше счетов, другому пользователю — легче попадать по элементам и читать строки. Меняйте вертикальные отступы и, при необходимости, представление дополнительного текста; не убирайте существенную информацию без объяснения.

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

Не используйте плотность вместо расстановки приоритетов. Если все двенадцать колонок объявлены обязательными, вернитесь к задаче: возможно, нужны сохраняемые настройки колонок, панель подробностей или разные представления для разных ролей.

Опишите сортировку, фильтры и массовый выбор

В панели над таблицей находятся поиск, фильтр статуса, плотность, экспорт и количество выбранных записей. Отделите действия над всей таблицей от действий конкретной строки. При выборе нескольких счетов покажите панель массовых операций с числом и областью действия. «Экспортировать 12 счетов» сообщает больше, чем просто «Экспортировать».

Сразу определите, что означает «Выбрать всё»: текущую страницу, все результаты фильтра или вообще все счета. Если новый фильтр сбрасывает выбор, предупредите об этом до потери сделанной работы. Если часть выбранных записей нельзя экспортировать, покажите количество исключённых счетов и причину до запуска операции.

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

Когда таблица показывает историю действий, этих правил недостаточно: нужно ещё различать событие, изменённый объект и результат операции. Это разобрано в материале о дизайне журнала аудита. Он дополняет общие правила таблицы, а не заменяет их.

Разделите загрузку, отсутствие данных и ошибку

При первой загрузке можно показать скелетон — нейтральные заготовки строк, если структура таблицы уже известна. Они не должны выглядеть как настоящие счета. При обновлении часто полезнее оставить прежние строки и добавить индикатор: так человек не теряет контекст.

Пустая область может означать разные ситуации, и текст должен объяснять именно текущую:

• Счетов ещё нет. Подскажите, как создать или импортировать первый.
• Фильтры ничего не нашли. Покажите действующие условия и понятный способ их сбросить.
• Нет доступа. Объясните ограничение, не создавая впечатления, что записей не существует.
• Загрузка завершилась ошибкой. Сохраните запрос, предложите повтор и отделите сохранённые данные от актуальных.
• Данные загружены частично. Укажите, какой диапазон или источник недоступен и чем всё ещё можно пользоваться.

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

Задайте пагинацию и поведение большого набора

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

Для больших или постоянно обновляемых наборов разработчики могут выбрать серверную пагинацию либо виртуализацию. Макет не должен обещать, что все строки уже находятся в браузере. Зафиксируйте, какие количества точны, приблизительны или неизвестны, и можно ли выбрать ещё не загруженные результаты. Загрузка следующей страницы и обновление текущих строк должны различаться.

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

Спроектируйте узкий экран отдельно

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

Создайте в Pixso отдельные варианты для разных ширин. Проверьте доступность флажка выбора и действий строки. Используйте длинные переведённые подписи; в работающем интерфейсе проверьте масштаб 200%, закреплённые заголовки и совместную работу горизонтальной прокрутки таблицы с вертикальной прокруткой страницы. Ни одна из этих особенностей не проверяется одним уменьшением фрейма.

Явно укажите, какая информация скрыта, перемещена или сокращена. Разработчику не придётся выводить важность колонок из случайно подошедшего CSS. Auto Layout задаёт редактируемый макет; для реализации отдельно выбирают семантику таблицы или интерактивной сетки в зависимости от действий. В паттерне таблицы W3C и паттерне интерактивной сетки описаны разные ожидания от структуры и клавиатурного управления. Оба документа доступны на английском.

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

Публикуйте согласованные компоненты в командную библиотеку после проверки названий и назначения. Нерешённые вопросы сортировки, доступа, области выбора и адаптации удобно обсуждать рядом с макетом. Совместная работа над UI в Pixso помогает связать обсуждение с конкретными элементами, а не с отдельным описанием в переписке.

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

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

Какие решения должны остаться в спецификации

• Для каждой колонки: тип, формат, приоритет, ширина, пустое значение и поведение на узком экране.
• Для заголовков: текущая сортировка и доступные действия, а не только декоративные значки.
• Для «Выбрать всё»: область действия — страница, фильтр или полный набор результатов.
• Для массовой операции: число записей, права, ход выполнения, исключения, ошибки и видимый итог.
• Для плотности: компактный и свободный варианты на реальных длинных значениях.
• Для состояний: первая загрузка, обновление, отсутствие записей, пустой поиск, отсутствие доступа, ошибка и частичные данные.
• Для узких экранов: сохранённые возможности сравнения и действий без горизонтального переполнения всей страницы.
• Для реализации: семантика, клавиатура, фокус, объявления скринридера, увеличение и производительность.

Собирайте таблицу от данных к действиям

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