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