Илья Бир­ман

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

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

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

 
между важными местами
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

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

Какой бы про­ду­ман­ной ни была иерар­хия, её при­ду­мал кто‑то дру­гой. Поль­зо­ва­тель может пред­став­лять себе вза­и­мо­связь функ­ций или стра­ниц иначе, чем автор. Это при­во­дит к ошиб­кам, и чем больше в иерар­хии уров­ней, тем слож­нее что‑то найти. В отли­чие от после­до­ва­тель­но­сти, иерар­хия сопро­тив­ля­ется даже поиску перебором.

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

Какой бы продуманной ни была иерархия, её придумал кто‑то другой. Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор. Это приводит к ошибкам, и чем больше в иерархии уровней, тем сложнее что‑то найти. В отличие от последовательности, иерархия сопротивляется даже поиску перебором.

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

Най­дите котика в трёх­до­мен­ной клас­си­фи­ка­ции био­ло­ги­че­ских видов.

Найдите котика в трёхдоменной классификации биологических видов.

Меню — не един­ствен­ный спо­соб нави­га­ции по иерархии.

Шаб­лон «спи­сок — объ­ект» из главы «Окна» — при­мер реа­ли­за­ции двух­уров­не­вой иерар­хии. В поч­то­вой про­грамме уров­ней уже больше: на пер­вом уровне поч­то­вые ящики, на вто­ром — спи­сок писем, на тре­тьем — отдель­ные письма. В Файн­дере на Маке уров­ней может быть сколько угодно — он умеет пока­зы­вать иерар­хию фай­ло­вой системы колонками.

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

Меню — не единственный способ навигации по иерархии.

Шаблон «список — объект» из главы «Окна» — пример реализации двухуровневой иерархии. В почтовой программе уровней уже больше: на первом уровне почтовые ящики, на втором — список писем, на третьем — отдельные письма. В Файндере на Маке уровней может быть сколько угодно — он умеет показывать иерархию файловой системы колонками.

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

В иеар­хи­че­ском при­ло­же­нии кнопка «Назад» может вести не на преды­ду­щий, а на роди­тель­ский экран. Когда в интер­фейсе соче­та­ется иерар­хи­че­ская и после­до­ва­тель­ная нави­га­ция, кно­пок «Назад» ста­но­вится две — как в левом верх­нем углу Айфона. Малень­кая чёр­ная кно­почка ведёт в преды­ду­щее при­ло­же­ние, из кото­рого я пере­шёл по ссылке. Боль­шая синяя — на роди­тель­ский экран этого при­ло­же­ния. К сожа­ле­нию, это порож­дает путаницу.

Кстати, кнопка «домой» при этом тоже ведёт назад по иерар­хии — на домаш­ний экран.

В иеархическом приложении кнопка «Назад» может вести не на предыдущий, а на родительский экран. Когда в интерфейсе сочетается иерархическая и последовательная навигация, кнопок «Назад» становится две — как в левом верхнем углу Айфона. Маленькая чёрная кнопочка ведёт в предыдущее приложение, из которого я перешёл по ссылке. Большая синяя — на родительский экран этого приложения. К сожалению, это порождает путаницу.

Кстати, кнопка «домой» при этом тоже ведёт назад по иерархии — на домашний экран.

Фильтры

Дан­ные обла­дают мно­же­ством «изме­ре­ний». Одежду можно клас­си­фи­ци­ро­вать по типу, бренду, отделу, стилю, сце­на­риям носки, полу, цвету, мате­ри­алу, раз­меру, цене. При этом одно­знач­ную иерар­хию постро­ить не полу­ча­ется: сви­тер «Напа­пийри» может жить и в раз­деле Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.

Когда поль­зо­ва­телю нужно найти что‑то среди тысяч пред­ме­тов, помо­гут филь­тры. Вме­сто того, чтобы уга­ды­вать, какую иерар­хию заду­мал автор, чело­век настра­и­вает пара­метры независимо.

Фильтры
Яндекс.Маркета

Фильтры
Яндекс.Маркета

Фильтры

Данные обладают множеством «измерений». Одежду можно классифицировать по типу, бренду, отделу, стилю, сценариям носки, полу, цвету, материалу, размеру, цене. При этом однозначную иерархию построить не получается: свитер «Напапийри» может жить и в разделе Зима → Свитеры → Напапийри, и в Мужчинам → Напапийри → Трикотаж.

Когда пользователю нужно найти что‑то среди тысяч предметов, помогут фильтры. Вместо того, чтобы угадывать, какую иерархию задумал автор, человек настраивает параметры независимо.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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