Илья Бир­ман

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

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

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

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

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

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Жест ока­зался настолько удач­ным, что через пару лет Эпл сде­лал его стан­дарт­ным для любых обнов­ля­е­мых спис­ков в Ай‑ОСе. Правда, реа­ли­за­ция Эпла нико­гда не была настолько же опрят­ной, как у Лорена.

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

Жест оказался настолько удачным, что через пару лет Эпл сделал его стандартным для любых обновляемых списков в Ай‑ОСе. Правда, реализация Эпла никогда не была настолько же опрятной, как у Лорена.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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