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