En el proceso de desarrollo web actual, User Experiencela calidad de la experiencia del usuario ( ) es un criterio importante para medir a un ingeniero front-end. Me gustaría recomendar un libro "Elementos de la experiencia del usuario", que describe sistemáticamente la experiencia del usuario y vale la pena leerlo para todos los usuarios de front-end.
Muchas veces sentirás que un sitio web no es fácil de usar, pero no sabes dónde está el problema.
A veces un sitio web es feo, pero te resulta útil.
Un sitio web se ve genial cuando lo usas, pero te resulta difícil usarlo.
Ésta es la diferencia entre "usabilidad", "facilidad de uso" y "belleza".
Deberíamos dar prioridad a la "usabilidad" y luego considerar la "facilidad de uso" y la "belleza".
Proceso de desarrollo del sitio web
Enumeremos brevemente el proceso en el proceso de desarrollo real
1. Establecimiento del proyecto: determine qué hacer, determine el personal, determine el presupuesto, etc.
2. Demanda: recopilación y análisis de la demanda
: la recopilación es más difícil que el análisis y, a veces, los usuarios no conocen sus necesidades.
Henry Ford dijo una vez: "Si originalmente hubiera preguntado a los consumidores qué querían, habrían dicho Dime, quieres un ¡Caballo más rápido!"
- Puede utilizar "diagramas de casos de uso" para analizar los requisitos.
3. Análisis de viabilidad
4. Diseño del sistema (diseño funcional, diseño marco)
UMLdiagramas, diagramas de tiempo, etc.
5. Diseño de prototipos (bocetos, wireframes)
- Dibuja con papel y bolígrafo.
- Estructuras alámbricas disponibles
Balsamiq
6. Diseño de interacción
- Puedes usar
Axure RPun cuchillo para tinta,Sketch.app
7. Diseño visual
- Puedo usar
Photoshop,Fireworks,Sketch.app
8. Desarrollo del programa
9. Prueba
10. Vista previa de funciones
11. Beta interna
12. Lanzamiento en escala de grises
13. Lanzamiento oficial
El software de diseño de Amway,
Sketch.app, es macOSun software propietario de China y actualmente lo BATutilizan diseñadores web en grandes empresas como China Sketch.
Sus beneficios son:
- Menos funciones (en comparación con
PhotoShop), por lo que es más fácil de dominar - Fácil de operar
- Cerca del front-end (exportable
CSS, gráficos vectoriales, reutilizable, muchos complementos),
el diseño de interacción es muy importante en el proceso de desarrollo del front-end. Resumir varios elementos mejorará en gran medida la experiencia del usuario en el proceso de desarrollo futuro.
Puntos principales
- tener comentarios
- Consistencia (aprendible)
- previsible
Tome el envío de formulario como ejemplo
1. tabDebe haber comentarios cuando el usuario presiona y debe haber comentarios cuando el usuario presiona Enter
2. Cuando el usuario hace clic en enviar, el botón de enviar debe convertirse disableden y loading
3. Si la confirmación se coloca a la izquierda y cancelar se coloca a el derecho, entonces se debe cumplir con este hábito
4. Usuario Si ocurre un error después del envío, el contenido completado no se puede perder.