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