Вход на сайт

Просмотр новости

Найдите то, что Вас интересует

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

Дата публикации: 25-08-2026 21:00:00

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

Основное содержимое страницы с новостью.

Дмитрий!

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

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

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

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

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

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

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

Схожие новости

#Наименование новостиТональностьИнформативностьДата публикации
1Как разместить на слайде мобильные скриншоты с подписями?16.8814-09-2026
2Как составлять пользовательские сценарии06.5724-08-2026
3Насколько важно наличие большого объема контента на странице?013.713-05-2026
4Эсмперическое правило по объёму текста0511-07-2026
5Минцифры считает нецелесообразным ограничивать число sim-карт на одного человека0008-02-2022
6Google | GSC | Core Web Vitals0506-07-2026
7Сколько ссылок можно продать с одного вебайта донора в sape.ru, чтобы не попасть в бан поисковой системы014.0606-05-2026
8Что происходит у меня в вэбмастере?08.9824-05-2026
9Как смартфоны влияют на здоровье, сколько можно "сидеть в телефоне" ...0530-06-2026
10Смартфоны могут стать шире: производители присматриваются к формату 16:10015.5125-07-2026

Классификация: Мнения. Схожих патентов: 0. Схожих новостей: 10. Тональность: 0. Информативность: 10.42. Источник: bureau.ru.