Илья Бирман

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

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

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

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

Оглавление

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

Тре­бо­ва­ние непре­рыв­но­сти — более силь­ное, чем тре­бо­ва­ние мгно­вен­но­сти. Непре­рыв­ная мгно­вен­ная обрат­ная связь даётся не в момент окон­ча­тель­ной уста­новки зна­че­ния пара­метра, а непо­сред­ственно и посто­янно в про­цессе его изменения.

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

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

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

Перетаскивание окна в Виндоусе 3.1, 1990

Перетаскивание окна в Виндоусе 3.1, 1990

Тре­бо­ва­ние непре­рыв­но­сти — более силь­ное, чем тре­бо­ва­ние мгно­вен­но­сти. Непре­рыв­ная мгно­вен­ная обрат­ная связь даётся не в момент окон­ча­тель­ной уста­новки зна­че­ния пара­метра, а непо­сред­ственно и посто­янно в про­цессе его изменения.

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

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

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

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

Фото­шоп пока­зы­вает, как сра­бо­тает эффект, ещё до того, как отпу­стишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

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

Фото­шоп пока­зы­вает, как сра­бо­тает эффект, ещё до того, как отпу­стишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

Онлайн‑каль­ку­ля­торы кре­дит­ных пла­те­жей или тари­фов связи ино­гда делают в виде формы с чис­ло­выми полями и кноп­кой «Рас­счи­тать». Чело­век дол­жен отве­тить на несколько вопро­сов, пре­жде чем уви­деть результат.

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

Онлайн‑каль­ку­ля­торы кре­дит­ных пла­те­жей или тари­фов связи ино­гда делают в виде формы с чис­ло­выми полями и кноп­кой «Рас­счи­тать». Чело­век дол­жен отве­тить на несколько вопро­сов, пре­жде чем уви­деть результат.

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

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

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

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

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

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

Ползунок превращается в поле при клике

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

Ползунок превращается в поле при клике

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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