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