P A T H

Design de aplicativos no Alteryx One

O que você vai aprender?

Na última dica ensinamos como criar um App utilizando o Alteryx one, e como prometido nessas dicas iremos mostrar as opções para o design do seu APP.

INTRODUÇÃO

Essa dica ensinará a usar os componentes disponíveis para configurar o design do seu app.

COMPONENTES

Como componente para nosso aplicativo temos várias opções.

  • Banner

O Banner é usado para chamar a atenção do usuário, pode ser usado mais de uma vez, quantas vezes forem necessário.

Nossa configuração pede

Type: Escolher o tipo mudará a cor do Banner. Os tipos são Info (azul claro), Sucess (verde), Warning (vermelho), Error (vermelho).

Style: O estilo define a opacidade do nosso Banner, são 3 estilos. Standard, é o padrão, como está no print, Outlined onde a cor se aplica somente nas letras, e não no fundo (nessa opção podemos escolher a largura do Banner), e Filled, onde a cor de fundo é mais escura e as letras ficam na cor branca.

Show Icon: É uma caixa para marcar ou desmarcar que mostra quando clicada a legenda que você definir.

Color: Aqui as cores podem ser definidas de acordo com a palheta (Cores do texto, do preenchimento e da borda do banner)

Spacing: Define todo o espaçamento entre o Banner e os outros componentes.

Conditional Logic: Monta uma condição lógica para que o Banner seja visível.

 

  • Divider

O Divider é uma linha divisória com configuração bem simples.

Stroke Width: Largura do divisor.

Colour: Escolhe a cor desse divisor, dentre alguma da palheta de cores.

Stroke Style: Solid (Uma linha bem definida), Dashed (Linha pontilhada)

Spacing: Igual ao Banner

Conditional Logic: Também igual ao Banner.

• Image

Com esse componente você adiciona uma imagem ao aplicativo, podendo configurar

Image URL: Onde você adiciona aqui o link para a imagem

Image Title: Um título para a imagem

ImageFit: Para definir como a imagem vai se ajustar, mais larga, mais comprida, etc.

Horizontal Aligment: O alinhamento horizontal da imagem é definido aqui.

Spacing: Igual ao Banner.

Conditional Logic: Também igual ao Banner.

 

  • Link

O link é o mais simples até agora. Aqui um link é adicionado ao App.

Display Text: Escolha um texto para ser clicado, como um link.

Link URL: Escolha o caminho para que o link irá levar.

Spacing: Igual ao Banner.

Conditional Logic: Também igual ao Banner.

 

  • Spacer

É um espaçador, muito semelhante ao Divider.

Mas nesse caso somente a cor pode ser escolhida

Color: Escolha a cor do Spacer.

Spacing: Igual ao Banner.

Conditional Logic: Também igual ao Banner.

 

TEXT

Em texto podemos adicionar textos ao nosso aplicativo, em dois formatos: Heading e Paragraph.

  • Heading

É o título, então o tamanho será maior, e a fonte diferente.

Você pode escolher:

Style: Onde você entre 4 opções de tamanhos e grossuras diferentes.

Content: Aqui você escreve o que será o título.

Horizontal Alignment: Onde você escolhe entre 3 alinhamentos.

Spacing: Igual ao Banner.

Conditional Logic: Também igual ao Banner.

 

  • Paragrath

Aqui você escreve o que quiser, assim como em texto, mas no formato de parágrafo.

Defina:

Content: Conteúdo do parágrafo.

Horizontal Alignment: Onde você escolhe entre 3 alinhamentos.

Spacing: Igual ao Banner.

Conditional Logic: Também igual ao Banner.

11 de Fevereiro de 2026

PRONTO! AGORA VOCÊ SABE TODAS AS OPÇÕES DE DESIGN DE APLICATIVOS NO ALTERYX ONE.

Language