🔥 Typeahead в духе Spotlight выглядит как мелочь, но внутри это очень нетривиальный UI-паттерн
Обычный автокомплит показывает список под полем. Typeahead работает иначе: продолжение появляется прямо внутри строки, и за счет этого пользователь не прыгает взглядом между инпутом и выпадающим списком. На словах просто. На деле это почти полностью кастомное поведение, которое не совпадает с нативной логикой HTML-инпутов.
Флориан Шульц очень хорошо разбирает, почему такая штука сложнее, чем кажется. Сначала он попробовал идти через реальное выделение текста, но на iOS это сразу развалилось из-за ручек выделения и странного поведения браузера. Потом пришел к overlay-подходу, где completion рисуется поверх инпута отдельным слоем, а дальше началась настоящая инженерия: beforeinput, кастомная обработка backspace, скрытие каретки, переполнение текста и даже проблема кернинга, из-за которой буквы начинали прыгать при вводе.
Внутри:
– Чем typeahead отличается от обычного автокомплита со списком подсказок;
– Почему решение через реальное выделение текста ломается на мобильных;
– Как работает overlay-подход с отдельным слоем поверх инпута;
– Какие события приходится перехватывать, чтобы поведение было естественным;
– Почему стандартный Highlight не дает одинаковый результат в разных браузерах;
– Как обрабатывать состояния фокуса, очистки и переполнения текста;
– Откуда берется проблема с кернингом при разбиении строки на span;
– Как можно компенсировать этот сдвиг, не отключая кернинг полностью.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Stroke Icon Set — небольшой набор иконок
Спорим, что вы пробовали создавать свои буквы с нуля, но получалось не всегда?
Или получалось, но не выглядело лучше, чем если бы вы взяли готовый шрифт. Хотя вы всё делали ровненько и аккуратно.
Буквы кажутся простыми, потому что мы с ними с детства. Кажется, что мы знаем их досконально.
Но стоит приблизиться и оказывается, что они сложные, неправильные, даже в чём-то кривые. Замечали?
🤌 Бьюсь об заклад, что вы совершали ил продолжаете совершать несколько из этих ошибок:
1. Все буквы равной высоты
Например, буква О выше буквы П. Мелочь, но если её не учесть, то получится неаккуратно.
2. Буква И как перевёрнутая N
Они радикально отличаются. Просто есть шрифты, в которых это менее заметно. Ошибёшься и слово будет выглядеть глупо.
3. Буква Л как перевёрнутая V
Это показатель дилетанта. Русская буква Л – даже треугольной формы – имеет “клюшку”.
4. Одинаковые расстояния между буквами
Ну, было же? Даже если сейчас вы уже шарите за оптический кернинг.
5. Случайная геометрия букв в слове
Когда вы не выбираете форму буквы, а делаете как пойдёт. В результате получается “дёшево”.
6. Жёстко привязываетесь к линейкам
Устанавливаете одну-две горизонтали и привязываетесь к ним. Получается криво и не выглядит органично.
7. Одинаковые толщины штрихов, углы диагоналей
Кажется, что так будет красивее, но по факту получается ровно наоборот.
***
Перечитала пост и начало казаться, что напугала вас сложностью.
На самом деле всё не так уж сложно. Да, надо приноровиться, но вы справитесь – даже кайфовать будете.
А уж как это поднимет самооценочку и заткнёт за пояс синдром самозванца. Ух!
Оч жду встречи с вами на СТРИМЕ.
Фрагмент стены в Храме Гроба Господня в Иерусалиме.
Warp Tools
Плагин трансформирует любые объекты с помощью инструментов Smudge, Twirl, Bulge, Pinch, Arc и Free Transform
Install
Создаем красивый эффект логотипа Apple.
Генеральный директор Центра промышленного дизайна Лаб 20/50 Дарья Топильская выступила на Кавказском инвестиционном форуме в сессии «Бренды территорий: экономика локального производства Кавказа».
А давайте просто на красивое посмотрим?😍
Минутка решений:
Когда дизайнер услышал, что глюкоза в сладостях помогает креативности.
Сахар и сладости могут оказывать временное положительное влияние на креативное мышление, но этот эффект скорее связан с психологией и удовольствием, чем с питанием мозга, сообщают исследователи.
Анимации текста в стиле Apple by dadaew_m
Супер стильный туториал по использованию встроенного эффекта «Slide Up By Character» в After Effects для создания анимированного текста
#aftereffects