. Análise de um modelo de design web Lucidpress - Tudo Sobre Tecnologia

LucidPressFigA_111413.gif
Lucidpress  aplicativo projeto permite aos usuários criar conteúdo para a web e de impressão utilizando uma suíte de produtividade baseada na nuvem que pode ser configurado e integrado ao lado de Google Drive, Skype, Dropbox, e outras ferramentas online. Este artigo detalha as minhas tentativas para modificar um modelo digital de Lucidpress existente para criar um design de site.

(Nota: Lucidpress oferece muito mais do que aquilo que eu rever aqui, incluindo a colaboração em equipe, as opções de impressão de exportação, criptografia de dados e backups, por exemplo, ler o TechRepublic artigo. Editoração do browser: Lucidpress ).

Introdução

Você pode criar uma conta de usuário livre, ou você pode entrar usando um Google existente ou Yahoo! conta ( Figura A ). Uma vez que você permite que Lucidpress para associar sua conta, você está no aplicativo muito rapidamente. Eu usei a minha conta do Google e cheguei ao painel de instrumentos em poucos segundos.
Figura A
LucidPressFigB_111413.gif

Você também pode integrar sua conta do Google Drive rapidamente, aceitando e permitindo Lucidpress para ver informações básicas sobre sua conta, permitindo a visualização e gestão do Google Drive, permitindo-lhe ser adicionado ao Google Drive, e que lhe permita visualizar arquivos e documentos no Google Drive .
Em seguida, você terá opções para definir o nível de sincronização e salvar as alterações. Eu escolhi para sincronizar automaticamente os documentos que eu cria em Lucidpress para a minha conta de unidade ( Figura B ).
Figura B
LucidPressFigC_111413.gif

A criatividade com ofertas digitais Lucidpress

Eu cliquei no botão Criar para criar uma nova pasta ( Figura C ).
Figura C
LucidPressFigD_111413.gif
Selecionei Nova pasta, nomeou-demo Web Content, e clicar em OK ( Figura D ).
Figura D
LucidPressFigE_111413.gif
 
Figura E
LucidPressFigF_111413.gif

Voltei para o botão Criar e Novo documento selecionado ( Figura F ).
Figura F
LucidPressFigG_111413.gif

A lista de modelos é exibida para digital, impressão e opções personalizadas, juntamente com várias categorias, incluindo branco, layouts básicos, folhetos, interativo e mais ( Figura G) .
Figura G
LucidpressFigH111513.gif
Lucidpress oferece 36 modelos digitais, neste momento, o que parece ser uma pequena lista quando você comparar com outras aplicações do tipo "Publicar". Eu decidi usar um modelo na categoria Interativo Digital e, em seguida, selecionar o modelo de exploração do espaço (Figura H ).
Figura H
LucidPressFigI_111413.gif

Eu nomeei o projeto de documento do espaço de demonstração de Exploração. Quando selecionado o documento, é aberto no modo Layout ( Figura I ).
Figura I
LucidPressFigJ_111413.gif
O modelo de exploração do espaço tem quatro páginas criadas dentro de um esquema de rolagem de paralaxe com um principal de rolagem horizontal entre eles, e, em seguida, um deslocamento vertical está incluído na segunda e quarta páginas, que revelam mais conteúdo.A terceira página inclui vistas expandidas de quatro imagens de temática espacial.
Na barra de menu no topo do painel, eu fui para a aba Compartilhamento e clicar na opção de menu Publish para "publicar" o documento ( Figura J ).
Figura J
LucidPressFigK_111413.gif
Uma vez publicado, eu queria ver como a experiência do usuário para este modelo interativo iria medir-se. A navegação parecia um pouco estranho, uma vez que o bar ativo acima das páginas não é muito fácil perceber num primeiro momento, e não há instruções intuitivas para qual direção a seguir. Eu acho que um modelo deve incluir, pelo menos, que não o pedaço de uma linha na parte superior (algumas pistas básicas de navegação Figura K ).
Figura K
LucidpressFigL111513.gif
Eu decidi tentar adicionar uma pista de navegação para a página de rosto. Voltei para a visualização do layout, os objetos selecionados a partir da barra lateral esquerda e, em seguida, uma forma de seta para a direita, e arrastou-o para o lado direito da página de rosto.Minha primeira tentativa de alguma forma se perdeu, mesmo depois que eu salvo o documento, então eu tentei adicionar uma outra forma de seta para a direita, modificou sua linha e propriedades do gradiente cheios e, em seguida, salvar o arquivo novamente ( Figura L ).
Figura L
LucidPressFigM_111413.gif
Selecionei Compartilhar e publicar novamente, ea seta exibida ( Figura M ).
Figura M
LucidPressFigN_111413.gif
Clicando na seta para a direita não faz nada, mas usando o mouse para clicar e arrastar ou usar a tecla de seta para a direita no teclado leva você para a segunda página. Eu queria ver se eu poderia adicionar uma função de clique-action para a seta para a direita, então eu não tenho que usar a funcionalidade de clicar e arrastar para o efeito de paralaxe para o trabalho.
No painel eu entrei em modo de interação e clicar na seta da direita. Quando a escolher uma caixa de diálogo Ação apareceu, eu selecionei link para a página da seleção drop-down e, em seguida, página selecionada 2 na página de drop-down. Uma vez que a ação foi salvo e eu salvo o documento, eu testei por atualizar a visualização, eu era capaz de clicar na seta e avançar para a próxima página ( Figura N ).
Figura N
LucidPressFigO_111413.gif
Algumas notas laterais: É uma pena que as setas para baixo incluídas na segunda página não parecem ser editado ou parte do kit de ferramentas da barra lateral de formas. Além disso, o teclado para cima e para baixo setas não funcionam para os efeitos de rolagem de paralaxe vertical - apenas o mouse pode ser usado para esse recurso. O próximo passo seria adicionar as formas de seta para as outras três páginas e apontam para suas respectivas direções para sugestões de navegação. Tentei adicionar uma seta para a direita com uma ação semelhante para navegar a partir da segunda página para o terceiro, mas a ação na página ao vivo nunca iria trabalhar para mim, mesmo depois de várias defesas do tanto a ação eo documento (Figura O ).
Figura O
LucidPressFigP_111413.gif
O modelo de exploração do espaço inclui 30 imagens e faz um site inchado. Eu tentei correr um desempenho e de auditoria a utilização da rede usando Google Developer Inspecionar Elemento de Auditoria, e só completou para o estado atual, o que resultou em três bandeiras amarelas para o tamanho do bolinho, não utilizado CSS, CSS e nomes de propriedade, e uma bandeira vermelha para o fracasso para otimizar a ordem de referências de script e CSS.Tentei executar uma auditoria sobre a carga, e que iria pendurar no 7, de 10 de carregamento e nunca completo ( Figura P ).
Figura P
LucidPressFigQ_111413.gif
Enquanto eu poderia ter escolhido um modelo Lucidpress menos envolvidos, era a minha intenção de utilizar uma oferta digitais altamente interactivo das seleções. Eu só posso esperar que os modelos menos envolvidos são mais user friendly.  

Incorporação de vídeo

Tentei incorporar vários vídeos do YouTube. Cada um dos URLs partes que eu tentei falhou ao analisar usando a URL partes retas ou o código embed usando o método mais <iframe> URL (Figura Q ).
Figura Q
LucidPressFigR_111413.gif
Para ter certeza de que eu estava seguindo o procedimento correto Eu procurei o tópico de ajuda Lucidpress em trabalhar com vídeos , ea curto tutorial explica o mesmo processo que eu estava usando para incorporar um vídeo do YouTube (que é a fonte de vídeo suportado apenas como esta escrito). Depois de algumas tentativas e erros, eu descobri que eu precisava para inserir o nome do arquivo de vídeo específico para este URL convenção de nomenclatura: http://www.youtube.com/watch?v =% VideoFileName%. Eu acho que a  documentação de ajuda do vídeo  deve  indicar a URL precisa ser ajustada usando a convenção de URL que a ferramenta realmente utiliza ( Figura R ).
Figura R
LucidPressFigS_111413.gif
I centrado o vídeo incorporar em relação à página e outros conteúdos, ea fonte YouTube corrigida trabalhou, como mostrado abaixo na visualização ao vivo ( Figura S ).
Figura S
LucidPressFigT_111413.gif
Você pode ver a página de demonstração Exploração Espacial publicado vivo . Eu não gosto da URL que o pedido de publicação cria, e eu não tenho certeza se existem opções para criar uma URL SEO-friendly, mas seria um se ter bom-feature.

Conclusão

Eu só passei um par de horas por um modelo digital de exploração do espaço ao rever Lucidpress e no painel de instrumentos, e eu tenho certeza que existem modelos menos envolvidos que trabalham para outros projetos digitais. Embora o tema Exploração Espacial tem alguns elementos de paralaxe agradáveis ​​e ótimas imagens de nossas décadas de exploração espacial, o tema carece de uma navegação fluida.
O painel Lucidpress não é difícil de se locomover, mas seria bom se houvesse um catálogo maior e seleção de objetos, imagens e fontes de mídia para adicionar em projetos de documentos - Suponho que este é o lugar onde a colaboração ea ligação ao Google Drive, etc iria entrar em jogo.
Autor:

Sobre Ryan Boudreaux

Ryan já se apresentou em uma ampla gama de funções de suporte de tecnologia para serviços públicos de eletricidade geração, incluindo usinas nucleares, e para a indústria de telecomunicações. Ele trabalhou no desenvolvimento web para a indústria do restaurante e do g Federal ...

0 comentários Goocle+ 0 Facebook

Postar um comentário

 
Tudo Sobre Tecnologia © 2013-2020. Todos os direitos reservados. Tudo Sobre Tecnologia. Desenvolvido por TST
Topo