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