Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.
Для всех приложений Microsoft Windows должно быть включено перо. И сделать это проще, чем вы думаете.
Ввод с помощью пера — это способ взаимодействия Windows напрямую с компьютером с помощью пера. Перо можно использовать для указания, а также для жестов, простого ввода текста и захвата мыслей в свободной форме с помощью рукописного ввода.
Перо, используемое для ввода, имеет тонкий, гладкий кончик, который поддерживает точное указание, запись или рисование рукописным вводом. Перо также может иметь необязательную кнопку пера (используется для выполнения щелчков правой кнопкой мыши) и ластик (используется для удаления рукописного ввода). Большинство перьев поддерживают наведение указателя мыши.
Типичное перо.
Если перо используется для рукописного ввода, штрихи пользователя можно преобразовать в текст с помощью распознавания рукописного ввода. Штрихи можно хранить так же, как они были написаны, при этом распознавание выполняется в фоновом режиме для поддержки поиска и копирования в виде текста. Такие необращенные штрихи называются цифровыми чернилами.
Пример рукописного ввода.
Большинство программ Windows уже поддерживают перо, так как вместо мыши можно использовать перо, перо работает без проблем для большинства важных задач и взаимодействий, а программа реагирует на жесты. Программа становится понятной для рукописного ввода, когда она помогает с рукописным вводом текста. Программа включает рукописный ввод, когда она может обрабатывать рукописный ввод напрямую, вместо того, чтобы переводить росчерки пера в текст или эквивалентные движения мыши. Это позволяет пользователям писать, рисовать и добавлять комментарии с помощью высококачественного рукописного ввода. Сбор рукописного ввода отличается от сбора событий мыши, так как для рукописного ввода требуется более высокое разрешение и более высокая частота выборки, а также он может добавить нюансы при нажатии и наклоне. Сведения о создании удобных для рукописного ввода программ с поддержкой рукописного ввода см. в разделе Интеграциярукописного и текстового ввода с помощью пера.
При расположении пера меньше необходимости в курсоре, так как кончик представляет сам себя. Тем не менее для помощи в нацеливание Windows предоставляет крошечный курсор пера, указывающий текущее расположение пера. В отличие от указателя мыши, который он заменяет, курсор пера не требуется, если перо не находится рядом с дисплеем, поэтому он исчезает через несколько секунд бездействия, чтобы обеспечить беспрепятственный просмотр информации.
Большинство удобных для пера программ поддерживают жесты. Жест — это быстрое перемещение пера на экране, которое компьютер интерпретирует как команду, а не как движение мыши, письмо или рисование. Одним из самых быстрых и простых жестов является жест. Флик — это простой жест, который приводит к навигации или команде редактирования. К щелчкам навигации относятся перетаскивание вверх, перетаскивание вниз, перемещение назад и перемещение вперед, а для редактирования — копирование, вставка, отмена и удаление.
Все указатели, кроме занятого, имеют одну горячую точку пикселя, которая определяет точное расположение указателя на экране. Горячая точка определяет, на какой объект влияет взаимодействие. Объекты определяют горячую зону, которая представляет собой область, в которой горячая точка считается над объектом. Как правило, горячая зона совпадает с границами объекта, но она может быть больше, чтобы упростить взаимодействие.
Так как перо может указывать более точно, чем палец, если пользовательский интерфейс хорошо подходит для сенсорного ввода, он также будет хорошо работать и для пера. Следовательно, эта статья в первую очередь посвящена добавлению поддержки пера в программы, которые уже были разработаны для сенсорного ввода.
Использование пера для ввода имеет следующие характеристики:
Естественный и интуитивно понятный. Все знают, как навести и коснуться ручкой. Взаимодействие с объектами предназначено для того, чтобы соответствовать тому, как пользователи согласованно взаимодействуют с объектами в реальном мире.
Выразительные. Штрихи пера легко контролировать, что делает письмо, рисование, наброски, рисование, рисование и заметки проще, чем делать это с помощью мыши.
Более личный. Так же, как рукописная записка или подпись являются более личными, чем типизированные, использование цифровой рукописной записки или подписи также является более личным.
Менее навязчивый. Использование пера является молчаливым и, следовательно, гораздо менее отвлекает, чем ввод текста или щелчок, особенно в социальных ситуациях, таких как собрания.
Портативный. Компьютер с возможностью пера может быть более компактным, так как большинство задач можно выполнить без клавиатуры, мыши или сенсорной панели. Он может быть более гибким, так как для него не требуется рабочая поверхность. Это позволяет использовать компьютер в новых местах и сценариях.
Прямые и привлекательные. Использование пера заставляет вас чувствовать, что вы непосредственно взаимодействуете с объектами на экране, в то время как при использовании мыши или сенсорной панели всегда требуется координировать движения рук с отдельными движениями указателя на экране, которые чувствуют себя косвенными по сравнению.
Все программы Windows должны иметь хороший интерфейс пера. Пользователи должны иметь возможность эффективно выполнять наиболее важные задачи программы с помощью пера. Некоторые задачи, такие как ввод текста или подробная обработка пикселей, не подходят для пера, но они должны быть по крайней мере возможны.
К счастью, если ваша программа уже хорошо спроектирована и поддерживает сенсорный ввод, обеспечить хорошую поддержку пера легко. Для этой цели, хорошо спроектированная программа:
Имеет хорошую поддержку мыши. Интерактивные элементы управления имеют четкие, видимые возможности и состояния наведении указателя для обратной связи указателя. Объекты имеют стандартное поведение для стандартных взаимодействий с мышью (одинарный и двойной щелчок левой кнопкой мыши, щелчок правой кнопкой мыши, перетаскивание и наведение указателя мыши).
Форма указателя изменяется соответствующим образом, чтобы указать тип прямой манипуляции.
Имеет хорошую поддержку клавиатуры. Программа делает пользователей эффективными, предоставляя стандартные назначения сочетаний клавиш, особенно для навигации и редактирования команд, которые также могут быть созданы с помощью жестов.
Имеет достаточно большие элементы управления для сенсорного ввода. Минимальный размер элементов управления составляет 23 x 23 пикселя (13 x 13 единиц диалога [DLU]), а наиболее часто используемые элементы управления — не менее 40 x 40 пикселей (23 x 22 единиц dll). Чтобы избежать неотвечивого поведения, между целевыми объектами не должно быть небольших пробелов. Элементы пользовательского интерфейса должны быть разделены так, чтобы смежные целевые объекты либо касались, либо имели по крайней мере 5 пикселей (3 DDL) пространства между ними.
Доступен. Использует Microsoft Active Accessibility (MSAA) для предоставления программного доступа к пользовательскому интерфейсу для специальных возможностей. Программа соответствующим образом реагирует на изменения темы и системных метрик.
Хорошо работает и хорошо выглядит в 120 точек на дюйм( точек на дюйм), что является рекомендуемым разрешением экрана по умолчанию для компьютеров с поддержкой пера.
Использует общие элементы управления. Большинство распространенных элементов управления предназначены для поддержки хорошего взаимодействия с пером. При необходимости программа использует хорошо реализованные пользовательские элементы управления, предназначенные для поддержки простого нацеливания и интерактивного манипулирования.
Использует ограниченные элементы управления. Если они предназначены для простого нацеливания, ограниченные элементы управления, такие как списки и ползунки, могут быть лучше, чем неограниченные элементы управления, такие как текстовые поля, так как они сокращают потребность в вводе текста.
Предоставляет соответствующие значения по умолчанию. Программа выбирает наиболее безопасный (для предотвращения потери данных или системного доступа) и наиболее безопасный вариант по умолчанию. Если безопасность и безопасность не являются факторами, программа выбирает наиболее вероятный или удобный вариант, тем самым устраняя ненужное взаимодействие.
Обеспечивает автоматическое заполнение текста. Предоставляет список наиболее вероятных или недавно введенных значений, чтобы упростить ввод текста.
К сожалению, обратное также верно, если ваша программа не хорошо спроектирована, ее недостатки будут особенно очевидны для пользователей, которые используют ручку.
Модель взаимодействия с пером
Если у вас нет опыта использования пера, лучше всего учиться, делая это. Получите компьютер с поддержкой пера, отложите мышь и клавиатуру в сторону и выполните задачи, которые вы обычно выполняете, используя только перо. Обязательно попробуйте как программы с поддержкой рукописного ввода, такие как журнал Windows, так и программы, которые не поддерживают рукописный ввод. Если у вас есть планшетный компьютер, поэкспериментируйте с проведением его в разных положениях, например на коленях, ляжи на столе или на руках, пока вы стоите. Попробуйте использовать его в книжной и альбомной ориентации, удерживая ручку для письма и только для указания, в левой и правой руке.
Поэкспериментируйте с помощью пера, вы обнаружите следующее:
Небольшие элементы управления трудно использовать. Размер элементов управления сильно влияет на вашу способность эффективно взаимодействовать. Элементы управления размером 10 x 10 пикселей работают достаточно для пера, но более крупные элементы управления еще удобнее в использовании. Например, элементы управления спином (15 x 11 пикселей) слишком малы для удобного использования с пером.
Раздачность является одним из факторов. Иногда ваша рука охватывает вещи, которые вы, возможно, захотите увидеть или взаимодействовать с ними. Например, для правшей пользователей контекстные меню трудно использовать, если они отображаются справа от точки щелчка, поэтому лучше, если они отображаются слева. Windows позволяет пользователям указывать свою управляемость в элементе панели управления Параметры планшетного компьютера.
Расположение задач помогает. Хотя вы можете перемещать указатель через 14-дюймовый экран с 3-дюймовым движением мыши, использование пера требует, чтобы вы перемещали руку на все 14 дюймов. Многократное перемещение между объектами, которые находятся далеко друг от друга, может быть мудреным, поэтому гораздо лучше держать взаимодействие задач в диапазоне отдохнувшейся руки, когда это возможно. Контекстные меню удобны, так как они не требуют движения рукой.
Ввод и выделение текста затруднены. Длинный ввод текста особенно усложняется с помощью пера, поэтому автозавершение и допустимые значения текста по умолчанию могут действительно упростить задачи. Выделение текста также может быть довольно сложным, поэтому задачи проще, если они не требуют точного размещения курсора.
Небольшие цели у края дисплея может быть очень трудно коснуться. Некоторые рамки дисплея выступают, а некоторые технологии сенсорного экрана менее чувствительны к краям, что затрудняет использование элементов управления рядом с краем. Например, кнопки Свернуть, Развернуть и восстановить и Закрыть в строке заголовка могут быть сложнее использовать при развернутом окне.
Расположение элемента управления
Расположение задач снижает удручающее повторяющееся перекрестное перемещение. Чтобы свести к минимуму движения рук, найдите элементы управления рядом с тем местом, где они, скорее всего, будут использоваться.
Неправильно:
В этом примере из Windows XP цветовая палитра слишком далека от того места, где она, скорее всего, будет использоваться.
Учтите, что текущее расположение пользователя является ближайшим к целевому объекту, что делает его тривиальным для приобретения. Таким образом, контекстные меню используют все преимущества Закона Фиттса, как и мини-панели инструментов, используемые Microsoft Office.
Текущее расположение указателя всегда проще всего получить.
Небольшие целевые объекты рядом с краем дисплея могут быть трудными, поэтому не размещайте небольшие элементы управления рядом с краями окна. Чтобы элементы управления были легко ориентироваться при развернутом окне, сделайте их не менее 23x23 пикселей (13x13 DLL) или поместите их от края окна.
Взаимодействия с пером
Системные жесты
Системные жесты определяются и обрабатываются Windows. В результате все программы Windows имеют доступ к ним. Эти жесты имеют эквивалентные сообщения команд мыши, клавиатуры и приложения:
Системный жест
Синтезированные эквивалентные сообщения
Наведение курсора (если поддерживается)
Наведение указателя мыши
Коснитесь (вниз и вверх)
Щелчок левой кнопкой мыши
Двойное касание (вниз и вверх дважды)
Двойной щелчок левой кнопкой мыши
Нажмите и удерживайте (вниз, пауза, вверх)
Щелчок правой кнопкой мыши
Перетаскивание (вниз, перемещение, вверх)
Перетаскивание мыши влево
Нажатие, удержание и перетаскивание (вниз, пауза, перемещение, вверх)
Перетаскивание мыши вправо
Выбор (вниз, перемещение по выбираемым объектам, вверх)
Жесты — это простые жесты, которые примерно эквивалентны сочетаниям клавиш. Навигационные щелчки включают перетаскивание вверх, перетаскивание вниз, перемещение назад и перемещение вперед. К щелчкам редактирования относятся копирование, вставка, отмена и удаление. Чтобы использовать жесты, вашей программе нужно реагировать только на связанные команды нажатия клавиш.
Восемь жестов flick и их назначения по умолчанию в Windows 7. Жесты навигации были изменены в соответствии с сдвигом (когда объект перемещается с помощью жеста) вместо прокрутки (когда объект перемещается в противоположном направлении жеста).
Восемь жестов прокрутки и их назначения по умолчанию в Windows Vista.
Навигационные жесты имеют естественное сопоставление, поэтому их легко изучать и запоминать. Жесты редактирования являются диагоналями, требующими большей точности, и их сопоставления не так естественны (проведите к корзине, чтобы удалить, проведите пальцем в направлении стрелки "Назад", чтобы отменить), поэтому они не включены по умолчанию. Все действия по щелчку можно настроить с помощью элемента панели управления Перо и устройства ввода.
Флик
Синтезированные эквивалентные сообщения
Проведите пальцем влево
Команда "Вперед" (команда "Назад" для Windows Vista)
Проведите пальцем вправо
Команда "Назад" (команда "Переслать" для Windows Vista)
Щелкать вверх
Прокрутка клавиатуры вниз
Проведите пальцем вниз
Прокрутка клавиатуры вверх
Проведите пальцем вверх по левому краю по диагонали
Удаление клавиатуры
Проведите пальцем вниз по левому краю по диагонали
Отмена клавиатуры
Проведите вверх по диагонали вправо
Копирование клавиатуры
Проведите пальцем вниз по диагонали вправо
Вставка с помощью клавиатуры
Жесты приложения
Приложения также могут определять и обрабатывать другие жесты. Распознаватель жестов (Майкрософт) может распознавать более 40 жестов. Чтобы использовать жесты приложения, программа должна определить жесты, которые она распознает, а затем обработать результирующие события.
Скорость реагирования и согласованность
Скорость реагирования необходима для создания прямых и привлекательных возможностей пера. Чтобы чувствовать себя прямо, жесты должны вступают в силу немедленно, а точки контакта объекта должны оставаться под пером на протяжении всего жеста. Любая задержка, неустойчивый ответ, потеря контакта или неточные результаты разрушают восприятие прямых манипуляций, а также качество.
Согласованность необходима для создания естественного и интуитивно понятного интерфейса пера. После изучения стандартного жеста пользователи ожидают, что этот жест будет иметь одинаковый эффект во всех применимых программах. Чтобы избежать путаницы и разочарования, никогда не присваивайте стандартным жестам нестандартные значения. Вместо этого используйте настраиваемые жесты для взаимодействия, уникального для вашей программы.
Редактирование рукописного ввода и текста
Редактирование рукописного ввода и текста является одним из наиболее сложных взаимодействий при использовании пера. Использование ограниченных элементов управления, соответствующих значений по умолчанию и автозавершения устраняет или уменьшает необходимость ввода текста. Но если ваша программа включает редактирование текста или рукописного ввода, вы можете сделать пользователей более продуктивными, автоматически увеличивая пользовательский интерфейс ввода до 150 процентов по умолчанию при использовании пера.
Например, программа электронной почты может отображать пользовательский интерфейс в обычном размере, но увеличивать пользовательский интерфейс ввода до 150 % для создания сообщений.
В этом примере пользовательский интерфейс ввода увеличен до 150 процентов.
Если вы делаете только четыре вещи...
Сделайте ваши программы Windows хорошими возможностями пера! Пользователи должны иметь возможность эффективно выполнять наиболее важные задачи вашей программы с помощью пера (по крайней мере, те задачи, которые не требуют много ввода текста или подробных операций с пикселями).
Рассмотрите возможность добавления поддержки для написания, рисования и добавления примечаний непосредственно с помощью рукописного ввода в наиболее подходящих сценариях.
Чтобы создать прямой и привлекательный интерфейс, жесты вступают в силу немедленно, держать точки контакта под пером пользователя плавно на протяжении всего жеста и иметь эффект карты жеста непосредственно с движением пользователя.
Чтобы создать естественный и интуитивно понятный интерфейс, поддерживайте соответствующие стандартные жесты и присваивайте им стандартные значения. Используйте пользовательские жесты для взаимодействия, уникального для вашей программы.
Рекомендации
Управление использованием
Предпочитать использовать общие элементы управления. Большинство распространенных элементов управления предназначены для поддержки хорошего взаимодействия с пером.
Предпочитать ограниченные элементы управления. По возможности используйте ограниченные элементы управления, такие как списки и ползунки, вместо элементов управления без ограничений, таких как текстовые поля, чтобы уменьшить потребность в вводе текста.
Укажите соответствующие значения по умолчанию. Выберите самый безопасный (чтобы предотвратить потерю данных или системного доступа) и наиболее безопасный вариант по умолчанию. Если безопасность и безопасность не являются факторами, выберите наиболее вероятный или удобный вариант, тем самым устраняя ненужное взаимодействие.
Укажите автозавершение текста. Предоставьте список наиболее вероятных или последних входных значений, чтобы упростить ввод текста.
Если для важных задач, использующих множественный выбор, обычно используется стандартный список с множественным выбором, укажите возможность использовать проверка списке.
Соблюдайте системные метрики. Используйте системные метрики для всех размеров, не для жестких размеров. При необходимости пользователи могут изменить системные метрики или dpi в соответствии со своими потребностями. Однако рассматривайте это как последнее средство, так как пользователям обычно не нужно настраивать параметры системы, чтобы сделать пользовательский интерфейс пригодным для использования.
В этом примере была изменена системная метрика высоты меню.
Управление размерами, макетом и интервалами
Для общих элементов управления используйте рекомендуемые размеры элементов управления. Они достаточно велики для хорошего взаимодействия с пером, за исключением элементов управления спиной (которые не используются с пером, но являются избыточными).
Выберите макет, который размещает элементы управления рядом с местом, где они, скорее всего, будут использоваться. По возможности сохраняйте взаимодействие с задачами в пределах небольшой области. Избегайте движений рук на большие расстояния, особенно для распространенных задач и перетаскивания.
Используйте рекомендуемый интервал. Рекомендуемый интервал подходит для пера.
Интерактивные элементы управления должны быть сенсорными или желательно иметь не менее 5 пикселей (3 DDL) пространства между ними. Это позволит избежать путаницы при касании пользователем за пределами целевого объекта.
Рассмотрите возможность добавления дополнительных вертикальных интервалов в группах элементов управления, таких как командные ссылки, поля проверка и переключатели, а также между группами. Это упрощает их дифференцировать.
Взаимодействие
Для программ, предназначенных для приема рукописного ввода, включите рукописный ввод по умолчанию. Рукописный ввод по умолчанию позволяет пользователям вводить рукописный ввод, только начиная писать, не касаясь, не предоставляя команды или не делая ничего особенного. Это обеспечивает максимально естественное взаимодействие с пером. Для программ, не предназначенных для приема рукописного ввода, обрабатывайте ввод пером в текстовых полях в качестве выделения.
Разрешить пользователям масштабировать пользовательский интерфейс содержимого , если в вашей программе есть задачи, требующие редактирования текста. При использовании пера рекомендуется автоматически увеличивать масштаб до 150 %.
Так как жесты запоминаются, присвойте им значения, согласованные в разных программах. Не придавайте жестам с фиксированной семантикой разные значения. Вместо этого используйте соответствующий жест для конкретной программы.
Handedness
Если окно является контекстным, всегда отображайте его рядом с объектом, с которым оно было запущено. Поместите его в сторону, чтобы исходный объект не был покрыт окном.
Если отображается с помощью мыши, по возможности поместите контекстное смещение окна вниз и вправо.
Показать контекстные окна рядом с объектом, с которым он был запущен.
Если отображается с помощью пера, по возможности поместите контекстное окно таким образом, чтобы оно не закрывалось рукой пользователя. Для правшей отображается слева; в противном случае отображается справа.
При использовании пера также показывать контекстные окна, чтобы они не были покрыты рукой пользователя.
Разработчики: Вы можете различать события мыши и события пера с помощью API GetMessageExtraInfo . Вы можете определить ручность пользователя с помощью API SystemParametersInfo с SPI_GETMENUDROPALIGNMENT.
Прощение
Укажите команду отмены. В идеале следует указать отмену для всех команд, но программа может содержать некоторые команды, эффект которых нельзя отменить.
Предоставьте хороший отзыв о наведении указателя мыши. Четко укажите, когда перо находится над целевым объектом, который можно щелкнуть. Такая обратная связь — отличный способ предотвратить случайные манипуляции.
Когда это удобно, предоставляйте хорошую обратную связь по перу вниз, но не принимайте меры до тех пор, пока не будете двигаться или перо вверх. Это позволяет пользователям исправлять ошибки, прежде чем они делают их.
Всякий раз, когда это удобно, позволяет пользователям легко исправлять ошибки. Если действие вступает в силу с пером вверх, разрешите пользователям исправлять ошибки, скользя, пока ручка еще не работает.
Документация
При обращении к вводу пера:
Ссылаться на перо в виде пера в качестве пера. На первом упоминание используйте ручку для планшета.
Обратитесь к кнопке сбоку пера как на кнопку пера, а не на кнопку со стволом.
Общие сведения о клавиатуре, мыши, трекболе, пере или пальце в качестве устройства ввода.
Используйте касание (и двойное касание) вместо щелчка при документе процедур, относящихся к использованию пера. Коснуться означает нажать экран, а затем поднять перед удержанием. Его можно использовать или не использовать для создания щелчка мышью. Для взаимодействий, которые не связаны с пером, продолжайте использовать щелчок.
The app user experience often defines the success of your app. This learning path will focus on how to provide the best app navigation, and build the best UI using themes, icons, images, personalization, different form factors, and controls.