Илья Бир­ман

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

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

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

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

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

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось