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