Pip
디자인 요약
Pip은 직장인이 하루 10분 미니게임으로 영어를 연습하게 하며 굴곡진 학습 경로, 답변 피드백, 레슨 결과를 제공합니다. 밝은 노란 새, 둥근 굵은 활자, 검은 외곽선의 두꺼운 버튼이 인터페이스를 만들고 민트는 완료와 보상을 나타냅니다.
프롬프트
제품: 직장인이 하루 10분 미니게임으로 영어를 배우는 앱 Pip입니다. 표정이 풍부한 작은 새 마스코트를 SVG로 그리고 세 가지나 네 가지 표정을 만드세요.
Duolingo처럼 강한 개성을 부여하세요. 채도 높은 브랜드 색, 누르면 들어가는 두툼하고 입체적인 버튼, 둥글고 굵은 활자, 과장되지만 명확한 피드백을 사용하세요. Duolingo의 초록색과 올빼미를 복사하지 말고 독자적인 접근을 개발하세요.
세 가지 핵심 화면을 디자인하세요.
- 학습 경로: 완료, 현재, 잠금 레벨을 뚜렷이 구분한 굴곡진 레벨 경로. 상단에 스트릭, 경험치, 생명을 표시하세요.
- 문제: 단어 선택 빈칸 채우기 또는 듣고 이미지 고르기 문제와 정답 후 피드백을 보여 주세요.
- 레슨 완료: 경험치, 스트릭, 정답률, 축하하는 마스코트가 있는 결과 페이지.
정답을 기억에 남게 만드세요. 버튼, 소리를 연상시키는 애니메이션, 마스코트 반응이 사용자에게 다음 문제를 풀고 싶게 해야 하며 스크린샷에서도 드러나야 합니다.
앱 화면은 390×844로 디자인하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
중국어 원본 프롬프트 보기
产品:「Pip」,一个用小游戏学英语的 App,面向上班族,每天 10 分钟。有一个吉祥物:一只会做表情的小鸟(用 SVG 画,有 3–4 种表情)。
风格要像多邻国那样有强烈的个性:高饱和的品牌色、厚实有立体感的按钮(按下去会陷下去)、圆润粗壮的字体、夸张但清楚的反馈。但不要照抄多邻国的绿色和猫头鹰,做出自己的一套。
设计 3 个关键屏:
- 学习路径:一条弯曲的关卡路线,已完成、当前、未解锁的关卡一眼能分清,顶部有连续天数、经验值、生命。
- 答题:一道选词填空或听音选图的题,展示答对后的反馈状态。
- 完成一课:结算页,经验值、连续天数、正确率,吉祥物在庆祝。
记忆点:答对那一下,按钮、音效感的动效、吉祥物反应要让人想再来一题。截图里要能看出来。
App 屏幕按 390×844 设计,交付 `index.html` 和把三屏并排的 `screens.html`。
라이브 예제 열기