Книга, которая помогает действительно понять UX/UI

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

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

«Путеводитель по кнопкам» — практическая книга о UX/UI, которая объясняет не как сделать красиво, а как интерфейсы действительно работают. Она показывает, что привычные элементы интерфейса возникли не случайно, а сформировались в результате эволюции и селекции работающих решений.

История интерфейсов от Xerox Alto до Vision Pro

«Путеводитель по кнопкам» — практическая книга о UX/UI-дизайне, которая объясняет не как сделать красиво, а как действительно работает интерфейс.

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

Книга состоит из трех частей:

• Настольные интерфейсы от Xerox и Apple Lisa до macOS и Windows.
• Мобильные интерфейсы от Apple Newton до iPhone и Android.
• Смешанная реальность. Интерфейс шлемов Quest и Vision Pro.

История интерфейсов от Xerox Alto до Vision Pro

Книга имеет стройную историческую линию. Она начинается с изобретения первого графического интерфейса в лаборатории Xerox, а заканчивается на суперсовременном шлеме дополненной реальности Vision Pro. Автор шаг за шагом проводит читателя через развитие дизайна от первых компьютеров к современным настольным и мобильным системам.

Появление первых GUI, революция Newton и iPhone, гонка интерфейсов Windows и Mac OS, рождение и смерть скевоморфизма, победа плоского дизайна и переход от библиотек стилей к дизайн-системам — обо всем этом книга рассказывает не только с пользой, но и невероятно интересно.

История интерфейсов так классно вшита в повествование, что книга даже снабжена хронологической шкалой, разбитой на исторические эпохи.

Анатомия интерфейса

Каждая глава книги посвящена одному компоненту. Книга разбирает кнопки, чекбоксы, текстовые поля, меню, выпадающие списки на уровне анатомии: из чего они состоят, какие состояния имеют и почему одни решения работают, а другие — нет.

Книга показывает:

• из чего состоит каждый компонент,
• какие состояния он может иметь и зачем они нужны,
• как форма и поведение влияют на восприятие,
• почему компоненты интерфейса стали именно такими.

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

Энциклопедия UX/UI-дизайна

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

«Путеводитель по кнопкам» решает эту задачу. Книга написана как настоящая энциклопедия UI/UX-дизайна и работает как настольный справочник для повседневной работы.

Внутри — более 500 иллюстраций, схем и скриншотов из 180 реальных интерфейсов известных приложений и сервисов, включая Google Docs, Notion, Airbnb, Uber, Яндекс.Карты, Т-Банк и Telegram.

Это не абстрактные паттерны и не теоретические схемы, а проверенные практикой решения. Книга формирует насмотренность и помогает быстро находить подходящие примеры.

Интерактивные страницы

Структура книги позволяет пропускать сложные места и возвращаться к ним позднее.

Кроме того, на страницах разбросаны 35 QR-кодов, что делает ее по-настоящему интерактивной. Не понятен материал? Просто наведите телефон — и посмотрите видеоурок или прочитайте статью.

Руководство по созданию дизайн-системы

«Путеводитель по кнопкам» — это не только история и энциклопедия, но и практическое руководство по созданию дизайн-систем.

Книга показывает, как строят дизайн-системы в крупных компаниях. В основе описан простой и наглядный подход: каждый компонент представляется в виде матрицы стилей и состояний.

Такие матрицы:

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

После прочтения читатель научится проектировать профессиональные дизайн-системы, которые используюся в крупных продуктах.

Дизайн начинается не в Фигме

Сегодня дизайн все чаще сводится к внешней стороне: цветам, шрифтам и скруглениям. Как интерфейс устроен и почему он работает именно так, обсуждается заметно реже.

«Путеводитель по кнопкам» возвращает дизайнерам дизайн. Книга показывает, как проектировать интерфейсы не на основе спорных UX-исследований и трендов, а исходя из априорной логики и свойств человеческого восприятия.

Последний раз с такой позиции о дизайне интерфейсов писал Джеф Раскин в своей книге «Интерфейс», вышедшей в 2000 году. С тех пор интерфейсы сильно усложнились, а понимание их природы еще больше ослабло. Эта книга — попытка восстановить утраченный фундамент.

Об авторе

Андрей Маркелов — дизайнер, писатель, путешественник, лауреат международных наград в области дизайна интерфейсов.

Победитель конкурса AIGA 365, проводимого Американским институтом графических искусств, основанным в 1914 году. Обладатель золотой награды W3 Awards. Включен в список лучших дизайнеров 2023 года по версии CSS Design Awards.

Автор популярных статей о дизайне таблиц и инфографике, прочитанных более 100 тысяч раз. Обладатель грин-карты США для людей с выдающимися достижениями в области дизайна.

Посетил более 80 стран. Автор медиапроекта о путешествиях, мире и визуальной культуре — www.andrewmarcus.ru