Илья Бирман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рас­смот­рим сетку видже­тов спра­воч­ных систем «Актиона».

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

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

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

Новый виджет «Выс­шей школы глав­буха» отоб­ра­жает успехи в школе и моти­ви­рует учиться дальше. Виджет сер­виса «Отчёты» помо­гает отправ­лять отчёты в госорганы.

Виджет сер­виса «Дого­воры» пока­зы­вает и даёт найти нуж­ный дого­вор. Если каким‑то из сер­ви­сов чело­век не поль­зу­ется, то виджет умеет отоб­ра­жаться в «про­мо­ре­жиме» — про­сто рас­ска­зы­вает о сер­висе и при­гла­шает воспользоваться.

Для рекламы буду­щих про­дук­тов создан шаб­лон промовиджета.

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

Рас­смот­рим сетку видже­тов спра­воч­ных систем «Актиона».

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

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

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

Новый виджет «Выс­шей школы глав­буха» отоб­ра­жает успехи в школе и моти­ви­рует учиться дальше. Виджет сер­виса «Отчёты» помо­гает отправ­лять отчёты в госорганы.

Виджет сер­виса «Дого­воры» пока­зы­вает и даёт найти нуж­ный дого­вор. Если каким‑то из сер­ви­сов чело­век не поль­зу­ется, то виджет умеет отоб­ра­жаться в «про­мо­ре­жиме» — про­сто рас­ска­зы­вает о сер­висе и при­гла­шает воспользоваться.

Для рекламы буду­щих про­дук­тов создан шаб­лон промовиджета.

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

Система Главбух

Система Кадры

Система Юрист

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

Для при­да­ния систе­мам инди­ви­ду­аль­но­сти доста­точно фир­мен­ной цве­то­вой и шриф­то­вой схем.

Система Главбух

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

Система Кадры

Для при­да­ния систе­мам инди­ви­ду­аль­но­сти доста­точно фир­мен­ной цве­то­вой и шриф­то­вой схем.

Система Юрист

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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