🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
В этом примере кнопка отправки отключена, потому что поля не заполнены. Это помогает избежать вывода бессмысленных сообщений об ошибках вроде «Чтобы оставить комментарий, укажите комментарий».
Но отключать кнопки стоит осторожно. Так не стоит делать в формах с единственным полем поиска: из‑за отключенной кнопки кажется, что вся форма недоступна:
Об отключении кнопок в форме:
Обратная связь 158
В этом примере кнопка отправки отключена, потому что поля не заполнены. Это помогает избежать вывода бессмысленных сообщений об ошибках вроде «Чтобы оставить комментарий, укажите комментарий».
Но отключать кнопки стоит осторожно. Так не стоит делать в формах с единственным полем поиска: из‑за отключенной кнопки кажется, что вся форма недоступна:
Об отключении кнопок в форме:
Обратная связь 158
Ещё один важный случай, когда отключение кнопок нежелательно — страницы, где пользователь принимает решение о покупке. В интересах бизнеса сделать всё, чтобы кнопка сработала, раз уж человек её нажал.
На сайте автопроката «Энви», созданном в бюро, кнопка «Арендовать» нажимается, даже если вдруг выбранная машина оказалась занята на выбранные даты. Если клиент готов заплатить, не стоит ему мешать. Если что, прокат предоставит взамен автомобиль более высокого класса, и клиент будет доволен.
Ещё один важный случай, когда отключение кнопок нежелательно — страницы, где пользователь принимает решение о покупке. В интересах бизнеса сделать всё, чтобы кнопка сработала, раз уж человек её нажал.
На сайте автопроката «Энви», созданном в бюро, кнопка «Арендовать» нажимается, даже если вдруг выбранная машина оказалась занята на выбранные даты. Если клиент готов заплатить, не стоит ему мешать. Если что, прокат предоставит взамен автомобиль более высокого класса, и клиент будет доволен.
Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.
По мере заполнения сложной формы подпись под кнопкой может меняться, подсказывая, что осталось заполнить. Перечислены незаполненные группы полей.
Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.
Осталось последнее поле.
Когда всё заполнено, под кнопкой полезно написать, что будет дальше.
Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.
По мере заполнения сложной формы подпись под кнопкой может меняться, подсказывая, что осталось заполнить. Перечислены незаполненные группы полей.
Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.
Осталось последнее поле.
Когда всё заполнено, под кнопкой полезно написать, что будет дальше.
В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.
Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.
В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.
Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.
В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.
Способы навигации связаны со структурой информации: на иерархическом сайте может быть древовидное меню, а в программе‑мастере — кнопки «Вперёд» и «Назад».
Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.
Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.
В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.
Способы навигации связаны со структурой информации: на иерархическом сайте может быть древовидное меню, а в программе‑мастере — кнопки «Вперёд» и «Назад».
Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.
Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015