Cómo diseñar la interfaz de un sitio web de citas
1. Plan de revisión
Objetivo de la revisión de la conexión
-Posicionamiento claro del producto, optimizar el estilo de diseño y mejorar el conocimiento de la marca del producto.
-Optimizar los procesos de tareas y las estructuras de productos para satisfacer mejor las necesidades de los usuarios.
-Mejorar la usabilidad del producto y mejorar la experiencia del usuario.
-Optimiza el código fuente y mejora la eficiencia de ejecución del sitio web.
2. Investigación y evaluación de uso
El trabajo se divide en tres partes:
La primera parte es la investigación de usuarios, que implica principalmente muestreos de entrevistas y conversaciones con objetos de usuario, registre sus comportamientos básicos de citas en línea para comprender inicialmente sus necesidades y sacar conclusiones.
La segunda es realizar estadísticas y análisis de datos sobre los propios sitios web para explorar los posibles comportamientos y necesidades de los usuarios.
El tercero es recopilar datos de análisis de usuarios de citas y citas de terceros, y combinar el primer y segundo punto para escribir un informe de investigación de usuarios que se adapte a sus necesidades.
Debido a que hay mucho contenido en esta área, solo doy un resumen.
Tarea 1. Investigación de usuarios
Tarea 2. Autoevaluación
La evaluación se realizará en forma de notas con explicaciones de cada punto.
Evaluación de navegación (evaluación comparativa con competidores de sitios web de citas de relaciones similares)
Evaluación PET (evaluación en términos de persuasión, emoción y confianza, observando objetos de sitios web similares y el propio sitio web)
Evaluación del diseño de sitios web de citas (evaluación comparativa con sitios web de citas de relaciones similares)
Evaluación del diseño de interacción de citas (evaluación del módulo de registro, módulo de citas, búsqueda, mensajes, evaluación de gestión personal)
-Evaluación del diseño de la página de citas (evaluación de la página de inicio no registrada, mi página de inicio, búsqueda de amigos, gestión de amigos, regalos de mensajes, mis amigos, página de temas, evaluación de la página de visualización personal)
Tarea 3. Evaluación de expertos
Evaluación de microexpertos, solicite a una empresa externa de experiencia de usuario profesional que realice una pequeña evaluación de la estación A y haga una lista aproximada de las áreas que deben mejorarse en el sitio web de idate.
3. Escena del personaje
Omitimos directamente esta parte, considerando principalmente la relación temporal, y el trabajo actual es revisar el sitio web y trabajar sobre la base del sitio web original. , esta parte se omitió y, debido a la omisión de esta parte, habrá bastantes modelos conceptuales que no son lo suficientemente claros y los requisitos no son lo suficientemente precisos en el período posterior, lo que aumenta el tiempo de discusión.
4. Proceso de tareas
Organice el resumen de todas las tareas de los usuarios de Idate en el sitio web y dibuje un diagrama de flujo. Los resultados de esta parte del trabajo son la base para los módulos de funciones de desarrollo del programa. A medida que avanza el progreso y el trabajo en grupo, realice modificaciones en el proceso de la tarea y comuníquese con el programa en cualquier momento.
5. Arquitectura de la información
Tarea 1. Seleccionar a los usuarios representativos en Idate y realizar la clasificación de tarjetas de grupos focales
Tarea 2. Identificar a los usuarios que han iniciado sesión en Idate Realizar en línea encuesta de revisión
Tarea 3. Dibujar un diagrama de arquitectura de información del producto
Configure principalmente la estructura de la página y algunos módulos funcionales de arriba a abajo, y realice subdivisiones horizontales y verticales. La navegación clave se reposiciona y mueve, destacando módulos funcionales importantes y restando importancia a los módulos secundarios. Solo posicionando bien la jerarquía de la estructura de la página y la relación de navegación, el diseñador visual puede llevar a cabo un diseño eficaz de la expresión de navegación y posicionamiento de la relación primaria y secundaria, e incluso relacionado con el diseño de la dirección visual de todo el sitio web, etc.
6. Prototipo de producto
Es muy importante tener un conjunto estándar de bibliotecas de componentes interactivos básicos, especialmente para la división de la planificación entre varios colegas, para garantizar la mínima coherencia de estilo. Empaquetar componentes en forma de componentes facilita arrastrarlos, soltarlos, moverlos y organizarlos en el espacio de trabajo de fuegos artificiales, lo que mejora la eficiencia del desarrollo de prototipos de sitios web. Al mismo tiempo, también aporta comodidad para futuros trabajos de mantenimiento y gestión de scripts interactivos.
Aplicación de la herramienta de prototipo Axurepro5.5 en el desarrollo de prototipos
Debido a limitaciones de tiempo, el prototipo no jugó un papel muy importante, pero se utilizó para lograr una interacción discreta. Solo un prototipo inicial. Puede ver el efecto del paso de registro a continuación.
Por razones personales, el método de superposición de prototipos no es aplicable en esta revisión. Después de todo, el costo de tiempo para desarrollar un prototipo cercano al sitio real sigue siendo relativamente alto. Creo que estar familiarizado con esta herramienta y método será de gran ayuda para desarrollar sitios web eficientes y prácticos.
Básicamente, los guiones interactivos para esta revisión fueron producidos por colegas del departamento de planificación y funcionaron muy bien. Los planificadores tienen sus propias razones para producir guiones interactivos y consideraciones de desarrollo del equipo:
Primero: los planificadores conocen mejor sus propios productos y tienen una comprensión más clara de las necesidades.
Segundo: aprender de la experiencia laboral del primer proyecto y mejorar las habilidades de interacción.
La proporción de tiempo dedicado a la interacción también es relativamente grande, pero así es como debería ser. Esta parte del trabajo equivale a sentar una buena base y reducir los problemas de reelaboración posterior y modificaciones excesivas.
7. Diseño visual UI
7.1 Búsqueda de referentes
El diseño visual parte del establecimiento del proyecto. Primero, recopilé imágenes de sitios web de pares relacionados
OKCUPID
eHarmony
Citas rápidas japonesas
Lentamente formé mi propio conjunto de colores visuales y estilo: NetEase se diferencia de sus homólogos nacionales en sitios web de citas emocionales. Es un sitio web de citas con solteros nacionales y trabajadores administrativos como sus principales usuarios. Fresco y sencillo, seguro y confortable, elegante y elegante.
7.2 Ancho fijo
Idate utiliza un diseño de cuadrícula para alinear y diseñar elementos. Cada cuadrícula se define como 10px, y los atajos CTRL K y CTRL 6 muestran las preferencias de Photoshop para configurar la cuadrícula.
Vista previa de representaciones:
7.3 Diseño ascendente
Aplique un enfoque ascendente al diseño, comenzando desde la página de gestión personal más importante Expandir. Mi Haorenyuan ha sido revisado una docena de veces, tanto grandes como pequeñas. Cada vez que lo revisé, produje menos de diez borradores visuales. Estaba constantemente insatisfecho y seguí revisando persistentemente para lograr la estructura más razonable, la más razonable. visión, y el uso más razonable del color debe ser el objetivo, pero no lo tome como el punto final, porque no hay un punto final en el diseño visual. Mirando hacia atrás en el diseño final, aún puede ver problemas y puntos irrazonables. .
Efecto inicial:
El efecto inicial no es lo suficientemente claro, la pantalla es demasiado pesada y la parte superior es demasiado pesada. No hay sensación de comodidad. Después de aproximadamente una docena de rondas de comparación y modificación de docenas de efectos, se formuló el siguiente efecto:
En general, se han formado esta dirección y los detalles, pero todavía hay algunos problemas, como la invitación del manuscrito recomendado. es demasiado general e inconsistente con La forma recomendada hoy es similar y no lo suficientemente sobresaliente. Así que hice un último intento:
Es grandioso, con aspectos primarios y secundarios, y sin demasiados colores y diseños. Este plan finalmente fue determinado.
7.4 Diseño a lo largo del camino
Otras páginas se basan en esta página de gestión personal de mayor peso y amplían el diseño.