Илья Бир­ман

Пользовательский интерфейс

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

Пользовательский интерфейс

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

Скрыто 405 разворотов

При­ве­дён­ные выше реко­мен­да­ции о фор­мах и тек­сте помо­гут наве­сти поря­док в пре­де­лах отдель­ного экрана.

Но для про­дукта важны узна­ва­е­мость, при­вычка, ощу­ще­ние порядка и неслу­чай­но­сти. Для еди­но­об­ра­зия экра­нов созда­ются гайд­лай­ны, где систе­ма­ти­зи­ру­ются раз­меры и рас­сто­я­ния между элементами.

Пример типографических гайдлайнов для элементов управления

Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.

Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.

Пример типографических гайдлайнов для элементов управления

Исполь­зо­ва­ние еди­ной сетки не только улуч­шает вос­при­я­тие дизайна, но и помо­гает созда­вать слож­ные продукты.

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

Рас­смот­рим сетку видже­тов спра­воч­ных систем «Актиона».

Сверху все­гда заго­ло­вок и блок ста­ти­стики. Снизу может быть поле поиска или спе­ци­аль­ный эле­мент типа кнопки или ссылки. В цен­траль­ной части чаще всего — спи­сок. В раз­ных видже­тах исполь­зу­ются раз­ные цвета и шрифты, но сетка сохраняется.

Если спе­ци­аль­ного эле­мента снизу нет, в списке на один пункт больше. Если списка нет, в цен­тре может нахо­диться таб­лица или гра­фик. В цен­тре виджета видео­се­ми­на­ров — кадр све­жего видео.

Эта сетка была при­ду­мана для вто­рой вер­сии «Системы Кадры» и позже рас­про­стра­ни­лась на новые вер­сии всех спра­воч­ных систем, полу­чив чуть больше сво­боды. Тогда виджет видео­се­ми­на­ров изба­вился от заголовка.

Новый виджет «Выс­шей школы глав­буха» отоб­ра­жает успехи в школе и моти­ви­рует учиться дальше. Виджет сер­виса «Отчёты» помо­гает отправ­лять отчёты в госорганы.

Виджет сер­виса «Дого­воры» пока­зы­вает и даёт найти нуж­ный дого­вор. Если каким‑то из сер­ви­сов чело­век не поль­зу­ется, то виджет умеет отоб­ра­жаться в «про­мо­ре­жиме» — про­сто рас­ска­зы­вает о сер­висе и при­гла­шает воспользоваться.

Для рекламы буду­щих про­дук­тов создан шаб­лон промовиджета.

Когда есть пра­вила и огра­ни­че­ния, сде­лать новый эле­мент — быст­рее и дешевле, и при этом он полу­ча­ется хорошо почти сам собой.

Рассмотрим сетку виджетов справочных систем «Актиона».

Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.

Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.

Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.

Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.

Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.

Для рекламы будущих продуктов создан шаблон промовиджета.

Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.

Система Главбух

Система Кадры

Система Юрист

Еди­ная сетка исполь­зу­ется во всей семье спра­воч­ных систем «Акти­она». Поэтому неко­то­рые виджеты, такие как «Пра­во­вая база», исполь­зу­ются в них без изменения.

Для при­да­ния систе­мам инди­ви­ду­аль­но­сти доста­точно фир­мен­ной цве­то­вой и шриф­то­вой схем.

Система Главбух

Единая сетка используется во всей семье справочных систем «Актиона». Поэтому некоторые виджеты, такие как «Правовая база», используются в них без изменения.

Система Кадры

Для придания системам индивидуальности достаточно фирменной цветовой и шрифтовой схем.

Система Юрист

Сле­ду­ю­щий уро­вень систе­ма­ти­за­ции — на уровне опе­ра­ци­он­ной системы. В Андро­иде регла­мен­ти­ро­ван набор исполь­зу­е­мых кег­лей и свя­зан­ных с ними интерлиньяжей.

Весь текст вырав­ни­ва­ется по четы­рёх­пик­сель­ной сетке базо­вых линий.

Следующий уровень систематизации — на уровне операционной системы. В Андроиде регламентирован набор используемых кеглей и связанных с ними интерлиньяжей.

Весь текст выравнивается по четырёхпиксельной сетке базовых линий.

Скрыто 6 разворотов

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Бирман Илья Борисович

Пользовательский интерфейс

  • Арт‑директор и издатель Артём Горбунов

  • Дизайнер обложки и фотограф
    Владимир Колпаков

  • Иллюстратор Андрей Кокорин

  • Разработчики Рустам Кулматов
    и Василий Половнёв

  • Метранпаж и тестировщик Сергей Фролов

  • Помощники Юрий Мазурский
    и Александра Шабалдина

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось