Ссылки

Примечание

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

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

Когда пользователи наведите указатель мыши на ссылку, текст ссылки отображается как подчеркнутый (если он еще не был) и фигура указателя изменяется на руку.

Текстовая ссылка — это самый легкий элемент управления, который можно щелкнуть, и часто используется для уменьшения визуальной сложности оформления.

Примечание

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

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

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

  • Ссылка, используемая для перехода на другую страницу, окно или раздел справки; отображение определения; инициализация команды; или выберите вариант? Если нет — используйте другой элемент управления.
  • Лучше ли выбрать кнопку команды? Используйте кнопку команды , если:
    • Элемент управления инициирует немедленное действие, включая отображение окна, и эта команда связана с основной целью окна.
    • Откроется окно для сбора входных данных или выбора, даже если для дополнительной команды.
    • Метка короткая, состоящая из четырех или меньше слов, что позволяет избежать неловкого внешнего вида длинных кнопок.
    • Команда не является встроенной.
    • Элемент управления отображается в группе других связанных кнопок команд.
    • Действие является разрушительным или необратимым. Так как пользователи связывают ссылки с навигацией (и возможностью резервного копирования), ссылки не подходит для команд со значительными последствиями.
    • Аналогичным образом в мастере или потоке задач команда представляет обязательство. В таких окнах кнопки команд предлагают обязательство, а ссылки предлагают переход к следующему шагу.

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

Создание ссылок узнаваемыми

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

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

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

Пользователи могут распознать ссылку только путем визуальной проверки, если ссылка использует цвета системы ссылок и по крайней мере один из следующих визуальных подсказок:

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

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

  • Текст, предполагающий нажатие, например команду, начинающуюся с императивной команды, например Show, Print, Copy или Delete.
  • Размещение в блоке обычного текста.

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

screen shot of gray labels on black background

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

Создание ссылок для конкретных, релевантных и предсказуемых

Текст ссылки должен указывать результат щелчка по ссылке.

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

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

Чтобы оценить текст ссылки, выполните приведенные далее действия.

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

Если вы делаете только две вещи...

  1. Сделать ссылки обнаруживаемыми только при визуальном осмотре. Пользователям не нужно взаимодействовать с вашей программой, чтобы найти ссылки.

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

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

Ссылки имеют несколько функциональных шаблонов:

Использование Пример
Ссылки навигации
Ссылка, используемая для перехода на другую страницу или окно.
Переход по ссылке перемещается на другую страницу, как в окне браузера или мастере; или отображает новое окно. В отличие от ссылок на задачи навигация не инициирует задачу, а просто переходит в другое место или переходит к уже выполняемой задаче. Навигация подразумевает безопасность, так как пользователь всегда может вернуться.
Заголовки новостей
В этом примере щелкнув ссылку, перейдите на страницу заголовков новостей.
Ссылки на задачи
Ссылка, используемая для запуска новой команды.
Щелкнув ссылку, немедленно выполните команду или отобразите диалоговое окно или страницу, чтобы получить дополнительные входные данные. В отличие от ссылок навигации, ссылки задач инициируют новую задачу вместо продолжения существующей задачи. Задачи не подразумевают, что средства безопасности не могут вернуться к предыдущему состоянию с помощью команды Back. Ссылки на задачи вызываются так, чтобы предотвратить путаницу с ссылками команд.
Имя входа
В этом примере нажатие ссылки инициирует команду входа.
Ссылки на справку
Текстовая ссылка, используемая для отображения раздела справки.
Щелкнув ссылку, в отдельном окне отобразится статья справки.
Что такое надежный пароль?
В этом примере при щелчке ссылки отображается окно справки с заданным разделом.
Ссылки на определения
текстовая ссылка, используемая для отображения определения в подсказке, когда пользователь щелкает или наведен указатель мыши на ссылку.
этот шаблон полезен для определения терминов, которые могут не быть известны пользователям без добавления загромождения экрана.
screen shot of infotip displayed by mouse hover
В этом примере отображается определение подсказки.
Ссылки на меню
набор ссылок задач, используемых для создания меню.
Поскольку контекст меню указывает набор ссылок, текст обычно не подчеркивается (за исключением наведения указателя мыши) и может не использовать системные цвета ссылок.
screen shot of a set of links
В этом примере набор ссылок создает меню.
Ссылки на параметры
выбранный параметр или его заполнитель, при нажатии ссылки вызывается команда, чтобы изменить этот параметр.
в отличие от обычных текстовых ссылок, ссылка изменяет текст в соответствии с выбранным параметром и всегда рисуется с помощью цвета невидимой ссылки.
screen shot of a rule in outlook rules wizard
В примере слева показано правило из мастера правил Microsoft Outlook с параметрами заполнителя. После того как пользователи щелкают ссылки и выбирают некоторые параметры, правый пример обновляет текст ссылки, чтобы отобразить результаты.
использование ссылок параметров особенно подходит, если параметры имеют переменный формат.
screen shot of a modified rule in the rules wizard
В примере справа показано, что правила Outlook имеют переменный формат.
screen shot of how text changes to drop-down list
В примере слева показана ссылка на параметр. При выборе он становится раскрывающимся списком, как показано справа.

Ссылки также имеют несколько шаблонов презентаций:

Использование Пример
Ссылки на обычный текст
состоит только из текста.
эта презентация является наиболее гибкой, так как ее можно использовать в любом месте, включая встроенную.
screen shot of blue link text
В этом примере цвет текста четко идентифицирует встроенную ссылку.
Текст со ссылками на значки
текст с предыдущим значком, указывающим его функцию.
Поскольку рисунок предоставляет дополнительное визуальное указание ссылки, легче распознать как ссылку, чем ссылку обычного текста, которая не подчеркивается. Этот шаблон обычно использует значок пикселя 16 x 16 пикселей.
screen shot of list of four links with icons
в этом примере значки предоставляют дополнительную визуальную информацию о ссылке.
screen shot of play command with small triangle
В этом примере стандартный треугольный символ воспроизведения указывает, что этот текст является командой.
Ссылки только для графики
состоит только из рисунка.
учитывая отсутствие текстовой ссылки, нет цвета ссылки или подчеркивания, чтобы указать ссылку. Эти ссылки зависят от графического оформления, предлагающего щелчок, или текста в рисунке, который предлагает действие при щелчке пользователей. Ссылки только для графики иногда имеют эффект мыши, чтобы указать ссылку. этот подход помогает, но не обнаруживается только визуальным осмотром.
screen shot of icon with link-select mouse pointer
В этом примере ссылка не обнаруживается только визуальной проверкой.
Из-за потенциальных проблем с распознаванием и локализацией ссылки только для графики не рекомендуются в качестве единственного способа выполнения задачи.

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

Взаимодействие

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

Color

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

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

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

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

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

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

    screen shot of power-plan message with blue text

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

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

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

    screen shot of blue link text on blue background

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

Подчеркивание

  • Для ссылок, необходимых для выполнения основной задачи, предоставьте визуальные подсказки, чтобы пользователи могли распознавать ссылки только путем визуальной проверки. Эти подсказки включают подчеркивание, графику или маркеры, а также стандартные расположения ссылок. Пользователям не нужно навести указатель мыши на объект или попытаться щелкнуть его, чтобы определить, является ли она ссылкой. Используйте подчеркнутый текст, если ссылка не очевидна из его контекста.
  • Не подчеркивайте текст, который не является ссылкой, так как пользователи могут предположить, что это ссылка. Используйте курсив, где в противном случае используется подчеркнутый текст. Резервирование подчеркивания только для ссылок.
  • При печати не печатайте подчеркивания или цвета ссылок. Печатные ссылки не имеют значения и потенциально запутаны.
  • Используйте значок стрелки только для командных ссылок. Обычные ссылки не должны использовать значок со стрелкой, если они не используются в качестве замены ссылок команд в Windows XP.
  • Поместите значок слева от текста. Значок должен визуально привести к тексту.

Правильно:

screen shot of icon preceding text

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

screen shot of icon following text

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

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

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

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

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

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

    Правильно:

    Папка "Изображения" упрощает общий доступ к изображениям. Вы можете использовать задачи в изображениях для отправки изображений по электронной почте или публикации их в безопасном частном расположении в Интернете. Вы также можете распечатать изображения непосредственно из папки "Рисунки".

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

    Папка "Изображения" упрощает общий доступ к изображениям. Вы можете использовать задачи в изображениях для отправки изображений по электронной почте или публикации их в безопасном частном расположении в Интернете. Вы также можете распечатать изображения непосредственно из папки "Рисунки".

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

    Исключения:

    • Если инструкция содержит ссылку, поместите ссылку в инструкцию.

      Использование надежных паролей очень важно. Дополнительные сведения см. в разделе Надежные пароли.

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

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

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

    Правильно:

    Запуск

    Stop

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

    Удалить файл

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

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

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

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

    screen shot of dialog box with dimmed menu command

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

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

    screen shot of link with supplemental text

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

    screen shot of link with infotip

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

  • Не предоставляйте подсказку, которая является просто повтором текста ссылки.

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

    screen shot of link with redundant infotip

    В этом примере подсказка рискует раздражает пользователей повторяющейся.

Текст

  • Не назначайте ключ доступа. Доступ к ссылкам выполняется с помощью клавиши TAB.

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

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

    screen shot of a security notice warning link

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

  • Для встроенных ссылок:

    • Сохраните прописную букву и знак препинания текста.

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

    • Ссылка на наиболее релевантную часть текста и выберите текст ссылки, который достаточно велик, чтобы легко щелкнуть.

      Правильно:

      Перейдите в группу новостей.

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

      Перейдите в группу новостей.

      В этих примерах "Go" не является самой важной частью текста, и она недостаточно велика, чтобы сделать хороший целевой объект щелчка, в то время как "группа новостей" — это.

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

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

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

      В этом примере "UX" и "рекомендации" являются двумя разными ссылками.

  • Для независимых ссылок (не встроенных):

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

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

    Поиск антивирусного программного обеспечения

    Получение антивирусного программного обеспечения

    Правильно:

    Как узнать, установлено ли антивирусное по

    Установка антивирусного программного обеспечения

    В неправильном примере различие между двумя ссылками неясно.

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

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

    Щелкните здесь для описания.

    Правильно:

    Описание:

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

Ссылки навигации

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

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

  • Если ссылка содержит URL-адрес веб-сайта, начиная с "www", опустите имя протокола https:// и используйте строчные буквы.

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

    https://www.microsoft.com

    www.microsoft.com

    Правильно:

    microsoft.com

    В неправильных примерах "https://" и "www" не говоря уже.

Ссылки на задачи

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

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

    Печать...

    В этом примере печать... Ссылка на команду отображает диалоговое окно "Печать" для сбора дополнительных сведений.

    Печать

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

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

  • При необходимости завершите ссылку задачи на "сейчас", чтобы отличить ее от ссылки навигации.

    Загрузка файлов

    Скачивание файлов

    В этом примере "Скачать файлы" переходит на страницу для скачивания файлов, тогда как "Скачать файлы сейчас" фактически выполняет команду.

Ссылки на справку

Рекомендации и примеры см. в справке.

Связывание подсказок

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

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

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

При ссылке на ссылки:

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

Пример. Чтобы запустить проверку, нажмите кнопку "Проверить компьютер".