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