{
    "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\/guidelines\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/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": "164",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/what-is-a-good-handoff\/",
            "title": "Как выглядит хороший макет",
            "content_html": "<p class=\"lead\">В продолжении тредов Романа Шамина про дружбу дизайнеров и фронтендеров решил вытащить в блог одну из статей наших гайдов — про то, что такое «хорошо переданный макет». Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<p>Треды Романа Шамина:<br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-design-want-from-frontend\">teletype.in\/@romanshamin\/what-design-want-from-frontend<\/a><br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-frontend-want-from-design\">teletype.in\/@romanshamin\/what-frontend-want-from-design<\/a><\/p>\n<p>Дальше привожу статью из наших командных договоренностей.<\/p>\n<h2>О чем эта статья<\/h2>\n<p>Если макет сделан не очень удобно для разработчиков, это плохо: разработчику будет сложно понять как сделать правильно, он потратит больше времени и где-то ошибется. Дизайнеру придется писать больше замечаний, люди будут менее довольны друг другом.<\/p>\n<p>Эта статья описывает как хорошо передать макет в разработку.<\/p>\n<h2>Хранение и состав макетов<\/h2>\n<h3>Список самих экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nВсем членам команды продукта понятно где и как искать макеты:<\/p>\n<ul>\n<li>где найти макеты по нужной фиче,<\/li>\n<li>где найти старый макет,<\/li>\n<li>как понять актуальная версия или нет.<\/li>\n<\/ul>\n<p>Договоренности команды о процессе выкладывания макетов записаны.<\/p>\n<p>При обновлении макетов уведомляется проектная команда (аналитик, фронтенд, тех. писатель, QA).<\/p>\n<h3>Состав экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля фичи понятен набор экранов, на которые вносятся изменения: какие экраны новые, какие экраны дорабатываются.<\/p>\n<p>Если экранов несколько, то понятны переходы между экранами.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nДоступна актуальная схема экранов продукта (карта сайта).<\/p>\n<p>Если в фиче несколько экранов, то для них сделан кликабельный прототип с переходами между экранами.<\/p>\n<h2>Экраны<\/h2>\n<h3>Структура экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятна структура экрана: из каких блоков состоит экран, какие между ними соотношения по размерам и отступам.<\/p>\n<p>Как ведут себя блоки экрана при прокрутке и ресайзе.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nУ продукта есть понятная сетка, описаны типовые лейауты страниц: список, дашборд, форма редактирования, страница просмотра и т. д.<\/p>\n<h3>Элементы на странице<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПо каждому визуальному элементу на макете понятно, что это такое: текст, компонент, иконка, паттерн.<\/p>\n<p>По каждому компоненту понятно, что это за компонент, какой его режим используется, понятно, если в коде нет этого компонента или функции существующего компонента.<\/p>\n<p>Понятны размеры элемента, его взаимоотношения с соседними элементами.<\/p>\n<p>Понятно как элемент тянется, что будет, если в элементе будет меньше или больше контента.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВсе элементы описаны, разработчик знает где искать документацию на каждый используемый тип элемента: текст, компонент, иконку, паттерн.<\/p>\n<p>Размеры элементов и отступы между элементами логичны, ожидаемы и понятны.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступы<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png\" width=\"595\" height=\"330\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступ<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png\" width=\"600\" height=\"96\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны, блоки расположены предсказуемо по сетке<\/div>\n<\/div>\n<h3>Кегли<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля каждого текста на странице понятен стиль или mixin, который нужно взять, эти стили и mixin’ы однозначно определяются из самого макета.<\/p>\n<p>Эти mixin’ы не противоречат компонентам, паттернам или аналогичным элементам других экранов продуктов.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть актуальная таблица миксинов, описаны общие принципы их использования.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Кегль не замапплен, неясно какой типографический миксин взять<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Кегль и цвет замапплен, понятно что указать<\/div>\n<\/div>\n<h3>Цвета<\/h3>\n<p>Речь идет про цвет любого интерфейсного элемента: текста, иконки, рамки, фона, блока, линии.<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nНе используются цвета не из палитры проекта.<\/p>\n<p>Переменные цветов подписаны, разработчику легко понять, какую переменную использовать (копировать hex-код не норм).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nСоставлена таблица цветовых токенов: default text, disabled text, error icon для всех используемых в проекте тем.<\/p>\n<p>В макетах прилинкованы цвета из этой таблицы (не error-500, а validation-text-color).<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Цвета не замаплены, неясно какой цвет выбирать<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Цвета замаплены, понятно что указать<\/div>\n<\/div>\n<h3>Отступы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятны сами отступы между всеми блоками на странице и их внутренняя логика.<\/p>\n<p>Отступы на макете не противоречат компонентам (например, в компоненте «кнопка» отступы 6 16, а на макете 6 12).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nОписана интерфейсная микросетка и описание модулей.<\/p>\n<p>Логика отступов описана, есть типовые отступы и их завязка на сетку.<\/p>\n<h3>Пиктограммы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРазработчик знает, как вообще подключаются пиктограммы в проект.<\/p>\n<p>Понятно, что это за конкретная пиктограмма, как ее подключить и вставить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть общий список пиктограмм, их коды, параметры вставки в код продукта и документацию.<\/p>\n<p><aside class=\"aside-margin-right\">Чтобы не мучиться со сборкой пакетов иконок, <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/icon-font\/\">почитайте как собирать их автоматически<\/a><\/aside><\/p>\n<p>Иконки версионируются, к продукту или в документацию можно подключить нужную версию пакета иконок.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png\" width=\"453\" height=\"310\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Иконка не замаплена, нужно искать её в наборе самостоятельно<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png\" width=\"453\" height=\"267\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Указано какая иконка и из какого набора. Примечание: mc — префикс одного из наших наборов иконок.<\/div>\n<\/div>\n<h2>Текст<\/h2>\n<p>См. также <i>Правильный процесс вычитки<\/i> (ссылки нет, статья не вытащена наружу).<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРыба в макете правильная с точки зрения состояний, смысла и точная с точки зрения чисел и значений.<\/p>\n<p>Нет никаких Значение-1, Значение-2, Значение-3 и Лорем ипсумов.<\/p>\n<p>Из текста понятно, о чем он: это важно, чтобы техписатели могли его понять и улучшить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nТекст в состоянии production-не стыдно, техписатели только полируют его.<\/p>\n<h2>Состояния<\/h2>\n<h3>Другие состояния<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как сделать все остальные состояния: переключенные вкладки, переключатели, чекбоксы и радиокнопки (если они влияют на компоновку интерфейса).<\/p>\n<p>Отрисованы или описаны (если этого достаточно) все варианты дропдаунов, селектов и других выпадаек.<\/p>\n<p>Кроме самих этих состояний описаны переходы между ними.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсли блоки меняются значительно, то лучше не пытаться описать отдельные выпадайки, а нарисовать блоки целиком, чтобы было меньше путаницы<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png\" width=\"750\" height=\"1220\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Хорошо: Нарисованы альтернативные состояний экрана<\/div>\n<\/div>\n<h3>Загрузка<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как загружаются элементы экрана, в какой последовательности, как отображается процесс загрузки.<\/p>\n<p>Как должен вести себя продукт, если загрузка медленная, элементов много, или загрузка не удалась.<\/p>\n<h3>Пустое состояние<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как выглядит пустое состояние всех блоков и элементов, когда в них нет данных.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nПустые состояния систематизированы, используются типовые решения.<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png\" width=\"398.5\" height=\"1000\" alt=\"\" \/>\n<\/div>\n<h3>Валидация<\/h3>\n<p>См. <a href=\"https:\/\/mosaic.ptsecurity.com\/components\/validation\/overview\">Валидация данных<\/a><\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, когда и как срабатывает валидация.<\/p>\n<p>Как и когда показывается.<\/p>\n<p>Все сообщения об ошибках проходят через дизайнера, для каждой из возможных ошибок дизайнер придумывает способ предотвращения ошибки или способ отображения, если её нельзя предотвратить<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВалидация соответствует общему гайдлайну.<\/p>\n<p>Валидация способствует не попаданию с ситуацию срабатывания валидации.<\/p>\n<h3>Много данных<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как работает экран, когда во всех потенциальных местах (текст, списки, таблицы) будет много данных.<\/p>\n<p>Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<h2>См. также<\/h2>\n<p>Гайд Контура: <a href=\"https:\/\/guides.kontur.ru\/principles\/layouts\/\">guides.kontur.ru\/principles\/layouts\/<\/a><br \/>\nЧек-лист <a href=\"https:\/\/twitter.com\/Prit4er1\">Prit4er1<\/a>: <a href=\"https:\/\/www.notion.so\/5c03c7554ff542da9c77a6f420935282\">notion.so\/5c03c7554ff542da9c77a6f420935282<\/a><\/p>\n",
            "date_published": "2021-05-11T10:19:02+03:00",
            "date_modified": "2024-01-07T14:57:25+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
            "_date_published_rfc2822": "Tue, 11 May 2021 10:19:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "164",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png"
                ]
            }
        },
        {
            "id": "92",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-write-datetime-in-ui\/",
            "title": "Как писать дату и время в интерфейсах",
            "content_html": "<p class=\"lead\">Это статья из наших внутренних дизайнерских гайдлайнов, поэтому тут может встретиться неожиданная категоричность.<\/p>\n<h2>Общие правила<\/h2>\n<p>В интерфейсе:<\/p>\n<ul>\n<li>год пишется только тогда, когда он отличается от текущего,<\/li>\n<li>месяцы лучше писать словами, а не цифрами,<\/li>\n<li>в случае сокращенного написания месяца <i>июнь<\/i> и <i>июль<\/i> лучше писать полностью.<\/li>\n<\/ul>\n<p>В бумажных отчетах:<\/p>\n<ul>\n<li>год допустимо указывать даже тогда, когда он совпадает с текущим.<\/li>\n<\/ul>\n<p>Лучше использовать те форматы, которые указаны ниже, если желаемого вами формата здесь нет, то это лишний повод подумать о том, нужен ли он.<\/p>\n<h2>1 Абсолютные даты<\/h2>\n<h3>1.1 Полный + время<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 ноября, 12:25<\/td>\n<td>November 1, 12:25<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2014, 12:25<\/td>\n<td>November 1, 2014, 12:25<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p><i>⚠ Перед использованием попробуйте понять, зачем нужно время, если дата может быть в прошлом году<\/i><\/p>\n<h3>1.2 Короткий + время<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 янв, 12:25<\/td>\n<td>Jan 1, 12:25<\/td>\n<\/tr>\n<tr>\n<td>1 дек 2015, 12:25<\/td>\n<td>Dec 1, 2015, 12:25<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>1.3 Полный без времени<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1­ ноября<\/td>\n<td>November 1<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2014<\/td>\n<td>November 1, 2014<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>1.4 Короткий без времени<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 янв<\/td>\n<td>Jan 1<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">2 ноя 2014<\/td>\n<td>Nov 2, 2014<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>2 Относительные даты<\/h2>\n<h3>2.1 Время в прошлом, длинно<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Что<\/b><\/td>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>< 1 мин<\/td>\n<td>1 секунду назад<\/td>\n<td>1 second ago<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\"><\/td>\n<td>5 секунд назад<\/td>\n<td>5 seconds ago<\/td>\n<\/tr>\n<tr>\n<td>< 59 мин<\/td>\n<td>1 минуту назад<\/td>\n<td>1 minute ago<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\"><\/td>\n<td>2 минуты назад<\/td>\n<td>2 minutes ago<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center\"><\/td>\n<td>5 минут назад<\/td>\n<td>5 minutes ago<\/td>\n<\/tr>\n<tr>\n<td>Сегодня<\/td>\n<td>16:25<\/td>\n<td>16:25<\/td>\n<\/tr>\n<tr>\n<td>Вчера<\/td>\n<td>Вчера, 13:25<\/td>\n<td>Yesterday, 13:25<\/td>\n<\/tr>\n<tr>\n<td>Позавчера и старше<\/td>\n<td>20 декабря, 13:25<\/td>\n<td>December 20, 13:25<\/td>\n<\/tr>\n<tr>\n<td>Позавчера и старше, если год не совпадает с текущим<\/td>\n<td>20 декабря 2017<\/td>\n<td>December 20, 2017<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>2.2 Время в прошлом, коротко<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Что<\/b><\/td>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>< 1 мин<\/td>\n<td>5 с назад<\/td>\n<td>5 s ago<\/td>\n<\/tr>\n<tr>\n<td>< 59 мин<\/td>\n<td>5 мин назад<\/td>\n<td>5 min ago<\/td>\n<\/tr>\n<tr>\n<td>Сегодня<\/td>\n<td>16:25<\/td>\n<td>16:25<\/td>\n<\/tr>\n<tr>\n<td>Вчера<\/td>\n<td>Вчера, 13:25<\/td>\n<td>Yesterday, 13:25<\/td>\n<\/tr>\n<tr>\n<td>Позавчера и старше<\/td>\n<td>20 дек, 13:25<\/td>\n<td>Dec 20, 13:25<\/td>\n<\/tr>\n<tr>\n<td>Позавчера и старше, если год не совпадает с текущим<\/td>\n<td>20 дек 2017<\/td>\n<td>Dec 20, 2017<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>3 Диапазоны дат<\/h2>\n<p>В русском: если обе даты без пробелов, то среднее тире (&amp;ndash;) без пробелов, если внутри даты есть пробелы, то между датами &amp;thinsp;&amp;mdash;&amp;thinsp; (длинное тире отбитое тонкими пробелами). Если вы не используете среднее тире, то замените его на длинное.<\/p>\n<p>В английском: всегда использовать среднее тире. С пробелами, если обе даты содержат пробелы. В остальных случаях — без пробелов.<\/p>\n<h3>3.1 Полный со временем<\/h3>\n<p>Отличие от 3.2: этот лучше подходит для связных текстов, использования в целых предложениях, заголовках писем или разделов<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>С 1 ноября, 12:25 по 5 ноября, 13:35<\/td>\n<td>From November 1, 12:25 to November 5, 13:35<\/td>\n<\/tr>\n<tr>\n<td>С 1 ноября 2014, 12:25 по 12 мая, 13:35<\/td>\n<td>From November 1, 2014, 12:25 to May 12, 13:35<\/td>\n<\/tr>\n<tr>\n<td>С 1 ноября 2013, 12:25 по 12 мая 2014, 13:35<\/td>\n<td>From November 1, 2013, 12:25 to May 12, 2014, 13:35<\/td>\n<\/tr>\n<tr>\n<td>Когда один и тот же день:<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1 ноября, с 12:25 по 13:35<\/td>\n<td>November 1, from 12:25 to 13:35<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2014, с 12:25 по 13:35<\/td>\n<td>November 1, 2014, from 12:25 to 13:35<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>3.2 Средний (с тире) со временем<\/h3>\n<p>Отличие от 3.1: этот лучше использовать в таблицах и аналогичных конструкциях.<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 ноября, 12:25 — 5 ноября, 13:35 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1, 12:25 — November 5, 13:35 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2014, 12:25 — 12 мая, 13:35 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1, 2014, 12:25 — May 12, 13:35 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2013, 12:25 — 12 мая 2014, 13:35 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1, 2013, 12:25 — May 12, 2014, 13:35 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>Когда одна дата:<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>12:25—13:35, 1 ноября (12:25&amp;ndash;13:35)<\/td>\n<td>12:25—13:35, November 1<\/td>\n<\/tr>\n<tr>\n<td>12:25—13:35, 1 ноября 2014 (12:25&amp;ndash;13:35)<\/td>\n<td>12:25—13:35, November 1, 2014<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>3.3 Короткий со временем<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 янв, 12:25 — 5 ноя, 13:35 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>Jan 1, 12:25 — Nov 5, 13:35 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>1 дек 2015, 12:25 — 3 янв, 13:35 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>Dec 1, 2015, 12:25 — Jan 3, 13:35 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>Когда одна дата:<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>12:25—13:35, 1 ноя (12:25&amp;ndash;13:35)<\/td>\n<td>12:25—13:35, Nov 1<\/td>\n<\/tr>\n<tr>\n<td>12:25—13:35, 1 ноя 2014 (12:25&amp;ndash;13:35)<\/td>\n<td>12:25—13:35, Nov 1, 2014<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>3.4 Полный без времени<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>В одном месяце<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1­—5 ноября (1&amp;ndash;5)<\/td>\n<td>November 1—5 (1&amp;ndash;5)<\/td>\n<\/tr>\n<tr>\n<td>1—5 ноября 2014 (1&amp;ndash;5)<\/td>\n<td>November 1—5, 2014 (1&amp;ndash;5)<\/td>\n<\/tr>\n<tr>\n<td>В разных месяцах<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1 ноября — 12 декабря (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1 — December 12 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2014 — 12 января (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1, 2014 — January 12 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>1 ноября 2013 — 12 января 2014  (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>November 1, 2013 — January 12, 2014 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>3.5 Короткий без времени<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<\/tr>\n<tr>\n<td>1 янв — 2 июня (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>Jan 1 — Jun 2 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>2 ноя 2014 — 12 дек (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>Nov 2, 2014 — Dec 12 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<tr>\n<td>2 ноя 2014 — 12 дек 2014 (&amp;thinsp;&amp;mdash;&amp;thinsp;)<\/td>\n<td>Nov 2, 2014 — Dec 12, 2014 (&amp;thinsp;&amp;ndash;&amp;thinsp;)<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>4 Длительность<\/h2>\n<p>Как делают другие:<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Кто<\/b><\/td>\n<td><b>Что советует<\/b><\/td>\n<td><b>Где<\/b><\/td>\n<\/tr>\n<tr>\n<td>Гугл<\/td>\n<td>0:30, 1:01:05<\/td>\n<td><a href=\"https:\/\/material.io\/design\/communication\/data-formats.html#date-time\">https:\/\/material.io\/design\/communication\/data-formats.html#date-time<\/a><\/td>\n<\/tr>\n<tr>\n<td>Атлассиан<\/td>\n<td>—<\/td>\n<td><a href=\"https:\/\/atlassian.design\/server\/patterns\/date-formats\/\">https:\/\/atlassian.design\/server\/patterns\/date-formats\/<\/a><\/td>\n<\/tr>\n<tr>\n<td>САП<\/td>\n<td>—<\/td>\n<td><a href=\"https:\/\/experience.sap.com\/fiori-design-web\/formatting-dates\/\">https:\/\/experience.sap.com\/fiori-design-web\/formatting-dates\/<\/a><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Есть два формата: цифрами и словами. Вне зависимости от строкового представления сортировка всегда по длительности, а не по строковому представлению.<\/p>\n<h3>4.1 Цифрами<\/h3>\n<p>Используйте всегда один и тот же формат в рамках одной таблицы, блока, лучше экрана, а лучше — модуля или продукта. Нельзя где-то указывать длительность до секунд, а где-то до минут, будет путаница. Всегда недалеко от длительности лучше подписать, что это за формат. Если секунды указываются, то это очень желательно, если секунды не указываются, то строго требуется.<\/p>\n<p>Стоит помнить, что 1 секунда и 1,0 секунда — не одно и то же, нельзя их путать.<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>С секундами     <\/b><\/td>\n<td><b>Только минуты<\/b><\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>0:12,256<\/td>\n<td style=\"text-align: center\"><\/td>\n<td>Ведущий <b>0:<\/b> для минут обязателен<\/td>\n<\/tr>\n<tr>\n<td>0:12<\/td>\n<td style=\"text-align: center\"><\/td>\n<td>Ведущий <b>0:<\/b> для минут обязателен<\/td>\n<\/tr>\n<tr>\n<td>2:25<\/td>\n<td>0:02<\/td>\n<td>Для варианта <i>Только минуты<\/i> ведущий <b>0:<\/b> для часов обязателен<\/td>\n<\/tr>\n<tr>\n<td>25:25<\/td>\n<td>0:25<\/td>\n<td>В этом и ниже миллисекунды скорей всего не нужны, если речь идет не о спортивных соревнованиях<\/td>\n<\/tr>\n<tr>\n<td>25:00<\/td>\n<td>0:25<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>2:25:25<\/td>\n<td>2:25<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>21:25:25<\/td>\n<td>21:25<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1:02:25:25<\/td>\n<td>1:02:25<\/td>\n<td><i>Только минуты<\/i> в этом случае смотрится особенно неудачно<\/td>\n<\/tr>\n<tr>\n<td>48:25:25<\/td>\n<td>48:25<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>4.2 Буквами полный<\/h3>\n<p>Все числа округляются до целых. Написать 25 минут и 25,5 секунд — нельзя.<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b> Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>—<\/td>\n<td>—<\/td>\n<td>Если хотите миллисекунды, см. 4.1<\/td>\n<\/tr>\n<tr>\n<td>12 секунд<\/td>\n<td>12 seconds<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>2 минуты и 25 секунд<\/td>\n<td>2 minutes 25 seconds<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>25 минут и 25 секунд<\/td>\n<td>25 minutes 25 seconds<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>25 минут<\/td>\n<td>25 minutes<\/td>\n<td>Обратите внимание, здесь не написаны секунды, так и надо<\/td>\n<\/tr>\n<tr>\n<td>2 часа и 25 минут<\/td>\n<td>2 hours 25 minutes<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>21 час и 25 минут<\/td>\n<td>21 hours 25 minutes<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1 день и 2 часа<\/td>\n<td>1 day 2 hours<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>48 часов и 25 минут<\/td>\n<td>48 hours 25 minutes<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>10 дней<\/td>\n<td>10 days<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>2 недели и 5 дней<\/td>\n<td>2 weeks 5 days<\/td>\n<td>Если нужно понедельное деление<\/td>\n<\/tr>\n<tr>\n<td>6,5 месяцев<\/td>\n<td>6.5 months<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>4.3 Буквами короткий<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b> Русский<\/b><\/td>\n<td><b>English<\/b><\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>12,256 с<\/td>\n<td>12.256 s<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>12 с<\/td>\n<td>12 s<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>2 мин 25 с<\/td>\n<td>2 min 25 s<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>25 мин 25 с<\/td>\n<td>25 min 25 s<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>25 мин<\/td>\n<td>25 min<\/td>\n<td>Обратите внимание, здесь не написаны секунды, так и надо<\/td>\n<\/tr>\n<tr>\n<td>2 ч 25 мин<\/td>\n<td>2 h 25 min<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>21 ч 25 мин<\/td>\n<td>21 h 25 min<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>1 д 2 ч<\/td>\n<td>1 d 2 h<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>48 ч 25 мин<\/td>\n<td>48 h 25 min<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>10 д<\/td>\n<td>10 d<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td>2 нед 5 д<\/td>\n<td>2 w 5 d<\/td>\n<td>Если нужно понедельное деление<\/td>\n<\/tr>\n<tr>\n<td>6,5 мес<\/td>\n<td>6.5 mo<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>С десятичной дробью — лучше не надо<\/h3>\n<p>С десятичной дробью можно писать только месяцы и годы и только с округлением до половины. Минуты, часы, дни и недели нельзя даже с округлением до половины. В таком виде сложно понять, сколько это, если дробная часть не 0,5.<\/p>\n<p>Лучше не использовать <s>зачеркнутые<\/s> варианты.<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b> Десятичная<\/b><\/td>\n<td><b>Сколько это на самом деле<\/b><\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td><s>3,10 часа<\/s><\/td>\n<td>3:06<\/td>\n<\/tr>\n<tr>\n<td><s>3,20 часа<\/s><\/td>\n<td>3:12<\/td>\n<\/tr>\n<tr>\n<td><s>3,25 часа<\/s><\/td>\n<td>3:15<\/td>\n<\/tr>\n<tr>\n<td><s>3,30 часа<\/s><\/td>\n<td>3:18<\/td>\n<\/tr>\n<tr>\n<td><s>3,33 часа<\/s><\/td>\n<td>3:20<\/td>\n<\/tr>\n<tr>\n<td><s>3,40 часа<\/s><\/td>\n<td>3:24<\/td>\n<\/tr>\n<tr>\n<td><s>3,50 часа<\/s><\/td>\n<td>3:30<\/td>\n<\/tr>\n<tr>\n<td><s>3,60 часа<\/s><\/td>\n<td>3:36<\/td>\n<\/tr>\n<tr>\n<td><s>3,67 часа<\/s><\/td>\n<td>3:40<\/td>\n<\/tr>\n<tr>\n<td><s>3,70 часа<\/s><\/td>\n<td>3:42<\/td>\n<\/tr>\n<tr>\n<td><s>3,80 часа<\/s><\/td>\n<td>3:48<\/td>\n<\/tr>\n<tr>\n<td><s>3,90 часа<\/s><\/td>\n<td>3:54<\/td>\n<\/tr>\n<tr>\n<td>3,5 года<\/td>\n<td style=\"text-align: center\"><\/td>\n<\/tr>\n<tr>\n<td><s>3,8 года<\/s><\/td>\n<td>3 года, 9 месяцев и около 22 дней<\/td>\n<\/tr>\n<tr>\n<td><s>3,2 месяца<\/s><\/td>\n<td>3 месяца и около 6 дней<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>5 Выбор периода показа чего-нибудь<\/h2>\n<h3>5.1. Говорите по-человечески<\/h3>\n<p><i>Неделя<\/i> лучше <i>7 дней<\/i>, <i>месяц<\/i> лучше <i>30 дней<\/i>, это более по-человечески. С этим есть проблема: <i>месяц<\/i> менее однозначно, чем <i>30 дней<\/i>, вариант <i>30 дней<\/i> безопасней. Если вы уверены (например, проверили), что у вас разногласия нет, или что оно допустимо, то <i>месяц<\/i>, лучше <i>последние 30 дней<\/i>.<\/p>\n<p>Пример: Яндекс в достаточно строгом продукте Яндекс.Метрика использует неделю и месяц. Они точно тестировали разные формулировки и сделали так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/metrika.yandex.ru-time-range@2x.png\" width=\"545\" height=\"36\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Можно Яндексу, можно и вам<\/div>\n<\/div>\n<h3>5.2 Пишите «дней», а не «суток»<\/h3>\n<p>Всегда вместо <i>суток<\/i> употреблять <i>дней<\/i>. Так тоже более человечно, в жизни не говорят <i>позвоню через трое суток<\/i>, говорят <i>позвоню через три дня<\/i>. Фразу <i>последние 7 дней<\/i> нельзя понять иначе как <i>последние 7 суток<\/i>. Никто не поймет её как <i>последние 7 суток за вычетом последних 7 ночных периодов<\/i>.<\/p>\n<h3>5.3 Будьте последовательны<\/h3>\n<p>Хорошо: Неделя, Месяц, Квартал<br \/>\nХорошо: Последние 7 дней, 30 дней, 90 дней<br \/>\nПлохо: Неделя, 30 дней, Квартал.<\/p>\n<p><b>Примечание<\/b><br \/>\n90 дней и кварталы могут быть вместе и использоваться в разных частях системы одновременно. Если кому-то нужна поквартальная отчетность, должны быть точно кварталы. 1 квартал, 2 квартал, Q1, Q2, и так далее.<\/p>\n<h3>5.4 Используйте адекватные величины<\/h3>\n<p>Используйте те величины, какими бы назвали этот период в жизни. Вместо 48 часов лучше 2 дня, вместо 3600 секунд — 1 час, вместо 1440 минут — 1 день. 24 часа, 60 минут — норм. Могут быть исключения, но обычно так.<\/p>\n<h2>5.5 Не делайте слишком много<\/h2>\n<p>Это искусственный макет, так не надо:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/too-many.png\" width=\"415\" height=\"333\" alt=\"\" \/>\n<\/div>\n<p>Вот тут ↑ перебор вариантов. Такое количество пунктов сложно сверстать, из него непросто выбрать (с учетом того, они почти все одинаковые по тексту).<\/p>\n<p>Что делать, если пунктов много:<\/p>\n<ul>\n<li>Решить интерфейсно: сгруппировать, выбрать другой элемент управления, сделать последовательный выбор, переверстать.<\/li>\n<li>Решить продуктово: убрать часть опций, сделать автоматическую магию.<\/li>\n<\/ul>\n<h3>5.6 Не дублируйте везде «последние»<\/h3>\n<p>И Мильчин, и другие люди советуют не дублировать в списках одинаковое начало.<\/p>\n<h3>5.7 Итого<\/h3>\n<p>Кажется, что выбирать надо из следующих вариантов (использовать все не надо):<br \/>\nсекунды: 1, 5, 10, 15, 30, 60<br \/>\nминуты: 1, 5, 10, 15, 30, 60<br \/>\nчасы: 1, 2, 4, 6, 8, 12, 24<br \/>\nдни: 1, 5, 7, 10, 14, 15, 30, 90, 180<br \/>\nнедели: 1, 2, 4<br \/>\nмесяцы: 1, 2, 3, 6, 12<br \/>\nлет: 1, 2, 5, 10<\/p>\n<p>Если вашего интервала тут нет, может он и не очень осмысленен? Наличие в интерфейсе интервалов <i>последние 5 часов, 18 минут, 13 дней,<\/i> — вызывает вопросы. Такое может быть из-за особой специфики (например 5-часовые смены операторов), но обычно такого не должно быть.<\/p>\n<div class=\"post-summary\"><div class=\"post-summary__text\"><p>Очень важно написать для всех этих случаев форматтеры (функции форматирования) в используемом вами фреймворке. Только так можно гарантировать, что форматы будут правильные, тире не заменятся на дефисы.<\/p>\n<p>Проще один раз отладить и сделать эталонную реализацию.<\/div>\r\n<\/div>\r\n\r\n<br\/>\r\nПодобные посты отмечены тегом <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/gaydlayny\/\">гайдлайны<\/a>",
            "date_published": "2018-06-28T02:24:02+03:00",
            "date_modified": "2021-11-12T10:53:12+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/metrika.yandex.ru-time-range@2x.png",
            "_date_published_rfc2822": "Thu, 28 Jun 2018 02:24:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "92",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/metrika.yandex.ru-time-range@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/too-many.png"
                ]
            }
        },
        {
            "id": "91",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-timeseries\/",
            "title": "Как делать подписи для таймсерий",
            "content_html": "<p class=\"lead\">Таймсерии — графики, где что-то зависит от времени обычно. В посте я расскажу, как делать на них подписи. Это улучшенная версия статьи из наших внутренних дизайнерских гайдлайнов, поэтому тут может встретиться неожиданная категоричность.<\/p>\n<h2>В чем проблема<\/h2>\n<p>Если не следить за подписями, то программа или библиотека расставит отметки автоматически. Скорей всего она поделит интервал на равные промежутки и может получиться плохо. Вот скриншот временной оси графика, обратите внимание, что показано только время:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0@2x.png\" width=\"651\" height=\"53\" alt=\"\" \/>\n<\/div>\n<p>Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки <i>3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня.<\/i> Понять это из подписей почти невозможно.<\/p>\n<p>Я перерисую скриншот, чтобы можно было менять и иллюстрировать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0-2@2x.png\" width=\"520\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>Первое, что нужно сделать — всегда писать даты:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-1@2x.png\" width=\"520\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>Стало понятно, но тоже плохо. Пеньки получились неудобные, читать их неудобно. Все потому, что программа поделила ось на равные промежутки и подписала их. В данном случае число отсчетов не совпало с числом дней, поэтому программа выбрала промежутками не целые дни.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-2@2x.png\" width=\"520\" height=\"60\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пурпурные линии — границы дней<\/div>\n<\/div>\n<p>В посте я расскажу что с этим всем делать.<\/p>\n<h2>Общие правила<\/h2>\n<ol start=\"1\">\n<li>Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.<\/li>\n<li>Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.<\/li>\n<li>Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.<\/li>\n<li>Смысловые отметки лучше несмысловых. Отметка <i>22:12<\/i> — странно, <i>22:30<\/i> — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:<br \/>\n<i>1, 5, 10, 15, 30 секунд,<\/i><br \/>\n<i>1, 5, 10, 15, 30 минут,<\/i><br \/>\n<i>1, 2, 4, 6, 12, 24 часов,<\/i><br \/>\n<i>1, 2, 5, 10, 15 дней,<\/i><br \/>\n<i>1, 2 недели (если нужны именно календарные недели),<\/i><br \/>\n<i>1, 2, 3, 6 месяцев,<\/i><br \/>\n<i>1, 2 года, 5, 10 лет.<\/i><br \/>\nДробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.<\/li>\n<\/ol>\n<h2>Информативность<\/h2>\n<ol start=\"1\">\n<li>Дублировать одно и то же — плохо. Не надо писать у отметок так: <i>01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015.<\/i> Но и <i>01.01, 01.02, 01.03, 01.05<\/i> тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?<\/li>\n<li>Для дат лучше всего использовать формат <i>1 мая, 2 июня, 13 ноя<\/i>. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-6@2x.png\" width=\"509\" height=\"98\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"3\">\n<li>Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-5@2x.png\" width=\"507\" height=\"120\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"4\">\n<li>Секунды у времени не пишутся, если не сказано обратного — <i>22:12<\/i>. Любое время, кроме полуночи лучше писать без ведущих нулей: <i>6:25, 9:13, 12:56,<\/i> но <i>00:00<\/i>. Для секунд, там где они нужны, допускается писать только секунды: <i>10:55, :56, :57, :58, :59, 11:00, :01, :02.<\/i><\/li>\n<\/ol>\n<h2>Оформление<\/h2>\n<ol start=\"1\">\n<li>Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-7@2x.png\" width=\"507\" height=\"112\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"2\">\n<li>Текст подписи выравнивает по центру, сама подпись — по пеньку.<\/li>\n<li>Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.<\/li>\n<\/ol>\n<h2>Края интервала<\/h2>\n<p>Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки <i>6:00<\/i> (между <i>3:52<\/i> и <i>8:00<\/i>) и <i>2:00<\/i> (между <i>00:00<\/i> и <i>3:12<\/i>) как бы должны быть, но не влезли:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-1@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<p>Если явно задана только левая, а правая — <i>сейчас<\/i>, то правую можно не подписывать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-2@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<p>Если края не принципиальны, то можно не подписывать оба конца:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-3@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<h2>Примеры<\/h2>\n<p>Примеры того, что получится, если воспользоваться рекомендациями:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-200@2x.png\" width=\"500\" height=\"615\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-480@2x.png\" width=\"845\" height=\"615\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-1600@2x.png\" width=\"2000\" height=\"774\" alt=\"\" \/>\n<\/div>\n<p>Если применить все рекомендации к примеру из начала поста, то получится как-то так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-8@2x.png\" width=\"524\" height=\"284\" alt=\"\" \/>\n<\/div>\n<div class=\"post-summary\"><div class=\"post-summary__text\"><p>Выводы простые: не доверяйте программе ставить отметки как получится, скорей всего получится плохо.<\/p>\n<\/div><\/div>",
            "date_published": "2018-06-04T02:21:35+03:00",
            "date_modified": "2018-12-16T00:47:03+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-3@2x.png",
            "_date_published_rfc2822": "Mon, 04 Jun 2018 02:21:35 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "91",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-200@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-480@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-1600@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-8@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)"
}