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