{ "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\/podpisi\/", "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/podpisi\/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": "111", "url": "https:\/\/mikeozornin.ru\/blog\/all\/dont-make-me-click-and-hover\/", "title": "Не скрывать, а показать сразу", "content_html": "

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще<\/p>\n

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.<\/p>\n

На странице есть схема устройства дирижабля:<\/p>\n

\n\"\"\n<\/div>\n

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.<\/p>\n

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл, что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.<\/p>\n

Лучше сразу всё подписать:<\/p>\n

\n\"\"\n<\/div>\n

Особенно глупо точки смотрятся на этой фотографии:<\/p>\n

\n\"\"\n<\/div>\n

Чтобы не заставлять читателя страдать, есть простое правило:<\/p>\n

Если можно не прятать, лучше не прятать.<\/p>\n

<\/p>\n

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты<\/a><\/p>\n", "date_published": "2019-03-01T08:00:28+03:00", "date_modified": "2020-11-10T01:36:54+03:00", "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png", "_date_published_rfc2822": "Fri, 01 Mar 2019 08:00:28 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "111", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-1@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-2@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-3@2x.png" ] } }, { "id": "83", "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-screenshots\/", "title": "Как подписывать скриншоты", "content_html": "

У нас в компании есть команда технических писателей, которые пишут руководства по продуктам. В руководствах техписатели вставляют скриншоты экранов и рассказывают как и что работает. Некоторое время назад я помог им разработать рекомендации по оформлению подписей к таким скриншотам. Расскажу на что обращать внимание. Вряд ли тут будет что-то новое дизайнерам, а вот остальным, надеюсь, поможет.<\/p>\n

Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:<\/p>\n

\n\"\"\n<\/div>\n

То, что ко мне попал один из самых первых черновиков — большая удача, из черновика получились хорошие примеры. Их не пришлось придумывать из головы, они вышли иллюстративные и при этом реальные.<\/p>\n

Общие правила<\/h2>\n

Про оформление подписей есть бюрошный совет: bureau.ru\/bb\/soviet\/20140728.<\/a> В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.<\/a><\/p>\n

Я не буду повторяться и писать про толщину линий и их цвет, про расстояния до обозначаемого объекта, в двух ссылках выше это описано.<\/p>\n

Прием 1: УВЛ (убрать все лишнее)<\/h2>\n

Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.<\/p>\n

\n\"\"\n<\/div>\n

Слово button<\/i> встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button<\/i> безболезненно убирается:<\/p>\n

\n\"\"\n<\/div>\n

Прием 2: вынести общее за скобки<\/h2>\n

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button,<\/i> а filter button.<\/i><\/p>\n

\n\"\"\n<\/div>\n

Убрать button<\/i> можно, а вот от filter<\/i> избавиться нельзя. Если убрать слово filter<\/i>, то потеряется важный смысл. При этом filter button<\/i> относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.<\/p>\n

Например, так:<\/p>\n

\n\"\"\n<\/div>\n

Фактически мы вынесли filter button<\/i> за скобки, как в математическом выражении.<\/p>\n

Прием 3: соблюдать теории близости<\/h2>\n