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