{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом handoff",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/handoff\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/handoff\/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"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}