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