Илья Бир­ман

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

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

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

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

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

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

Эле­мент управ­ле­ния про­крут­кой назы­ва­ется поло­сой про­крутки.

Здесь и ниже — кадры из исторического видео об элементах интерфейса

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

Элемент управления прокруткой называется полосой прокрутки.

Здесь и ниже — кадры из исторического видео об элементах интерфейса

Текстовый редактор «Браво»

Компьютер «Ксерокс Альто»

Полосы про­крутки при­ду­мали в 1974 году в цен­тре иссле­до­ва­ний Ксе­рокса. При под­ве­де­нии мыши к левому краю экрана, появ­лялся инди­ка­тор. Он пока­зы­вал, где в доку­менте нахо­дится пользователь.

Мышь была трёхкно­поч­ной. Левый клик в полосу про­крутки сдви­гал содер­жи­мое вверх, а пра­вый — вниз.

Раз­мер сдвига зави­сел от того, в какую часть полосы чело­век кли­кал. Клик в самый низ про­кру­чи­вал на целый экран, в сере­дину — на пол‑экрана, в самый верх — на одну строку.

Клик сред­ней кноп­кой мыши пере­ме­щал в область доку­мента, соот­вет­ству­ю­щую точке на самой полосе прокрутки.

Текстовый редактор «Браво»

Полосы прокрутки придумали в 1974 году в центре исследований Ксерокса. При подведении мыши к левому краю экрана, появлялся индикатор. Он показывал, где в документе находится пользователь.

Мышь была трёхкнопочной. Левый клик в полосу прокрутки сдвигал содержимое вверх, а правый — вниз.

Компьютер «Ксерокс Альто»

Размер сдвига зависел от того, в какую часть полосы человек кликал. Клик в самый низ прокручивал на целый экран, в середину — на пол‑экрана, в самый верх — на одну строку.

Клик средней кнопкой мыши перемещал в область документа, соответствующую точке на самой полосе прокрутки.

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

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

В Ксероксе отказались от разделения функций по левой и правой кнопкам мыши, заменив их на клики слева и справа от лифта, поэтому полоса прокрутки стала широкой

В Ксероксе отказались от разделения функций по левой и правой кнопкам мыши, заменив их на клики слева и справа от лифта, поэтому полоса прокрутки стала широкой

Индикатор положения в документе называется лифтом, а область, по которой он перемещается — шахтой полосы прокрутки.

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

Система «Ксерокс‑Стар», 1981

Вправо полосы про­крутки пере­ехали в начале 80‑х.

Для построч­ной про­крутки в сами полосы доба­вили кнопки‑стрелки. Верх­няя мотала вверх, ниж­няя — вниз, как обычно. Но ука­зы­вали они не направ­ле­ние дви­же­ния поль­зо­ва­теля по доку­менту, а направ­ле­ние дви­же­ния самого документа.

Кнопки + и − пред­на­зна­ча­лись для листа­ния по страницам.

Система «Ксерокс‑Стар», 1981

Вправо полосы прокрутки переехали в начале 80‑х.

Для построчной прокрутки в сами полосы добавили кнопки‑стрелки. Верхняя мотала вверх, нижняя — вниз, как обычно. Но указывали они не направление движения пользователя по документу, а направление движения самого документа.

Кнопки + и − предназначались для листания по страницам.

В 1984 году Эпл в Макин­тоше пере­вер­нул стрелки и изба­вился от + и −, но забыл про про­пор­ци­о­наль­ный скрол­линг — лифт Макин­тоша был квад­рат­ным неза­ви­симо от длины документа.

Однако листа­ние оста­лось важ­ным част­ным слу­чаем про­крутки. На Макин­тоше для постра­нич­ного листа­ния исполь­зо­ва­лась шахта: клик в шахту над лиф­том при­во­дил к пере­ходу на стра­ницу вверх, под лиф­том — вниз.

Чтобы перейти в опре­де­лён­ную часть доку­мента, нужно было пере­та­щить сам лифт. Реаль­ное пере­ме­ще­ние про­ис­хо­дило только после отпус­ка­ния лифта в новом месте полосы про­крутки. Если начать тащить лифт, но отпу­стить мышь за пре­де­лами полосы про­крутки, про­крутка отме­ня­лась. Поэтому для успеш­ной про­крутки поль­зо­ва­телю при­хо­ди­лось посто­янно пры­гать гла­зами между доку­мен­том и поло­сой прокрутки.

Позже полосе про­крутки стало без­раз­лично, где будет кур­сор мыши, когда поль­зо­ва­тель отпу­стит кнопку.

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

Макинтош, 1984

Макинтош, 1984

В 1984 году Эпл в Макинтоше перевернул стрелки и избавился от + и −, но забыл про пропорциональный скроллинг — лифт Макинтоша был квадратным независимо от длины документа.

Однако листание осталось важным частным случаем прокрутки. На Макинтоше для постраничного листания использовалась шахта: клик в шахту над лифтом приводил к переходу на страницу вверх, под лифтом — вниз.

Чтобы перейти в определённую часть документа, нужно было перетащить сам лифт. Реальное перемещение происходило только после отпускания лифта в новом месте полосы прокрутки. Если начать тащить лифт, но отпустить мышь за пределами полосы прокрутки, прокрутка отменялась. Поэтому для успешной прокрутки пользователю приходилось постоянно прыгать глазами между документом и полосой прокрутки.

Позже полосе прокрутки стало безразлично, где будет курсор мыши, когда пользователь отпустит кнопку.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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