Илья Бир­ман

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

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

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

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

Оглавление

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

Напоследок

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

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

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

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

Напоследок

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

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

Тема вёрстки в графическом интерфейсе шире главы «Сетка» — важно понимать правило внутреннего и внешнего, правило якорных объектов; уметь собирать экраны из базовых элементов, таких как точка, линия и прямоугольник. В главе «Пиктограммы» мы коснулись их функции, но не графического дизайна.

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

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

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

Десять лет назад про­ек­ти­ров­щики решали задачу «сде­лать удобно», а сегодня — задачу «улуч­шить жизнь»: зани­маться спор­том, регу­лярно учиться, разумно тра­тить деньги, сор­ти­ро­вать мусор. Как интер­фей­сом холо­диль­ника помочь чело­веку пра­вильно питаться?

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

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

У интерфейса есть и коммерческая задача. Возникает вопрос не только о том, как сделать удобно, но и как порадовать, приучить, затянуть. Как мотивировать человека пользоваться сервисом чаще?

Десять лет назад проектировщики решали задачу «сделать удобно», а сегодня — задачу «улучшить жизнь»: заниматься спортом, регулярно учиться, разумно тратить деньги, сортировать мусор. Как интерфейсом холодильника помочь человеку правильно питаться?

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

Приложение: указатель синтаксиса элементов интерфейса

Элемент и функция
Член предложения
Часть речи и форма
Примеры хорошие
так себе и плохие
Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • В плей­ли­сте
    ☑ супер­хиты
    ☐ что‑ни­будь поме­ло­дич­нее
    ☑ неизданное

  • Зака­зать
    ☐ борщ
    ☑ кар­тошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Квар­тира
    ☐ хру­щёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голу­бые
    ☑ боль­шого раз­мера
    ☐ навыкате

  • ☐ Из выде­лен­ного диапазона

  • ☐ Со встро­ен­ной камерой

  • Квар­тира
    ☐ Подо­брать хру­щёвку
    ☑ Рас­по­ло­же­ние: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Сыг­рать на фор­те­пи­ано
    ☐ громко
    ☑ не запи­на­ясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печа­тать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Вклю­чите этот чек­бокс чтобы подыскать...

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Настройка прин­тера
    ☑ Рас­кла­ды­вать по копиям

  • Печать
    ☑ Раз­ло­жить по копиям

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Печа­тать
    ☑ рисунки
    ☐ колонтитулы

  • Пара­метры печати
    ☐ Не печа­тать рисунки
    ☐ Отклю­чить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Пла­тель­щик
    🔘 Част­ное лицо
    ○ Организация

  • Выбе­рите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Тема оформ­ле­ния
    🔘 клас­си­че­ская
    ○ совре­мен­ная
    ○ по умолчанию

  • При­шёл
    ○ по записи
    ○ в порядке оче­реди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Опла­тить
    🔘 через Эпл‑пей
    ○ пере­дав деньги в конверте

  • Доста­вить
    🔘 быстро
    ○ Поч­той России

  • Нико­гда — Все­гда — При выделении

  • Обли­ва­ясь потом

  • Вто­рым процессором

  • Лице­вой стороной

  • В обрат­ном порядке

  • Облаками

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Обнов­ле­ния
    ○ не про­ве­рять
    ○ про­ве­рять
    ○ только ска­чи­вать
    🔘 сразу устанавливать

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Раз­ре­шить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Бес­шум­ный ... Оглу­шить соседей

  • Низ­кая громкость

  • Высо­кая громкость

  • Сде­лать тише

  • Уве­личьте яркость с помо­щью дан­ного ползунка:

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёг­ко­стью ... Обли­ва­ясь потом

  • Голы­шом ... В пол­ном обмундировании

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • При нару­ше­нии:
    Выно­сить уст­ное пре­ду­пре­жде­ние ... Сажать на кол

Дополнение:

  • Использовать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Пред­по­чи­тать:
    Малень­кий файл ... Высо­кое качество

  • Только мне ... Дру­зьям ... Всем

Поле ввода

Приложение: указатель синтаксиса элементов интерфейса

Элемент и функция

Член предложения

Часть речи и форма

Примеры хорошие

так себе и плохие

Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, причастие

  • В плейлисте
    ☑ суперхиты
    ☐ что‑нибудь помелодичнее
    ☑ неизданное

  • Заказать
    ☐ борщ
    ☑ картошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме

  • Квартира
    ☐ хрущёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голубые
    ☑ большого размера
    ☐ навыкате

  • ☐ Из выделенного диапазона

  • ☐ Со встроенной камерой

  • Квартира
    ☐ Подобрать хрущёвку
    ☑ Расположение: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Сыграть на фортепиано
    ☐ громко
    ☑ не запинаясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печатать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Включите этот чекбокс чтобы подыскать...

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • Настройка принтера
    ☑ Раскладывать по копиям

  • Печать
    ☑ Разложить по копиям

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Печатать
    ☑ рисунки
    ☐ колонтитулы

  • Параметры печати
    ☐ Не печатать рисунки
    ☐ Отключить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Плательщик
    🔘 Частное лицо
    ○ Организация

  • Выберите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, местоимение, прилагательное, наречие, числительное, глагол в начальной форме

  • Тема оформления
    🔘 классическая
    ○ современная
    ○ по умолчанию

  • Пришёл
    ○ по записи
    ○ в порядке очереди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Оплатить
    🔘 через Эпл‑пей
    ○ передав деньги в конверте

  • Доставить
    🔘 быстро
    ○ Почтой России

  • Никогда — Всегда — При выделении

  • Обливаясь потом

  • Вторым процессором

  • Лицевой стороной

  • В обратном порядке

  • Облаками

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • Обновления
    ○ не проверять
    ○ проверять
    ○ только скачивать
    🔘 сразу устанавливать

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Разрешить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Существительное, прилагательное, наречие, числительное, глагол в начальной форме

  • Бесшумный ... Оглушить соседей

  • Низкая громкость

  • Высокая громкость

  • Сделать тише

  • Увеличьте яркость с помощью данного ползунка:

Уточнение действия

Обстоятельство:

  • Сделать как?

  • где?

  • когда?

  • Наречие, деепричастие, существительное в творительном падеже и существительное в косвенном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёгкостью ... Обливаясь потом

  • Голышом ... В полном обмундировании

  • Глагол в начальной форме (при настройке поведения — несовершенного; разового действия — совершенного вида)

  • При нарушении:
    Выносить устное предупреждение ... Сажать на кол

Дополнение:

  • Использовать что?

  • Сделать с чем? Кому?

  • Существительное в косвенном падеже

  • Предпочитать:
    Маленький файл ... Высокое качество

  • Только мне ... Друзьям ... Всем

Поле ввода

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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