Comentario: Este artículo presenta todo el proceso de desarrollo de NetEase Weibo con HTML5
HTML5 es cada vez más favorecido por los equipos de desarrollo de Internet en el hogar y en el extranjero. Foreign, Google está desarrollando con entusiasmo la tienda web de Chrome, Microsoft ha lanzado un sitio web de temas de primavera irlandesa que respalda el desarrollo de la tecnología HTML5, y Nokia ha invertido mucho en la compra y la construcción del negocio de mapas de Nokia. Los gigantes nacionales de Internet también están interesados en los nuevos estándares de desarrollo web que se explotan en todo el océano y han comenzado a probar los productos HTML5.El producto de la aplicación web de la plataforma de iPhone de NetEase Weibo se lanzó con éxito en el primer trimestre de 2012. Ahora compartiré las experiencias y lecciones aprendidas de este desarrollo de proyectos con usted, y espero crecer junto con usted en el entorno de desarrollo HTML5.
Dotación de personal
1. Configuración del desarrollador
Gerente de producto: 1 persona;
Diseñador de interacción: 1;
Diseñador visual: 1;
Ingeniero frontal: 1;
Ingenieros de backstage: 2;
Tester: 1 persona.
2. Tiempo de desarrollo
Diseñador de interacción: 22 días hábiles;
Diseñador visual: 14 días hábiles;
Ingeniero frontal: 50 días hábiles;
Ingeniero de backend: debido al uso de los datos originales de backend, solo necesita cooperar con el ingeniero front-end para llamar a los datos
Entre ellos, la interacción y el front-end usan el tiempo más largo en todo el ciclo de desarrollo.
Proceso de desarrollo de aplicaciones web de NetEase Weibo
1. Planificación de requisitos funcionales: diferente de los clientes web y locales
Persona a cargo: Gerente de Producto; Participante: Diseñador de interacción
La aplicación web de NetEase Weibo (todos se refieren a los teléfonos móviles en este artículo) es diferente de los productos web y también es diferente de los clientes locales.
1. En comparación con la web, la aplicación web NetEase Weibo tiene fuertes ventajas, como la movilidad y los medios, y tiene desventajas, como el pequeño espacio de presentación de información y la arquitectura de información profunda. Las situaciones de uso de los dos son diferentes. Weibo Web se usa principalmente inmersivamente en un tiempo abundante y condiciones de red superiores; Las aplicaciones web de Weibo se usan principalmente en condiciones de tiempo trivial y de red de calidad desigual.
Por lo tanto, la aplicación web de NetEase Weibo debe evitar las funciones grandes y completas, y la necesidad de extraer y seleccionar las funciones más utilizadas por los usuarios en el entorno móvil desde la web, y agregar funciones de necesidades únicas en el lado móvil (como la función de servicio localizada se considerará en la etapa de iteración).
2. En comparación con los clientes locales, la aplicación web de NetEase Weibo tiene las ventajas de ninguna instalación, actualización simple, bajo costo de desarrollo y diseño adaptable. También tiene las ventajas de la velocidad de respuesta lenta, los bajos permisos para recuperar controles nativos de teléfonos móviles y estabilidad ligeramente débil.
Basado en las ventajas y desventajas de los dos, la aplicación web de NetEase Weibo debe ponerse al día con la experiencia de alta calidad de los clientes locales e intentar garantizar el peso ligero y rápido.
En una palabra, las funciones de la aplicación web pueden ser más refinadas que las de los clientes web y locales, que satisfacen las necesidades más centrales de los usuarios en entornos móviles.
Planificación de funciones de la aplicación web de NetEase Weibo, como se muestra a continuación:
2. Diseño de arquitectura de información: lo más superficial y estrecho posible
Persona a cargo: diseñador de interacción; Participante: Gerente de Producto
Las personas que han hecho productos de Internet móvil deben saber por qué la arquitectura de la información debe ser lo más superficial y estrecha posible. La razón principal es el pequeño y costoso espacio de visualización del teléfono móvil. La arquitectura de la información del cliente local del teléfono móvil debe ser superficial y estrecha, y las aplicaciones web necesitan esto aún más, porque siempre hay una barra de herramientas inferior del navegador en la página del navegador, lo que hace que una pequeña pieza del espacio de pantalla ya estrecho se coma. Como se muestra en la figura a continuación:
La barra de herramientas del navegador en la parte inferior de la pantalla del teléfono móvil es muy inútil para los productos de la aplicación web: la aplicación web en sí es una aplicación de circuito cerrado y no requiere la barra de herramientas del navegador. Incluso si no afecta la gran arquitectura de la información, erosionará el precioso espacio de visualización y tendrá un impacto importante en el diseño del sistema de navegación (esta parte se analizó brevemente en el artículo anterior "Discusión sobre el diseño de navegación de la aplicación web de iPhone").
Introducción al artículo de WebJX: NetEase Weibo, el desarrollo real de HTML5.
3. Diseño de interacción: simple y eficiente
Persona a cargo: diseñador de interacción; Participantes: Gerente de productos, diseñador visual, ingeniero front-end, técnico de back-end
Concepto de diseño de interacción:
El concepto de diseño de interacción específico de este producto proviene de: Encuesta de escenario de uso del usuario, análisis de la competencia, estado de investigación de aplicaciones web y los propios requisitos de la aplicación web de Weibo. Los conceptos de diseño de interacción finalmente resumidos son principalmente:
1. Mayor facilidad de búsqueda:
Fortalecimiento de la navegación global, retorno rápido a la página de inicio, operaciones comunes regulares, demostraciones de animación oportunas, diseño de página web simple y clara, etc.
2. Mejorar la eficiencia del uso
Reduzca el nivel de arquitectura de la información, brinde una entrada de teclas de acceso directo apropiado, asegure áreas táctiles seguras, considere los hábitos de navegación de los usuarios, brinde prioridad a las funciones centrales, elimine el ruido visual innecesario, etc.
3. Más inteligente y considerado
Admite el uso fuera de línea, el relleno automático de información en la edición después de una interrupción inesperada, uso cauteloso de cajas de advertencia, asistencia en la implementación de sugerencias de búsqueda, barras de herramientas organizadas para las necesidades de tareas actuales, comentarios activos y efectivos, etc.
4. Mejorar la concentración de tareas
Ruta de operación de tarea única, navegación de pestaña oculta oportuna, eliminar factores de interferencia, pantalla de escala de grises no disponible, maximización de la página de tareas, sin minimización de función, etc.
5. Consistencia de la plataforma:
Míralo ahora, haga clic en la lista de la plataforma iOS, presione la animación de la pantalla durante las operaciones de reenvío y retorno, vista modal de la plataforma iOS, cuadros de advertencia, controles nativos de llamada, lógica de salto simple y clara, etc.
El concepto de diseño interactivo en esta etapa ya no es solo un concepto, sino más bien una guía de diseño específica para el producto de la aplicación web. El método de implementación de diseño que lleva el hermoso concepto de diseño es una implementación importante en la etapa de investigación de diseño.
Hay muchos contenidos y detalles de diseño, aquí solo elegiremos un detalle para compartir con usted:
Facilidad mejorada de búsqueda - Navegación global mejorada
En comparación con el WAP Weibo original, la existencia fija de la barra de navegación global es un gran cambio. Analicemos brevemente las razones para hacer esto:
– ¿Cuál es el entorno de uso del usuario? - situaciones móviles al aire libre (como en el metro o en la línea), o estado inactivo interior (como navegar a Weibo antes de acostarse);
– ¿Cuál es el propósito de que el usuario llegue a esta página? -Browse Weibo;
– ¿Cuáles son las acciones comunes que usan los usuarios en esta página? - Tire hacia abajo para leer, superior y cargue nueva información, haga clic en otras pestañas para realizar saltos;
- ¿Cuáles son los beneficios si la barra de navegación global se fija en la parte superior? - Conveniente que los usuarios vuelvan a la cima, conveniente para que los usuarios carguen nueva información, conveniente para que los usuarios cambien de pestañas y tengan un fuerte sentido de control global;
- ¿Cuáles son las desventajas si la barra de navegación global se fija en la parte superior? -Asportado espacio valioso de visualización de información
…………
Durante el uso del usuario, el comportamiento de la fijación, la refrescante y las pestañas de conmutación también es un comportamiento relativamente frecuente, y la conveniencia de la operación debe garantizarse. La barra de navegación global fija puede cumplir con este requisito: hacer clic en la tecla de inicio se puede superar y actualizar, lo que puede facilitar a los usuarios cambiar las pestañas. Al mismo tiempo, la barra de navegación global fija puede permitir a los usuarios saber claramente dónde están y dónde pueden ir, dando a los usuarios un fuerte sentido de control global.
4. Diseño visual: experimento de estilo fresco
Persona a cargo: diseñador visual; Participantes: Gerente de productos, diseñador de interacción, ingeniero front-end
La determinación del estilo visual de la aplicación web de NetEase Weibo se ha discutido a través de múltiples ángulos:
1. ¿Deberíamos mantener el tono de color consistente con el cliente local de NetEase Weibo?
Los productos deben mantener una cierta consistencia en diferentes plataformas, y el estilo de color también es una parte importante de formar el temperamento del producto. Entonces, ¿necesitamos usar pieles similares al cliente local de NetEase Weibo? El color principal del cliente local de NetEase Weibo es el rojo.
El análisis es el siguiente:
–Los beneficios de usar este rojo son: una consistencia del producto más fuerte; El temperamento del producto formado por rojo es más enérgico.
-La desventaja de usar este rojo es que el área roja es ligeramente llamativa en comparación con el contenido de Weibo, y la lectura inmersiva es más difícil de lograr;
Utilizando la aplicación web de NetEase Weibo a través del navegador Safari, el efecto visual final es diferente del de los clientes locales, que la barra de herramientas del navegador siempre ocupa una línea de espacio en la parte inferior de la pantalla. El rojo es un color relativamente ruidoso, mientras que la barra de herramientas del navegador es azul y gris, lo cual es relativamente tranquilo. La gran brecha entre estos dos colores hace que las gafas sean extremadamente incómodas.
Según el análisis anterior, no es adecuado usar el color rojo del cliente local.
Introducción al artículo de WebJX: NetEase Weibo, el desarrollo real de HTML5.
2. ¿Cuál es el impacto de correr en el navegador Safari?
La aplicación web de NetEase Weibo se ejecuta y se muestra desde el navegador Safari, que es uno de los entornos para este producto. La página web brinda a las personas un sentimiento ligero y simplificado, mientras que el cliente local le da a las personas un sentimiento pesado y estable.
Por lo tanto, el estilo visual liviano es una buena opción.
3. Tendencias actuales de estilo visual
El estilo nuevo dirigido por Metro UI y Google+ se ha convertido en una tendencia de desarrollo de estilo visual significativo. Después de un período de exquisita y compleja experiencia visual, volví a la simplicidad y el estilo visual fresco comenzó a ser popular.
Por lo tanto, los diseñadores visuales han probado varios intentos visuales, incluyendo rojo, negro frío y gris claro fresco. Después de compararse de varias partes, todos estuvieron de acuerdo en que el color fresco y gris claro era. Los grises frescos y los gris claro son el color principal, y el estado hecho en el ícono es el rojo comúnmente utilizado por NetEase, que mantiene la consistencia del estilo visual hasta cierto punto.
5. Desarrollo de front-end: rompa los trucos
Persona a cargo: ingeniero front-end; Participantes: Gerente de productos, diseñador de interacción, diseñador visual, técnico de back-end
Cuando llega a esta parte, puede estar más preocupado por cómo es el código específico y cómo es el marco de implementación. Lo sentimos, los secretos del producto involucrados en la empresa, y el código de implementación específico no se puede mostrar a todos. ¡Perdóname!
Aquí seleccionamos las preguntas de 2 internautas para responder brevemente:
Pregunta 1: ¿Puedes hablar sobre la arquitectura frontal? ¿Por qué no se usa Sencha?
Respuesta: Debido a que Sencha Touch 1.x/2.x, JQuery Mobile, etc. no son ideales para la personalización, el rendimiento y el consumo de recursos, NetEase Front-end ha desarrollado su propio marco. Como dijiste, usa SEAJS para manejar la carga de script, e IScroll simula desplazamiento. Parece que el efecto sigue siendo bueno. NetEase Front-end continuará mejorando este marco.
Pregunta 2: ¿Puedes tomar fotos y subir fotos?
iPhone Safari no da permiso para recuperar cámaras y galerías, por lo que este requisito aún no se cumple. Por cierto, si Android da permisos, definitivamente satisfará esta necesidad urgente en ese momento.
6. Trabajo de seguimiento
El trabajo posterior implica principalmente inspección interactiva, inspección visual, pruebas de control de calidad, resumen y retroalimentación para solucionar problemas después de su lanzamiento y planificar la próxima iteración. Todos entienden el proceso del proyecto, por lo que no diré mucho.
Lecciones aprendidas de esto
1. Sentimientos sobre el flujo de trabajo
1. Conviértete en un excelente diseño de experiencia como guía.
Este proyecto es un ejemplo típico de enfoque orientado al diseño. Primero, ofrece a los diseñadores suficiente tiempo y espacio para jugar, mientras que la tecnología puede ser contraataque. Esta idea de trabajo es la piedra angular de todo el producto para obtener una buena experiencia de usuario. La tecnología HTML5 es poderosa y tiene demasiadas posibilidades; Y el diseño es dar forma a estas posibilidades técnicas en moldes.
2. Gerente de producto, interacción, visión, comunicación frontal de manera oportuna y frecuente
A lo largo de todo el proyecto, los gerentes de productos, los diseñadores de interacción, los diseñadores visuales e ingenieros front-end celebran una reunión cada semana. Más tarde se demostró que esta comunicación frecuente redujo en gran medida la tasa de retrabajo y la mejor eficiencia del desarrollo.
3. Corre rápidamente con pequeños pasos y concéntrese en la iteración.
Los productos NetEase Weibo son relativamente complejos, y el progreso del desarrollo de HTML5 es relativamente lento y la mano de obra es limitada. Es imposible completar todos los detalles funcionales y conectarse al mismo tiempo. De lo contrario, llevará un mes depurar más tarde, agregando una pesada carga al rápido desarrollo del producto. Por lo tanto, se convirtió en una opción inevitable hacer solo las funciones más centrales en el primer número.
2. Experiencia del usuario
1. El sistema de navegación es más adecuado en la parte superior de la pantalla.
La barra de herramientas del navegador siempre ha existido, lo que hace que la barra de navegación de pestañas ya no sea adecuada para ser fijada en la parte inferior de la pantalla, y la parte superior es más adecuada.
2. La conveniencia es más importante, y las funciones más utilizadas están inteligentemente establecidas.
Debido al rendimiento del producto y al rendimiento del navegador, la fluidez de aplicaciones web actuales y la velocidad de salto aún no son comparables a las aplicaciones nativas, y el costo de salto es ligeramente mayor. Por lo tanto, es necesario acercar las funciones más utilizadas a los usuarios para reducir el costo de espera causado por los saltos.
3. El borrador visual es un equilibrio entre la estética y la simplicidad. La mayoría de los borradores visuales deben implementarse utilizando el código.
Casi toda visión se implementa a través del código, y es mejor no ser demasiado complicado para el diseño visual. También lleva tiempo a los ingenieros frontales que digieran los borradores visuales.
3. Comprensión de la implementación técnica
1. Las restricciones de permiso del navegador Safari, la aplicación web no puede llamar a las herramientas de la cámara y no admite la función de carga de imágenes.
Esto es un dolor de cabeza y una cosa indefensa. Los permisos dados al sistema iOS a la aplicación web son demasiado bajos. Por el contrario, la aplicación web del sistema Android puede recuperar los controles de la cámara y también admitir la función de carga de imágenes de Weibo (pero la versión de Android aún no se ha desarrollado).
2. Las escenas no pueden lograr efectos suaves como los clientes locales.
Las razones son: las buenas escenas erosionarán el rendimiento del producto; La tecnología HTML5 no es tan perfecta y madura; Todavía hay una falta de un poderoso navegador.
resumen
Además de los problemas de permiso del sistema iOS, el excelente rendimiento de la aplicación web está cerca del de la aplicación nativa. La tecnología HTML5 le ha dado a las páginas web WAP una nueva vida y trajo cambios disruptivos a WAP. En los proyectos HTML5, la planificación funcional es la mejor para refinar; La arquitectura de la información debe ser lo más superficial y estrecha posible; El diseño de interacción debe esforzarse por la simplicidad y la eficiencia; El diseño visual también tiene en cuenta el entorno operativo especial del navegador; El front-end no solo necesita digerir gradualmente el diseño de interacción y el diseño visual, sino que también tratar de contraatacar en nuevas tecnologías y nuevos problemas. La comunicación frecuente entre todo el equipo es muy necesaria, y es mejor dar pequeños pasos y ejecutar pasos de desarrollo rápido.
Con mano de obra y energía limitadas, inevitablemente hay prejuicios. ¡Todos son bienvenidos para hacer un escándalo! Espero poder discutir este interesante tema con usted.