Текстовые поля

Примечание

Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

С помощью текстового поля пользователи могут отображать, вводить или изменять текстовое или числовое значение.

Типичное текстовое поле.

Примечание

Рекомендации по макету, шрифтам и выноскам представлены в отдельных статьях.

Выбор правильного элемента управления

Чтобы определиться, ответьте на вопросы:

• Целесообразно ли эффективно перечислять все допустимые значения? Если это так, рассмотрим одиночный список, представление списка, раскрывающийся список, редактируемый раскрывающийся список или ползунок .
• Имеют ли допустимые значения ограничения? Или допустимые данные ограничены только форматом (ограниченной длиной или типами символов)? Если да, используйте текстовое поле.
• Если значение представляет такой тип данных, который имеет особый общий элемент управления, Например, дата, время, адрес IPv4 или IPv6. Если это так, используйте соответствующий элемент управления, например элемент управления датой, а не текстовое поле.
• Если данные числовые:
  • Воспринимают ли пользователи параметр как относительное количество? Если да, то используйте ползунок.
  • Требуется ли пользователю мгновенная обратная связь при изменении значения параметра? Если да, используйте ползунок, возможно, вместе с текстовым полем. Например, пользователи могут легко выбрать цвет с помощью ползунка, так как они могут сразу увидеть влияние изменений на оттенок, насыщенность или яркость значений.

Принципы проектирования

Хотя текстовые поля имеют преимущество быть очень гибкими, они имеют недостаток в том, что они имеют минимальные ограничения. Единственными ограничениями для редактируемого текстового поля являются:

• При необходимости можно задать максимальное количество символов.
• При необходимости можно ограничить ввод только числовыми символами (0 9).
• Если вы используете элемент управления спином, можно ограничить выбор элемента управления спином допустимыми значениями.

Помимо длины и необязательного наличия элемента управления spin, в текстовых полях нет визуальных подсказок, указывающих допустимые значения или их формат. Это означает использование меток для передачи этой информации пользователям. Если пользователь вводит недопустимый текст, необходимо обработать ошибку с сообщением об ошибке.

Как правило, следует использовать наиболее ограниченные возможности управления. Используйте неограниченные элементы управления, такие как текстовые поля, в качестве последнего средства. При этом при рассмотрении ограничений учитывайте потребности глобальных пользователей. Например, элемент управления, ограниченный США почтовых индексов, не глобализован, но текстовое поле без ограничений, принимающее любой формат почтовых индексов.

Варианты использования

Текстовое поле — это гибкий элемент управления с несколькими возможными способами использования.

Метка	Значение
Ввод данных Однострочное текстовое поле без ограничений, используемое для ввода или редактирования коротких строк.	Однострочное текстовое поле без ограничений.
Ввод форматированных данных Набор коротких однострочных текстовых полей фиксированного размера, используемых для ввода данных в определенном формате.	Текстовое поле, используемое для отформатированного ввода данных. Примечание: Функция автоматического выхода автоматически перемещает фокус ввода с одного текстового поля на другое. Одним из недостатков этого подхода является то, что данные нельзя скопировать или вставить как единый блок.
Ввод данных с выбором Однострочное текстовое поле без ограничений, используемое для ввода или редактирования строк, в сочетании с кнопкой команды, которая помогает пользователям выбирать допустимые значения.	В этом примере команда Обзор помогает пользователям выбрать допустимые значения.
Текстовые входные данные Многострочное текстовое поле без ограничений, используемое для ввода или редактирования длинных строк.	Многострочное текстовое поле без ограничений.
Числовой ввод Однострочное текстовое поле, доступное только для ввода или изменения чисел, с необязательным элементом управления вращением для упрощения ввода с помощью мыши.	Текстовое поле, используемое для числовых входных данных. Сочетание текстового поля и связанного с ним элемента управления спином называется спин-полем.
Ввод пароля и ПИН-кода Однострочное текстовое поле без ограничений, используемое для безопасного ввода паролей и ПИН-кодов.	Текстовое поле, используемое для ввода паролей.
Выходные данные Однострочное текстовое поле только для чтения, которое всегда отображается без границы и используется для отображения коротких строк.	В отличие от статического текста, данные, отображаемые с помощью текстового поля, можно прокручивать (полезно, если данные шире элемента управления), выбирать и копировать. Однострочное текстовое поле только для чтения, используемое для отображения данных.
Текстовые выходные данные Многострочное текстовое поле только для чтения, используемое для отображения длинных строк.	Текстовое поле только для чтения, используемое для отображения данных.

Рекомендации

Общее

• При отключении текстового поля также отключите все связанные метки, метки инструкций, элементы управления вращением и кнопки команд.

• Используйте автоматическое заполнение, чтобы помочь пользователям вводить данные, которые, скорее всего, будут использоваться многократно. Примеры включают имена пользователей, адреса и имена файлов. Однако не используйте автоматическое заполнение для текстовых полей, которые могут содержать конфиденциальную информацию, например пароли, ПИН-коды, номера кредитов карта или медицинские сведения.

• Не заставляйте пользователей прокручиваться без необходимости. Если требуется, чтобы данные были больше, чем текстовое поле, и вы можете легко сделать текстовое поле больше без ущерба для макета, размер поля, чтобы исключить необходимость прокрутки.

  Неправильно:

  

  В этом примере текстовое поле должно быть гораздо длиннее для обработки своих данных.

• Полосы прокрутки:

  • Не размещайте горизонтальные полосы прокрутки в многострочном текстовом поле. Вместо этого используйте вертикальную прокрутку и обтекание строк.
  • Не размещайте полосы прокрутки в однострочных текстовых полях.

• Для числового ввода можно использовать элемент управления спином. Для текстового ввода используйте раскрывающийся список или редактируемый раскрывающийся список.

• Не используйте функцию автоматического выхода, за исключением форматированного ввода данных. Автоматическое смещение фокуса может удивить пользователей.

Редактируемые текстовые поля

• По возможности ограничьте длину входного текста. Например, если допустимые входные данные являются числом от 0 до 999, используйте числовое текстовое поле с ограничением на три символа. Все части текстовых полей, использующие форматированные входные данные, должны иметь короткую фиксированную длину.

• Будьте гибкими с помощью форматов данных. Если пользователи, скорее всего, вводят текст в самых разных форматах, попробуйте обработать все наиболее распространенные из них. Например, многие имена, числа и идентификаторы можно вводить с необязательными пробелами и знаками препинания, а прописные буквы часто не имеют значения.

• Если вы не можете обработать вероятные форматы, потребуете определенный формат с помощью форматированных входных данных или укажите допустимые форматы в метке.

  Хорошо:

  

  В этом примере текстовое поле требует ввода в определенном формате.

  Лучше:

  

  В этом примере форматированный шаблон входных данных используется для требования определенного формата.

  Лучшие:

  

  В этом примере текстовое поле обрабатывает все вероятные форматы.

• Учитывайте гибкость формата при выборе максимальной длины входных данных. Например, допустимый номер кредитной карта может содержать до 19 символов, поэтому ограничение длины чем-либо короче затруднит ввод чисел с использованием более длинных форматов.

• Не используйте форматированный шаблон ввода данных, если пользователи с большей вероятностью вставляют длинные и сложные данные. Скорее, зарезервируйте форматированный шаблон ввода данных для ситуаций, когда пользователи чаще вводят данные.

  

  В этом примере форматированный шаблон ввода данных не используется, поэтому пользователи могут вставлять IPv6-адреса.

• Если пользователи, скорее всего, повторно вводят все значение, выделите весь текст на фокусе ввода. Если пользователи с большей вероятностью будут редактировать, поместите курсор в конец текста.

  

  В этом примере пользователи чаще заменяют, чем редактируют, поэтому все значение выбирается в фокусе ввода.

  

  В этом примере пользователи чаще добавляют ключевые слова, чем заменяют текст, поэтому курсор помещается в конец текста.

• Всегда используйте многострочное текстовое поле, если символы новой строки являются допустимыми входными данными.

• Если текстовое поле предназначено для файла или пути, всегда предоставляйте кнопку Обзор.

Числовые текстовые поля

• Выберите наиболее удобную единицу и пометите ее. Например, рекомендуется использовать миллилитры вместо литров (или наоборот), процентные значения вместо прямых значений (или наоборот) и т. д.

  Правильно:

  

  В этом примере единица помечена, но требует, чтобы пользователи вводили десятичные числа.

  Лучше:

  

  В этом примере текстовое поле использует более удобную единицу.

• Используйте элемент управления спином всякий раз, когда это полезно. Однако иногда элементы управления спином не являются практическими, например, когда пользователям нужно ввести много больших чисел. Используйте элементы управления спином, когда:

  • Входные данные, скорее всего, будут небольшим числом, как правило, меньше 100.
  • Пользователи, скорее всего, внесет небольшое изменение в существующее число.
  • Пользователи чаще используют мышь, чем клавиатуру.

• Выравнивайте числовой текст по правому краю всякий раз, когда:

  • Существует несколько числовых текстовых полей.
  • Текстовые поля выровнены по вертикали.
  • Пользователи, скорее всего, будут добавлять или сравнивать значения.

  Правильно:

  

  В этом примере числовой текст выравнивается по правому краю, чтобы упростить сравнение значений.

  Неправильно:

  

  В этом примере числовой текст неправильно выравнивается по левому краю.

• Всегда выравнивайте денежные значения по правому краю.

• Не присваивайте специальные значения определенным числовым значениям, даже если эти специальные значения используются внутри приложения. Вместо этого используйте проверка поля или переключатели для явного выбора пользователем.

  Неправильно:

  

  В этом примере значение -1 имеет особое значение.

  Правильно:

  

  В этом примере поле проверка делает параметр явным.

Ввод пароля и ПИН-кода

• Всегда используйте общий элемент управления паролем вместо создания собственного. Для безопасной обработки паролей и ПИН-кодов требуется специальная обработка.

Дополнительные рекомендации и примеры см. в разделе Воздушные шары.

Текстовые выходные данные

• Рекомендуется использовать белый цвет фона для большого многострочного текста, доступного только для чтения. Белый фон упрощает чтение текста. Большое количество текста на сером фоне препятствует чтению.

Дополнительные сведения о цветах фона см. в разделе Шрифты.

Выходные данные

• Не используйте границу для однострочных текстовых полей, доступных только для чтения. Граница является визуальным признаком того, что текст доступен для редактирования.
• Не отключать однострочные текстовые поля только для чтения. Это не позволяет пользователям выбирать и копировать текст в буфер обмена. Кроме того, пользователи не могут прокручивать данные, если они превышают размер своих границ.
• Не устанавливайте остановку табуляции в однострочном текстовом поле только для чтения, если пользователю, скорее всего, не потребуется прокрутить или скопировать текст.

Проверка входных данных и обработка ошибок

Так как текстовые поля обычно не ограничиваются приемом только допустимых входных данных, может потребоваться проверить входные данные и устранить любые проблемы. Проверьте различные типы входных проблем следующим образом:

• Если пользователь вводит недопустимый символ, проигнорируйте его и отобразите всплывющую подсказку , объясняющую допустимые символы.

  

  В этом примере выноска сообщает о неправильном входном символе.

• Если входные данные имеют недопустимое значение или формат, отображается всплывающее окно с проблемой ввода, когда текстовое поле теряет фокус ввода.

• Если входные данные несовместимы с другими элементами управления в окне, сообщите об ошибке по завершении всего ввода, например когда пользователь нажимает кнопку ОК для модального диалогового окна.

Не очищайте недопустимые входные данные, если пользователи не смогут легко исправить ошибки. Это позволяет пользователям исправлять ошибки, не начиная с начала заново. Например, следует удалить неправильные пароли и ПИН-коды, так как пользователи не могут легко их исправить.

Дополнительные рекомендации и примеры см. в статье Сообщения об ошибках и выноски.

Запросы

Запрос — это метка или короткая инструкция, помещаемая в текстовое поле в качестве значения по умолчанию. В отличие от статического текста, запросы исчезают с экрана, когда пользователь вводит что-то в текстовое поле или получает фокус ввода.

Типичный запрос.

Используйте запрос, когда:

• Место на экране настолько высоко, что использование метки или инструкции нежелательно, например на панели инструментов.
• Запрос в первую очередь предназначен для компактного определения назначения текстового поля. Это не должна быть важная информация, которую пользователь должен видеть при использовании текстового поля.

Не используйте запросы только для указания пользователей на ввод или нажатие кнопок. Например, не записывайте текст запроса с надписью Введите имя файла и нажмите кнопку Отправить.

При использовании запросов:

• Нарисуйте текст запроса курсивом серого цвета, а фактический входной текст — обычным черным. Текст запроса не следует путать с реальным текстом.
• Оставьте текст запроса кратким. Вместо полных предложений можно использовать фрагменты.
• Используйте выделение прописных букв, как в предложении.
• Не используйте конечные знаки препинания или многоточия.
• Текст запроса не должен быть редактируемым и исчезать, когда пользователь щелкает или нажимает клавишу TAB в текстовом поле.
  • Исключение: Если текстовое поле имеет фокус ввода по умолчанию, запрос отображается и исчезает, когда пользователь начинает вводить текст.
• Текст запроса восстанавливается, если текстовое поле остается пустым при потере фокуса ввода.

Рекомендуемые размеры и интервалы

Рекомендуемые размеры и интервалы для текстовых полей.

Ширина текстового поля — это визуальное представление об ожидаемом размере входных данных. При определении размера текстовых полей:

• Выберите ширину, подходящую для самых длинных допустимых данных. В большинстве случаев пользователям не нужно прокручивать самую длинную строку, которую они введут или будут просматривать.
• Включите дополнительные 30 процентов (до 200 процентов для более короткого текста) для любого текста (но не чисел), который будет локализован.
• Если ожидаемые входные данные не имеют определенного размера, выберите ширину, согласованную с другими текстовыми полями или элементами управления в окне.
• Размер многострочного текстового поля для отображения целого количества строк текста.

Метки

Метки текстовых полей

• Для всех текстовых полей требуются метки. Напишите метку как слово или фразу, а не как предложение, оканчиваясь двоеточием, и используя статический текст.

  Исключения:

  • Текстовые поля с запросами, расположенные в том месте, где пространство находится на уровне "Премиум".

  • Для добавления меток группа текстовых полей, используемых для отформатированных входных данных , должна рассматриваться как одно текстовое поле.

  • Если текстовое поле подчинено переключателю или проверка поле и отображается меткой, заканчивающейся двоеточием, не помещайте дополнительную метку на текстовое поле.

  • Опустить метки элементов управления, которые переиспокоят инструкцию main. В этом случае инструкция main принимает двоеточие (если это не вопрос) и ключ доступа.

    Хорошо:

    

    В этом примере метка текстового поля является лишь повтором инструкции main.

    Лучше:

    

    В этом примере избыточная метка удаляется, поэтому инструкция main принимает двоеточие и ключ доступа.

• Назначьте уникальный ключ доступа. Рекомендации по назначению клавиш доступа см. в разделе Клавиатура.

• Используйте выделение прописных букв, как в предложении.

• Поместите метку слева от надписи или над ним, а затем выровняйте ее по левому краю текстового поля. Если метка находится слева, выровняйте текст метки по вертикали с текстом текстового поля.

  Правильно:

  

  

  В этих примерах метка сверху выравнивается по левому краю текстового поля, а метка слева — по тексту в текстовом поле.

  Неправильно:

  

  

  В этих неправильных примерах метка сверху выравнивается по тексту в текстовом поле, а метка слева — по верхнему краю текстового поля.

• Единицы измерения (например, секунды или соединения) можно указать в скобках после метки.

• Если текстовое поле принимает произвольно небольшое максимальное число символов, можно указать максимальное количество входных данных в метке. Ширина текстового поля также должна предполагать максимальный размер.

  

  В этом примере метка задает максимальное количество символов.

• Не делайте содержимое текстового поля (или его метки единиц) частью предложения, так как это невозможно локализовать.

• Если текстовое поле можно использовать для ввода нескольких элементов, укажите, как разделять элементы в метке.

  

  В этом примере разделитель элементов указан в метке .

• Рекомендации по указанию обязательных входных данных см. в разделе Обязательные входные данные в диалоговых окнах.

Метки инструкций

• Если вам нужно добавить инструктивный текст о текстовом поле, добавьте его над меткой. Используйте полные предложения с завершающей пунктуацией.

• Используйте выделение прописных букв, как в предложении.

• Дополнительные сведения, которые полезны, но не являются необходимыми, должны быть краткими. Поместите эти сведения в круглые скобки между меткой и двоеточием или без скобок под текстовым полем.

  

  В этом примере под текстовым полем помещаются дополнительные сведения.

Метки запроса

• Оставьте текст запроса кратким. Вместо полных предложений можно использовать фрагменты.
• Используйте выделение прописных букв, как в предложении.
• Не используйте конечные знаки препинания или многоточия.
• Если запрос предписывает пользователям ввести сведения, на которые будет реагировать кнопка рядом с текстовым полем, просто поместите кнопку рядом с текстовым полем. Не используйте запрос, чтобы направить пользователей на нажатие кнопки (например, не записывайте текст запроса с надписью Перетащите файл и нажмите кнопку Отправить).

Документация

При обращении к текстовым полям:

• Используйте тип для ссылки на взаимодействия с пользователем, требующие ввода или вставки; в противном случае используйте ввод, если пользователи могут помещать данные в текстовое поле с помощью других средств, таких как выбор значения из списка или нажатие кнопки Обзор.

• Используйте select для ссылки на запись в текстовом поле, доступном только для чтения.

• Используйте точный текст метки, включая прописные буквы, и включите поле слова. Не включайте символ подчеркивания или двоеточия клавиши доступа. Не ссылайтесь на текстовое поле как на текстовое поле.

• По возможности отформатируйте метку полужирным шрифтом. В противном случае поместите метку в кавычки, только если это необходимо, чтобы избежать путаницы.

  Пример. Введите пароль в поле Пароль и нажмите кнопку ОК.

• Если текстовому поле требуется определенный формат, документируйте только наиболее часто используемый допустимый формат. Предоставление пользователям возможности самостоятельного обнаружения любых других форматов. Вы хотите быть гибкими с форматами данных, но это не должно привести к созданию сложной документации.

  Правильно:

  Введите серийный номер части в формате 1234-56-7890.

  Неправильно:

  Введите серийный номер части в любом из следующих форматов:

  1234567890

  1234-56-7890

  1234 56 7890