Как уместить много карточек в экран телефона?

Привет! На скриншоте результат веб‑анализа макияжа на мобилке. 15 и более карточек, которые открываются по клику в панельке снизу. Есть ощущение, что может быть удобнее. Есть ли идеи по поводу представления сегментированного контента вроде этого в условиях ограниченных размеров экрана?

Дмитрий!

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

Без линеек и плашек становится видно, как много места уходит на бесполезные отступы между блоками и внутри них

Следующее действие — попытаться объединить подобное с подобным. В данном случае уместно поставить текст и заголовок в каждой карточке рядом, избавившись от увеличенного отступа между ними:

Я просто сдвинул все блоки друг к другу и уже выиграл больше половины площади экрана

Теперь можно переставить бирки ОК на левый борт — они более массивные и будут лучше чувствовать себя в начале строки:

После всех моих манипуляций у блочков пропала «карточность» и ощущение кликабельности. Можно попробовать добавить заголовкам цвет, иконки или стрелочки ❱, но я из эстетических соображений позволю себе вернуть разделительные линейки — так и «карточность» вернётся, и наличие кликабельности станет очевидным. При этом получившиеся блочки всё равно будут почти в два раза компактнее оригинальных:

Разумеется, это не всё, что можно сделать по поводу компактности. Можно заменить моноширинный шрифт на обычный и не тратить лишнее место на большие пробелы и увеличенный из‑за них интерлиньяж. Можно покопаться в логике интерфейса и понять, как в принципе реорганизовать список и выделить в нём более важные и второстепенные советы. Но это уже другая история :‑)

P. S. Использовать плашки и линейки с умом я учу на курсе «Типографика и вёрстка». Записывайтесь, пока есть места.

Типографика в вебеДоработка вёрстки
Отправить
Поделиться
Запинить

Комментариев пока нет

Рекомендуем другие советы