Modelos de layout e vídeo de design

Modelos de layout e vídeo de design
Crie a aparência do aplicativo para dispositivos móveis com modelos de layout e cartões. (8 min)
Adobe

Noções básicas de layouts, cartões e páginas de navegação

Um modelo de layout determina como uma coleção é exibida em uma página de navegação. Os itens em uma coleção são exibidos no layout da página de navegação como cartões. Ao criar um modelo de layout, você:

  • Define as propriedades de layout, como o número de colunas, os valores da margem e da medianiz e a forma da célula.
  • Cria cartões e define a aparência do cartão.
  • Define regras de mapeamento baseadas em metadados para determinar qual conteúdo é associado aos cartões.

A aparência da página de navegação é determinada pelo design de layout, pelos designs do cartão e pelas configurações de metadados de itens da coleção.

Página de navegação com layout de 3 colunas
Essa página de navegação usa um layout de 3 colunas. O layout inclui cartões de largura total, 2 x 1 e 1 x 1 que representam banners, artigos e outras coleções.

Os cartões determinam a aparência do conteúdo na página de navegação. As imagens em miniatura podem aparecer de forma diferente em cartões que têm tamanhos diferentes, dependendo das configurações do layout. Por exemplo, uma imagem em miniatura que esteve uma vez em destaque em um cartão de 3 x 1 pode mudar para um cartão de 1 x 1 quando os metadados são atualizados.

Layouts de cartões
A área amarela representa o mesmo cartão de 2 x 2 mostrado em um layout de 3 colunas (à esquerda) e um layout de 5 colunas com uma proporção de células diferente (à direita).

Observe o seguinte:

  • Dentro de um modelo de layout, você pode definir diferentes layouts (às vezes chamados “execuções”) para tablets, telefones e Web.
  • Ainda não há suporte a para fixação de cartões a um local específico na grade.
  • Ainda não há suporte para o uso de regras de mapeamento para determinar a ordem do conteúdo. As regras de mapeamento determinam qual conteúdo é aplicado a cartões.

Usar Modelos de layout para criar cartões e layouts

A ferramenta de criação de páginas de navegação é um novo método para criar cartões e layouts. Por enquanto, você pode usar essa nova ferramenta ou as guias existentes Cartões e Layouts para criar páginas de navegação.

Com a ferramenta de criação de páginas de navegação, você pode usar a mesma interface para criar layouts e produzir e mapear cartões ao conteúdo. Durante o processo de criação, é possível especificar uma coleção existente para vê-la enquanto ajusta as configurações da página de navegação. Altere o tamanho do dispositivo de destino, ative e desative uma grade e clique em uma área de cartão para editar as configurações de texto ou de imagem da área. Você pode até mesmo reordenar os itens na coleção que importou.

Você pode importar layouts que já foram criados para criar uma nova versão baseada nas configurações do layout existente.

Modelos de layout requerem um aplicativo criado com a versão 2015.8 (dezembro de 2015) ou posterior.

 

  1. Crie uma coleção e adicione conteúdo.

  2. No portal sob demanda (https://aemmobile.adobe.com), clique em Conteúdo e layouts > Modelos de layout.

  3. Clique em Criar para definir um modelo de layout do zero.

  4. Defina as propriedades do layout.

    Defina as propriedades do layout

    No lado direito da ferramenta de layout de páginas de navegação, especifique um nome para o layout e defina as propriedades do layout, como o número de colunas e o espaçamento da margem e da medianiz.

    Importar coleção

    Clique em Importar coleção e importe uma de suas coleções para ver como as alterações afetam o conteúdo final. Quando salvar o layout, você pode escolher aplicá-lo à coleção, e também pode reorganizar os itens dentro das coleções. Quando você salva o modelo de layout, essas alterações na coleção são preservadas.

    Menu Visualizar

    Use o menu Visualizar para selecionar a orientação paisagem ou retrato. Selecione o tamanho do dispositivo de destino. Conforme você altera o layout, selecione tamanhos diferentes de dispositivo para visualizar e garantir que o seu design funcione em todos os dispositivos de destino.

  5. Crie cartões.

    Crie cartões

    Clique no sinal de mais para criar um cartão. No painel da direita, especifique um nome para o cartão e altere as configurações. As opções no painel da direita mudam de acordo com a área do cartão selecionada.

    Para editar a área de texto, expanda as propriedades do cartão no lado esquerdo e selecione o item que deseja editar, como Área de texto ou de imagem. Se não quiser que os metadados do cartão apareçam, clique no botão Ocultar próximo aos metadados.

    Você também pode clicar na área de visualização central para editar as configurações dessa área. Teste várias configurações na área de visualização para mudar o zoom, exibir o layout ou o cartão ou mostrar/ocultar conteúdo.

  6. Defina regras de mapeamento para os cartões.

    Defina regras de mapeamento para os cartões

    Clique em “Mapeamento” e clique em “Adicionar regra” ao lado do cartão selecionado.

    Defina as propriedades de mapeamento. Por exemplo, você pode definir uma regra para banners com importância alta. À medida que ajusta as regras de mapeamento, você pode visualizar qual conteúdo na coleção será atribuído a esse cartão.

    Arraste itens na coleção para alterar sua ordem. Quando você salva o modelo de layout, essas alterações são aplicadas.

  7. (Opcional) Crie layouts adicionais (chamados de “execuções”) para definir diferentes configurações de aparência para tablets, telefones e Web, conforme descrito posteriormente.

  8. Salve e feche o modelo de layout.

    Ao salvar o modelo de layout, você será solicitado a aplicar o modelo de layout à coleção importada caso o layout não tenha sido atribuído àquela coleção.

  9. Atribua o modelo de layout às coleções.

    Você pode atribuir o modelo de layout a uma coleção ao editar o modelo de template ou ao editar as propriedades da coleção.

    Atribua um layout a uma coleção

Configurações de layout

Um layout ajuda a determinar a aparência das páginas de navegação da coleção.

Se você desejar usar layouts diferentes para telefones e tablets, defina vários layouts (chamados de “execuções de layout”) dentro de um modelo de layout, conforme descrito posteriormente. 

Especifique essas configurações do layout.

Proporção da célula

Use essa opção para alterar a forma da célula, que é expressa em uma proporção largura:altura. Por exemplo, uma célula 1:1 é quadrada, uma célula 4:3 é mais ampla que alta e uma célula 3:4 é mais alta que ampla. Se especificar um número positivo como 3,5, você criará uma proporção 3,5:1.

Colunas

Especifique o número de colunas. Observe que um cartão não pode ter mais colunas que o layout.

Unidades de medianiz e margens

Indique se deseja usar pixels independentes de dispositivo (DIP) ou porcentagens para especificar valores de medianiz e margem. Medianizes determinam o espaçamento entre cartões. Margens determinam o espaçamento entre as bordas externas dos cartões e a área de visualização do dispositivo.

Cor de fundo do layout

Especifique uma cor para o fundo da página de navegação. Essa cor aparece em margens e medianizes e pode ser exibida através da transparência do cartão.

Imagem de fundo

Se selecionar essa opção, a imagem especificada para a imagem de fundo da coleção é mostrada na página de navegação. Se uma imagem de fundo e uma cor de fundo de layout forem especificadas, a imagem de fundo terá precedência. Se a imagem de fundo inclui transparência, a cor de fundo é revelada. A imagem de fundo é exibida em tela cheia e dimensionada para preenchimento. Ela também é estática. Os cartões são rolados na frente do plano de fundo da coleção.

Configurações do cartão

Ao criar um cartão, você especifica as características de design, define o número de células de layout propagadas e especifica outras propriedades. No entanto, você não especifica qual conteúdo está associado ao cartão; você o faz ao configurar as regras de mapeamento.

O formato e o tamanho reais do cartão são determinados pelo layout ao qual o cartão é aplicado. Por exemplo, um cartão de 3 x 2 aplicado a um layout de 3 colunas parecerá muito diferente de um cartão de 3 x 2 aplicado a um layout de 12 colunas.

Ao especificar as configurações, a área de visualização exibe a aparência aproximada do cartão usando o conteúdo da coleção importada.

Quando estiver especificando as configurações para cartões, é importante entender conceitos como a interação entre diferentes itens no cartão.

Ordem ou hierarquia

O fundo do cartão se situa na parte superior do layout. A área de imagem do cartão se situa na parte superior do fundo do cartão. A área de texto do cartão se situa na parte superior da área de imagem do cartão.

Imagens do cartão

Imagens para coleções, artigos, banners e fundos de coleção são centralizadas, dimensionadas e recortadas quando necessário para preencher a área de imagem do cartão.

Os cartões são visíveis em uma página de navegação de coleção. Os cartões podem ter determinadas propriedades que são semitransparentes e revelam a cor ou a imagem de fundo para a coleção. Certas partes de um cartão podem ser semitransparentes e aumentar a legibilidade do texto ou matizar imagens de um cartão, as quais, porém, são opacas.

Formato do cartão

Ao especificar um formato de cartão de “imagem esquerda” ou “imagem direita”, certifique-se de que o layout no qual o cartão aparece deixa espaço suficiente para que os metadados da área de imagem e da área de texto sejam exibidos lado a lado. Para evitar que a área de texto seja recortada, pode ser necessário alterar a proporção da célula do layout ou aumentar a largura do cartão.  

Fundos, bordas e margens

Um cartão pode ter uma cor e ser transparente. A cor do cartão serve como fundo para a imagem do cartão e as áreas de texto.

O fundo do cartão pode ser coberto por imagens, áreas de texto e bordas. A imagem e as áreas de texto se situam na parte frontal do fundo do cartão. As imagens e áreas de texto apresentam margens.

As margens mantêm a imagem e as áreas de texto afastadas da borda do cartão. A especificação de margens é a forma como você pode exibir fundos de cartão semitransparentes. As imagens podem apresentar sobreposições de cor transparentes para matização. As áreas de texto também podem apresentar complementos, que mantêm os rótulos (metadados) afastados da borda da área de texto.

As áreas de texto também apresentam fundos de cor que são compatíveis com a transparência. Você pode usar os fundos de cor para adicionar contraste ou tornar os textos mais legíveis.

As bordas não são transparentes e mantêm tudo afastado da borda do cartão. Se desejar uma borda semitransparente para seu cartão que seja semitransparente e interaja com o seu layout de fundo, use margens para sua imagem ou áreas de texto. Se desejar apenas espaço entre os cartões, use medianizes no seu layout.

Opções de configuração do cartão
A área de imagem do cartão fica acima do fundo do cartão. A área de texto do cartão fica acima da área de imagem do cartão.

Pixels independentes de dispositivo (DIP)

Um pixel independente de dispositivo (DIP) é uma abstração de pixels usada por aplicativos que um sistema subjacente converte em pixels físicos. Por exemplo, a especificação de uma borda de 10 gradientes terá o mesmo tamanho relativo quando exibida em um iPad SD de 1024 x 768 e um iPad HD de 2048 x 1536.

Campos de metadados

Ao definir campos de metadados, você pode incluir texto e até dois itens de metadados dentro do mesmo campo. Se você definir, por exemplo, um campo de metadados como {{title}} de {{author}}, o cartão exibirá os metadados do artigo, como “Pesca na Argentina de Jane Doe”. Se preferir, você pode criar campos separados para {{title}} e {{author}} para que os metadados apareçam em diferentes linhas do cartão.

Se o conteúdo mapeado para o cartão não inclui metadados para o campo especificado, o campo é ignorado, a menos que o campo inclua texto adicional, como “de” em de {{author}}. Por padrão, os cartões incluem três campos de metadados. Clique no ícone “olho” no painel à esquerda para ocultar ou mostrar cada campo de metadados.

Ao selecionar o item de metadados {{Published Date (Default)}}, o local e o idioma do dispositivo são usados para determinar o formato. Por exemplo, a data é exibida como MM/DD/AAAA em inglês (EUA) e DD/MM/AAAA em alemão.

Você pode selecionar qualquer fonte personalizada enviada usando a seção Fontes e personalização do aplicativo do portal. Consulte Personalizar aplicativos AEM Mobile: usando fontes personalizadas.

Vínculo de conteúdo a cartões

Definindo regras de mapeamento para determinar quais cartões são aplicados ao conteúdo com base em metadados. Por exemplo, você pode criar uma regra de mapeamento que aplica um grande cartão a qualquer artigo com prioridade definida como “Alta”, bem como criar uma segunda regra de mapeamento que aplica um cartão menor a qualquer artigo com prioridade definida como “Normal”.

Para cada parte do conteúdo, as regras de mapeamento são avaliadas em sequência. A primeira regra de mapeamento correspondente ao conteúdo é aplicada. O conteúdo deve atender às configurações de todas as regras especificadas. Por exemplo, se a regra de mapeamento incluir Tipo definido como Banners e Importância definida como Alta, o conteúdo deve ser um banner com alta importância para que a regra seja aplicada.

Por exemplo, suponha que já criou um cartão de 3 x 1 e um cartão de 1 x 1. Crie a primeira regra de mapeamento com as seguintes configurações: Tipo=Artigos e Importância=Alta. Para o cartão de 1 x 1, crie uma segunda regra de mapeamento sem metadados especificados. Neste exemplo, a regra de 3 x 1 deve estar acima da regra de 1 x 1. Caso contrário, os artigos de alta importância serão atribuídos a cartões de 1 x 1.

Os metadados usados em configurações de regras diferenciam maiúsculas e minúsculas. A criação de uma regra com uma palavra-chave interna “azul” não se aplica ao conteúdo com palavra-chave interna “Azul”. Se o conteúdo incluir várias palavras-chave, é necessário que a regra de mapeamento corresponda apenas a uma das palavras-chave para atender a essa configuração.

Observe que o mapeamento do cartão não determina a ordem do conteúdo em uma página de navegação. Ele determina apenas qual conteúdo é vinculado ao cartão.

Regra ativa

Use a opção “Regra ativa” para aplicar um cartão apenas ao número de itens especificado que corresponder aos critérios. Por exemplo, você pode criar uma regra de mapeamento que aplica um cartão largo somente ao primeiro item na coleção. Ao editar a regra, selecione Regra ativa > Às vezes, e especifique o número de itens aos quais você deseja aplicá-la.

Neste exemplo, a regra aplica o cartão grande somente ao primeiro item da coleção.

Mapear elementos

Use a opção “Mapear elementos” para aplicar um cartão a cada enésimo cartão que corresponder aos critérios. Por exemplo, se quiser criar cartões com alternância, crie um cartão que aplique a regra a cada segundo cartão, começando com o primeiro item que corresponder à regra. Neste exemplo, a cada dois itens que comecem com o segundo item, um seria formatado de acordo com a regra seguinte que correspondesse aos critérios.

Esta regra aplica o cartão a cada dois itens. A regra de qualificação seguinte é aplicada a outros itens com alternância.

Execuções de layout para telefones e tablets

 

As execuções de layout oferecem flexibilidade de design, permitindo que você defina aparências diferentes para a mesma coleção em tablets, telefones e no visualizador da Web para desktop. Com esse novo recurso, é possível fornecer o mesmo conteúdo para todas as plataformas e dispositivos compatíveis e manter o controle do design. Quando cria um modelo de layout, você pode definir diferentes configurações de layout e cartão para tablets, telefones e Web. As configurações de execução para cada dispositivo de destino determinam a aparência da página de navegação, dependendo do dispositivo.

As execuções de layout são especialmente úteis para projetos com 1 coleção de nível superior, mas também podem ser eficazes para projetos com 2 coleções de nível superior em que você usa qualquer uma das mesmas coleções para telefones e tablets.

No exemplo a seguir, os cartões nesse modelo de layout têm aparências diferentes em tablets e telefones.

Quando você cria um modelo de layout, somente a execução de tablet é criada inicialmente. Esta é a execução padrão que se aplica a tablets, telefones e Web, a menos que um novo layout de telefone ou Web seja adicionado. Quando você adiciona um layout (também chamado de “execução”) para o telefone ou Web, a execução nova incorpora as configurações da execução padrão do tablet. Daí em diante, todas as alterações feitas nas configurações de cartão ou layout se aplicam somente a essa execução. (As regras de mapeamento do cartão se aplicam a todas as execuções.)

Observação:

se você criar um layout no início do processo e perceber que o fez muito cedo, você pode excluir essa execução, alterar as configurações que se aplicam a todas as execuções e recriar a execução.

  1. Crie um modelo de layout. Crie cartões e aplique regras de mapeamento. Especifique as configurações que se aplicam a todos os dispositivos de destino.

    Como prática recomendada, você deve começar com o layout para tablet, adicionar cartões e regras de mapeamento e alterar as configurações de cartão e layout que se aplicam a todos os dispositivos. Em seguida, crie um layout para telefone e altere as configurações que se aplicam somente ao telefone (e à Web, se necessário). Assim, você evita especificar as mesmas configurações para cada execução.

  2. Para criar uma execução de telefone, clique em Telefone > Adicionar layout e clique em Criar layout. Com Telefone selecionado, especifique as configurações de cartão e layout que são específicas para o telefone.

  3. Para criar uma execução para o visualizador da Web para desktop, clique em Web > Adicionar layout e clique em Criar layout. Com Web selecionada, especifique as configurações de cartão e layout que são específicas para o visualizador da Web para desktop.

  4. Salve o modelo de layout e aplique-o às coleções. Teste os resultados.

    Execuções de layout requerem um aplicativo criado com a versão 2015.8 (dezembro de 2015) ou posterior.

Para remover um layout, clique para exibir o menu suspenso do layout e clique no ícone de lixeira. Não é possível remover o layout padrão.

Para alterar o tamanho de visualização de destino, escolha um tamanho diferente no menu do dispositivo.

Para alterar o layout padrão, clique para exibir o menu suspenso de layout e clique em Tornar padrão. O layout padrão é usado para qualquer tipo de dispositivo que não seja especificado. Se você tem somente layouts para telefone e tablet, por exemplo, e torna padrão o telefone, o layout para telefone é aplicado à Web.

Use o menu para alterar as opções de visualização, defina um padrão ou remova o layout.

Ordem dos cartões

Em geral, a ordem do conteúdo em uma coleção determina a ordem do conteúdo em um layout. No entanto, se a disposição dos cartões deixar lacunas no layout ao longo de uma borda, a ordem do conteúdo pode mudar, já que as lacunas na borda podem ser preenchidas por cartões menores que são inferiores na ordem. Por exemplo, suponha que o primeiro artigo em uma grade de 3 colunas é um cartão de 2 x 1, o segundo item se vincula a um cartão de 3 x 1 e o terceiro item, a um cartão 1 x 1. Nesse caso, o cartão 1 x 1 aparecerá na lacuna da linha superior acima do segundo item.

Definição da ordem do cartão
O terceiro item desloca-se em frente ao segundo item para preencher uma lacuna.

Exclusão de cartões e layouts

Para excluir um layout ou um modelo de layout, primeiro remova todas as referências a ele das coleções. Especificamente, edite as coleções para atribuir um layout diferente. Após aplicar um layout diferente às coleções, você deverá publicar novamente essas coleções caso já tenham sido publicadas. Assim, você poderá cancelar a publicação do layout ou do modelo de layout e excluí-lo.

Para excluir um cartão que não faça parte de um modelo de layout, primeiro remova todas as referências a ele. Especificamente, edite os layouts para remover ou editar todas as regras de mapeamento que fazem referência ao cartão. Depois de remover ou editar as regras de mapeamento de layout, você deverá publicar novamente esses layouts caso já tenham sido publicados. Assim, poderá cancelar a publicação do cartão e excluí-lo. (Se um cartão faz parte de um modelo de layout, você pode excluí-lo a qualquer momento.)

Não é possível excluir o cartão padrão ou o layout padrão.

Copiar layouts para um projeto diferente

Você pode copiar modelos de layout de um projeto para outro dentro da mesma conta. Se o projeto de destino incluir um modelo de layout com o mesmo nome, você pode determinar se deve sobrescrever o layout existente ou copiar um novo.

  1. Selecione os modelos de layout que deseja copiar e escolha Copiar o layout para outro projeto.

  2. Na lista de projetos disponíveis em sua conta, selecione o projeto para o qual você deseja copiar os layouts.

  3. Se você deseja que o layout copiado substitua o layout com o mesmo nome no projeto de destino, selecione Se existir, substituir.

    Caso não selecione esta opção, uma mensagem de erro aparece se o projeto de destino possuir um layout com o mesmo nome do layout copiado.

  4. Clique em Copiar para o destino.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online