Илья Бир­ман

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

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

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

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

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

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

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

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

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

Фильтры

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

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

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

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

Фильтры

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

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

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

Фильтр кар­ти­нок в «Гугле» помо­гает найти кар­тинки по раз­меру, цвету, пра­вам на исполь­зо­ва­ние. Для запроса «листья» даже добав­лен спе­ци­аль­ный фильтр по деревьям.

Хороший фильтр не вываливает на пользователя параметры из базы данных, а помогает решить задачу: подобрать подходящее жильё по цене или найти интересные концерты на определённые даты.

Фильтр картинок в «Гугле» помогает найти картинки по размеру, цвету, правам на использование. Для запроса «листья» даже добавлен специальный фильтр по деревьям.

Фильтр по цене

Сортировка по цене

При филь­тра­ции оста­ются только удо­вле­тво­ря­ю­щие усло­вию объ­екты. При сор­ти­ровке отоб­ра­жа­ются все объ­екты, но в выбран­ном порядке.

Для поль­зо­ва­теля филь­тра­ция и сор­ти­ровка часто рабо­тают похоже.

Сор­ти­ровка по цене — про­стой спо­соб уви­деть перед собой дешё­вые товары, не ука­зы­вая кон­крет­ную цену.

Ещё о фильтрах:

  • Технозависимость 15

Фильтр по цене

При фильтрации остаются только удовлетворяющие условию объекты. При сортировке отображаются все объекты, но в выбранном порядке.

Для пользователя фильтрация и сортировка часто работают похоже.

Сортировка по цене

Сортировка по цене — простой способ увидеть перед собой дешёвые товары, не указывая конкретную цену.

Ещё о фильтрах:

  • Технозависимость 15

Теги

Теги — слова, кото­рые как‑то опи­сы­вают стра­ницу или объ­ект. Обычно это тема: «кино», «музыка», «искус­ство» в жур­нале. Но теги могут отра­жать и дру­гие при­знаки, напри­мер в моём блоге любая заметка, где я задаю вопрос ауди­то­рии, полу­чает тег «вопрос». Если заметка будет полезна начи­на­ю­щим дизай­не­рам, я добав­ляю тег «студентам».

Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.

Теги

Теги — слова, которые как‑то описывают страницу или объект. Обычно это тема: «кино», «музыка», «искусство» в журнале. Но теги могут отражать и другие признаки, например в моём блоге любая заметка, где я задаю вопрос аудитории, получает тег «вопрос». Если заметка будет полезна начинающим дизайнерам, я добавляю тег «студентам».

Само слово tag означает этикетку, бирку, ярлык — некую маленькую пометку, закреплённую за объектом. Care tag — это ярлык с информацией о стирке и глажке, а price tag — ценник.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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