Интерфейсные блоки

Общие правила
QIWI.com
IOS
Android
АСО

Общие правила

Интерфейсный блок — это группа элементов интерфейса, связанных между собой по смыслу.

Qiwi.com

Интерфейсные блоки располагаются на прямоугольных или квадратных плашках с радиусом скругления 10px для всех углов. Из блоков формируется контентная часть интерфейсных страниц.

Минимальная высота интерфейсного блока— 64px.

Блоки бывают статичными и активными. Оба вида блоков размещаются на сером фоне #F5F5F5.

Статичные блоки

Статичные блоки служат подложкой. Их задача — привлекать внимание к контенту и интерактивным элементам.

Активные блоки

Активные блоки — это интерактивные элементы, реагирующие на наведение и клик.

Внутренние отступы

Для интерфейсных блоков предусмотрено два типа внутренних отступов: обычные и увеличенные. Не рекомендуем размещать блоки с обычными и увеличенными отступами на одной странице.

Обычные отступы чаще всего применяются для компактного размещения контента в интерфейсных блоках шириной до 580px. Увеличенные оступы могут использоваться на блоках шириной более 580px.

Цвет блока#FFF
Цвет фона#F5F5F5
Тень#000, 12%, Y: 1px,
размытие: 2px

 

Отступы между блоками

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

Наверх

 

IOS

Интерфейсные блоки на IOS можно располагать во всю ширину экрана. Также возможен вариант с карточками.

По ширине экрана

Внутренние отступы  — 16px. Внешние отступы: — 8px.

Карточки

Внешние отступы карточки: справа/слева/сверху — 16px, снизу — 8px. Внутренние отступы  — 16px.

Цвет блока#FFF
Цвет фона#F5F5F5
Скругление, px4
Тень#000, прозрачность: 10%
Смещение, pxПо оси Y: 1
Размытие, px3

Отступы до кнопки

Наверх

Android

Блоки рекомендуется располагать во всю ширину экрана, либо карточками.

По ширине экрана

Внутренние отступы: справа/слева/сверху — 16dp, снизу — 8dp. Внешние отступы сверху/снизу — 8dp.

Карточки

Внешние отступы карточки всегда равны 8dp. Внутренние отступы: справа/слева/сверху — 16dp, снизу — 8dp.

Цвет блока#FFF
rgb (255, 255, 255)
Цвет фона#F5F5F5
rgb (245, 245, 245)

Отступы до кнопки

Наверх

Терминал 

На терминале интерфейсные блоки представлены карточками.

 

Маленькие карточки

Большие карточки

Цвет блока#FFF
Цвет фона#D6D6D6
Градиент фона 01Радиальный из центра #FFF к краям #DDDDDD, прозрачность: 75%
Градиент фона 02Линейный 90 градусов сверху #FFF вниз #E8E8E8, прозрачность: 80%
Обводка#000, прозрачность: 9%
Скругление, px14
Тень 01#000, прозрачность: 5%, смещение по оси Y: 8px, размытие: 16px
Тень 02#000, прозрачность: 6%, смещение по оси Y: 1px, размытие: 1px

 

Наверх