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