Илья Бирман

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

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

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

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

Оглавление

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

Если фор­мально вырав­ни­вать несвя­зан­ные эле­менты, можно полу­чить обрат­ный эффект: чело­век поду­мает, что они как‑то свя­заны. На стра­нице оплаты Веб­мани валюты выров­нены кноп­ками. Если нужна валюта WMZ, невольно нажи­ма­ешь «Отка­заться», ведь кажется, что кнопка отно­сится к этой валюте.

См. также о выравнивании и смысловой связи:

Если фор­мально вырав­ни­вать несвя­зан­ные эле­менты, можно полу­чить обрат­ный эффект: чело­век поду­мает, что они как‑то свя­заны. На стра­нице оплаты Веб­мани валюты выров­нены кноп­ками. Если нужна валюта WMZ, невольно нажи­ма­ешь «Отка­заться», ведь кажется, что кнопка отно­сится к этой валюте.

См. также о выравнивании и смысловой связи:

Экран приложения в «Апсторе»

Текст — неотъ­ем­ле­мая часть интер­фейса. В про­стых слу­чаях уда­ётся обой­тись отдель­ными подпи­ся­ми к эле­мен­там, но часто в про­дук­тах встре­ча­ются боль­шие фраг­менты тек­ста — при­вет­ствен­ные экраны, опи­са­ния функ­ций, диа­логи с помощником.

На сле­ду­ю­щем раз­во­роте при­ве­дены крат­кие реко­мен­да­ции по вёрстке тек­сто­вых экранов.

Экран приложения в «Апсторе»

Текст — неотъ­ем­ле­мая часть интер­фейса. В про­стых слу­чаях уда­ётся обой­тись отдель­ными подпи­ся­ми к эле­мен­там, но часто в про­дук­тах встре­ча­ются боль­шие фраг­менты тек­ста — при­вет­ствен­ные экраны, опи­са­ния функ­ций, диа­логи с помощником.

На сле­ду­ю­щем раз­во­роте при­ве­дены крат­кие реко­мен­да­ции по вёрстке тек­сто­вых экранов.

Экран приложения в «Апсторе»

Основной текст

Колонка основ­ного тек­ста зани­мает 60⁠—70% ширины окна на ком­пью­тере. Чтобы на боль­ших экра­нах строки не ста­но­ви­лись слиш­ком длин­ными, их ширину огра­ни­чи­вают. На мобиль­ных экра­нах основ­ному тек­сту отдают мак­си­маль­ную ширину.

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

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

Подзаголовки

Основ­ной текст дро­бится на части с помо­щью подзаголовков.

Заго­ловки вто­рого уровня обычно круп­нее основ­ного тек­ста. Под заго­лов­ком остав­ляют межа­б­зац­ный отступ, а над — в 2‑3 раза боль­ший. Так заго­ло­вок ока­зы­ва­ется ближе к «сво­ему» тек­сту, чем к «чужому».

Заголовки третьего уровня

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

Заго­ловки чет­вёр­того и сле­ду­ю­щих уров­ней — при­знак пло­хой редак­туры. Они оправ­даны только в слож­ных юри­ди­че­ских и тех­ни­че­ских документах.

Другие элементы текста

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

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

Более подробно — у Артёма Горбунова. Типографика и вёрстка

Основной текст

Колонка основ­ного тек­ста зани­мает 60⁠—70% ширины окна на ком­пью­тере. Чтобы на боль­ших экра­нах строки не ста­но­ви­лись слиш­ком длин­ными, их ширину огра­ни­чи­вают. На мобиль­ных экра­нах основ­ному тек­сту отдают мак­си­маль­ную ширину.

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

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

Подзаголовки

Основ­ной текст дро­бится на части с помо­щью подзаголовков.

Заго­ловки вто­рого уровня обычно круп­нее основ­ного тек­ста. Под заго­лов­ком остав­ляют межа­б­зац­ный отступ, а над — в 2‑3 раза боль­ший. Так заго­ло­вок ока­зы­ва­ется ближе к «сво­ему» тек­сту, чем к «чужому».

Заголовки третьего уровня

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

Заго­ловки чет­вёр­того и сле­ду­ю­щих уров­ней — при­знак пло­хой редак­туры. Они оправ­даны только в слож­ных юри­ди­че­ских и тех­ни­че­ских документах.

Другие элементы текста

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

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

Более подробно — у Артёма Горбунова. Типографика и вёрстка

При­ве­дён­ные выше реко­мен­да­ции о фор­мах и тек­сте помо­гут наве­сти поря­док в пре­де­лах отдель­ного экрана.

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

Пример типографических гайдлайнов для элементов управления

При­ве­дён­ные выше реко­мен­да­ции о фор­мах и тек­сте помо­гут наве­сти поря­док в пре­де­лах отдель­ного экрана.

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

Пример типографических гайдлайнов для элементов управления

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

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

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

Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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