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