Илья Бир­ман

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

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

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

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

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

Но чело­век изоб­рёл колесо.

Колесо управ­ляло дви­же­нием лифта в полосе про­крутки. При дви­же­нии вверх содер­жи­мое про­кру­чи­ва­лось вниз.

Бла­го­даря колесу люди стали всё реже исполь­зо­вать полосы про­крутки для про­крутки, однако на их дизайн это почти не влияло.

В 2000‑х в Эпле реа­ли­зо­вали про­крутку на трек­па­дах — нужно было про­во­дить по ним не одним, а двумя пальцами.

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

Микрософт Интеллимаус, 1996

Микрософт Интеллимаус, 1996

Но человек изобрёл колесо.

Колесо управляло движением лифта в полосе прокрутки. При движении вверх содержимое прокручивалось вниз.

Благодаря колесу люди стали всё реже использовать полосы прокрутки для прокрутки, однако на их дизайн это почти не влияло.

В 2000‑х в Эпле реализовали прокрутку на трекпадах — нужно было проводить по ним не одним, а двумя пальцами.

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

Видео с презентации «Макворлд», 2007

В 2007 вышел Айфон. На малень­ком экране про­крутка нужна посто­янно. Вме­сто клас­си­че­ских полос про­крутки Айфон исполь­зо­вал всю пло­щадь экрана. Отпала необ­хо­ди­мость при­це­ли­ваться. Обрат­ная связь созда­вала ощу­ще­ние непо­сред­ствен­ного вза­и­мо­дей­ствия. Стив Джобс «про­сто брал палец — и прокручивал».

Видео с презентации «Макворлд», 2007

В 2007 вышел Айфон. На маленьком экране прокрутка нужна постоянно. Вместо классических полос прокрутки Айфон использовал всю площадь экрана. Отпала необходимость прицеливаться. Обратная связь создавала ощущение непосредственного взаимодействия. Стив Джобс «просто брал палец — и прокручивал».

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

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

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

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

Инфоскроллер

Лифт в шахте полосы про­крутки пока­зы­вает, какую долю доку­мента мы видим на экране. Полоса про­крутки — услов­ное пред­став­ле­ние длины документа.

«Инфос­крол­лер» повы­шает инфор­ма­тив­ность полосы про­крутки, сим­во­ли­че­ски пред­став­ляя ещё и содер­жи­мое доку­мента: текст, заго­ловки, рисунки, таблицы.

Информативность 126

Инфоскроллер

Лифт в шахте полосы прокрутки показывает, какую долю документа мы видим на экране. Полоса прокрутки — условное представление длины документа.

«Инфоскроллер» повышает информативность полосы прокрутки, символически представляя ещё и содержимое документа: текст, заголовки, рисунки, таблицы.

Информативность 126

В «Дого­во­рах» цвет­ные метки пока­зы­вают рис­ко­ван­ные формулировки.

В «Хроме» жёл­тые метки пока­зы­вают резуль­таты поиска.

Сервис «Договоры»

Хром

Сервис «Договоры»

Хром

В «Договорах» цветные метки показывают рискованные формулировки.

В «Хроме» жёлтые метки показывают результаты поиска.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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