{
    "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:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/multigruppa\/",
    "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fmultigruppa%2Fjson%2F",
    "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101",
    "author": {
        "name": "Кирилл Беляев",
        "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/",
        "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101"
    },
    "items": [
        {
            "id": "421",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/radiogroups-and-multigroups\/",
            "title": "Радио- и мультигруппы",
            "content_html": "<p><a href=\"https:\/\/ru.wikipedia.org\/wiki\/Радиокнопка\">Радиокнопки<\/a> дают выбор одного из нескольких, а <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Флажок_(интерфейс)\">чекбоксы<\/a> (флаговая кнопка :-) — нескольких из нескольких:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiobuttons-checkboxs@2x.png\" width=\"297\" height=\"97\" alt=\"\" \/>\n<\/div>\n<p>Оба элемента управления не компактны. Запись в строку не спасает: чередование элементов и пробелов шумит. (Если пунктов много, сложно понять, сколько конкретно.)<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiobuttons-checkboxs-line@2x.png\" width=\"375\" height=\"16\" alt=\"\" \/>\n<\/div>\n<p>Вторая проблема — размер кликабельной области. Радиокнопка и чекбокс маленькие. Придётся целиться — <a href=\"http:\/\/raskin-interface.narod.ru\/interface\/chapter4.htm#s4.4\">Фитс<\/a> не обрадуется. Кликабельную зону увеличивают за счёт лейбла. Но пока он остаётся простым текстом об этом сложно догадаться. Подчеркивание (и по-хорошему пунктирное) добавит шума.<\/p>\n<p>Умные ребята придумали заменить радиокнопки радиогруппами (название уже прижилось). Они компактны и легко описываются стилями без картинок:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup@2x.png\" width=\"168\" height=\"21\" alt=\"\" \/>\n<\/div>\n<p>Но если в группе только 2 элемента не очевидно, какой из них выбрали. За этим стоит внимательно следить. Явная тень делает выбранный элемент очевидным (он вдавлен), но, увы, не всегда подходит к общему стилю:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-shadow@2x.png\" width=\"110\" height=\"21\" alt=\"\" \/>\n<\/div>\n<p>Конструкцию радиогрупп применяют и для чекбоксов. Мультигруппы (так называю, потому что «группа галочек», «флаговая группа» и «чекгруппа» слабо отражают функцию) могут выглядеть в точности, как радиогруппы:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup@2x.png\" width=\"272\" height=\"21\" alt=\"\" \/>\n<\/div>\n<p>Но пользователям комфортнее, если группы одного интерфейса отличаются. Любые отличия подойдут, простейшее — цвет:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup-color@2x.png\" width=\"272\" height=\"21\" alt=\"\" \/>\n<\/div>\n<p>Чтобы группы одного интерфейса легче узнавались, когда на экране только одна группа, советую по умолчанию не выбирать ни одного в мультигруппах:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup-no-one@2x.png\" width=\"272\" height=\"21\" alt=\"\" \/>\n<\/div>\n<p>Конечно, мультигруппа с нулевым выбором сработает не для всех сценариев. Оставшимся подойдут правильные формулировки в окружающем тексте, которые намекнут на множественный выбор.<\/p>\n<p>Ещё работу мультигрупп из 2-х элементов хорошо показывает плюс:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/multigroup-plus@2x.png\" width=\"289\" height=\"21\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2015-09-09T10:49:20+03:00",
            "date_modified": "2015-09-09T10:24:41+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiobuttons-checkboxs@2x.png",
            "_date_published_rfc2822": "Wed, 09 Sep 2015 10:49:20 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/radiogroups-and-multigroups\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiobuttons-checkboxs@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiobuttons-checkboxs-line@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-shadow@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup-color@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/radiogroup-multigroup-no-one@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/multigroup-plus@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}