Дизайн
Olga Berdnikova
6479

Как сделать удобный интерфейс для повседневного инструмента

Принципы проектирования интерфейсов от команды дизайнеров IntelliJ IDEA.

В закладки
Аудио

Среда разработки — такой же важный инструмент для разработчиков, как графический редактор для дизайнеров. Это именно то приложение, где можно написать код и собрать из него любое другое приложение или сайт.

IntelliJ IDEA — популярная среда разработки (IDE) для языка программирования Java. Возможно, вы и сами пользуетесь ей или одной из десяти IDE компании JetBrains: WebStorm, PyCharm, GoLand, Rider и так далее. Все эти продукты построены на платформе IntelliJ и имеют общий пользовательский интерфейс.

UX-, UI-дизайнеры в команде разработки IntelliJ IDEA помогают делать интерфейс удобнее для наших пользователей. Чтобы определить, что такое «удобнее» для самих себя, коллег-разработчиков и пользователей, мы используем принципы проектирования.

Главный экран IntelliJ IDEA: слева все файлы проекта, справа код

Откуда берутся принципы

Люди довольны продуктом, если чувствуют, что движутся к своей цели, и не испытывают эстетических противоречий. Попросту, должно быть удобно и красиво.

«Красиво» — это соответствие современным визуальным нормам. Наши IDE десктопные, решения в этой области ограничены интерфейсами операционных систем. Поэтому мы чаще думаем про «удобно».

Думаю, что «удобно» можно сформулировать так: большинство пользователей решает задачу максимально быстро.

Эта формулировка слишком абстрактная, и её сложно применять на практике. Проще использовать конкретные принципы, которые в сумме обеспечивают то же самое. Эти принципы:

  • Скорость доступа к элементам интерфейса.
  • Экономия внимания.
  • Информативность.
  • Находимость.
  • Привычки.
  • Сложность разработки.

В списке нет таких понятий как «соответствие целям и сценариям пользователя», «теория близости» или «скорость работы приложения» — всё это должно работать по умолчанию.

Принципы оставляют пространство для решений. Разберу способы принятия таких решений на примерах пользовательских интерфейсов в IntelliJ IDEA.

Принципы

Скорость доступа к элементам интерфейса

Скорость доступа — насколько быстро можно подвести курсор к элементу, насколько быстро прицелиться. Здесь действует Закон Фиттса: время прицеливания прямо пропорционально расстоянию, обратно пропорционально размеру объекта прицеливания. То есть в большую кнопку рядом с курсором прицелиться быстрее, чем в маленькую кнопку далеко.

Такая маленькая кнопка как раз была на тулбаре в главном окне IntelliJ IDEA — кнопка с треугольником на скриншоте:

Добавили кнопке лейбл «Add Configuration». Кнопка стала большая, и целиться стало удобнее:

Часто для достижения цели нужно прицелиться к нескольким объектам подряд. Чем больше объектов, тем медленнее доступ. Та же кнопка с треугольником сначала открывала меню, в котором нужно было прицелиться в единственный пункт:

В варианте с кнопкой прицелиться нужно только один раз к самой кнопке.

Экономия внимания

Внимание человека — ресурс, не нужно расходовать его зазря. В интерфейсах внимание часто расходуется на переключение контекста.

Например, раньше сообщение о валидации полей отображалось внизу диалога. Часто поле с ошибкой оказывалось далеко от сообщения, пользователю приходилось бегать глазами от одного места к другому:

До: поле с ошибкой наверху диалога, сообщение об ошибке внизу

Исправили, чтобы ошибка показывалась у поля, где она произошла. Теперь внимание не расходуется на переключение между разными областями диалога:

После: поле с проблемой и сообщение об ошибке в одном месте

Переключение контекста ещё часто происходит в модальных диалогах. Модальный диалог заставляет тратить внимание, чтобы сориентироваться в новом интерфейсе. В IntelliJ IDEA обычным подходом было открыть модальный диалог, если нужно увеличить область ввода:

До: кнопка открывает модальный диалог

Чтобы внимание не тратилось, решили расширять само поле:

После: кнопка разворачивает немодальное поле

Ещё внимание можно потратить на слишком заметный элемент интерфейса, когда заметным он быть не должен. Хотели объяснить в нотификации, зачем она появляется, и добавили серый текст:

До: длинный отвлекающий серый текст

Но нотификация появляется часто, зачем каждый раз отвлекать людей подсказкой, которую они уже, возможно, изучили. Можно спрятать ее под менее заметный вопросительный знак и сэкономить внимание:

После: не отвлекающая иконка со знаком вопроса

Информативность

Информативность — это доля полезной информации в общем объеме сообщения, то есть соотношение сигнал/шум. Улучшать информативность можно двумя способами: добавить сигнал или уменьшить шум.

Пример с добавлением сигнала. В IntelliJ IDEA есть возможность перемещаться назад / вперед по местам кода, где находился курсор (действия Navigate Back / Forward). Не всегда легко вспомнить, в каком месте кода каретка была некоторое время назад, и непонятно, нужно ли туда возвращаться. Добавили информацию для решения этой проблемы — показали кусочки кода, где был курсор, в отдельном попапе:

Попап наглядно показывает, в каком месте кода недавно находился курсор

Другой пример, когда убираем шум. Несколько версий назад у нас было много тулбаров с 10–20 иконками. В таком количестве иконок сложно найти нужную. Мы собрали статистику кликов на тулбарах. Те действия, которые использовали меньше 0,1% пользователей (темно-красный), мы убрали с тулбаров, другие действия сгруппировали или переместили, наиболее используемые вынесли в начало тулбара. Теперь шума меньше, найти нужную иконку проще:

Когда иконок меньше, найти нужную проще

Находимость

Фича может быть полезной, но если пользователи про неё не знают — всё равно, что нет фичи.

В IntelliJ IDEA можно искать файлы, классы и другие сущности проекта или действия самой IDE. Раньше было пять похожих интерфейсов поиска: свой для каждой категории и один поиск для всех. Нужно было знать, как вызывать каждый в отдельности.

Пять попапов для поиска разных сущностей, нужно знать про каждый

Чтобы не нужно было находить каждый из попапов, совместили их в один. Теперь достаточно одного шортката (Shift + Shift), чтобы узнать, какие объекты можно искать — все они перечислены в заголовке попапа, и между ними можно легко переключаться клавишей Tab:

Один попап для поиска всех сущностей. Проще найти, чем пять отдельных

Или ещё случай. Одно из самых полезных действий в IntelliJ IDEA — Show Context Actions с шорткатом Alt + Enter. Оно подсказывает, как сделать код правильнее, позволяет запустить его, снавигироваться в связанные сущности и многое другое. Например, можно поставить курсор на код с проблемой, нажать Alt + Enter и увидеть список действий, которые исправят код автоматически:

Контекстные действия в IntelliJ IDEA подсказывают, как исправить код

Но узнать про Show Context Actions можно, но только если заметишь и нажмёшь иконку–лампочку (она открывает это же меню) или откроешь контекстное меню. Оба способа легко пропустить. Зато по наведению курсора мыши на код с проблемой появляется тултип с описанием ошибки, найти его намного проще:

До: тултип с проблемой в коде

Логично связать описание ошибки с действиями для ее исправления. Добавили действия в тултип, и количество использований Show Context Actions в IntelliJ IDEA выросло с 60% до 70%.

После: тултип с проблемой и с контекстными действиями — проблема и как исправить в одном месте

Привычки

Соблюдение привычек пользователей помогает всем предыдущим пунктам — привычные элементы быстрее и найти, и понять. Как мы сохраняем привычку:

1. Используем важные интерфейсные шаблоны из операционных систем. Например, в macOS кнопка «OK» справа, а в Windows — слева.

Кнопки OK и Cancel в разном порядке в macOS и Windows

2. Используем один шаблон взаимодействия для одинаковых задач. Например, раньше клавиатурные раскладки, цветовые схемы редактора кода и профили инспекций кода управлялись тремя разными интерфейсами, хотя для всех действия были почти одинаковые:

До: три разных интерфейса для одного способа взаимодействия

Заменили на одинаковый интерфейс, чтобы пользователям было проще разобраться с управлением новой сущностью, если уже сталкивались с похожей раньше. У всех действия теперь в меню под шестеренкой:

После: одинаковый интерфейс для одного способа взаимодействия

3. Используем знакомые решения из окружающего мира, если ничего подходящего нет в нашем собственном интерфейсе или операционных системах. Недавно появилась возможность делать плагины к нашим IDE платными. Теперь у платных плагинов есть своя лицензия, и если она не активирована, нужно как-то это показать. Как это сделать?

Можно нарисовать иконки продукта и плагинов неактивными, но тогда выглядит, будто пункт списка целиком недоступен:

Иконка выглядит недоступной (disabled)

Можно сделать иконки полупрозрачными, передать метафору «чего-то не хватает». Но такой прием не используется в IntelliJ IDEA, вид непривычный, и метафору могут не понять:

Метафору полупрозрачной иконки сложно понять

Поэтому решили использовать привычный символ знака «стоп» для значения «стой, что-то не так»:

Дополнительная иконка «стоп» быстрее передает смысл «что-то не так»

Сложность разработки

Дизайнер может придумать интерфейс, разрабатывать который придется год. Все это время проблема пользователей не будет решена. Поэтому лучше придумать что-то проще и принести пользу быстрее.

Пример. Тексты для пользовательского интерфейса удобно записывать в отдельных файлах, а не в файле с кодом. Например, это полезно для перевода на разные языки — всё, что нужно перевести, видно в одном месте:

Пример файла с текстами для пользовательского интерфейса. Тексты — зеленые, их идентификаторы — синие

В файле с кодом, показывающим текст, указываем обращение к идентификатору текста:

Тут идентификатор стал зеленым, это корректное поведение, но для примера неважное

Вместо идентификатора удобно показать превью текста — понятно, что именно будет выведено в интерфейс. Такое превью отображается в IntelliJ IDEA автоматически:

В файле с кодом вместо непонятного идентификатора показываем понятный текст

Иногда сам текст нужно отредактировать. Чтобы не переходить в файл, где хранится текст, дизайнеры предложили редактировать превью текста (раньше редактировать было нельзя):

Удаляем слово Toggle

Но оказалось, что разработать редактирование текста, который на самом деле хранится в другом файле — сложно и долго. Поэтому решили обойтись существующими компонентами: показать поверх кода поле ввода с текстом из другого файла, а в тултипе подсказать, как запустить редактирование.

Нажимаем ссылку Edit Property Value, запускается редактирование

Задача решена, пусть и менее элегантно, но гораздо быстрее.

Все принципы вместе

Чтобы понять, хороший ли интерфейс, нужно оценить, как на нем выполняются все принципы. Возьмем для примера ту же кнопку на тулбаре главного окна и оценим новый вариант по принципам:

  • Скорость доступа: как уже говорилось, в большую кнопку прицелиться быстрее, чем в маленькую кнопку, а потом в меню под ней.
  • Экономия внимания: кнопка стала заметнее, но это небольшая проблема, потому что кнопка важная — с нее можно начать работу, если требуется запустить код.
  • Информативность: теперь на кнопке написано, что она делает — это полезная информация, стало понятно, зачем нужна кнопка.
  • Находимость: теперь людям проще найти, как создать run/debug конфигурацию, чтобы запустить код — текст на кнопке явно на это указывает.
  • Привычка и сложность разработки: кнопка — стандартный элемент, проблем нет.

Вариант с кнопкой — сравнительно простой. Обычно для такого интерфейса достаточно умозрительной оценки. Для вариантов посложнее не всегда получается оценить в уме.

Рассмотрим вариант посложнее: диалог создания класса, интерфейса или элемента другого типа данных (класс и интерфейс — понятия из программирования). В диалоге можно записать имя элемента и выбрать его тип в списке Kind:

Диалог создания класса и других абстрактных типов данных в коде

По умолчанию список типов скрыт, и может быть сложно понять, какие есть варианты. Если курсор находится в поле Name, то Kind можно переключать кнопками Вверх/Вниз на клавиатуре, на что намекает иконка ↑↓ справа от Name. Но этот способ подсказки непривычный, метафора иконки непонятная, и в результате найти эту функциональность сложно.

В одной из команд предложили вручную вводить тип элемента в поле Name, чтобы не нужно было переключаться в комбобокс Kind и выбирать из длинного списка. Дизайнеры предложили ещё два решения: использовать попап с подсказкой и показывать все типы в списке под полем Name. Все варианты вместе:

Чтобы не забыть ни один из принципов в процессе сравнения, запишем в табличку. Цветом отмечена оценка, насколько хорошо выполняется принцип. Цвет помогает взглядом оценить наиболее удачный вариант:

По табличке видно, что у варианта со всеми типами в списке под полем (4) больше всего зеленого, но он всё равно не идеальный. Это обычная ситуация, потому что примирить все принципы сложно. В таком случае можно выбрать самый выигрышный вариант и отдельно решить его проблемы.

Принципы помогают выбрать лучший вариант интерфейса на этапе проектирования и разработки. Но они не гарантируют, что решение будет идеальным — пользователей много, цели и способы решения задач у них могут быть разными, сложно учесть всё сразу.

Поэтому после разработки мы всегда следим, как наши коллеги и люди за пределами компании пользуются новым интерфейсом, проводим UX-исследования, и дорабатываем, если что-то осталось неудобным.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Olga Berdnikova", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438"], "comments": 43, "likes": 50, "favorites": 165, "is_advertisement": false, "subsite_label": "design", "id": 81467, "is_wide": true, "is_ugc": true, "date": "Mon, 02 Sep 2019 19:44:59 +0300", "is_special": false }
0
{ "id": 81467, "author_id": 355298, "diff_limit": 1000, "urls": {"diff":"\/comments\/81467\/get","add":"\/comments\/81467\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/81467"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
43 комментария
Популярные
По порядку
Написать комментарий...
26

Для всего лесопарка стеков (по крайней мере Python, Node.js, PHP, Go, Kotlin, Scala) де-факто продукты JetBrains впереди планеты всей. Просто делайте дальше, что делаете ❤️

Ответить
5

Я до последнего не мог понять, чего все их хвалят. Она же платная, в то время когда есть куча бесплатный аналогов.

Но решил попробовать, благо там бесплатный месяц.
Оформил годовую подписку в первый же день использования.

Это как с дедушкиных жигулей пересесть на немецкий премиум-класс

Ответить
2

А ещё они дают бесплатные лицензии вузам :)

Ответить
0

И опенсорсу. И 50% скидки стартапам

Ответить
1

Спасибо ^_^

Ответить
7

У меня только один вопрос: "Почему это не вышло на хабре?"

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

6

Компьютер способный комфортно крутить IDEA еще не придуман.

Ответить
2

Простите, парни, но лучше Sublime Text 3 пока нет :)

Ответить
3

Саблайм все же редактор с плагинами, а это полноценная IDE. Правда c попыткой стать комбайном и на этом проседает производительность и местами продуктивность. Я сам адепт саблайм текста, но не могу игнорировать хороший продукт от JetBrains, хотя и не пользуюсь им.

Ответить
0

IDE от JetBrains выглядят круто и удобно, но тормозят страшно. Но это, конечно, субъективно.

Ответить
1

Для JS/TS лучше VSCode нет

Ответить
5

вы Webstorm пробовали? почему vscode лучше? просто очень интересно, почему)

Ответить
2

Я пробовал, и тот и другой инструмент. Шторм медленный, учитывая что там Джавовский двиг, не сильно удивительно, но что меня больше убило, на моем маке с ССД от момента клика по иконке программы до появления окна с выбором проектов (!) проходило около 20 секунд, при этом там даже еще небыло проектов, те воркспейс вообще пустой, я не знаю что там за такие процессы происходили в фоне, что он так жутко тормозил, но это раздражало.

ВСКод, хоть и сделан на электроне, но команда, которая делает этот редактор очень круто оптимизировала его быстродействие, стартует у меня за пару секунд, работать приятно, необходимый функционал добивается плагинами. БЕСПЛАТЕН! Смотрю, очень многие команды и разработчики используют именно его.

Ответить
1

потому что не пробовал, но осуждаю

Ответить
0

Пробовал неделю сидеть на нем - он медленнее (на vscode тоже можно поставить все плагины, и он все равно будет быстрее), интерфейс на мой взгляд хуже смотрится. На vscode есть все, что есть и в webstorm'e. В общем, как говорится, на вкус и цвет. Для Java к примеру, не спорю, лучше инструмента нет, чем intellij.

Ответить
2

IDE для слабаков. Достаточно блокнота. Или даже просто палки и земли.

Ответить
–1

Для новичков сойдёт. Это же так удобно, когда программа печатает за тебя)

Ответить
3

Да, удобно работать с генерацией кода, подсказками и подсветкой ошибок. И не только новичкам. Забавно слушать комментарии типа "кто ты без своей IDE" от тех, чья производительность в несколько раз меньше

Ответить
1

Far Manager навсегда :)

Ответить
0

Ну и far2l норм

Ответить
0

Бумажного.

Ответить
1

То есть они на полном серьёзе считают, что в IDE кто-то пользуется мышью, что тратят столько времени на сортировку иконок? Странные люди.

Ответить
1

У них же есть статистика кто чем пользуется.

Ответить
0

У нас и правда есть статистика, люди пользуются иконками. Кроме того, иконки нужны для находимости: можно изучить предложенные функции, выучить хоткеи и больше не смотреть на иконки.

Ответить
0

я пользуюсь

Ответить
0

Вот-вот. Ещё вынесение информации в тултипы, которые появляются только по хаверу, вызывает вопросы.

Ответить
0

Таких людей, скорее всего, большинство. Многие не умеют в хоткеи :(

Ответить
0

Ну и тут речь про информационный шум же, сортировка иконок всё равно дело хорошее

Ответить
1

Будь проклят тот день, когда я скачал Eclipse. И в последствии привык к нему

Ответить
0

Соболезную.

Ответить
0

при поиске по проекту блокируется область редактирования.

если подвисает какой-то открытый проект, то висит весь шторм.

если исключить файлы или каталоги из деплоя, то нельзя никак заставить ide их залить (force upload например)

Ответить
0

Будем очень благодарны, если вы опишите эти проблемы в трекере https://youtrack.jetbrains.com/issues/WEB

Ответить
0

Подскажите пожалуйста как здесь добавлять статьи в закладки что бы не потерять их и прочитать поздней? Спасибо

Ответить
0

Под названием статьи есть кнопка

Ответить
0

А мне не нравятся яркие значки. В том числе поэтому не пользуюсь решарпером и райдером. В студии родные значки такие неброские, а от ярко-желтой лампочки решарпера глаза режет.

Ответить
0

Зачем вы разделяете плагины на две вкладки?

Ответить
0

Если ваш вопрос про страничку Plugins в диалоге настроек, то: на первой вкладке все доступные плагины для поиска по ним, на второй — список установленных плагинов, чтобы можно было быстро посмотреть, что установлено, обновить или удалить.

Ответить
0

Да вопрос про них. Моя основная претензия: на вкладке якобы со всеми плагинами не отображаются уже установленные, т. е. нужно искать на двух вкладках. Сравните с менеджером Nuget — в первой вкладке отображаются все пакеты, из них установленные помечаются меткой.

Ответить
0

На вкладке со всеми плагинами «Marketplace» видно плагины, которые установлены из нее — у них вместо кнопки Install будет написано Installed.

Но на вкладке Marketplace не видно Bundled плагины, которые установлены в по умолчанию. Их видно только на вкладке Installed. Вы ищите именно bundled плагины? Расскажите, пожалуйста, про всю ситуацию: почему вам понадобилось поискать установленный плагин, что это был за плагин?

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }