Редактирование ячеек в таблице: как показать несохранённые правки

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

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

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

Зафиксируйте четыре состояния значения:

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

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

Определите поведение основных клавиш заранее. Enter может подтвердить значение, Escape — отменить текущую правку, Tab — перейти к следующей редактируемой ячейке или выйти из строки. Не используйте один и тот же жест для несовместимых действий в разных колонках без пояснения. После отмены верните фокус на исходную ячейку; после сохранения оставьте его там же или переместите по заранее ожидаемому порядку.

Важно различать отмену редактирования и отмену уже сохранённого изменения. До отправки запроса Escape может восстановить исходное значение. После успешного сохранения такая отмена уже не работает, если продукт отдельно не поддерживает историю действий. Не показывайте команду «Отменить» так, будто она гарантированно откатывает уже записанные данные.

Изменённое поле должно отличаться от соседних, но не превращаться в предупреждение. Используйте спокойный контур или маркер, который виден на фоне и не перекрывает текст. Для активной ячейки важнее всего курсор и заметный фокус; для подтверждённой, но ещё не отправленной правки — маркер, по которому можно понять, что строка отличается от сохранённых данных.

Если сохранение выполняется кнопкой на уровне строки, разместите кнопку рядом с изменёнными полями или в устойчивом столбце действий. У кнопки должна быть однозначная подпись: «Сохранить строку» сообщает объём операции лучше, чем «ОК». При редактировании только одной ячейки допустима подпись «Сохранить», если контекст очевиден. Отмена должна возвращать именно к последнему сохранённому состоянию, а не к промежуточной правке.

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

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

Покажите ошибку рядом с редактируемой ячейкой и свяжите сообщение с полем. Формулировка «Неверное значение» не помогает исправить проблему. Лучше сказать: «Укажите дату в формате день.месяц.год» или «Цена должна быть неотрицательной». Не стирайте введённый текст при отказе сервера: пользователь должен иметь возможность скорректировать его без повторного набора.

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

После нажатия кнопки интерфейс должен подтвердить, что команда принята. На короткое время покажите состояние «Сохраняем…» рядом с кнопкой или строкой, заблокируйте повторный запуск той же операции и не удаляйте текст из поля раньше ответа. Для таблицы, где пользователь может продолжать работу с другими строками, блокируйте только запись, которая отправляется, если это безопасно для данных.

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

Для автоматического сохранения покажите, когда значение уже отправлено и когда сервер подтвердил его. Текст «Сохранено» рядом с последней датой синхронизации уменьшает неопределённость; одной паузы после ввода недостаточно, чтобы человек знал, записаны ли изменения. Если интернет пропал, явно обозначьте, что правка осталась локальной или ждёт отправки, и предупредите перед уходом, если она может исчезнуть.

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

До сохранения можно показать старые значения обычным текстом в остальных колонках, а изменённые поля — как активные вводы. Рядом с действиями строки появляются «Сохранить строку» и «Отменить». Если дата введена неверно, сообщение должно быть возле даты; цена остаётся в поле без потери. Пока запрос выполняется, кнопка показывает ход операции и не позволяет отправить те же данные дважды.

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

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

Считать нажатие Enter достаточным подтверждением. Если запрос ещё выполняется, визуально завершённая строка может оказаться несохранённой. Разделяйте ввод, отправку и успешный ответ.

Скрывать маркер изменения после потери фокуса. Человек может перейти к другой колонке, не сохранив строку. Состояние правки должно оставаться заметным до сохранения или явной отмены.

Очищать редактор при сетевой ошибке. Это заставляет повторно набирать данные и подрывает доверие. Сохраняйте текст, показывайте ошибку и разрешайте повторить операцию.

Использовать одинаковое сообщение для всех отказов. Неверная дата, отсутствие доступа и устаревшая версия требуют разных решений. Назовите причину настолько точно, насколько позволяет ответ сервера.

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

Автосохранение подходит для независимого значения, которое безопасно применять сразу, например для простого текстового примечания. Показывайте ход отправки и подтверждение, а также сохраняйте черновик при сетевом сбое. Для взаимосвязанных полей, требующих проверки или согласования, явное действие над строкой обычно понятнее.

Да, если пользователь может потерять контекст изменения или должен сравнить варианты. Исходное значение можно оставить в истории, подсказке, отдельном тексте или временной подписи. Если поле очевидно и коротко, достаточно ясного признака несохранённой правки и команды отмены.

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

Используйте заметный контур, маркер состояния или текстовую подпись «Не сохранено». Цвет может усиливать сигнал, но не должен быть единственным способом обнаружить изменение. Проверьте, что маркер заметен на разных фонах и при высокой контрастности.

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

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

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