429 lines
7.0 KiB
Markdown
429 lines
7.0 KiB
Markdown
# Makers3D - UX UI
|
|
|
|
## 1. Principios
|
|
|
|
1. Menos pasos, mas claridad.
|
|
2. El mapa atrae; el trabajo publicado convierte.
|
|
3. Todo CTA importante debe estar disponible tambien fuera del mapa.
|
|
4. La interfaz debe explicar confianza sin inventar prestigio.
|
|
5. Ninguna pantalla debe depender de datos que el MVP todavia no sabe medir con honestidad.
|
|
|
|
## 2. Direccion visual
|
|
|
|
### Personalidad
|
|
|
|
- tecnica;
|
|
- cercana;
|
|
- clara;
|
|
- confiable;
|
|
- visual;
|
|
- sobria.
|
|
|
|
### Sistema visual
|
|
|
|
- fondo principal: grafito profundo;
|
|
- superficies: azul grisaceo oscuro;
|
|
- accion primaria: azul electrico;
|
|
- acento secundario: cyan frio;
|
|
- exito: verde controlado;
|
|
- alerta: ambar;
|
|
- error: rojo sobrio.
|
|
|
|
### Tipografia
|
|
|
|
- titulos: `Space Grotesk`;
|
|
- interfaz y cuerpo: `Manrope`;
|
|
- datos tecnicos o chips: `IBM Plex Sans`.
|
|
|
|
### Radio y forma
|
|
|
|
- tarjetas y modales: 18 px;
|
|
- chips y botones pequenos: 999 px;
|
|
- sombras suaves, no teatrales;
|
|
- bordes sutiles para separar sin endurecer la UI.
|
|
|
|
## 3. Navegacion
|
|
|
|
### Publica
|
|
|
|
- Inicio
|
|
- Resultados
|
|
- Perfil maker
|
|
- Trabajo
|
|
- Servicio
|
|
- Acceso / Registro
|
|
- Consultas
|
|
|
|
### Privada maker
|
|
|
|
- Resumen
|
|
- Perfil
|
|
- Servicios
|
|
- Trabajos
|
|
- Bandeja
|
|
- Resenas
|
|
- Suscripcion
|
|
- Cuenta
|
|
|
|
### Admin
|
|
|
|
- Makers
|
|
- Casos
|
|
- Resenas
|
|
- Pagos
|
|
- Auditoria
|
|
|
|
## 4. Pantallas obligatorias
|
|
|
|
### 4.1 Inicio
|
|
|
|
Objetivo:
|
|
|
|
- explicar rapidamente que hace la plataforma;
|
|
- llevar al usuario a buscar por zona o necesidad.
|
|
|
|
Bloques:
|
|
|
|
- hero con buscador;
|
|
- acceso a geolocalizacion opcional;
|
|
- vista inicial de mapa o lista segun dispositivo;
|
|
- categorias o necesidades frecuentes;
|
|
- explicacion simple de como funciona.
|
|
|
|
### 4.2 Resultados
|
|
|
|
Objetivo:
|
|
|
|
- combinar descubrimiento geografico con evaluacion rapida.
|
|
|
|
Elementos:
|
|
|
|
- buscador superior;
|
|
- filtros visibles;
|
|
- conmutador lista/mapa en movil;
|
|
- lista de tarjetas;
|
|
- mapa con clusters;
|
|
- aviso claro cuando la geolocalizacion no esta activa;
|
|
- estados vacios y alternativa de ampliar zona.
|
|
|
|
### 4.3 Perfil publico del maker
|
|
|
|
Objetivo:
|
|
|
|
- convertir curiosidad en confianza y confianza en consulta.
|
|
|
|
Jerarquia:
|
|
|
|
- cabecera con nombre, localidad, disponibilidad y CTA;
|
|
- servicios principales;
|
|
- trabajos publicados;
|
|
- resenas verificadas;
|
|
- informacion de cobertura y envio;
|
|
- datos de contacto publicos si el maker decide mostrarlos.
|
|
|
|
### 4.4 Detalle de trabajo
|
|
|
|
Objetivo:
|
|
|
|
- demostrar calidad y contexto.
|
|
|
|
Contenido:
|
|
|
|
- galeria;
|
|
- titulo;
|
|
- problema resuelto;
|
|
- solucion aplicada;
|
|
- servicio relacionado;
|
|
- CTA "Quiero algo parecido".
|
|
|
|
### 4.5 Detalle de servicio
|
|
|
|
Objetivo:
|
|
|
|
- aclarar que puede contratarse.
|
|
|
|
Contenido:
|
|
|
|
- tipo de servicio;
|
|
- descripcion;
|
|
- tecnologias y materiales;
|
|
- modalidad local y envio;
|
|
- plazo orientativo;
|
|
- precio orientativo opcional;
|
|
- CTA de consulta contextual.
|
|
|
|
### 4.6 Contacto guiado
|
|
|
|
Objetivo:
|
|
|
|
- obtener una consulta mas util que un "hola, cuanto sale?".
|
|
|
|
Flujo:
|
|
|
|
1. necesidad;
|
|
2. detalles del trabajo;
|
|
3. urgencia y entrega;
|
|
4. adjuntos permitidos;
|
|
5. resumen editable;
|
|
6. registro o acceso si hace falta;
|
|
7. confirmacion.
|
|
|
|
### 4.7 Bandeja y conversacion
|
|
|
|
Objetivo:
|
|
|
|
- sostener el intercambio minimo necesario.
|
|
|
|
Vista:
|
|
|
|
- lista de conversaciones;
|
|
- ficha breve del contexto;
|
|
- hilo de mensajes;
|
|
- composer;
|
|
- estado de envio;
|
|
- acciones de rechazo o cierre.
|
|
|
|
### 4.8 Alta maker
|
|
|
|
Objetivo:
|
|
|
|
- convertir una cuenta normal en presencia profesional.
|
|
|
|
Pasos:
|
|
|
|
- datos del perfil;
|
|
- ubicacion;
|
|
- disponibilidad;
|
|
- primer servicio;
|
|
- primer trabajo;
|
|
- resumen de requisitos;
|
|
- suscripcion;
|
|
- solicitud de publicacion.
|
|
|
|
### 4.9 Gestion de servicios
|
|
|
|
Objetivo:
|
|
|
|
- publicar una oferta clara y mantenible.
|
|
|
|
Vista:
|
|
|
|
- lista de servicios;
|
|
- crear/editar;
|
|
- activar/desactivar;
|
|
- indicador de servicio incompleto.
|
|
|
|
### 4.10 Gestion de trabajos
|
|
|
|
Objetivo:
|
|
|
|
- construir portfolio con el menor esfuerzo posible.
|
|
|
|
Vista:
|
|
|
|
- lista de trabajos;
|
|
- borradores y publicados;
|
|
- formulario con fotos primero;
|
|
- vista previa publica;
|
|
- control de minimos.
|
|
|
|
### 4.11 Suscripcion
|
|
|
|
Objetivo:
|
|
|
|
- explicar el estado comercial sin ambiguedad.
|
|
|
|
Contenido:
|
|
|
|
- plan actual;
|
|
- precio;
|
|
- estado;
|
|
- fecha relevante;
|
|
- accion principal;
|
|
- aviso de que pagar no publica automaticamente.
|
|
|
|
### 4.12 Moderacion y admin
|
|
|
|
Objetivo:
|
|
|
|
- operar sin glamour, con velocidad y trazabilidad.
|
|
|
|
Pantallas:
|
|
|
|
- listado de makers;
|
|
- cola de casos;
|
|
- detalle de caso;
|
|
- detalle de pago;
|
|
- historial de acciones.
|
|
|
|
## 5. Wireframes textuales
|
|
|
|
### Inicio movil
|
|
|
|
```text
|
|
[Logo] [Entrar]
|
|
|
|
Encuentra quien imprime cerca de ti
|
|
[Buscar por pieza, material o servicio]
|
|
[Usar mi ubicacion] [Elegir ciudad]
|
|
|
|
[Mapa/Lista]
|
|
[Filtros rapidos]
|
|
[Tarjetas de makers]
|
|
```
|
|
|
|
### Perfil maker movil
|
|
|
|
```text
|
|
[Portada]
|
|
[Avatar] Nombre del maker
|
|
Localidad - Disponibilidad
|
|
[Contactar]
|
|
|
|
Servicios
|
|
[chips]
|
|
|
|
Trabajos
|
|
[galeria vertical]
|
|
|
|
Resenas verificadas
|
|
[bloques]
|
|
|
|
Informacion
|
|
```
|
|
|
|
### Contacto guiado movil
|
|
|
|
```text
|
|
Paso 2 de 5
|
|
Que necesitas imprimir o fabricar?
|
|
[campo]
|
|
|
|
Tienes archivo?
|
|
( ) Si
|
|
( ) No
|
|
|
|
[Adjuntar imagen o PDF]
|
|
[Continuar]
|
|
```
|
|
|
|
### Area maker movil
|
|
|
|
```text
|
|
Hola, Nombre
|
|
Estado: listo para publicar / publicado / incompleto
|
|
|
|
Te falta para publicar
|
|
- Ubicacion
|
|
- Primer trabajo
|
|
|
|
[Editar perfil]
|
|
[Crear servicio]
|
|
[Crear trabajo]
|
|
[Ver suscripcion]
|
|
```
|
|
|
|
## 6. Componentes
|
|
|
|
### Basicos
|
|
|
|
- boton primario;
|
|
- boton secundario;
|
|
- chip de filtro;
|
|
- tarjeta de maker;
|
|
- tarjeta de trabajo;
|
|
- tarjeta de servicio;
|
|
- badge de estado;
|
|
- barra superior;
|
|
- bottom sheet movil;
|
|
- modal de confirmacion.
|
|
|
|
### Formularios
|
|
|
|
- input de texto;
|
|
- textarea;
|
|
- select;
|
|
- chips multiseleccion;
|
|
- subida de imagen;
|
|
- subida de PDF;
|
|
- resumen revisable.
|
|
|
|
### Feedback
|
|
|
|
- skeleton;
|
|
- vacio;
|
|
- error;
|
|
- exito;
|
|
- aviso;
|
|
- bloqueo por requisito pendiente.
|
|
|
|
## 7. Estados
|
|
|
|
Toda pantalla relevante debe contemplar:
|
|
|
|
- carga;
|
|
- vacio;
|
|
- error;
|
|
- sin permisos;
|
|
- sin conexion momentanea;
|
|
- accion exitosa;
|
|
- accion duplicada bloqueada.
|
|
|
|
## 8. Responsive
|
|
|
|
### Movil
|
|
|
|
- prioridad absoluta;
|
|
- mapa y lista no compiten en pantalla reducida;
|
|
- CTA fijo en perfil y trabajo;
|
|
- formularios en un solo eje vertical.
|
|
|
|
### Tablet
|
|
|
|
- mas densidad de tarjetas;
|
|
- filtros laterales cuando convenga;
|
|
- lista y mapa pueden convivir parcialmente.
|
|
|
|
### Escritorio
|
|
|
|
- mapa y lista simultaneos en descubrimiento;
|
|
- bandeja con dos columnas;
|
|
- admin con tablas densas.
|
|
|
|
## 9. Accesibilidad
|
|
|
|
- contraste AA como minimo;
|
|
- foco visible;
|
|
- navegacion completa por teclado;
|
|
- labels reales en formularios;
|
|
- mensajes de error claros;
|
|
- alternativa funcional al mapa;
|
|
- respeto a `prefers-reduced-motion`;
|
|
- iconos nunca como unico soporte semantico.
|
|
|
|
## 10. Animacion
|
|
|
|
Mantener solo animaciones con utilidad:
|
|
|
|
- aparicion suave de clusters;
|
|
- subida de bottom sheet;
|
|
- confirmacion de mensaje enviado;
|
|
- transicion corta al aplicar filtros.
|
|
|
|
No usar:
|
|
|
|
- parallax;
|
|
- counters de vanidad;
|
|
- animaciones largas de carga;
|
|
- efectos de marca que ralenticen la tarea.
|
|
|
|
## 11. Criterio de calidad UX
|
|
|
|
Una pantalla esta bien resuelta si:
|
|
|
|
1. el usuario entiende que hacer en menos de cinco segundos;
|
|
2. la accion principal es obvia;
|
|
3. no depende de datos falsos o insuficientes;
|
|
4. el sistema evita callejones sin salida;
|
|
5. la confianza aumenta antes del contacto.
|