Обновить
100.91

Интерфейсы *

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

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

Вертикальный timeline для видео — спорно?

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

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

Читать далее

Новости

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

В этой статье я хочу поделиться своим видением того, каким должен быть удобный и информативный интерфейс 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.9K

В этой статье я хочу поделиться своим опытом настройки подключения 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.3K

Привет, Habr!

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

Читать далее

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

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

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

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

Этот набор инструментов будет полезен дизайнерам, потому что превращает работу с цветом из «на глаз» в системный процесс. Также часть из этих инструментов могут работать с 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.8K

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

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

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

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

Читать далее

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

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

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

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