Comentário: Este artigo apresenta todo o processo de desenvolvimento da NetEase Weibo com HTML5
O HTML5 é cada vez mais favorecido pelas equipes de desenvolvimento da Internet em casa e no exterior. Estrangeiro, o Google está desenvolvendo com entusiasmo a Chrome Web Store, a Microsoft lançou um site de tema da Spring irlandês que suporta o desenvolvimento da tecnologia HTML5 e a Nokia investiu pesadamente na compra e construção de negócios de mapas da Nokia. Os gigantes domésticos da Internet também estão interessados nos novos padrões de desenvolvimento da Web, soprados do outro lado do oceano e começaram a testar os produtos HTML5.O produto do aplicativo da plataforma iPhone da Weibo foi lançado com sucesso no primeiro trimestre de 2012. Agora, compartilharei as experiências e lições aprendidas com esse desenvolvimento de projetos com você e espero crescer junto com você no ambiente de desenvolvimento HTML5.
Pessoal
1. Configuração do desenvolvedor
Gerente de produto: 1 pessoa;
Designer de interação: 1;
Designer visual: 1;
Engenheiro front-end: 1;
Engenheiros dos bastidores: 2;
Testador: 1 pessoa.
2. Tempo de desenvolvimento
Designer de interação: 22 dias úteis;
Designer visual: 14 dias úteis;
Engenheiro de front-end: 50 dias úteis;
Engenheiro de back-end: Devido ao uso dos dados originais de back-end, você só precisa cooperar com o engenheiro front-end para chamar os dados
Entre eles, a interação e o front-end usam mais tempo em todo o ciclo de desenvolvimento.
Processo de Desenvolvimento de Aplicativos da Web Weibo WEIBO
1. Planejamento de requisitos funcionais: diferente da web e clientes locais
Pessoa responsável: gerente de produto; Participante: Designer de interação
O NetEase Weibo Web App (todos se refere a telefones celulares neste artigo) é diferente dos produtos da Web e também é diferente dos clientes locais.
1. Comparado com a Web, o NetEase Weibo Web App tem fortes vantagens como mobilidade e rico em mídia, e tem desvantagens, como pequeno espaço de apresentação de informações e arquitetura de informações profundas. As situações de uso dos dois são diferentes. A Weibo Web é usada principalmente imersivamente em tempo abundante e condições superiores da rede; Os aplicativos da web do Weibo são usados principalmente sob condições triviais de tempo e rede de qualidade desigual.
Portanto, o NetEase Weibo Web App deve evitar as funções grandes e completas e precisar extrair e selecionar as funções mais comumente usadas pelos usuários no ambiente móvel da Web e adicionar funções de necessidades exclusivas no lado móvel (como a função de serviço localizada será considerada no estágio de iteração).
2. Comparado com clientes locais, o NetEase Weibo Web App tem as vantagens de nenhuma instalação, atualização simples, baixo custo de desenvolvimento e layout adaptável. Ele também tem as vantagens da velocidade de resposta lenta, baixas permissões para recuperar controles nativos de telefones celulares e estabilidade ligeiramente fraca.
Com base nas vantagens e desvantagens dos dois, o NetEase Weibo Web App precisa acompanhar a experiência de alta qualidade dos clientes locais e tentar garantir leve e rápido.
Em uma palavra, as funções do aplicativo da Web podem ser mais refinadas do que as da Web e os clientes locais, atendendo às necessidades mais centrais dos usuários em ambientes móveis.
NetEase Weibo Web App Function Planning, como mostrado abaixo:
2. Design de arquitetura de informação: o mais raso e estreito possível
Pessoa responsável: designer de interação; Participante: Gerente de Produto
As pessoas que fizeram produtos para a Internet móvel devem saber por que a arquitetura da informação precisa ser o mais superficial e estreita possível. O maior motivo é o pequeno e caro espaço de exibição do telefone celular. A arquitetura de informações do cliente local do telefone celular precisa ser superficial e estreita, e os aplicativos da web precisam disso ainda mais, porque sempre há uma barra de ferramentas inferior do navegador na página do navegador, fazendo com que um pequeno pedaço do espaço de exibição já apertado seja comido. Como mostrado na figura abaixo:
A barra de ferramentas do navegador na parte inferior da tela do telefone celular é muito inútil para os produtos do aplicativo da web: o próprio aplicativo da web é um aplicativo de malha fechada e não requer a barra de ferramentas do navegador. Mesmo que isso não afete a grande arquitetura da informação, ela corroerá o precioso espaço de exibição e terá um impacto importante no design do sistema de navegação (esta parte foi analisada brevemente no artigo anterior "Discussão sobre design de navegação do aplicativo da web para iPhone".).
Introdução do artigo WebJX: NetEase Weibo, o desenvolvimento real do HTML5.
3. Design de interação: simples e eficiente
Pessoa responsável: designer de interação; Participantes: gerente de produto, designer visual, engenheiro de front-end, técnico de back-end
Conceito de design de interação:
O conceito de design de interação específico deste produto vem de: Pesquisa de cenário de uso do usuário, análise de concorrentes, status de pesquisa de aplicativos da web e requisitos do próprio aplicativo da Webo Web. Os conceitos de design de interação finalmente resumidos são principalmente:
1. Facilidade aprimorada de pesquisa:
Fortalecimento da navegação global, retorno rápido à página inicial, operações comuns regulares, demonstrações oportunas de animação, layout de página da web simples e clara etc.
2. Melhore a eficiência do uso
Reduza o nível da arquitetura da informação, forneça a entrada de tecla de atalho adequada, garanta áreas de toque seguro, considere hábitos de navegação do usuário, priorizem as funções principais, eliminem ruído visual desnecessário, etc.
3. Mais inteligente e atencioso
Ele suporta o uso offline, o preenchimento automático de informações na edição após interrupção inesperada, uso cauteloso de caixas de aviso, assistência na implementação de sugestões de pesquisa, barras de ferramentas organizadas para as necessidades atuais de tarefas, feedback ativo e eficaz etc.
4. Melhore a concentração de tarefas
Caminho de operação de tarefa única, navegação de guia oculta oportuna, eliminar fatores de interferência, exibição de escala de cinza indisponível, maximização da página de tarefas, sem minimização de funções, etc.
5. Consistência da plataforma:
Assista agora, clique nele, liste a visualização da plataforma iOS, empurre a animação da tela durante as operações de avanço e retorno, visão modal da plataforma iOS, caixas de aviso, controles nativos de chamada, lógica de salto simples e clara, etc.
O conceito de design interativo nesta fase não é mais apenas um conceito, mas mais uma orientação específica de design para o produto do aplicativo da web. O método de implementação do design que carrega o belo conceito de design é uma implementação importante no estágio de pesquisa de design.
Existem muitos conteúdos e detalhes de design, aqui vamos pegar apenas um detalhe para compartilhar com você:
Facilidade aprimorada de pesquisa - navegação global aprimorada
Comparado com o WAP Weibo original, a existência fixa da barra de navegação global é uma grande mudança. Vamos analisar brevemente os motivos para fazer isso:
- Qual é o ambiente de uso do usuário? - situações móveis ao ar livre (como no metrô ou na fila) ou estado ocioso interno (como navegar no Weibo antes de ir para a cama);
– Qual é o objetivo do usuário chegar a esta página? -Browse Weibo;
–Quem as ações comuns que os usuários usam nesta página? - Puxe para baixo para ler, superior e carregar novas informações, clique em outras guias para executar o salto;
- Quais são os benefícios se a barra de navegação global for fixada no topo? - Conveniente para os usuários retornarem ao topo, conveniente para os usuários carregarem novas informações, convenientes para os usuários alterarem as guias e têm um forte senso de controle global;
- Quais são as desvantagens se a barra de navegação global for fixada no topo? -Swarlowed Information Space Exibir
…………
Durante o uso do usuário, o comportamento de fixar, refrescar e alternar as guias também é um comportamento relativamente frequente, e a conveniência da operação precisa ser garantida. A barra de navegação global fixa pode atender a este requisito: clicar na chave inicial pode ser coberto e atualizado, o que pode facilitar os usuários a alternar as guias. Ao mesmo tempo, a barra de navegação global fixa pode permitir que os usuários saibam claramente para onde estão e para onde podem ir, dando aos usuários um forte senso de controle global.
4. Design visual: Experimento de estilo fresco
Pessoa responsável: designer visual; Participantes: Gerente de Produto, Designer de Interação, Engenheiro de Front-End
A determinação do estilo visual do aplicativo Web Weibo NetEase foi discutido através de vários ângulos:
1. Devemos manter o tom de cor consistente com o cliente local do Weibo?
Os produtos precisam manter uma certa consistência em diferentes plataformas, e o estilo de cor também é uma parte importante da formação do temperamento do produto. Então, precisamos usar peles semelhantes ao cliente local do Weibo? A cor principal do cliente local da Netase Weibo é vermelha.
A análise é a seguinte:
– Os benefícios do uso deste vermelho são: consistência mais forte do produto; O temperamento do produto formado pelo vermelho é mais enérgico.
-A desvantagem de usar esse vermelho é que a área vermelha é um pouco atraente em comparação com o conteúdo do Weibo, e a leitura imersiva é mais difícil de alcançar;
Usando o NetEase Weibo Web App através do Safari Browser, o efeito visual final é diferente do dos clientes locais, que a barra de ferramentas do navegador sempre ocupa uma linha de espaço na parte inferior da tela. O vermelho é uma cor relativamente barulhenta, enquanto a barra de ferramentas do navegador é azul e cinza, que é relativamente silenciosa. A enorme lacuna entre essas duas cores torna os óculos extremamente desconfortáveis.
Com base na análise acima, não é adequado usar a cor vermelha do cliente local.
Introdução do artigo WebJX: NetEase Weibo, o desenvolvimento real do HTML5.
2. Qual é o impacto de executar no navegador Safari?
O NetEase Weibo Web App é executado e exibido no navegador Safari, que é um dos ambientes para este produto. A página da web oferece às pessoas um sentimento leve e simplificado, enquanto o cliente local dá às pessoas uma sensação pesada e estável.
Portanto, o estilo visual leve é uma boa escolha.
3. Tendências atuais de estilo visual
O novo estilo liderado pela Metro UI e Google+ se tornou uma tendência significativa de desenvolvimento de estilo visual. Depois de um período de experiência visual requintada e complexa, voltei à simplicidade e ao estilo visual novo começou a ser popular.
Assim, os designers visuais tentaram várias tentativas visuais, incluindo vermelho, preto fresco e cinza claro fresco. Depois de comparar com várias partes, todos concordaram que a cor cinza fresca e clara era. O cinza fresco e claro é a cor principal, e o estado clicado de ícone é o vermelho comumente usado pela NetEase, que mantém a consistência do estilo visual até certo ponto.
5. Desenvolvimento front-end: quebre os truques
Pessoa responsável: engenheiro front-end; Participantes: Gerente de produto, designer de interação, designer visual, técnico de back-end
Quando você chega a essa parte, pode estar mais preocupado com a forma como é o código específico e como é a estrutura de implementação? Desculpe, os segredos do produto envolvidos na empresa e o código de implementação específico não pode ser exibido a todos. Me perdoe!
Aqui, selecionamos 2 perguntas dos internautas para responder brevemente:
Pergunta 1: Você pode falar sobre a arquitetura front-end? Por que Sencha não é usado?
Resposta: Como o Sencha Touch 1.x/2.x, o jQuery Mobile etc. não são ideais para personalização, desempenho e consumo de recursos, o NetEase Front-end desenvolveu sua própria estrutura. Como você disse, ele usa o SEAJS para lidar com o carregamento de scripts e o ISCROLL simula a rolagem. Parece que o efeito ainda é bom. O Front-end da NetEase continuará melhorando essa estrutura.
Pergunta 2: Você pode tirar fotos e fazer upload de fotos?
O iPhone Safari não dá permissão para recuperar câmeras e galerias, então esse requisito ainda não é atendido. A propósito, se o Android fornecer permissões, definitivamente atenderá a essa necessidade urgente naquele momento.
6. Trabalho de acompanhamento
O trabalho subsequente envolve principalmente inspeção interativa, inspeção visual, teste de controle de qualidade, resumo e feedback para corrigir problemas após o lançamento e o planejamento da próxima iteração. Todo mundo entende o processo do projeto, então não vou dizer muito.
Lições aprendidas com isso
1. Sentimentos sobre o fluxo de trabalho
1. Torne -se excelente design de experiência como guia.
Este projeto é um exemplo típico de abordagem orientada ao design. Primeiro, oferece aos designers tempo e espaço suficientes para jogar, enquanto a tecnologia pode ser contra-ataque. Essa ideia de funcionamento é a pedra angular de todo o produto para obter uma boa experiência do usuário. A tecnologia HTML5 é poderosa e tem muitas possibilidades; E o design é moldar essas possibilidades técnicas em moldes.
2. Gerente de produto, interação, visão, comunicação front-end de maneira oportuna e frequente
Durante todo o projeto, gerentes de produto, designers de interação, designers visuais e engenheiros de front-end realizam uma reunião toda semana. Mais tarde, foi provado que essa comunicação frequente reduziu bastante a taxa de retrabalho e melhorou a eficiência do desenvolvimento.
3. Corra rapidamente com pequenos passos e concentre -se na iteração.
Os produtos Weibo da NetEase são relativamente complexos e o progresso do desenvolvimento do HTML5 é relativamente lento e a mão de obra é limitada. É impossível concluir todos os detalhes funcionais e ficar on -line ao mesmo tempo. Caso contrário, levará um mês para depurar mais tarde, adicionando um fardo pesado ao rápido desenvolvimento do produto. Portanto, tornou -se uma opção inevitável fazer apenas as funções mais importantes da primeira edição.
2. Experiência do usuário
1. O sistema de navegação é mais adequado na parte superior da tela.
A barra de ferramentas do navegador sempre existiu, o que torna a barra de navegação de guias não mais adequada para ser fixada na parte inferior da tela, e a parte superior é mais adequada.
2. A conveniência é mais importante e as funções mais usadas são definidas inteligentemente.
Devido ao desempenho do produto e ao desempenho do navegador, a fluência atual do aplicativo da Web e a velocidade de salto ainda não são comparáveis aos aplicativos nativos, e o custo do salto é um pouco maior. Portanto, é necessário aproximar as funções mais usadas dos usuários para reduzir o custo de espera causado por saltos.
3. O rascunho visual é um equilíbrio entre estética e simplicidade. A maioria dos rascunhos visuais precisa ser implementada usando o código.
Quase toda a visão é implementada através do código e é melhor não ser muito complicado ao design visual. Também leva tempo para os engenheiros de front-end digerir os rascunhos visuais.
3. Compreensão da implementação técnica
1. As restrições de permissão do navegador Safari, o aplicativo da web não podem chamar ferramentas de câmera e não suportam a função de upload da imagem.
Isso é uma dor de cabeça e uma coisa desamparada. As permissões dadas ao sistema iOS para o aplicativo da Web são muito baixas. Por outro lado, o aplicativo da Web do sistema Android pode recuperar os controles da câmera e também suportar a função de upload de imagens do Weibo (mas a versão Android ainda não foi desenvolvida).
2. As cenas não podem obter efeitos suaves, como clientes locais.
As razões são: boas cenas corroem o desempenho do produto; A tecnologia HTML5 não é tão perfeita e madura; Ainda há uma falta de um navegador poderoso.
resumo
Além dos problemas de permissão do sistema iOS, o excelente desempenho do aplicativo da Web está próximo do aplicativo nativo. A tecnologia HTML5 deu às páginas da WAP uma nova vida e trouxe mudanças disruptivas ao WAP. Nos projetos HTML5, o planejamento funcional é melhor para refinar; A arquitetura da informação precisa ser o mais superficial e estreita possível; O design da interação precisa se esforçar por simplicidade e eficiência; O design visual também leva em consideração o ambiente operacional especial do navegador; O front-end não apenas precisa digerir gradualmente o design da interação e o design visual, mas também tentar ousadamente contra-atacar em novas tecnologias e novos problemas. A comunicação frequente entre toda a equipe é muito necessária e é melhor dar pequenos passos e executar etapas rápidas de desenvolvimento.
Com mão de obra e energia limitadas, existem inevitavelmente preconceitos. Todos são convidados a fazer um barulho! Estou ansioso para discutir este tópico interessante com você.