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