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