Общие правила
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 |
Скругление, px | 4 |
Тень | #000, прозрачность: 10% |
Смещение, px | По оси Y: 1 |
Размытие, px | 3 |
Отступы до кнопки
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% |
Скругление, px | 14 |
Тень 01 | #000, прозрачность: 5%, смещение по оси Y: 8px, размытие: 16px |
Тень 02 | #000, прозрачность: 6%, смещение по оси Y: 1px, размытие: 1px |