🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Экран приложения в «Апсторе»
Текст — неотъемлемая часть интерфейса. В простых случаях удаётся обойтись отдельными подписями к элементам, но часто в продуктах встречаются большие фрагменты текста — приветственные экраны, описания функций, диалоги с помощником.
На следующем развороте приведены краткие рекомендации по вёрстке текстовых экранов.
Экран приложения в «Апсторе»
Текст — неотъемлемая часть интерфейса. В простых случаях удаётся обойтись отдельными подписями к элементам, но часто в продуктах встречаются большие фрагменты текста — приветственные экраны, описания функций, диалоги с помощником.
На следующем развороте приведены краткие рекомендации по вёрстке текстовых экранов.
Экран приложения в «Апсторе»
Основной текст
Колонка основного текста занимает
Текст на экране выравнивают по левому краю, а не по ширине формата. При выравнивании по ширине между словами возникают огромные пробелы, и текст выглядит неряшливо.
Текст делится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этом тексте.
Подзаголовки
Основной текст дробится на части с помощью подзаголовков.
Заголовки второго уровня обычно крупнее основного текста. Под заголовком оставляют межабзацный отступ, а над — в 2‑3 раза больший. Так заголовок оказывается ближе к «своему» тексту, чем к «чужому».
Заголовки третьего уровня
Заголовки третьего уровня удобно набирать полужирным шрифтом кегля основного текста и не отбивать от последующего текста, как здесь. Благодаря отсутствию лишнего отступа, в самой системе отступов проще навести порядок.
Заголовки четвёртого и следующих уровней — признак плохой редактуры. Они оправданы только в сложных юридических и технических документах.
Другие элементы текста
В тексте встречаются другие элементы — цитаты, списки, таблицы, примечания, формулы, ссылки, иллюстрации, кнопки, пиктограммы. Размеры и отступы вокруг этих элементов также систематизируют и приводят в соответствие с параметрами текста.
Как и в случае с отступами между элементами, текст в интерфейсе выигрывает от уменьшения числа разных кеглей и стилей.
Более подробно — у Артёма Горбунова. Типографика и вёрстка
Основной текст
Колонка основного текста занимает
Текст на экране выравнивают по левому краю, а не по ширине формата. При выравнивании по ширине между словами возникают огромные пробелы, и текст выглядит неряшливо.
Текст делится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этом тексте.
Подзаголовки
Основной текст дробится на части с помощью подзаголовков.
Заголовки второго уровня обычно крупнее основного текста. Под заголовком оставляют межабзацный отступ, а над — в 2‑3 раза больший. Так заголовок оказывается ближе к «своему» тексту, чем к «чужому».
Заголовки третьего уровня
Заголовки третьего уровня удобно набирать полужирным шрифтом кегля основного текста и не отбивать от последующего текста, как здесь. Благодаря отсутствию лишнего отступа, в самой системе отступов проще навести порядок.
Заголовки четвёртого и следующих уровней — признак плохой редактуры. Они оправданы только в сложных юридических и технических документах.
Другие элементы текста
В тексте встречаются другие элементы — цитаты, списки, таблицы, примечания, формулы, ссылки, иллюстрации, кнопки, пиктограммы. Размеры и отступы вокруг этих элементов также систематизируют и приводят в соответствие с параметрами текста.
Как и в случае с отступами между элементами, текст в интерфейсе выигрывает от уменьшения числа разных кеглей и стилей.
Более подробно — у Артёма Горбунова. Типографика и вёрстка
Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.
Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.
Пример типографических гайдлайнов для элементов управления
Приведённые выше рекомендации о формах и тексте помогут навести порядок в пределах отдельного экрана.
Но для продукта важны узнаваемость, привычка, ощущение порядка и неслучайности. Для единообразия экранов создаются гайдлайны, где систематизируются размеры и расстояния между элементами.
Пример типографических гайдлайнов для элементов управления
Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.
Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного
Использование единой сетки не только улучшает восприятие дизайна, но и помогает создавать сложные продукты.
Виджеты справочных систем «Актиона» построены по общей сетке и бывают двух размеров: одинарного и полуторного
Рассмотрим сетку виджетов справочных систем «Актиона».
Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.
Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.
Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.
Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.
Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.
Для рекламы будущих продуктов создан шаблон промовиджета.
Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.
Рассмотрим сетку виджетов справочных систем «Актиона».
Сверху всегда заголовок и блок статистики. Снизу может быть поле поиска или специальный элемент типа кнопки или ссылки. В центральной части чаще всего — список. В разных виджетах используются разные цвета и шрифты, но сетка сохраняется.
Если специального элемента снизу нет, в списке на один пункт больше. Если списка нет, в центре может находиться таблица или график. В центре виджета видеосеминаров — кадр свежего видео.
Эта сетка была придумана для второй версии «Системы Кадры» и позже распространилась на новые версии всех справочных систем, получив чуть больше свободы. Тогда виджет видеосеминаров избавился от заголовка.
Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.
Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.
Для рекламы будущих продуктов создан шаблон промовиджета.
Когда есть правила и ограничения, сделать новый элемент — быстрее и дешевле, и при этом он получается хорошо почти сам собой.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015