Pip
Resumen del diseño
Pip ayuda a adultos que trabajan a practicar inglés con minijuegos diarios de diez minutos, mediante una ruta de aprendizaje sinuosa, respuestas a las preguntas y resultados de lecciones. Un pájaro amarillo brillante, tipografía redondeada y pesada y botones gruesos con contorno negro dan forma a la interfaz, mientras el verde menta señala finalización y recompensas.
Prompt
Producto: Pip, una app que enseña inglés mediante minijuegos para adultos que trabajan, diez minutos al día. Su mascota es un pajarito expresivo, dibujado en SVG con tres o cuatro expresiones.
Dale una personalidad fuerte como Duolingo: colores de marca saturados, botones gruesos y tridimensionales que se hunden al pulsarlos, tipografía redondeada y pesada, y respuestas exageradas pero claras. Desarrolla tu propio enfoque en lugar de copiar el verde y el búho de Duolingo.
Diseña tres pantallas clave:
- Ruta de aprendizaje: un camino sinuoso de niveles con los completados, el actual y los bloqueados claramente diferenciados. Muestra racha, puntos de experiencia y vidas arriba.
- Pregunta: una frase que completar seleccionando palabras o una pregunta de escuchar y elegir una imagen, con la respuesta mostrada después de contestar correctamente.
- Lección completada: una página de resultados con puntos de experiencia, racha, precisión y la mascota celebrando.
Haz memorable una respuesta correcta: el botón, las animaciones que sugieren sonido y la reacción de la mascota deben hacer que el usuario quiera otra pregunta. Esto debe apreciarse en las capturas.
Diseña las pantallas de la app a 390×844. Entrega `index.html` y `screens.html` con las tres pantallas una al lado de otra.
Ver el prompt original en chino
产品:「Pip」,一个用小游戏学英语的 App,面向上班族,每天 10 分钟。有一个吉祥物:一只会做表情的小鸟(用 SVG 画,有 3–4 种表情)。
风格要像多邻国那样有强烈的个性:高饱和的品牌色、厚实有立体感的按钮(按下去会陷下去)、圆润粗壮的字体、夸张但清楚的反馈。但不要照抄多邻国的绿色和猫头鹰,做出自己的一套。
设计 3 个关键屏:
- 学习路径:一条弯曲的关卡路线,已完成、当前、未解锁的关卡一眼能分清,顶部有连续天数、经验值、生命。
- 答题:一道选词填空或听音选图的题,展示答对后的反馈状态。
- 完成一课:结算页,经验值、连续天数、正确率,吉祥物在庆祝。
记忆点:答对那一下,按钮、音效感的动效、吉祥物反应要让人想再来一题。截图里要能看出来。
App 屏幕按 390×844 设计,交付 `index.html` 和把三屏并排的 `screens.html`。
Abrir ejemplo interactivo