@Gagatyn
Самоучка

Как обыграть UI/UX у такого прототипа?

61ec55044b8d9749297851.png

Пока не начал реализовывать и чтобы не переделывать спросить решил Вас.
Таких блоково может быть больше 1. В каждом блоке, есть "Заголовок" и типа таблицы.
К примеру, "строка3", при клике на строку, а именно на чекбокс, выбирается строка-вариант "строка3" и раскрываются доп инфо-блок под строкой. Если выбрать "строку1" через чекбокс, то именно под ней отобразится инфо-блок и сдвинет строки ниже, как slideDown. Контент в инфо-блоке разный, от форм до текста.

У таблиц всегда есть сортировка, но с доп инфо-блоком усложнит это всё сделать и хочется избежать её.

Как обыграть ux, существуют ли какие-то принципы, правила построения интерфейса для такого случая?
Поделитесь ссылками, если такие существуют. Спасибо!
  • Вопрос задан
  • 373 просмотра
Пригласить эксперта
Ответы на вопрос 2
Все же зависит от постановки задачи, т.е. если прототип Ваш и его можно корректировать, то некоторые моменты я бы поправил. А если прототип утвержден, а Вам нужно отрисовать интерфейс, то и об удобстве рассуждать не приходится :)
По существу: заголовки слева меня смущают больше всего, но если таблица не очень широкая, а заголовки в одно слово, то вариант. Если мы о веб, то на трубках все равно придется сделать заголовки над таблицей, так чего тянуть?)
С текстом под таблицей не вижу проблем, главное стили: текст инфоблока нельзя отделять линией (бордером) от строки, иначе потеряется принадлежность. По этой причине таблица должна быть без вертикальных бордеров, иначе получится ужас. Сам текст инфоблока можно заключить в какой-то "бабл", который будет указывать на строку. И тогда все будет прилично выглядеть даже если строчек 100 (можно еще закрывать инфоблок, при открытии другого, но если они большие - страница будет дергаться).
Что касается взаимодействия, то поведение чекбокса немного не логично. Как правило сначала пользователь должен увидеть подсказку, а потом уже сделать выбор. Если это не тест, то можно выводить инфоблок тултипом при наведении на чекбокс, а по клику "раздвигать" строку и оставлять инфоблок на виду.

Советы могли бы быть более конкретными, если было бы понимание, что за продукт, где используется, кем :)
Ответ написан
Комментировать
@romant094
Frontend-developer
Используйте состояние и когда в нем что-то меняется, то все перерисовывается. Подойдет массив очень хорошо.
Хорошо бы сюда прикрутить React (или другую UI-библиотеку), чтобы проще было взаимодействовать с DOM.
Но можно и самому все написать :-)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы