Илья Бир­ман

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

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

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

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

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

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

В этой книге закладка и лупа оста­ются в поле зре­ния, когда текст в раз­во­роте про­кру­чи­ва­ется. Про­крут­кой управ­ля­ется трёх­мер­ная ани­ма­ция откры­тия этой книги.

Через раз­ную ско­рость про­крутки раз­ных эле­мен­тов пере­дают их рас­сто­я­ние от поль­зо­ва­теля, добав­ляя ощу­ще­ние объёма.

Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

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

В этой книге закладка и лупа остаются в поле зрения, когда текст в развороте прокручивается. Прокруткой управляется трёхмерная анимация открытия этой книги.

Через разную скорость прокрутки разных элементов передают их расстояние от пользователя, добавляя ощущение объёма.

Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

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

Сайт правил русского языка

Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере

Сайт правил русского языка

Сайт правил русского языка. При прокрутке шапка закрепляется и уменьшается в размере

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

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

Страница «Мака Про» не прокручивается, а листается по вертикали

Страница «Мака Про» не прокручивается, а листается по вертикали

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

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

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

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

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

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

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

Интер­фейс про­крутки раз­ви­вался, пока почти не исчез в Айфоне, пре­вра­тив­шись в непо­сред­ствен­ное вза­и­мо­дей­ствие с про­кру­чи­ва­е­мым содер­жи­мым. И дизай­неры стали думать в обрат­ную сто­рону: как ещё исполь­зо­вать этот новый удоб­ный жест.

В пер­вом Айфоне уже была реа­ли­зо­вана идея скры­тия эле­мен­тов интер­фейса при прокрутке.

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

Интерфейс прокрутки развивался, пока почти не исчез в Айфоне, превратившись в непосредственное взаимодействие с прокручиваемым содержимым. И дизайнеры стали думать в обратную сторону: как ещё использовать этот новый удобный жест.

В первом Айфоне уже была реализована идея скрытия элементов интерфейса при прокрутке.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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