Обновить
98.63

Интерфейсы *

То, что помогает ориентироваться

Сначала показывать
Порог рейтинга
Уровень сложности

Хотел сделать предустановленные теги. Передумал. Вот почему (кейс из моего SaaS-проекта)

Время на прочтение3 мин
Охват и читатели5.6K

В НормЦРМ есть раздел «Контакты». В него я добавил теги. И есть раздел «Регулярные платежи». В него я добавил категории. По сути — одно и то же.

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

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

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

Читать далее

Новости

Виджеты Windows: что с ними не так и как Microsoft пытается их исправить

Время на прочтение13 мин
Охват и читатели9.2K

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

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

Читать далее

Как мы овощехранилище автоматизировали, разработали свою SCADA и железо. Часть 2: Информативный интерфейс SCADA

Время на прочтение8 мин
Охват и читатели7.9K

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

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

При разработке я опирался на известную книгу «The High Performance HMI Handbook» (Hollifield, Oliver, Nimmo, Habibi), а также подсматривал интерфейс у Citect SCADA.

Читать далее

Никто не любит капчу. Редизайн турникета Cloudflare, который бесит всех

Уровень сложностиПростой
Время на прочтение14 мин
Охват и читатели8.4K

Вы это видели. Миллиарды раз. Но вряд ли запомнили. Небольшое окно с галочкой. Полноэкранная проверка перед входом на сайт. Что‑то, что встаёт между вами и нужной страницей и вежливо (или не очень) просит: “Докажите, что вы человек”.

Для всех это рутина. Лёгкое раздражение, которое мы научились не замечать. Но задумайтесь: какой интерфейс встречается в интернете чаще всего? “Гугл”? “Ютуб”? Нет.

Самый частый интерфейс в мире – это маленький турникет от Cloudflare. 7,67 миллиарда показов в день. Это больше, чем население Земли. И всё это время мы смотрели на него, но не видели. А если и видели, то, скорее всего, с мыслью: “Опять эта дурацкая капча”.

В Cloudflare решили, что с этим пора что‑то делать. Потому что даже у турникета есть право быть человечным.

Рассказываем, как компания перепридумала интерфейс, который видят все.

Читать далее

Как заставить старенькую Kindle показывать время прибытия автобусов

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели12K

Это история о том, как я превратила свою бывалую Kindle Touch в инструмент мониторинга времени прибытия автобусов с ежеминутным обновлением экрана и возможностью выйти из режима дашборда через кнопку меню. По сути, у меня получился TRMNL, только без ценника в $140.

Читать далее

Транслятор РПГ М-220. Рукописи не горят

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели14K

Со мной опять произошла какая-то мистика.

С тех пор как начал писать  серию статей под названием «Пятьдесят лет по стезе программирования», особенно когда готовил третью статью, мне хотелось найти рукопись с исходными кодами, написанного мною транслятора с языка РПГ (RPG) для ЭВМ М-220:

Читать далее

Как не делать таблицы (если вы очень стараетесь)

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели6.1K

Всем привет!

Я, Колядова Алиса, Senior дизайнер, работающая над B2B-системами внутри «одной из списка компаний, которые нельзя назвать».

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

Читать далее

5 ошибок accessibility в дизайне интерфейсов, которые ломают UX

Уровень сложностиПростой
Время на прочтение1 мин
Охват и читатели7.7K

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

Читать далее

Эволюция инструментария: как плагины Figma меняют профессию дизайнера интерфейсов

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели4.2K

Современный дизайн интерфейсов — это не только визуальная эстетика, но и скорость, согласованность и бесшовное взаимодействие с разработкой. 

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

В данной статье вы можете увидеть собранный топ плагинов дизайнеров «Северстали» для Figma.

К топам плагинов →

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

Время на прочтение14 мин
Охват и читатели5K

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Сегодня расскажу о реализации удобного функционала фильтрации и сортировки товаров.

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

Читать далее

Can bus на Orange pi 4 pro

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели5.8K

В этой статье я хочу поделиться своим опытом настройки подключения canbus модуля с контроллером MCP2515 к одноплатнику OrangePi 4 Pro. Дальнейшее описание основано на экспериментировании, общении с чат-ботами, и изучении руководства пользователя OrangePi_4_Pro_A733_User Manual_v1.4
Как известно в экосистеме Raspberry pi присутствует множество различных шилдов, и canbus не является исключением. На просторах сети достаточно статей на эту тему. Например здесь описано, как подружить MCP2515 CAN Bus Module с Raspberry pi zero. В нашем случае эта статья также будет полезной. Orange pi как и Raspberry GPIO оперируют 3.3V. А на MCP2515-модуле находится трансивер TJA1050, которому нужно подавать 5V. Есть уже готовые решения, но мы не ищем легкого пути, иначе бы и эта статья не появилась бы. Но основная проблема интеграции canbus-контроллера с OrangePi 4 Pro кроется в отсутствии скомпилированных драйверов для canbus в Orange pi OS для чипа Allwinner A733.
Доступно про протокол CAN можно почитать, например, в этой статье или более основательно в стандарте ИСО 11898-1.

Читать далее

От одного магазина к омни-сервису: как мы объединили 5 форматов в одном приложении

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели5.2K

Привет, Habr!

Я — Оля, продуктовый дизайнер в Lenta tech («Группа Лента»). В команде Growth отвечаю за привлечение новых пользователей и развитие омниканальных сценариев в «Онлайне». Вместе с командой нашей задачей было превратить приложение из сервиса для заказа продуктов на неделю в единое омни-приложение, которое закрывает другие покупательские сценарии: повседневные покупки с быстрой доставкой, эконом-формат, товары для животных и алкоголь (в самовывозе). В статье расскажу, что мы сделали в этом направлении, с какими сложностями столкнулись и какие результаты получили.

Читать далее

Продуктовая колористика: рабочий инструментарий

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели4.4K

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

Этот набор инструментов будет полезен дизайнерам, потому что превращает работу с цветом из «на глаз» в системный процесс. Также часть из этих инструментов могут работать с OKLCH и помогать в сборке палитры, пока Фигма нам даёт только расширенный гамут в виде переключателя на P-3, но не обзавелась переключателем на OKLCH внутри окна цветовой палитры.

Читать далее

Ближайшие события

Авторизация 2026: Почему вам больше не нужна форма регистрации (и как внедрить Яндекс ID, VK и Google)

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели7.3K

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

Давайте честно: если ваш пет-проект или стартап сегодня встречает юзера формой Email + Пароль + Повторите пароль, вы теряете конверсию. Никто не хочет запоминать очередной набор символов для "очередного сервиса". Все хотят одну кнопку: "Войти как...".

В этой статье разберем джентльменский набор авторизации для 2026 года: что ставить для рунета, что для мира, и как это реализовать технически на примере Яндекс ID.

Читать далее

Canvas-конфетти без библиотек: пишем систему частиц и физику на чистом JS

Уровень сложностиСредний
Время на прочтение21 мин
Охват и читатели7.4K

Привет! Я Сергей, разработчик. Когда мне понадобилась легкая анимация лайка в стиле YouTube, я столкнулся с проблемой: готовые решения либо слишком тяжелые, либо плохо дружат с прозрачностью в браузерах.

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

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

Читать далее

«Цифровое обрезание» для ВК Видео

Время на прочтение2 мин
Охват и читатели5.8K

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

Снова, снова и снова, речь пойдет о утерянной технологии древних Pan-N-Scan. 

Оставлю прелюдии на потом. Чё делать то? 

Добавляем всего одну иконку. Ставим ей два статуса вкл/выкл. Растягиваем контейнер с видео. И вуаля — наслаждаемся по настоящему Полноэкранным режимом, занимающим всю полезную площадь матрицы приобретенного устройства.

Читать далее

Разбор доступности Moni для незрячих пользователей: взгляд незрячего разработчика

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели5.2K

Доступность интерфейсов в web3 и финтех-проектах по-прежнему редко рассматривается как обязательная часть архитектуры. Чаще всего внимание уделяется визуальной составляющей и функциональности, тогда как сценарии использования без мыши или без экрана остаются вне фокуса. В этом разборе я анализирую доступность Moni с точки зрения незрячего пользователя (сам являюсь им) и параллельно даю конкретные технические рекомендации, которые могут улучшить удобство использования интерфейса в целом.

Читать далее

Как мы упростили компонент из 272 миллионов комбинаций в дизайн-системе Яндекс 360

Время на прочтение15 мин
Охват и читатели7.7K

Привет, Хабр! На связи Дима Мандельштам, мобильный разработчик в core‑команде Яндекс 360, и Лёша Карпенко, руководитель команды дизайн‑системы. Дизайн — часть повседневной работы наших команд, и он не живёт отдельно. Поэтому сегодня в статье мы вместе поговорим о том, как мы собирали компонент List‑item.

Мобильные разработчики в этой статье найдут метод, с которым можно достичь баланса между гибкостью кода и простотой поддержки. Мы расскажем, как применили data‑driven‑подход к рефакторингу UI: написали анализатор AST для поиска реальных паттернов использования и вывели математическую метрику сложности API. А ещё расскажем о том, как аргументировать и провести масштабную переработку legacy‑кода, не останавливая продуктовую разработку.

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

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

Читать далее

Дизайн интерфейса: когда лучше ничего не менять. Часть 2

Время на прочтение3 мин
Охват и читатели5.6K

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

Читать далее

Очередной пет-проект для проектирования интерфейсов

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели7.2K

Всем привет! Написал сервис для проектирования интерфейсов с возможностью импорта и экспорта Vue шаблонов.

Читать далее
1
23 ...