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