{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом верстка",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/layout\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/layout\/json\/",
    "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384",
    "author": {
        "name": "Михаил Озорнин",
        "url": "https:\/\/mikeozornin.ru\/blog\/",
        "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384"
    },
    "items": [
        {
            "id": "190",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/telegram-typography\/",
            "title": "Верстка под телеграм",
            "content_html": "<p class=\"lead\">Есть два вида пишущих в телеграме<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/telegram-typography-1@2x.png\" width=\"659\" height=\"582\" alt=\"\" \/>\n<\/div>\n<p>Буквально за час в одном из чатов проскочило два сообщения из двух разных крайностей. В одной — собеседник пишет каждое словосочетание отдельным сообщением. Это даже хрен перешлешь кому-то. В другой — фигачит без всяких знаков и разделителей. Только пересылать и удобно.<\/p>\n<p>Как должно быть:<\/p>\n<ul>\n<li>Понятное обращение и краткая суть<\/li>\n<li>Текст, разбитый на абзацы<\/li>\n<li>Ссылки отдельно с новых строк (чтобы они не рвали сообщение на части)<\/li>\n<\/ul>\n<p>Например, можно как-то так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/telegram-typography-2@2x.png\" width=\"340.5\" height=\"582\" alt=\"\" \/>\n<\/div>\n<p>Если человек не может нормально отформатировать сообщение в мессенджере, то может быть два варианта:<\/p>\n<ul>\n<li>Ему не важно ваше удобство<\/li>\n<li>У него беспорядок в голове<\/li>\n<li><s>Он очень торопится<\/s> Да даже когда торопится так не сделать.<\/li>\n<\/ul>\n",
            "date_published": "2022-02-03T01:47:49+03:00",
            "date_modified": "2022-02-03T11:03:27+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/cover-telegram-typography.png",
            "_date_published_rfc2822": "Thu, 03 Feb 2022 01:47:49 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "190",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cover-telegram-typography.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/telegram-typography-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/telegram-typography-2@2x.png"
                ]
            }
        },
        {
            "id": "177",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/email-skeleton\/",
            "title": "Шаблон верстки эл. письма",
            "content_html": "<p class=\"lead\">Выкладываю несколько шаблонов верстки эл. писем, которые помогут сверстать аккуратное, красивое, адаптивное эл. письмо без знаний html и css<\/p>\n<p><aside class=\"aside-margin-right\">Просто посмотрите на поддержку разных штук в почтовых клиентах <a href=\"https:\/\/www.caniemail.com\/\">caniemail.com<\/a><\/aside><\/p>\n<p>Верстка эл. писем — сочетание тайных знаний вуду и умений из палеолита. Поддержка стандартов почтовыми клиентами ужасная, никаких современных конструкций нет, а те, что есть — работают через пень-колоду. Стили надо инлайнить, сверстать письма в адаптивные две колонки — проще убиться.<\/p>\n<p>Чтобы хоть как-то скрыться от этого мрака, сделаны фреймворки для верстки именно писем. Они инкапсулируют в себе многие правила и умеют сделать из нормальной чистой верстки некрасивую, но такую, какую понимают почтовые сервисы и программ.<\/p>\n<p>Слева — человеческая, справа что будет для почтовых программ:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/email-skeleton-mjml@2x.png\" width=\"475.5\" height=\"276\" alt=\"\" \/>\n<\/div>\n<p>Фреймворков по сути два:<\/p>\n<ul>\n<li><a href=\"https:\/\/get.foundation\/emails.html\">Foundation for email<\/a><\/li>\n<li><a href=\"https:\/\/mjml.io\/\">MJML<\/a><\/li>\n<\/ul>\n<p>Мне как-то надо было сверстать пару писем. Я глянул MJML и разобрался буквально за пару минут. MJML простой, понятный, мой шаблон доделывали люди, совсем не знакомые с HTML и справлялись. Foundation скорее всего тоже норм, но я не пробовал.<\/p>\n<p>Выкладываю скопившиеся у меня шаблоны писем, вдруг кому пригодится:<\/p>\n<p class=\"loud\"><a href=\"https:\/\/github.com\/mikeozornin\/email-skeleton\">https:\/\/github.com\/mikeozornin\/email-skeleton<\/a><\/p>\n<h2>Шаблон 1: простое аккуратное письмо<\/h2>\n<p><a href=\"https:\/\/github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/1%20simple.mjml\">github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/1 simple.mjml<\/a><\/p>\n<p>Превью на десктопе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-simple-desktop@2x.png\" width=\"650\" height=\"884\" alt=\"\" \/>\n<\/div>\n<p>Превью на мобильном:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-simple-mobile@2x.png\" width=\"320\" height=\"1284\" alt=\"\" \/>\n<\/div>\n<h2>Шаблон 2: более сложная верстка<\/h2>\n<p><a href=\"https:\/\/github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/2%20release%20notes.mjml\">github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/2 release notes.mjml<\/a><\/p>\n<p>Превью на десктопе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-release-notes-desktop@2x.png\" width=\"650\" height=\"1367\" alt=\"\" \/>\n<\/div>\n<p>Превью на мобильном:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-release-notes-mobile@2x.png\" width=\"320\" height=\"2129\" alt=\"\" \/>\n<\/div>\n<h2>Шаблон 2: более сложная верстка<\/h2>\n<p><a href=\"https:\/\/github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/3%20tasks.mjml\">github.com\/mikeozornin\/email-skeleton\/blob\/master\/src\/3 tasks.mjml<\/a><br \/>\nЭто письмо сверстал один из наших техрайтеров, разобрался и сделал. С меня были лишь небольшие улучшения.<\/p>\n<p>Превью на десктопе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-tasks-desktop@2x.png\" width=\"650\" height=\"709\" alt=\"\" \/>\n<\/div>\n<p>Превью на мобильном:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-tasks-mobile@2x.png\" width=\"320\" height=\"973\" alt=\"\" \/>\n<\/div>\n<h2>Как пользоваться<\/h2>\n<p>Ещё раз где скачать: <a href=\"https:\/\/github.com\/mikeozornin\/email-skeleton\">https:\/\/github.com\/mikeozornin\/email-skeleton<\/a><\/p>\n<p>Сначала отредактируйте шаблон письма, используя онлайн-редактор (<a href=\"https:\/\/mjml.io\/try-it-live\">mjml.io\/try-it-live<\/a>) или программу на десктопе (рекомендую этот способ). Если вам удобнее VS Code или Sublime Text, то есть плагины и для них.<\/p>\n<p>Сконвертируйте в html с помощью инструментов MJML. Это можно сделать и на сайте, и в клиенте MJML. Если нужно встроиться в CI, то у MJML есть рантайм на ноде.<\/p>\n<p>Готовый html разметьте своими данными и прикрутите к скрипту.<\/p>\n<p>Поддержки шаблонов нет, но если совсем никак, пишите: <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a><\/p>\n",
            "date_published": "2021-09-17T00:07:54+03:00",
            "date_modified": "2021-09-17T10:44:54+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/email-skeleton@2x.png",
            "_date_published_rfc2822": "Fri, 17 Sep 2021 00:07:54 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "177",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/email-skeleton@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/email-skeleton-mjml@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-simple-desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-simple-mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-release-notes-desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-release-notes-mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-tasks-desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-tasks-mobile@2x.png"
                ]
            }
        },
        {
            "id": "131",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-align-data-in-table\/",
            "title": "Как выравнивать данные в таблице",
            "content_html": "<p class=\"lead\">Основные правила выравнивания в таблицах, чтобы вы могли не читать Мильчина.<\/p>\n<p>Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 128 страниц. Не каждый помнит её наизусть или готов прочитать, чтобы сделать одну таблицу.<\/p>\n<p>Я собрал основные правила выравнивания в таблицах. Они могут отличаться от мнения Мильчина, это мой опыт и интерпретация<\/p>\n<h2>1 Всё выровнять по левому краю колонок<\/h2>\n<p>Сначала нужно выровнять всю таблицу по левому краю. Это такой вариант по умолчанию. Получится что-то вот такое:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-1@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>После этого нужно изменить выравнивание в колонках, в которых содержатся нетекстовые данные.<\/p>\n<h2>2 Числа выровнять по правому краю<\/h2>\n<p>Если в таблице есть числа, то скорее всего их будут сравнивать. В этом случае сравнивать будет удобнее, если числа выровнять поразрядно (каждый разряд ровно друг под другом). Чтобы сделать такое, числа нужно выровнять по правому краю.<\/p>\n<p>В идеале нужно сами числа выровнять между собой по правому краю, а блок чисел оставить выровненным по левому с заголовком колонки. Как-то так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-2@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Из-за сокращенного заголовка колонки «Кол-во» идея может быть не до конца понятна, вот:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-3@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Если технически выровнять так сложно, то есть простое и надежное решение — выровнять текст по правому краю целиком:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-4@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p><b>Примечания, что считать числом.<\/b> Такое выравнивание нужно применить только к числовым данным одной величины, именно их имеет смысл сравнивать друг с другом. Если числа в колонке обозначают разные величины, то им нужно оставить выравнивание по левому краю. Если в колонке показываются инвентарные номера, индексы, номера паспортов, IP-адреса, то им нужно оставить выравнивание по левому краю, — эти значения вряд ли необходимо смотреть поразрядно.<\/p>\n<h2>3 Диапазоны выровнять по разделителю<\/h2>\n<p>Дальше нужно найти колонки с диапазонами и похожими конструкциями, когда в ячейке пара чисел написана через какой-нибудь разделитель: 1…15, 1—15, 1 \/ 15, 1 из 15, и т. д.<\/p>\n<p>Такие колонки нужно выравнивать по разделителю:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-5@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Диапазоны нанизываются на разделитель как на ось:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-6@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<h2>4 Значки выровнять по центру<\/h2>\n<p>Если есть колонки, в которых отображаются отдельные символы, пиктограммы, эмодзи, то их лучше выровнять по центру. Часто это колонки с плюсами и минусами в качестве отметки о наличии какой-то функции.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-7-2@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Если в такую колонку иногда пролезает текст, например, <i>нет данных<\/i>, то текст выравнивается по правилу колонки, а не по левому краю как текст. И наоборот, если в текстовой или числовой ячейке стоит прочерк, то его нужно выравнивать не как значок, а как как другие значения в колонке:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-7-3@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Если делать наоборот: текст в колонке значков выравнивать по левому краю, а значки в колонке с текстом по центру, то будет некрасиво:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-8-2@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p class=\"loud\">На этом с выравниванием всё<\/p>\n<p><aside class=\"aside-margin-right\">Что за моноширинные цифры смотри в посте <br\/><a href=\"https:\/\/mikeozornin.ru\/blog\/all\/opentype-features\/\">Что такое, эти опентайп-фичи<\/span><\/a><\/aside><\/p>\n<h2>5 Включить моноширинные (табличные) цифры<\/h2>\n<p>Внимательные люди могли заметить, что числа, выровненные по правому краю, не выровнялись поразрядно. Вот та таблица:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-2@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Числа 1113 и 3800 не совпадают разрядами. Это произошло из-за того, что в шрифте Интер, которым набрана таблица по умолчанию стоят пропорциональные цифры. Моноширинные цифры в шрифте есть, но их нужно включать отдельно (opentype-фичей).<\/p>\n<p>Нужно проверить, что в колонках, в которых нужно поразрядное выравнивание, показываются именно моноширинные цифры. Для инвентарных номеров, индексов можно оставить и пропорциональные. Если включить моноширинные цифры, то с поразрядным выравниванием все станет хорошо:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-8@2x.png\" width=\"600\" height=\"136\" alt=\"\" \/>\n<\/div>\n<p>Ниже показана разница моноширинных (сверху) и пропорциональных цифр. Обратите внимание, что в во второй таблице 1113 уместились в три разряда числа 3800. Сравнивать числа, набранные пропорциональными цифрами будет сложнее.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-9@2x.png\" width=\"600\" height=\"296\" alt=\"\" \/>\n<\/div>\n<h2>Шпаргалка<\/h2>\n<p>Чтобы каждый раз не перечитывать пост, вот шпаргалка:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-10@2x.png\" width=\"600\" height=\"200\" alt=\"\" \/>\n<\/div>\n<h2>Что почитать<\/h2>\n<ul>\n<li>Подборка советов Ильи Бирмана про таблицы: <a href=\"https:\/\/bureau.ru\/soviet\/selected\/dima-shishkin\/birman-pilit-tablitsy\/\">bureau.ru\/soviet\/selected\/dima-shishkin\/birman-pilit-tablitsy\/<\/a><\/li>\n<li><i>Глава 13. Таблицы и выводы<\/i>, «Справочник издателя и автора», Мильчин и Чельцова<\/li>\n<\/ul>\n",
            "date_published": "2019-09-16T01:32:37+03:00",
            "date_modified": "2022-04-02T16:30:57+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-cover@2x.png",
            "_date_published_rfc2822": "Mon, 16 Sep 2019 01:32:37 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "131",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-cover@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-comment-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-7-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-7-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-8-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-9@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-align-data-in-table-10@2x.png"
                ]
            }
        },
        {
            "id": "83",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-screenshots\/",
            "title": "Как подписывать скриншоты",
            "content_html": "<p class=\"lead\">У нас в компании есть команда технических писателей, которые пишут руководства по продуктам. В руководствах техписатели вставляют скриншоты экранов и рассказывают как и что работает. Некоторое время назад я помог им разработать рекомендации по оформлению подписей к таким скриншотам. Расскажу на что обращать внимание. Вряд ли тут будет что-то новое дизайнерам, а вот остальным, надеюсь, поможет.<\/p>\n<p>Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png\" width=\"1491\" height=\"358\" alt=\"\" \/>\n<\/div>\n<p>То, что ко мне попал один из самых первых черновиков — большая удача, из черновика получились хорошие примеры. Их не пришлось придумывать из головы, они вышли иллюстративные и при этом реальные.<\/p>\n<h2>Общие правила<\/h2>\n<p>Про оформление подписей есть бюрошный совет: <a href=\"https:\/\/bureau.ru\/bb\/soviet\/20140728\/\">bureau.ru\/bb\/soviet\/20140728.<\/a> В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть <a href=\"https:\/\/bureau.ru\/books\/typography\/71\">разворот 71.<\/a><\/p>\n<p>Я не буду повторяться и писать про толщину линий и их цвет, про расстояния до обозначаемого объекта, в двух ссылках выше это описано.<\/p>\n<h2>Прием 1: УВЛ (убрать все лишнее)<\/h2>\n<p>Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png\" width=\"1491\" height=\"358\" alt=\"\" \/>\n<\/div>\n<p>Слово <i>button<\/i> встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому <i>button<\/i> безболезненно убирается:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-2.png\" width=\"1449\" height=\"329\" alt=\"\" \/>\n<\/div>\n<h2>Прием 2: вынести общее за скобки<\/h2>\n<p>Иногда от повторений нельзя избавиться совсем.  В примере ниже повторяется не просто <i>button,<\/i> а <i>filter button.<\/i><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-3.png\" width=\"366\" height=\"168\" alt=\"\" \/>\n<\/div>\n<p>Убрать <i>button<\/i> можно, а вот от <i>filter<\/i> избавиться нельзя. Если убрать слово <i>filter<\/i>, то потеряется важный смысл. При этом <i>filter button<\/i> относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.<\/p>\n<p>Например, так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-4.png\" width=\"470\" height=\"158\" alt=\"\" \/>\n<\/div>\n<p>Фактически мы вынесли <i>filter button<\/i> за скобки, как в математическом выражении.<\/p>\n<h2>Прием 3: соблюдать теории близости<\/h2>\n<p><aside class=\"aside-margin-right\"><span class=\"related-excerpt\">Теория близости: <a href=\"https:\/\/www.artlebedev.ru\/kovodstvo\/sections\/136\/\">artlebedev.ru\/kovodstvo\/sections\/136\/<\/a><\/span><\/aside><\/p>\n<p>Нужно следить, чтобы при расположении подписей не нарушалась теория близости. Здесь надпись близка к чужой палочке, возникает путаница:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/5-1@2x.png\" width=\"639\" height=\"213\" alt=\"\" \/>\n<\/div>\n<h2>Прием 4: использовать естественное соответствие<\/h2>\n<p>Известный инженерный психолог Дональд Норман в своей книге «Дизайн привычных вещей» сформулировал принцип «естественного соответствия». Проще всего объяснить картинкой. Слева просто так, справа — естественное соответствие:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/norman@2x.png\" width=\"1000\" height=\"294\" alt=\"\" \/>\n<\/div>\n<p>На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-1.png\" width=\"602\" height=\"192\" alt=\"\" \/>\n<\/div>\n<p>По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-2.png\" width=\"471\" height=\"145\" alt=\"\" \/>\n<\/div>\n<h2>Прием 5: выравнивать текст осмысленно<\/h2>\n<p>Подпись к элементу можно поставить по-разному: слева, справа, ближе к центру. По-разному можно выровнять текст: по левому краю, по центру или по правому краю. Если расположение и выравнивание выбирать не случайно, то оно помогает лучше соотнести подпись с элементом, к которому она написана.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/6-1.png\" width=\"625\" height=\"170\" alt=\"\" \/>\n<\/div>\n<p>Подпись периода расположение по центру и похожа на форме на отображаемый период: невысокая и широкая. Иконка <i>Expand timeline<\/i> расположена в правой части поля, поэтому выноску располагается с правой стороны текста. Дополнительно можно было бы использовать выравнивание текста <i>Expand timeline<\/i> по правому краю, а <i>Apply filter<\/i> по центру, но это не обязательно в данном случае.<\/p>\n<p>За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: <a href=\"https:\/\/www.artlebedev.ru\/metro\/line-map\/\">artlebedev.ru\/metro\/line-map.<\/a><\/p>\n<h2>Прием 6: убрать «почти, но не совсем»<\/h2>\n<p><aside class=\"aside-margin-right\"><span class=\"related-excerpt\">Конечно это упрощение, но сейчас так надо<\/span><\/aside><\/p>\n<p>Существует общее правило в дизайне: блоки, надписи и другие элементы нужно или выровнять совсем, или совсем не ровнять. Не должно быть элементов, неровных на чуть-чуть, не должно быть никаких «почти, но не совсем».<\/p>\n<p>Посмотрим на картинку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-1.png\" width=\"1500\" height=\"139\" alt=\"\" \/>\n<\/div>\n<p>Здесь много <i>почти, но не совсем<\/i>, всего 6 видов разного выравнивания:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-2.png\" width=\"1525\" height=\"160\" alt=\"\" \/>\n<\/div>\n<p>Подписи будут аккуратней, если их выровнять друг относительно друга так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-3.png\" width=\"1551\" height=\"121\" alt=\"\" \/>\n<\/div>\n<p>Ещё примеры «почти, но не совсем» <a href=\"http:\/\/ilyabirman.ru\/meanwhile\/all\/almost\/\">в посте Ильи Бирмана<\/a>.<\/p>\n<h2>Прием 7: следить за типографикой<\/h2>\n<p>Подписи — неблагодарный для верстки формат: колонка узкая, а тут ещё могут появиться эти длинные русские слова. В узких колонках особенно важно следить за интерлиньяжем (межстрочным интервалом), лучше уменьшить его относительно базового. <i>Filter<\/i> и <i>panel<\/i> расположены так далеко друг относительно друга, что может показаться, что это две подписи. Если уменьшить интерлиньяж будет лучше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/4-1.png\" width=\"1151\" height=\"392\" alt=\"\" \/>\n<\/div>\n<p>Ещё для подписей обычно применяют кегль, уменьшенный на пару пунктов относительно основного текста.<\/p>\n<p>Про интерлиньяж:<br \/>\n<a href=\"http:\/\/bureau.ru\/bb\/soviet\/20140310\/\">bureau.ru\/bb\/soviet\/20140310\/ <\/a><br \/>\n<a href=\"http:\/\/bureau.ru\/bb\/soviet\/20140224\/\">bureau.ru\/bb\/soviet\/20140310\/ <\/a><\/p>\n<h2>Прием 8: редактировать текст<\/h2>\n<p>Из-за узкой колонки в подписях может быть много переносов на другие строки. Лучше, если они будут в логически обоснованных местах.<\/p>\n<h2>Прием 9: рассказывать по частям<\/h2>\n<p>Иногда бывает так: уже убрал все лишнее, вынес за скобки, сократил и отредактировал текст, а все равно ничего не лезет. Как ни стараешься, ничего не помогает: подписей слишком много, они мешают друг другу, получается каша.<\/p>\n<p>В этом случае можно рассказывать по частям. Например, сначала показать общие части, потом подписать отдельные элементы этих частей:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/7-1.png\" width=\"1609\" height=\"703\" alt=\"\" \/>\n<\/div>\n<div class=\"post-summary\"><div class=\"post-summary__header\"><p>Приемы<\/p>\n<\/div><div class=\"post-summary__text\"><ol start=\"1\">\n<li>Убрать все лишнее<\/li>\n<li>Вынести общее за скобки<\/li>\n<li>Соблюдать теории близости<\/li>\n<li>Использовать естественное соответствие<\/li>\n<li>Выравнивать текст осмысленно<\/li>\n<li>Убрать «почти, но не совсем»<\/li>\n<li>Следить за типографикой<\/li>\n<li>Редактировать текст<\/li>\n<li>Рассказывать по частям<\/li>\n<\/ol>\n<\/div><\/div><p><\/p>\n<p>Про подписи есть ещё два поста Сергея Стеблины, он шарит сильно лучше меня, поэтому если дочитали досюда, то прочитайте и его, вам уже нечего терять:<\/p>\n<ul>\n<li><a href=\"http:\/\/steblina.com\/neznal\/?go=all\/razmery-lineyki\/\">Размеры и линейки<\/a><\/li>\n<li><a href=\"http:\/\/steblina.com\/neznal\/?go=all\/korotko-o-vynoskah-i-podpisyah\/\">Коротко о выносках и подписях<\/a> — на самом деле не коротко<\/li>\n<\/ul>\n",
            "date_published": "2018-02-12T12:19:47+03:00",
            "date_modified": "2018-12-16T00:41:04+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png",
            "_date_published_rfc2822": "Mon, 12 Feb 2018 12:19:47 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "83",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-3.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-4.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/5-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/norman@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/6-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-3.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/4-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/7-1.png"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}