#анонс 7

Привет. С Дизайн-системой работает всё больше новых людей. И чтобы упростить знакомство с системой, мы собрали актуальную презентацию с подробным рассказом о её структуре, принципах и планах развития. И конечно всегда можно задать вопрос в чат:)

#обновление 5

Привет! выкатываем новые компоненты и обновления старых.

Что обновили:

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

Чекбокс
Уменьшили квадрат до 20×20, при этом контейнер остался прежний 24×24.
Дефолтный чекбокс сделали серым, теперь не так ядерно выглядит.
Добавили ховер.

Радиокнопки
По аналогии с чекбоксами сделали и радиокнопки, у них уменьшились кружки, и дефолтное состояние сделали серым.

Свитч
Подкоротили, они были длинные.

Теги
Перевели на автолэйаут, добавили мелкие теги, добавили новых состояний.

Чипсы
Перевели на автолэйаут, добавили новых состояний.

Инпуты
Уменьшили высоту контейнера инпута, он был больше видимой части, что вызывало вопросы. Пояснительный текст (Assistive text) под полем остался, но скрыт по умолчанию. Теперь удобнее пользоваться компонентом: не нужно каждый раз скрывать пояснительный текст (в большинстве случаев он не нужен). (в макетах придется вручную поджать размеры инпутов по высоте, к сожалению, избежать этой проблемы никак не получилось)

Дропдаун
Добавили к дропдаунам наконец выпадающий список со скроллом и без.

Что добавили:

Мультиселект
Дропдаун с возможностью выбора тегов из выпадающего списка.

Поле комментария

Скролл

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


История

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

#вводная

Всем привет! Сейчас пришло много новых людей в разные команды — дизайнеры, менеджеры, фронтендеры, аналитики, и все так или иначе будут пользоваться Дизайн-системой. Поэтому мы решили на всех провести краткую вводную. Сегодня в 17:00 расскажем, что есть в Системе сейчас, и как с ней работать. Подключайтесь все, кому интересно.

#голосование 2

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

#обновление 6

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

Что добавилось:
• SIM
• Phone
• Flickr
• Умный дом в двух вариантах
• Ключ в двух вариантах + цветная 32×32
• VIP
• Mobile refresh
• TV control
• Invoice
• Maestro цветная 32×32

#совет 1

Здравствуйте друзья, и вот настало время первого совета по использованию Дизайн-системы.
Сегодня мы кратенько расскажем про особенности цветовых стилей и прозрачность.
Дизайнеры привыкли задавать цвет объекту и прозрачность отдельно. Получается что это разные атрибуты одного объекта. Однако это не совсем удобно для фронтендеров.

В вёрстке удобнее и правильнее использовать именно стили в RGBa, когда прозрачность не является отдельным атрибутом, а входит в сам стиль. RGBa — где «red, green, blue» цвета соответственно, а «a» это альфа-канал, он же прозрачность. Таким образом уровень прозрачности задаётся глобально на всём проекте и становится меньше вероятностей для ошибок.
Мы заложили и систематизировали палитру Transparent с прозрачными стилями тёмной и светлой градации. Именно эти стили используются как фоны во всех наших компонентах

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

#обновление 7

Добавляем ещё новых иконок и меняем некоторые существующие. Обновляем мастеркард, маэстро и визу, иконку книжки сделали более узнаваемой, а также добавили замочные скважины в иконках замков.

Новые:

• Flag
• Voice
• Unlimited
• Game
• Drop
• Set of minutes
• Subscription
• Console
• Socket
• Motion
• Fire
• Light bulb
• Viber Stroke
• WhatsApp Stroke
• TamTam Stroke
• Office 366
• Licey Fill
• Licey Stroke
• Eset Nod + две цветных
• Dr. Web + цветная
• JCB

P.S. Собственно новые и обновленные иконки

#анонс 8

Друзья, мы написали важный текст под названием «Принципы валидации» (ссылка раз, ссылка два).
Этот короткий документ описывает верхнеуровнево наши рекомендации к оформлению полей и отработке форм на ошибки и действия пользователя.
А вот«Валидация полей», (раз, два) — это уже гайд, соблюдение которого, поможет выровнять UX в продуктах и проектах Ростелекома

#обновление 8

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

Новые:

Поле ввода E-mail. Инпут для адреса электронной почты с маской и валидацией, ссылка раз, ссылка два

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

Степпер. Полезный контрол для пошагового изменения параметра, раз, два

Поле ввода числа со степпером. Удобный инпут с кнопками плюс/минус для чисел, раз, два

Табы-кнопки / Радиогруппа. Два типа табов с кнопками. Акцентный привлекает внимание пользователя и пригодится на промо-сайтах. Стандартный подойдёт для интерфейсов и может использоваться как контрол для переключения состояния (радиогруппа), раз, два


Что обновили:

Обновленные классические табы. Перевели табы на Auto Layout. Используйте табы с прокруткой для контента с множеством вкладок. Табы фиксированной ширины хорошо подойдут для 2-3 вкладок в ограниченном пространстве, раз, два

К заголовку с кнопкой «Назад» добавилась версия для планшетов с горизонтальным размещением. Как и для десктопа, в этой версии кнопка «Назад» слева, заголовок у пятой колонки в сетке для 1024, раз, два

И мы удалили устаревшие кнопки с иконками, они были без автолэйаута, ими никто не пользовался, да и вообще иконки сейчас встроены во все кнопки)


P.S. как вы могли заметить, теперь мы указываем по две ссылки на каждый компонент — одна ссылка доступна из капсюля, а вторая из впн. Сайт идентичен по обеим ссылкам, отличается только домен. Таковы технические ограничения :) но они временные. Напишите в чат, если у вас есть сложности с доступом к сайту:)

Друзья, у нас пополнение инструментария! А именно внутренние контентные сетки. Звучит страшно, но работать с этим реально удобно. Они помогут вам быстро и просто разместить контент на странице с учётом адаптива. Описание раз, два
P.S. Также прилетит апдейт на кнопки, инпуты и лейблы, не переживайте, это техническое обновление, в макетах ничего не изменится

#голосование 3

Привет народ. Мы тут прорабатываем в Дизайн-Систему укороченные состояния кнопок, точнее кнопки-иконки. И праймари и секондари и вспомогательные кнопки. Так вот есть два варианта как их сделать:

1) Мы не добавляем новые компоненты, а используем текущие полные кнопки, в которых благодаря автолэйауту выключаем текст и оставляем одну иконки. Это работает, но кнопки продолговатые получаются, из-за боковых отступов

2) Второй вариант — мы добавляем новые компоненты, конкретно укороченные кнопки, и они квадратные.

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