Diretrizes de links

Applies to Windows and Windows Phone

Um exemplo da aparência do controle de hiperlink padrão

Descrição

Um hiperlink pode tomar forma de texto embutido (XAML e HTML) ou um botão de hiperlink (XAML). Em cada forma, um hiperlink é uma parte do texto que um usuário pode tocar para abrir uma página da Web em um navegador—ou outra seção na mesma página—no aplicativo atual.

Exemplo

Uma captura de tela que ilustra o controle de hiperlink padrão

Este é o controle correto?

Use um hiperlink quando um hipertexto for o padrão certo de interação—ou seja, o texto que responde quando é tocado e em que o usuário navega para obter mais informações sobre ou relacionadas ao texto tocado. O destino de navegação é criptografado em um Identificador de Recurso Uniforme (URI) na NavigateUri propriedade (XAML) ou na href propriedade (HTML).

Um hiperlink que aparece embutido em texto dinâmico é melhor executado usando um Hyperlink (XAML) ou um a element | a object (HTML) para que você possa se beneficiar da quebra de linha automática dentro do hiperlink. Use um HyperlinkButton (XAML) quando você não precisar de quebra de linha ou se você precisar personalizar a visualização do hiperlink.

Por padrão, o hiperlink terá a aparência e funcionará como um hiperlink convencional: o texto é exibido em uma cor distinta ou uma imagem que pode ser tocada para acionar a navegação. Mas você pode personalizar a visualização para fazer um HyperlinkButton (XAML). Uma vez que o usuário interage com ele, um hiperlink fornece um comentário ao alterar seu estado e, portanto, sua aparência. Norma,. pressionado e desativado são exemplos de estados de hiperlink.

Conforme mostrado abaixo, um botão inserido em uma sentença é uma boa oportunidade para se repensar. Se o botão faz o usuário navegar para obter mais informações sobre ou relacionadas ao texto, então considere um hiperlink. Se o botão aciona outra ação, então considere colocar o botão em um local diferente e trabalhe novamente no conteúdo do texto e do botão.

IncorretoCorreto
Exemplo do uso incorreto de um controle de caixa de seleçãoExemplo do uso correto de um controle de caixa de seleção

Neste exemplo, um botão não é o controle correto para exibir conteúdo adicional ao usuário devido a tomar muio espaço e parecer fora do lugar.

Neste exemplo, um hiperlink funciona porque ele fica da mesma forma que o resto do texto na sentença.

 

O que fazer e o que não fazer

  • Mantenha hiperlinks individuais longe o suficiente de outro para que o usuário possa tocá-los de forma precisa.
  • Somente use o estado desativado para um hiperlink se o estado for temporário—como, por exemplo, outros processos de sistema estiverem ocorrendo —ou se o hiperlink puder ser ativado por ação do usuário.
  • Use fonte padrão, a menos que as diretrizes da marca o orientem de outra forma.
  • Coloque uma dica de ferramenta em cada link. Dessa forma, se o link for obstruído pelo dedo do usuário, ele ainda poderá ver o que será feito.
  • Ao navegar até um site externo, coloque o nome de domínio dentro da dica de ferramenta e formate-o com uma cor de fonte secundária. A adição do nome de domínio à dica de ferramenta informa ao usuário que ele está prestes a acessar um site externo. Assim, ele não terá uma surpresa quando clicar no link. É suficiente para mostrar apenas o domínio de nível superior.
  • Quando não importa ao usuário se ele visitou um link, formate o estado visitado desse link de forma que ele tenha a mesma aparência independentemente de o usuário ter visitado ou não essa página. O estilo padrão para um link visitado pode parecer diferente de um link que ainda não foi visitado. Às vezes, o usuário não se importa se um link foi visitado. Isso geralmente acontece em links que fazem parte da navegação principal do seu aplicativo.
  • Mantenha o texto do link conciso. Se você deseja fornecer informações adicionais, insira-as dentro da dica de ferramenta do link.
  • Não use links para executar ações diferentes de navegar.

Tópicos relacionados

Para designers
Diretrizes para dicas de ferramenta
Para desenvolvedores (HTML)
a element | a object (HTML)
Para desenvolvedores (XAML)
Windows.UI.Xaml.Controls Hyperlink class
Windows.UI.Xaml.Controls HyperlinkButton class

 

 

Mostrar:
© 2014 Microsoft