Илья Бир­ман

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

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

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

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

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

Памяти пер­вых моде­лей Айфона не хва­тало на хра­не­ние откры­той в бра­у­зере стра­ницы, и при про­крутке тре­бо­ва­лось время для про­ри­совки. Как пока­зы­вать стра­ницу приближённо?

Ока­за­лось, можно бук­вально «никак». Непро­ри­со­ван­ная часть стра­ницы отоб­ра­жа­лась шах­мат­ным узо­ром, как про­зрач­ность в Фото­шопе, но при­ез­жала точно в соот­вет­ствии с дви­же­нием пальца пользователя.

Изоб­ра­же­ние появ­ля­лось через долю секунды.

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

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

Памяти первых моделей Айфона не хватало на хранение открытой в браузере страницы, и при прокрутке требовалось время для прорисовки. Как показывать страницу приближённо?

Оказалось, можно буквально «никак». Непрорисованная часть страницы отображалась шахматным узором, как прозрачность в Фотошопе, но приезжала точно в соответствии с движением пальца пользователя.

Изображение появлялось через долю секунды.

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

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

Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути

Непосредственное взаимодействие

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

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

Одна из первых игр на Айфоне: нужно было докатить шарик до самой дальней дырки, не уронив в другие по пути

Непосредственное взаимодействие

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

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

Листание и прокрутка

При листа­нии содер­жи­мое раз­би­вают на стра­ницы и пере­ме­ща­ются между ними с помо­щью спе­ци­аль­ных жестов или экран­ных эле­мен­тов. Такие эле­менты назы­вают листалками.

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

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

До 2016

С 2016

Листание и прокрутка

При листании содержимое разбивают на страницы и перемещаются между ними с помощью специальных жестов или экранных элементов. Такие элементы называют листалками.

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

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

До 2016

С 2016

Меха­ни­че­ское деле­ние содер­жи­мого на рав­ные пор­ции про­сто в реа­ли­за­ции, но бес­по­лезно для нави­га­ции. Неиз­вестно, что ждёт чита­теля по ссылке «7». Даже если запом­нить номер инте­рес­ной стра­ницы, нуме­ра­ция спол­зёт при появ­ле­нии новых сообщений.

Обрат­ная нуме­ра­ция стра­ниц не спол­зает, но слу­чай­ные боль­шие номера ещё менее понятны.

Механическое деление содержимого на равные порции просто в реализации, но бесполезно для навигации. Неизвестно, что ждёт читателя по ссылке «7». Даже если запомнить номер интересной страницы, нумерация сползёт при появлении новых сообщений.

Обратная нумерация страниц не сползает, но случайные большие номера ещё менее понятны.

Арс‑техника

Подоб­ные арха­ич­ные листалки до сих пор встре­ча­ются в про­дви­ну­тых изда­ниях и интер­нет‑мага­зи­нах. «Арс‑тех­ника» раз­би­вает на стра­ницы длин­ные обзоры, «Ламода» — раз­делы ката­лога одежды.

Ламода

Осо­бая глу­пость — выбор того, по сколько эле­мен­тов на стра­нице показывать:

Арс‑техника

Подобные архаичные листалки до сих пор встречаются в продвинутых изданиях и интернет‑магазинах. «Арс‑техника» разбивает на страницы длинные обзоры, «Ламода» — разделы каталога одежды.

Ламода

Особая глупость — выбор того, по сколько элементов на странице показывать:

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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