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