Scott
При редактировании строки таблицы пользователь должен различать черновик и сохранённую запись. Сохраняйте строку в поле зрения, обозначайте изменяемое поле и показывайте, идёт ли сохранение, завершилось ли оно или было отклонено из-за новой версии записи. Разберём конкретную задачу: специалист по закупкам меняет цену поставщика с $24.00. Одной строки достаточно, чтобы обнаружить решения, которые обычно скрыты за аккуратным макетом таблицы.
Если ещё не определены столбцы, плотность, сортировка и пустые состояния, начните с руководства по компоненту таблицы данных в Pixso. Здесь таблица уже существует: нужно безопасно изменить одну запись, не открывая отдельную форму на всю страницу.
Сначала определите момент сохранения
В строке указаны поставщик, код товара, цена за единицу, валюта и время последнего изменения. Закупщик исправляет цену, одновременно сравнивая соседние предложения. Полноэкранная форма лишила бы его этого контекста. Редактирование в строке сохраняет сравнение, но требует ясного ответа: изменение сохраняется при выходе из поля или только после нажатия кнопки?
Для цены, от которой зависят дальнейшие расчёты, действия «Сохранить» и «Отменить» на уровне строки делают момент подтверждения понятным. Исходные $24.00 остаются сохранённой ценой, пока сервер не подтвердит изменение. Черновик не должен попадать в итоговые суммы и отображаться другим участникам. Если продукт использует автосохранение, ему всё равно нужны различимые состояния ожидания, успеха и ошибки: исчезновение поля ввода не доказывает, что данные записаны.
Во время редактирования сохраняйте идентичность строки. Сортировка или фильтр могут переставить её сразу после изменения цены. Удержите строку на месте до сохранения либо предупредите, что после подтверждения она исчезнет из текущего фильтра. Закреплённая панель действий полезна только тогда, когда ясно, какую именно запись она меняет.
Спроектируйте шесть состояний, а не одно поле ввода
Нарисуйте обычную строку и переходы, которые действительно возникают в работе. Таблица ниже описывает одну и ту же запись поставщика на каждом шаге.
| Состояние | Что видно и что можно сделать дальше |
|---|---|
| Просмотр | Показать $24.00 и заметное действие «Изменить». Перейти к редактированию, не теряя связь с записью. |
| Редактирование | Показать поле цены, валюту, «Сохранить» и «Отменить». Пользователь меняет или отбрасывает черновик. |
| Ошибка ввода | Оставить введённое значение и объяснить причину рядом с полем. Если нарушено известное локальное правило, не отправлять запрос. |
| Сохранение | Оставить черновик видимым и показать ожидание ответа. Не допускать повторной отправки. |
| Сохранено | Показать принятое значение и короткое подтверждение, затем вернуться к просмотру. |
| Конфликт или сбой | Сохранить черновик и объяснить, почему изменение не подтверждено. Дать возможность сравнить значения, безопасно повторить запрос, продолжить правку или отменить её. |
В нашем примере значение -5 недопустимо: этот прайс-лист не разрешает отрицательную цену за единицу. Вместо «Неверное значение» напишите «Введите цену не ниже $0.00». Не очищайте поле: пользователь сможет сразу исправить число. Это правило конкретного примера, а не утверждение, что любая система ценообразования разрешает ноль.
В руководстве Atlassian по редактированию на месте разделены просмотр и изменение, а сохранение, отмена и проверка сделаны явными. Используйте это как ориентир, но выбирайте конкретный элемент управления с учётом риска изменения цены и правил вашего продукта.
Разделите проверку ввода и отказ сервера
Проверка проходит на двух уровнях. Пустое поле, неверный формат суммы и отрицательное число можно обнаружить до отправки. Но окончательное решение остаётся за сервером: возможно, закупщик больше не вправе менять этого поставщика, валюта зафиксирована или допустимый диапазон изменился. Прохождение локальной проверки ещё не означает «Сохранено».
Разместите сообщение об ошибке рядом с ценой и программно свяжите его с полем для вспомогательных технологий. Одной красной рамки недостаточно. Если сервер отклонил запрос, оставьте строку открытой и сохраните черновик. Покажите конкретную причину, если сервер её вернул. Общее «Что-то пошло не так» годится как запасной текст, но не должно скрывать проблему прав доступа или версии записи.
Продумайте и формат чисел. Пользователь может ввести 24, 24.0 или 24.00; после подтверждения цена должна отображаться единообразно. Укажите валюту отдельно или в названии поля, чтобы «24» не приняли за количество. В локалях с десятичной запятой ввод и вывод должны соответствовать местным правилам: нельзя молча превратить «24,50» в 2 450 или 24 500.
Честно покажите сохранение и разрешение конфликта
Предположим, закупщик ввёл $25.00, но коллега уже сохранил $26.00 в той же записи. Проверка версии позволяет не затереть новое значение старой правкой. Экран восстановления должен назвать строку и показать рядом «Ваш черновик: $25.00» и «Сейчас сохранено: $26.00». Пользователь сравнит значения и решит, как поступить. Не называйте $25.00 сохранённой ценой только потому, что число осталось в поле.
Доступные действия зависят от правил системы. Если перезапись разрешена, предложите её как явный выбор и назовите последствия. Если нет — дайте продолжить редактирование с учётом текущей цены или отказаться от изменения, не теряя черновик до принятия решения. Не обещайте «Отменить действие» в макете, если операция на самом деле необратима. Сетевой тайм-аут отличается от подтверждённого конфликта версий: после тайм-аута клиент может не знать, был ли запрос выполнен. Сначала проверьте текущее значение записи или статус запроса, а уже затем предлагайте повторную отправку.
Для продукта с несколькими редакторами зафиксируйте правило конкурирующих изменений при передаче макета разработчикам: какой идентификатор версии отправляется, какие поля сравниваются и какой ответ означает конфликт. Тогда интерфейс сможет отличить устаревшую правку от общего сбоя. Даже удачное всплывающее сообщение не заменит такого соглашения.
Сделайте строку доступной с клавиатуры
До действия «Изменить» можно добраться без мыши. После его активации фокус переходит в поле цены. Клавиша Escape должна отменять правку лишь в том случае, если это согласованное поведение приложения; Enter не должен неожиданно отправлять неполную строку с несколькими полями. Кнопкам «Сохранить» и «Отменить» нужны понятные названия и видимый фокус. После возврата к просмотру фокус тоже должен оказаться в ожидаемом месте. При ошибке пользователь должен найти поле и понять причину — через перевод фокуса или объявление.
Интерактивная таблица может использовать клавиатурную модель grid, но grid — это не обычная таблица, в которой сделали ячейки кликабельными. Шаблон W3C для grid описывает перемещение фокуса; примеры помогают учиться, но не заменяют тестирования готового элемента. Сначала решите, нужен ли grid этому продукту. Семантическая таблица с ясно названной кнопкой «Изменить» в каждой строке может быть проще в использовании и поддержке.
На узком экране держите вместе имя поставщика, изменяемую цену, валюту, ошибку и действия сохранения. Второстепенные столбцы можно перенести в детали строки, но редактируемое значение нельзя прятать. Проверьте не только мобильную ширину, но и увеличенный масштаб: действие, доступное при 100 %, при 200 % может превратиться в значок без подписи или вызвать горизонтальную прокрутку.
Соберите сценарий принятия решения в Pixso
В Pixso создайте варианты строки прайс-листа для просмотра, редактирования, ошибки ввода, сохранения, успешного результата и конфликта. Во всех кадрах оставьте одного поставщика и один код товара: так рецензенты проследят изменение одной записи, а не шести несвязанных примеров. Соедините переходы редактирования и сохранения в прототипе. Прайс-лист — это проектируемое приложение на холсте; Pixso помогает команде нарисовать и обсудить интерфейс, но не сохраняет цену в базе данных этого приложения.
Попросите участника проверки найти сохранённую цену при открытом черновике, исправить отрицательное число и выбрать действие, когда появится $26.00, сохранённые коллегой. Если он не может определить, подтвердились ли $25.00, меняйте подпись состояния или сравнение до полировки оформления. Затем передайте разработчикам прототип и краткое описание проверки, контроля версий, движения фокуса и ответов об ошибках. Открыть Pixso и спроектировать состояния строки.
Закрепите решения, которые должна сохранить реализация
Результат этой работы — не новое поле цены, а надёжное различие между вводимым значением, ожидающим подтверждения запросом, принятой сервером ценой и отклонённой правкой. Для строки поставщика команда должна согласовать действие сохранения, локальные и серверные правила, поведение сортировки и фильтрации, ответ на конфликт версий, восстановление после тайм-аута и положение фокуса после каждого исхода. Когда решения видны в экранах и описании, дизайнеры могут проверить сценарий, а разработчикам не приходится угадывать поведение по статичному макету.
