Дизайн интерфейсов яндекс: «Дизайн интерфейсов» — Яндекс Кью — Независимое театральное объединение "Зрительские симпатии"

Содержание

«Дизайн интерфейсов» — Яндекс Кью

5 разных историй о дизайнерах, которые делают Яндекс Маркет»

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

ИТ и интернет

6 июня вместе с дизайнерами Яндекс Маркета разберемся, как устроена сфера дизайна в IT, какие профессии в ней актуальны и как строится работа дизайнеров разных специализаций.

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

На протяжении всей трансляции вы сможете задавать вопросы выступающим.

Программа

⏰ 17:00–17:40
Дизайн в IT

Расскажем, как устроена эта сфера и какие специалисты ей нужны:

—> Что такое современный дизайн и зачем он нужен
—> Какие бывают профессии в дизайне

—> Чем дизайнеры отличаются друг от друга

Спикер — Елена Мойся, продуктовый дизайнер в Хорошколе, наставник и ревьюер в Яндекс Практикуме.

⏰ 17:40–18:10
Продуктовый дизайнер

Разберемся, как дизайнер работает над продуктовой задачей — на примере Яндекс Маркета:

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

Спикер — Александр Мартынов, лид группы дизайнеров категорийного опыта в Яндекс Маркете.

⏰ 18:10–18:40
Дизайнер интерфейсов

Выясним, как работает дизайнер интерфейсов в Яндекс Маркете:

—> Из каких этапов состоит работа над интерфейсной задачей
—> Как происходят сбор данных, работа с референсами, подготовка и поиск решения
—> Как использовать и интерпретировать UX-исследования
—> Как устроены этапы проектирования и сбор фидбека
—> Как вести работу с ограничениями разработки и подготовка артефактов к разработке

Спикер — Антон Пепеляев, лид группы дизайна лояльности в Яндекс Маркете.

⏰ 18:40–19:10
Коммуникационный дизайнер

Узнаем, как устроен процесс создания айдентики Яндекс Маркета:

—> Как происходит становление дизайнера
—> В чем отличия работы в агентстве и на стороне клиента
—> Как устроено создание айдентики Яндекс Маркета
—> Как происходит поддержка и развитие айдентики внутри продукта

Спикер — Алексей Бродовский, бренд-дизайнер в Яндекс Маркете.

⏰ 19:10–19:40
Графический дизайнер

Познакомимся с процессом создания графики для рекламных спецпроектов Яндекс Маркета:

—> Как разработать общую идею рекламной кампании

—> Как искать визуальные решения под идею
—> Как стиль может жить и развиваться на разных носителях

Спикер — Анастасия Мухина, лид рекламных кампаний и спецпроектов в Яндекс Маркете.

⏰ 19:40–20:10
Дизайнер лендингов

Разберемся, как Яндекс Маркет создает лендинги:

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

Спикер — Виктор Акифьев, лид группы продуктовых запусков в Яндекс Маркете, сооснователь студии Laska (сайт Музея истории ГУЛАГа, сайт студии Petrick).

⏰ 20:10–20:40
Точка входа в дизайн

Расскажем, как Яндекс Практикум учит специальностям в дизайне:

—> Как устроен процесс обучения
—> Как работает коммьюнити и сопровождение студентов
—> Как мы помогаем найти работу
—> Как можно попробовать учиться бесплатно

Спикер — Елена Мойся, продуктовый дизайнер в Хорошколе, наставник и ревьюер в Яндекс Практикуме.

Яндекс выпускает DivKit, открытую платформу для серверного пользовательского интерфейса | от Тайринн | Яндекс

Привет! Яндекс только что выложил DivKit в открытый доступ. Это фреймворк для серверного рендеринга пользовательского интерфейса; вы можете использовать этот подход, чтобы ускорить разработку приложения. Это позволяет развертывать серверные обновления для разных версий приложения. Кроме того, его можно использовать для быстрого прототипирования пользовательского интерфейса, позволяя вам написать макет один раз, а затем отправить его на платформы iOS, Android и веб-платформы.

Платформа включает в себя несколько инструментов: клиентскую часть для рендеринга пользовательского интерфейса и DSL для создания описания пользовательского интерфейса в Kotlin, TypeScript и Python. Исходный код доступен на GitHub под лицензией Apache 2.0.

На данный момент мы используем DivKit в приложении Яндекс, голосовом помощнике Алиса, Edadeal (сервис, который отслеживает скидки в продуктовых сетях), платформе электронной коммерции Маркет, приложении Smart TV и некоторых других. В этом посте я начну с воспоминаний об истории фреймворка. После этого мы напишем скромный просмотрщик лент блогов на Medium, а в завершение я продемонстрирую несколько интересных примеров интеграции.

Долгое время мы в команде приложения Яндекса задавались вопросом, как быстрее донести изменения до наших пользователей. Главная страница приложения Яндекс состоит из карточек, каждая из них может быть использована для решения задачи пользователя. Например, карта может показывать прогноз погоды, пробки на маршруте или перекрытие дорог в городе. Но как мы можем предупредить человека, если станция метро закрылась, начался внезапный град или произошло что-то еще, что требует немедленного изменения как данных, так и пользовательского интерфейса?

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

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

Это привело к первой версии Divs, состоящей из высокоуровневых семантических блоков. Сервер будет отправлять минимальную информацию:

 { 
 «type»: «title», 
 «title»: «Hello World!», 
 «title_style»: «title_s» 
 }

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

Около года все шло хорошо. Запуск новой карты и игра с ее внешним видом и содержимым заняли бы всего неделю. Это позволило нам создать множество карточек и легко интегрировать новые сервисы в основную ленту приложения. Достичь идеального пикселя от макета до производства не составило большого труда: если все элементы макета были переданы правильно, в производстве они выглядели одинаково.

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

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

Нашими базовыми элементами стали текст, изображение, линейный контейнер для размещения элементов и сетка.

В качестве примера, вот список параметров, которые в настоящее время могут быть настроены для текстового элемента:

font_size
font_family
line_height: межстрочный интервал (межстрочный интервал) текстового диапазона. Счет начинается с базовой линии шрифта.
max_lines: максимальное количество строк, которые не будут усечены при выходе за пределы.
min_hidden_lines: Минимальное количество усеченных строк при выходе за пределы.
auto_ellipsize: Автоматическое усечение текста в соответствии с размером контейнера.
letter_spacing
font_weight
text_alignment_horizontal
text_alignment_vertical
text_color
focus_text_color: Цвет текста при фокусировке на элементе.
text_gradient: Цвет градиента текста.
текст: сам текст.
underline: подчеркивание текста.
страйк: зачеркнутый текст. Диапазоны
: Диапазон символов, в пределах которого могут быть установлены дополнительные параметры стиля. Определяется обязательными полями начало и конец .
изображений: изображения, встроенные в текст.
многоточие: маркер обрезки текста; отображается, когда размер текста превышает ограничение на количество строк
. Доступно для выбора: Выбор и копирование текста.

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

За это время мы почти не ретушировали DivKit, так как были довольны его возможностями. Технология вступила в свой «золотой век»: все карты можно было поставить на версии приложения до года, и они работали и функционировали одинаково на каждой версии.

Еще через год нам стало тесно с текущими функциями, так как мы хотели менять все с сервера, а не только карточки в ленте.

Итак, медленно, но верно, основной заголовок (который мы внутри называем «Bender») также переместился в Divs. Профиль пользователя, нижний лист и другие блоки также включают элементы Div.

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

Edadeal

Каждый сценарий продукта в мобильном приложении Edadeal представляет собой отдельное мини-веб-приложение. Такой подход имеет свои преимущества, но те экраны, где важно поддерживать нативную скорость и плавность загрузки, например главный экран, реализованы без использования веб-технологий. В результате главный экран не мог развиваться так же быстро, как остальные разделы приложения.

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

Это история создания Mosaic, автономного сервиса для создания экранного пользовательского интерфейса. Он основан на DivKit — инструменте для пользовательского интерфейса, управляемого серверной частью. В дополнение к Mosaic мы создали редактор WYSIWYG для удобства дизайнеров макетов и администраторов домашней страницы. Mosaic разрабатывается уже почти два года и продолжает пополняться новыми функциями.

Яндекс Маркет

Команда Маркета рассмотрела несколько вариантов:

Создание специального движка для кроссплатформенной разработки. Дорого и непрактично.
Flutter/React Native. Дорого в обучении и интеграции в текущий проект, непродуктивно, а гибкость конфигурации ограничена.
КММ. Это не решает проблему компоновки и не позволяет динамически изменять бизнес-логику.

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

В плане интеграции все прошло гладко. Все, что потребовалось, это:

Подключение библиотеки с предварительно предоставленным образцом приложения и документацией в качестве справочной информации.
Написание шаблонов для существующих функций с последующим вызовом их непосредственно из DivKit.
Отправка серверного макета на iOS и Android.

Яндекс ТВ

Это приложение — особый случай: прошивка Smart TV обновляется гораздо реже, чем обычные приложения, а цена ошибки слишком высока. Пользовательский интерфейс, управляемый сервером, позволяет нам тестировать гипотезы с желаемой периодичностью, внедрять новые функции сразу после их появления и лишь изредка выпускать новые прошивки. Один из модулей актуальной главной страницы Яндекс ТВ построен с использованием DivKit.

Мы напишем супер-простую программу просмотра лент блогов Medium для Android и iOS.

Во-первых, нам нужно создать конфигурацию DivKit для запуска библиотеки. Для Android это выглядит так:

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

.supportHyphenation(true) — включаю переносы по слогам. Это нужно сделать явно, потому что включение переносов по умолчанию может привести к падению производительности.

.typefaceProvider(YandexSansTypefaceProvider(this)) — подключаемый шрифт. Yandex Sans поставляется в отдельном пакете и не входит в основной модуль.

.visualErrorsEnabled(true) — включение сообщений об ошибках на мой взгляд. Это упрощает отладку: я увижу счетчик в верхнем левом углу, если в моем макете div есть какие-либо ошибки. Эти визуальные подсказки помогают сократить время разработки. Естественно, я буду отключать сообщения об ошибках в рабочей версии.

Вот версия для iOS:

DivKitComponents — фронт для работы с DivKit

updateCardAction — вызывается, когда DivKit хочет обновить вид еще немного об обработке ошибок в Divs. Если макет недействителен, неправильные блоки просто игнорируются и удаляются из рендеринга. Какие случаи считаются недействительными? Например, если нет "текст" 9Поле 0053 обязательно для текстового элемента div, элемент div не будет отображаться. Контейнер должен иметь хотя бы один дочерний элемент из "элементов" . Это и другие правила описаны в нашей схеме JSON.

Время парсить JSON. Давайте просто воспользуемся предустановленными данными: DivKit все равно, откуда берется макет.

Android:

iOS:

DivJson — структура, в которую десериализуется ответ нашего сервера.

DivData.resolve() — создает макет карты на основе данных из ответа.

«Что такое divJson.optJSONObject («шаблоны») ?» Вы можете спросить. Макет состоит из данных и шаблонов, необходимых для того, чтобы код был кратким и легким для понимания. Шаблон должен иметь тип div или наследовать его от другого шаблона с этим типом.

Если нам нужно вставить данные в определенные поля, мы должны пометить их знаком $ в имени поля. Пример: "$text": "card_title" , где "card_title" — имя поля шаблона.

Вот как будут выглядеть шаблоны карточек:

Вставка данных в шаблон:

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

Давайте добавим фабрику представлений. Android:

DivParsingEnvironment — библиотека разобранных шаблонов, которые будут использоваться при создании карточек. С помощью метода createView мы создаем представление из шаблонов и данных. В конструкторе фабрик мы упомянули DivContext , который аналогичен классу контекста Android и используется для тех же целей: в данном случае для разделения зависимостей между представлениями.

Здесь для создания контекста:

 val divContext = Div2Context(baseContext = this, configuration = createDivConfiguration())

Нам нужно добавить данные в представление: setData(divData, DivDataTag(divData,logId) . DivData is объект передачи данных карты, состоящий из шаблонов и данных

iOS:

component.makeContext() — создание контекста. Для этого нам нужно передать идентификатор карты, уникальный в контексте, а также хранилище изображений, чтобы изображения не мерцали при повторном использовании.

block.reuse() создаст новое представление или повторно использует существующее.

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

В заключение позвольте мне показать еще один пример интерфейса на основе DivKit. С помощью переменных и функций можно построить, например, виджет палитры цветов:

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

Наши краткосрочные планы включают:

Поддержка новых ограничений макета
Поддержка использования DivKit в приложениях Flutter
Дополнительные высокоуровневые компоненты, основанные на DivKit

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

Кроме того, мы сделали для вас песочницу, с которой вы можете поэкспериментировать. Вы можете попробовать разные образцы в веб-редакторе и посмотреть результаты в Интернете или в демонстрационном приложении для Android, оба из которых доступны в Google Play. Вскоре мы опубликуем демо-приложение для iOS. Пользовательский интерфейс в демо-версии можно обновлять в режиме реального времени: песочница подключается к демо-приложению через веб-сокеты. Вы можете использовать веб-сайт DivKit, чтобы найти много полезных примеров и документации, но не стесняйтесь спрашивать нас здесь, в комментариях или в чате сообщества Telegram.

`Экспорт данных из Яндекс Метрики через Logs API`

Статьи Яндекс Метрики

yandex metrica

с бесплатным готовым рабочим пространством Postman

Logs API предназначен для получения неагрегированных данных, хранящихся в Яндекс Метрике. Кто-то может также назвать это сырыми данными, но на самом деле это слегка преобразованные* данные. * автор этой статьи предполагает, что YM работает с расширенными наборами данных, недоступными для экспорта.

Веб-аналитики могут столкнуться с трудностями при получении данных через API, поскольку для этого требуются некоторые технические навыки, которые редко требуются в их повседневной работе. Эта статья представляет собой пошаговое руководство в помощь всем, у кого нет опыта и навыков работы с API (Application Programming Interface).

`Зачем использовать Logs API`

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

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

Чтобы помочь вашим дружественным дата-инженерам обогатить DWH или Data Lake данными Metrica. Им нужно будет понимать структуру данных, варианты подключения и многие другие аспекты того, как использовать данные веб-аналитики. Имея хотя бы общее представление о том, что такое журналы, вы сможете эффективно сотрудничать с командой во время проекта.

Расширяя предыдущий пункт, если вы являетесь инженером данных или членом команды, создающей что-то надежное на данных YM, то Logs API — это обязательный строительный блок, который вы должны хорошо знать.

`Предоставление доступа`

Начнем с получения учетных данных для подключения к Logs API, так как доступ, предоставленный для запуска отчетов в пользовательском интерфейсе Метрики, недостаточен.

Откройте эту страницу https://yandex.com/dev/metrika/ и нажмите «Получить токен доступа OAuth» (или просто перейдите по этому URL https://oauth. yandex.com/client/new ).

Вы будете перенаправлены на страницу авторизации Яндекса, войдите в систему, используя свои обычные учетные данные, которые вы используете для пользовательского интерфейса отчетности Метрики (учетная запись Яндекса), если вы еще не прошли аутентификацию.

Заполните форму:

1. Имя службы - так учетные данные будут отображаться в дальнейшем. Например, вы можете ввести «Яндекс Метрика — название вашей компании».

2. Установите флажок Веб-службы и щелкните синюю ссылку, расположенную под полем URL-адрес обратного вызова, чтобы заполнить его значением по умолчанию, как показано на снимке экрана 9.0232 https://oauth.yandex.com/verification_code

3. Прокрутите список сервисов, если не найдете Яндекс.Метрику, разверните его и поставьте галочку " Доступ к статистике и возможность просмотра всех настроек счетчика " . Этого будет достаточно для получения отчетов и экспорта данных через Logs API.

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

Вы получите подтверждение об успешном создании приложения и информацию, необходимую для подключения через Logs API: - ClientID (*не путать с ClientID, используемым для идентификации посетителей в YM) - Секрет клиента

Когда вам нужно вернуться на эту страницу (к учетным данным приложения), используйте эту ссылку https://oauth.yandex.com

`Почтальон`

Если вы никогда не работали с API, советую использовать Postman. Он доступен в виде приложения как для Windows, так и для macOS.

Использовать публичную рабочую область для работы с API Яндекс Метрики по этой ссылке ваш личный тег. Поэтому, если у вас нет данных в собственном теге, вы можете подключиться к тегу Demo.

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

Настроим среду. Если вы не использовали Postman, обратите внимание, что все, что вы будете вводить, останется с вами, ничего не будет передано кому-либо по замыслу, вы просто используете предварительно настроенный шаблон.

1. Выберите Среды, выберите "Яндекс Метрика Мой Счетчик Тестов" (переименовать можно после создания копии рабочей области под учетной записью Почтальона) 2. Заполнить ячейки таблицы в столбце ТЕКУЩЕЕ ЗНАЧЕНИЕ: yandex_client_id: ClientID yandex_access_token: Секрет клиента yandex_counter_id: Номер тега Яндекс Метрики, к которому вы хотите подключиться

Затем перейдите в Коллекции, чтобы открыть список предварительно настроенных методов для использования API Яндекс Метрики.

Evaluate - проверяет, может ли запрос, который вы собираетесь запланировать, вообще быть обработан Яндексом (возможно ли запустить такой экспорт данных?)
Создать - создает запрос (задание) на экспорт данных
GetInfo - возвращает статус для данного запроса, чтобы проверить, доступны ли данные уже для загрузки или они еще готовятся
GetList - возвращает информацию обо всех запросах
Загрузить - загрузить успешно обработанные запросы
Очистить - удалить ранее созданный запрос

`Начать работу с Logs API`

Нажмите Создать и заполните таблицу:

источник - название таблицы (посещений или просмотров)
дата1 - первая дата отчетного периода
дата2 - последняя дата отчетного периода отчетный период
поля - список полей через запятую (параметры и показатели). По умолчанию значение сопоставляется с переменной среды для извлечения всех полей. Не изменяйте его, если не хотите сузить вывод.

Выберите свою среду (в правом верхнем углу).

Нажмите Отправить .

Вы увидите ответ, как показано ниже:

Это означает, что запрос был успешно получен и теперь он готовится. Скопируйте назначенный request_id.

Теперь нужно немного подождать, пока данные будут готовы к загрузке. Переключитесь на GetInfo , заполните ЗНАЧЕНИЕ с request_id и нажмите Отправить.

Когда данные будут готовы для загрузки, вы увидите "статус": "обработано" в ответе. Если набор данных, подготовленный по запросу, относительно большой, он будет разделен на несколько частей. Проверьте, сколько частей указано в ответе (массив «parts», а внутри «part_number», начиная с нуля).

«Дизайн интерфейсов» — Яндекс Кью

5 разных историй о дизайнерах, которые делают Яндекс Маркет»

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

Яндекс выпускает DivKit, открытую платформу для серверного пользовательского интерфейса | от Тайринн | Яндекс

Edadeal

Яндекс Маркет

Яндекс ТВ

Экспорт данных из Яндекс Метрики через Logs API

Зачем использовать Logs API

Предоставление доступа

Почтальон

Начать работу с Logs API

Добавить комментарий Отменить ответ

`Экспорт данных из Яндекс Метрики через Logs API`

`Зачем использовать Logs API`

`Предоставление доступа`

`Почтальон`

`Начать работу с Logs API`

`Добавить комментарий Отменить ответ`