Determinar a abordagem de aplicativo

Que experiência os usuários deveriam ter ao iniciarem seu aplicativo? Quantos níveis de páginas de navegação você fornecerá? Seu aplicativo terá uma orientação horizontal ou vertical ou diferentes orientações para telefone e tablet? Que aparência suas páginas de navegação devem ter?

Você pode criar diferentes tipos de experiências de aplicativos. Considere um exame dos aplicativos existentes para ter ideias. Veja a lista de casos de uso e exemplos em Recursos inspiradores do AEM Mobile.

 

Fluxograma

Vídeo do design do aplicativo

Andrei Ganci e Martin Hecko apresentaram a seguinte sessão na conferência Adobe MAX 2015:

Designing Killer Mobile App Experiences (Design de experiências de aplicativos Killer Mobile) (1:15:32)

Você usa designs diferentes para tablets e telefones?

Na criação de um projeto, você determina se vai usar a mesma coleção de nível superior para telefones e tablets ou coleções de nível superior diferentes. O motivo principal para usar coleções de nível superior separadas para tablets e telefones é adicionar conteúdo diferente a tablets e telefones. Por exemplo, o aplicativo do seu tablet poderia incluir artigos na horizontal e seu telefone, artigos na vertical. Consulte Criar projetos para o AEM Mobile.

Se você quiser usar o mesmo conteúdo para tablets e telefones, mas especificar layouts de página de navegação diferentes, poderá criar modelos de layout com as execuções diferentes para telefones e tablets. Consulte Criar cartões e layouts: execuções de layout.

Escolha se quer usar um design ou conteúdo diferente para telefones e tablets
Escolha se quer usar um conteúdo diferente para telefones e tablets.

Criar conteúdo para seu aplicativo

Use a seção Conteúdo e layouts do On-Demand Portal para adicionar artigos, banners e coleções que serão usados no aplicativo. Ter conteúdo e coleções no projeto o ajudará a experimentar designs diferentes de páginas de navegação.

Escolha o formato que será usado para seus arquivos de artigo. Por exemplo, é possível criar artigos HTML de fluxo controlável ou artigos de layout fixo baseados em documentos de origem do InDesign. Consulte Métodos para criação de conteúdo do AEM Mobile.

Ao criar coleções, escolha a configuração para determinar se elas devem abrir páginas de navegação (com layouts e cartões) ou abrir a exibição de conteúdo (que mostra o primeiro artigo da coleção).

Adicione artigos ao seu projeto
Adicione artigos ao seu projeto.

Criar uma coleção “inicial”

Quando os usuários iniciam seu aplicativo, qual deve ser a experiência inicial? Identifique uma coleção que será sua coleção “inicial”. Não há nada especial sobre essa coleção. Só é preciso que ela seja o primeiro item na sua coleção de nível superior.

Adicione os itens à sua coleção de início. Pode ser qualquer combinação de banners, artigos e outras coleções. Você determinará a aparência desses itens quando criar cartões e layouts.

Deseja que os usuários possam deslizar para esquerda ou direita para alternar entre itens diferentes no nível superior? Em caso positivo, selecione a opção Ativar deslize horizontal para navegar pelo conteúdo. Se desmarcar a opção, os usuários precisarão tocar nos cartões ou usar o menu do aplicativo para passar para outro conteúdo.

Determinar o conteúdo de nível superior

Ao criar um projeto, você indica se quer usar a mesma coleção de nível superior ou coleções separadas para telefones e tablets. Se usar a mesma coleção de nível superior para telefones e tablets, uma coleção denominada “padrão” será exibida na seção Coleções do portal. Se usar coleções de nível superior diferentes para telefones e tablets, as coleções denominadas “telefone padrão” e “tablet padrão” serão exibidas na seção Coleções.

Use essas coleções para determinar o conteúdo de nível superior. O primeiro item nessa coleção de nível superior deve ser sua coleção de início. Qualquer outro item aparecerá no menu do aplicativo. Além disso, ao deslizar para esquerda e direita na coleção de início, você pode percorrer outro conteúdo de nível superior se a opção Ativar deslize horizontal para navegar pelo conteúdo na coleção de início for selecionada.

Para obter mais detalhes, consulte Gerenciar coleções no AEM Mobile.

Observação:

mesmo que as coleções de nível superior não apareçam no aplicativo como páginas de navegação, ainda é necessário fornecer uma ID de produto e imagem de coleção.

Gerenciar coleções
Neste exemplo, o primeiro item na coleção de nível superior (“tablet padrão”) é a coleção “Inicial”.

Exibição do menu do aplicativo
O menu do aplicativo mostra a imagem de marca (especificada nas configurações de projeto), os itens adicionados à coleção de nível superior e uma opção Conta.

Com o Mapa de conteúdo, você pode arrastar e soltar itens para alterar a estrutura do aplicativo.

Criar cartões e layouts

Você aplica um layout a cada coleção para determinar a aparência da página de navegação da coleção. Cada layout consiste em cartões que representam o conteúdo: banners, artigos ou outras coleções. É possível criar diferentes layouts para diferentes tipos de coleções.

Para obter mais informações sobre como criar cartões, consulte Criar cartões e layouts.

Exemplo de página de navegação com layout de 5 colunas
Exemplo de página de navegação com layout de 5 colunas

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