Илья Бир­ман

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

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

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

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

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

Теги

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

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

Теги

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

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

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

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

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

На основе сов­па­де­ния тегов сайты могут авто­ма­ти­че­ски созда­вать под­борки и давать рекомендации.

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

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

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

На основе совпадения тегов сайты могут автоматически создавать подборки и давать рекомендации.

Теги под заметкой в блоге

Страница тега «Будущее»

Страница всех тегов

Тег в результатах поиска

Для нави­га­ции на стра­ни­цах или у объ­ек­тов пере­чис­ляют их теги.

Тег ведёт на стра­ницу со спис­ком всех свя­зан­ных с ним объектов.

Ино­гда делают стра­ницу с пол­ным спис­ком тегов — «облако тегов». В силу неор­га­ни­зо­ван­но­сти тегов, обычно неясно, что там искать.

Хорошо также, когда поиск знает теги.

Теги под заметкой в блоге

Страница тега «Будущее»

Страница всех тегов

Тег в результатах поиска

Для навигации на страницах или у объектов перечисляют их теги.

Тег ведёт на страницу со списком всех связанных с ним объектов.

Иногда делают страницу с полным списком тегов — «облако тегов». В силу неорганизованности тегов, обычно неясно, что там искать.

Хорошо также, когда поиск знает теги.

Теги коллекции примеров дизайна Ильи Бирмана

Теги коллекции примеров дизайна Ильи Бирмана

Обычно для ука­за­ния тегов в про­дук­тах выде­ляют отдель­ное поле.

«Лай­трум» пред­ла­гает веро­ят­ные теги для фото­гра­фии и даже поз­во­ляет созда­вать неза­ви­си­мые наборы тегов.

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

Лучше, когда про­грамма сама пони­мает, какие теги свя­заны тес­нее. Если дизай­нер, опи­сы­вая кар­тинку, ста­вит тег «лого­тип», система может также пред­ло­жить ему теги «знак», «эмблема», «фирстиль».

Работа с тегами в «Лайтруме»

Работа с тегами в «Лайтруме»

Обычно для указания тегов в продуктах выделяют отдельное поле.

«Лайтрум» предлагает вероятные теги для фотографии и даже позволяет создавать независимые наборы тегов.

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

Лучше, когда программа сама понимает, какие теги связаны теснее. Если дизайнер, описывая картинку, ставит тег «логотип», система может также предложить ему теги «знак», «эмблема», «фирстиль».

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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