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