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