Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содер­жи­мое может быть дис­крет­ным — состо­я­ние экрана теле­фона между фото­гра­фи­ями не имеет смысла. Да и вруч­ную про­кру­чи­вать фото­гра­фию так, чтобы она вста­вала ровно на экране, было бы неудобно. Поэтому фото­гра­фии в Айфоне листаются.

Но ино­гда дис­крет­ность вно­сят и искусственно.

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

Содержимое может быть дискретным — состояние экрана телефона между фотографиями не имеет смысла. Да и вручную прокручивать фотографию так, чтобы она вставала ровно на экране, было бы неудобно. Поэтому фотографии в Айфоне листаются.

Но иногда дискретность вносят и искусственно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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