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