Илья Бирман

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

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

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

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

Оглавление

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

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

Есть домаш­ний экран с икон­ками при­ло­же­ний. Нажа­тие на иконку запус­кает при­ло­же­ние, при­чём при­ло­же­ние «вырас­тает» прямо из иконки; фак­ти­че­ски, она и есть при­ло­же­ние. Нажа­тие круг­лой кнопки воз­вра­щает на домаш­ний экран.

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

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

Домашний экран первого Айфона

Домашний экран первого Айфона

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

Есть домаш­ний экран с икон­ками при­ло­же­ний. Нажа­тие на иконку запус­кает при­ло­же­ние, при­чём при­ло­же­ние «вырас­тает» прямо из иконки; фак­ти­че­ски, она и есть при­ло­же­ние. Нажа­тие круг­лой кнопки воз­вра­щает на домаш­ний экран.

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

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

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

Те же окна и иконки оста­ются на рабо­чем столе Мака в 2017‑м.

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

Это ещё меньше похоже на насто­я­щий рабо­чий стол — в 1984 году людям было бы трудно такое понять. Но сегодня это лишь рас­ши­ре­ние уже име­ю­щихся у поль­зо­ва­те­лей зна­ний. Точно так же с откры­тием тео­рии отно­си­тель­но­сти стало ясно, что законы меха­ники Нью­тона не совсем точны, но для боль­шин­ства про­стых рас­чё­тов они про­дол­жают работать.

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

Те же окна и иконки оста­ются на рабо­чем столе Мака в 2017‑м.

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

Это ещё меньше похоже на насто­я­щий рабо­чий стол — в 1984 году людям было бы трудно такое понять. Но сегодня это лишь рас­ши­ре­ние уже име­ю­щихся у поль­зо­ва­те­лей зна­ний. Точно так же с откры­тием тео­рии отно­си­тель­но­сти стало ясно, что законы меха­ники Нью­тона не совсем точны, но для боль­шин­ства про­стых рас­чё­тов они про­дол­жают работать.

При­мер после­до­ва­тель­ного вол­шеб­ства — листа­е­мая фото­га­ле­рея. В реаль­но­сти слева и справа от фото­гра­фии ничего нет. Но стрелки и полоса мини­а­тюр создают образ ряда изоб­ра­же­ний, кото­рые можно «пролистать».

Пере­клю­чая фото­гра­фии, мы ощу­щаем пере­ме­ще­ние в сто­роны; пред­став­ляем, что неко­то­рая фото­гра­фия «далеко» справа. Хоро­шая ани­ма­ция уси­ли­вает иллюзию.

При­мер после­до­ва­тель­ного вол­шеб­ства — листа­е­мая фото­га­ле­рея. В реаль­но­сти слева и справа от фото­гра­фии ничего нет. Но стрелки и полоса мини­а­тюр создают образ ряда изоб­ра­же­ний, кото­рые можно «пролистать».

Пере­клю­чая фото­гра­фии, мы ощу­щаем пере­ме­ще­ние в сто­роны; пред­став­ляем, что неко­то­рая фото­гра­фия «далеко» справа. Хоро­шая ани­ма­ция уси­ли­вает иллюзию.

В вол­шеб­ном мире интер­фейса мы судим о пове­де­нии эле­мен­тов по их внеш­нему виду. Поэтому выбор оформ­ле­ния тоже дол­жен быть последовательным.

Чтобы отпра­вить файл с Айфона на Мак, исполь­зу­ется функ­ция «Эйр­дроп». Она выгля­дит как папка в «Файн­дере». Но после отправки файл появится не в этой папке, а в папке Downloads. «Эйр­дроп» выгля­дит как папка, но ведёт себя по‑другому.

В вол­шеб­ном мире интер­фейса мы судим о пове­де­нии эле­мен­тов по их внеш­нему виду. Поэтому выбор оформ­ле­ния тоже дол­жен быть последовательным.

Чтобы отпра­вить файл с Айфона на Мак, исполь­зу­ется функ­ция «Эйр­дроп». Она выгля­дит как папка в «Файн­дере». Но после отправки файл появится не в этой папке, а в папке Downloads. «Эйр­дроп» выгля­дит как папка, но ведёт себя по‑другому.

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

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

Поскольку пред­ло­жен­ное окон­ча­ние уже есть в поле, при нажа­тии исполь­зу­ется пол­ное слово. А если нажать , вари­ант оста­нется в поле, но кур­сор пере­ме­стится в конец допол­нен­ной части, и можно будет допи­сать что‑то ещё.

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

К сожа­ле­нию, бывают не очень каче­ствен­ные реа­ли­за­ции. В бра­у­зере Сафари если сте­реть пред­ло­жен­ный текст, он тут же вста­вится обратно. Это непо­сле­до­ва­тельно — обычно выде­ле­ние так не работает.

Плохо

Плохо

Хорошо

Хорошо

Хорошо

Хорошо

Плохо

Плохо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

Хорошо

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

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

Поскольку пред­ло­жен­ное окон­ча­ние уже есть в поле, при нажа­тии исполь­зу­ется пол­ное слово. А если нажать , вари­ант оста­нется в поле, но кур­сор пере­ме­стится в конец допол­нен­ной части, и можно будет допи­сать что‑то ещё.

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

К сожа­ле­нию, бывают не очень каче­ствен­ные реа­ли­за­ции. В бра­у­зере Сафари если сте­реть пред­ло­жен­ный текст, он тут же вста­вится обратно. Это непо­сле­до­ва­тельно — обычно выде­ле­ние так не работает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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