Пять виджетов коротко
Все пять работают на одном фиде и настраиваются в одном конструкторе. Отличаются тем, что показывают читателю и сколько места занимают.
| Виджет | Что показывает | Инструментов | Плотность | На телефоне |
|---|---|---|---|---|
| Бегущая строка | Символ, цена и изменение в одной строке | От нескольких до 30 | Низкая: взгляд мельком | Хорошо, одна строка |
| Таблица котировок | Строки с ценой или bid/ask, спред, изменение, спарклайн | До 30 | Высокая: сравнение | Нужно меньше колонок |
| Карточка инструмента | Цена, изменение за день и форма движения | Один | Средняя | Хорошо, в колонке текста |
| Обзор рынка | Несколько классов активов на вкладках | Несколько на вкладку | Высокая, но по вкладкам | Хорошо, вкладки экономят место |
| Мини-график | Линия или свечи на выбранном таймфрейме | Один | Средняя: движение | Хорошо во всю ширину |
Бегущая строка: рынок в одной строке
Бегущая строка - компактная лента для шапки или подвала. Она показывает, что сайт следит за рынком, и не спорит с контентом: на неё смотрят мельком, а не изучают.
Ставьте её на весь сайт, в общую шапку или подвал, с инструментами, важными вашей аудитории: главные индексы, несколько валютных пар, золото, ведущие криптовалюты. Лента работает лучше, когда она достаточно короткая и знакомый символ возвращается через несколько секунд.
Таблица котировок: для сравнения
Виджет таблица котировок - живая таблица, строка на инструмент: цена последней сделки или bid и ask со спредом, изменение за день и спарклайн. Колонки выбираете вы.
Таблица нужна, когда читатель сравнивает: раздел рынков, лендинг брокера, страница для инвесторов. Это самый плотный виджет, ему нужно место - основная колонка, а не узкий сайдбар.
Колонки bid, ask и спред осмысленны на двусторонних рынках - forex, спот-металлы, акции США. На крипте, индексах, сырье и облигациях в фиде цена последней сделки, а на Free задержанные цены всегда одна цена, поэтому колонка спреда там мало что говорит. Почему - в статье bid, ask и спред.
Карточка: один инструмент в контексте
Карточка инструмента показывает цену, изменение за день и форму движения одного инструмента. Её место - рядом с текстом о нём: обзор рынка, страница продукта, новость. Несколько карточек подряд выглядят как таблица, потерявшая выравнивание: если в статье пять инструментов, небольшая таблица читается лучше.
Обзор рынка: несколько рынков на вкладках
Обзор рынка группирует инструменты по вкладкам - например, акции, валюты, крипта, сырьё. Названия, порядок и состав вкладок задаёте вы. Подходит для главной или хаба рынков, куда приходят с разными интересами. Держите вкладки короткими: каждая - маленькая таблица, и правила про место те же.
Мини-график: как двигалась цена
Мини-график рисует один инструмент линией или свечами на выбранном таймфрейме; при наведении видны цена и время под курсором. Ставьте его там, где движение важнее последней цифры: страница инструмента, сайдбар у аналитики, статья о тренде. Таймфрейм подбирайте под сюжет: внутридневной для новости дня, дневные свечи для обзора месяца. См. как из тиков строятся свечи.
Какой виджет под какую задачу
Начинайте с того, что читатель должен получить от страницы.
| Задача | Виджет | Почему |
|---|---|---|
| Держать рынок на виду на всех страницах | Бегущая строка | Одна строка, не отнимает места у контента |
| Табло цен на лендинге брокера | Таблица котировок | Bid/ask, спред и изменение рядом |
| Проиллюстрировать статью об одном инструменте | Карточка | Цена и движение рядом с абзацем |
| Показать тренд за новостью | Мини-график | Форма движения на нужном таймфрейме |
| Несколько рынков на главной | Обзор рынка | Вкладки держат классы активов компактно |
| Сравнить корзину инструментов | Таблица котировок | Строки и колонки созданы для сравнения |
Типичные ошибки
Чаще всего проблема не в виджете, а в месте, куда его поставили.
- Бегущая строка посреди основного текста: движение рядом с абзацами отвлекает от чтения. Её место - шапка или подвал.
- Таблица на 30 строк в сайдбаре: узкая колонка сжимает цифры и заставляет долго листать. Перенесите таблицу в основную колонку или сократите до важных инструментов.
- Колонка спреда у инструментов с ценой последней сделки: при bid = ask спред не нулевой, просто инструмент представлен одной ценой. Скройте колонку для таких строк.
- Несколько одинаковых виджетов на одном экране: две таблицы или строка и таблица с теми же символами повторяют друг друга.
- Задержанные цены как живые: на Free акции, индексы, сырьё и облигации идут с задержкой 15 минут и помечены. Не пишите о движении внутри дня так, будто читатель видит его вживую.
- Тема, спорящая со страницей: тёмный виджет в светлой статье выглядит как реклама.
Как выбрать тему
У каждого виджета три темы, плюс свой фон и акцентный цвет.
- Тёмная - для тёмных сайтов, а также для шапок и подвалов, которые уже тёмные. Цвета роста и падения на тёмном фоне читаются хорошо.
- Светлая - для статей на белом или светло-сером фоне; акцент задайте цветом ссылок сайта, и виджет будет выглядеть своим.
- Прозрачная - виджет берёт фон страницы; подходит для цветных и градиентных секций, контраст проверяйте на реальном фоне.
Если виджет должен повторять ваши шрифты, скругления и палитру целиком, для этого есть нативные виджеты Pro. Как поставить виджет - в статье как добавить котировки на сайт.
Частые вопросы
Какой виджет лучше для новостного сайта?
Новостному сайту обычно подходит бегущая строка в шапке плюс карточки или мини-графики внутри статей. Строка держит рынок на виду, карточка ставит цену рядом с текстом о ней.
Сколько инструментов помещается в виджет?
В бесплатный виджет в конструкторе помещается до 30 инструментов; карточка и мини-график показывают один. Виджеты Pro собирает наша команда, ограничение конструктора к ним не относится.
Можно ли поставить несколько виджетов на одну страницу?
Да, если у каждого своя задача. Строка в шапке и карточка в статье дополняют друг друга, две таблицы с одними и теми же инструментами - нет.
Нужен фид, о котором эта статья?
Расскажите, что вы строите и какие классы активов нужны. Ответим в течение одного рабочего дня: условия доступа и стоимость.