Сетки для бенто (Apple Breeze):Сетки для бенто

Стиль Bento Grids - это стиль визуального дизайна, характеризующийся минимализмом, ясностью и высокой степенью организации, который обычно встречается в современных веб-интерфейсах и интерфейсах мобильных приложений. Он достигается за счет разделения контента на аккуратные модули с сеткой, каждый из которых содержит иконки, заголовки и краткие описания, создавая макет, напоминающий коробку бенто с секциями для еды. В этом стиле особое внимание уделяется белому пространству, выравниванию и последовательности, используются мягкие фоновые цвета, контрастирующие с резкими элементами переднего плана, что создает чистое и комфортное впечатление при чтении. Например, на странице личного блога или портфолио сетки Bento Grids будут отображать профили проектов, краткие содержания статей или метки навыков на карточках разного размера, создавая общий визуальный эффект порядка и красоты.

Ссылка на слова реплики

Дизайн современной, минималистичной, высококлассной страницы запуска продукта/услуги с макетом в стиле сетки Bento Grid, который компактно представляет всю ключевую информацию на одном экране.

Основные элементы контента: [заполните здесь основные элементы контента

Требования к дизайну:
1. макет Bento Grid: создайте сетку из карточек разного размера, каждая из которых содержит определенную категорию информации, с компактным, но не переполненным макетом.
2. Дизайн карточек: все карточки должны иметь четкие закругленные углы (радиус границы 20px), белый/светло-серый фон, тонкий эффект тени и легкий эффект всплытия при наведении курсора.
3. цветовая схема: минималистская цветовая схема, в основном белый/светло-серый фон с градиентными цветами в качестве акцентных цветов (можно указать конкретные цвета, например, от светло-фиолетового #C084FC до темно-фиолетового #7E22CE).
4. Типографская иерархия:
   - Крупные жирные цифры/заголовки: используйте градиентный цвет, чтобы подчеркнуть ключевые точки данных и основные заголовки.
   - Средне-крупные и мелкие заголовки: для заголовков карточек, четко обозначающих категории содержания
   - Мелкий текст: используйте серый цвет для выделения вспомогательного описательного текста.
5. организация содержания:
   - Верхний ряд: основные объявления, характеристики продукта, показатели эффективности или ключевые моменты продаж
   - Средний ряд: технические характеристики продукта, технические данные, функциональные особенности
   - Нижняя строка: руководство пользователя и заключение/призыв к действию.
6. визуальные элементы:
   - Используйте простые иконки для представления характеристик.
   - Прогресс-бары или диаграммы для отображения сравнительных данных.
   - Сетки и макеты карточек создают визуальный ритм
   - Вкладки для отображения информации по категориям в виде небольших капсул.
7. отзывчивый дизайн: страницы должны адаптироваться к различным размерам экрана и сохранять хорошую читаемость на мобильных устройствах

Эталонный стиль дизайна:
- Общий стиль дизайна похож на страницу спецификации продукта на сайте Apple.
- Используйте много белого пространства и простые визуальные элементы.
- Подчеркните цифры и ключевые характеристики и сократите объемный текст.
- Используйте градиентные цвета, чтобы выделить важные данные.
- Соответствующее расстояние между карточками для создания четкого визуального разделения

Тематические исследования

Figma доработала проект дизайна

Официальные руководства по использованию:Figma Learning Path - базовое введение, китайский учебник - китайское сообщество Figma

Плагин для браузера Китайский плагин установка и загрузка:FigmaCN - Интернет-магазин Chrome

Клиент (рекомендуется):‍ ‍ Figma китайская + самоучитель по установке - Летающая книга Облако документов

Сначала нам нужно найти основной плагин Figma html.to.design, который мы будем использовать в этот раз. Просто найдите его, нажав на иконку, обведенную строкой Tab внизу любого файла Figma.

Затем мы вводим URL-адрес страницы, которую хотим импортировать, если у вас ее нет, вы можете развернуть ее с помощью Youware, и нажимаем кнопку Import.

Прежде всего, мы хотим придать заголовку название, которое также добавляется к карточке, на этот раз мы решили найти ширину заголовка, чем следующие все карточки складываются в ширину карточки шире, поэтому прежде всего их ширина унифицирована до 1472px.

После того как мы захотим скопировать стиль следующей серой карточки без ее содержимого, просто выберите случайную серую карточку ниже, а затем щелкните правой кнопкой мыши - Копировать и Вставить как - Копировать свойства на строке, Вставить то же самое, что выбрать на карточке Заголовок выберите Вставить свойства, вы обнаружите, что в заголовке также есть карточка.

Далее мы решаем проблему, связанную с тем, что карточки в Model Scale не занимают все пространство. Выбрав карточку Model Scale и удерживая кнопку Option, мы обнаруживаем, что ширина бимодальной тренировочной карточки равна 398, и тогда их нужно расположить на расстоянии 24px друг от друга.

Итак, ширина карты для масштаба модели должна быть 350+398-24, вы можете написать математическую формулу прямо в поле ввода ширины, Figma сделает расчеты за вас, разве это не хорошо?

Наконец мы делаем последний шаг перед экспортом, вся карта вокруг полей некоторые проблемы, слева и справа очень широкие вверх и вниз очень узкие, мы хотим, чтобы они были одинаковыми, на этот раз нам просто нужно выбрать слой html-Body, а затем красная коробка часть интервалов изменяются на равномерные 32 на нем.

Если вы хотите добавить градиентную рамку к изображению, как я сделал на витрине выше, вы можете использовать postspark (https://postspark.app/screenshot) такие инструменты.