Mobile app은 폰 화면 세트를 빌드합니다. 한 컷이 아니라 플로입니다. 온보딩, 메인 화면, 설정, 그 사이의 상태들이 실제 폰 크기의 아트보드 보드로 배치됩니다. 앱 모양의 디자인을 위한 템플릿입니다 — 터치 타겟, 모바일 nav, 화면 간 플로요.
화면이 아니라 세트
플로로 브리프하세요. "습관 트래커 앱: 가입, 오늘 보기, 스트릭, 설정" 같이요. 그러면 에이전트가 화면 세트를 빌드하고 각각이 결과의 아트보드입니다. 모바일 뷰어는 이를 하나씩 넘겨보거나 그리드로 볼 수 있는 보드로 배치해서, 플로가 스크린샷 더미가 아니라 플로로 읽힙니다.
화면은 그림이 아니라 살아 있습니다. 탭해서 이동하고, 컨트롤을 호버하고, nav가 실제로 어딘가로 가는지 확인하세요. 폰 너비에서요 — 터치 타겟과 하단 nav가 깨지는 곳입니다.
Mobile app · Devin · e2e · gate PASS
Frond — A plant-care app in three finished screens — today, detail, reminder — device frames and all.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”
모바일 규칙, 검사됨
게이트의 폰 너비 검사가 여기서 가장 중요합니다. 히트 타겟 크기, 죽은 nav, 마지막 행을 삼키는 하단 바요. 템플릿이 그 규칙을 로드해서 에이전트가 그에 맞게 빌드합니다. 손가락 크기의 컨트롤, 어딘가로 가는 nav, 작은 화면에서도 살아남는 타이포요.
강점
- 앱 컨셉 작업 — 만들기 전 아이디어의 화면 세트
- 기능 플로 — 새 기능이 기존 화면을 어떻게 지나가는지
- 모바일 전용 패턴 — 시트, 하단 nav, 스와이프 상태
- 이해관계자 리뷰 — 스펙이 아니라 보드로 보여주는 플로
화면 세트 스티어링
모바일 모양의, 다른 결과와 같은 스티어링입니다.
- 컨트롤이나 화면 영역을 ⌥-click해 정확한 지점에 댓글
- 빠진 화면이나 잘못된 플로에는 후속 지시("가입과 오늘 사이에 빈 상태 추가해줘")
- 디자인이 노출하는 파라미터(밀도, 코너 라운드)에는 Tweaks
- 같은 플로의 두 가지 시도에는 배리언트
폰 vs 목업 vs 웹사이트
- 모바일 앱 — 폰 모양 화면, 터치 스케일 컨트롤, 모바일 nav
- UI 목업 — 데스크톱이나 웹 인터페이스의 그림
- 인터랙티브 웹사이트 — 동작하는 사이트, 멀티 페이지, 데스크톱 우선
화면 세트가 폰 크기에 터치 모양이라면 이 템플릿입니다. "앱"이 모바일 웹 플로여도요.
Tip: 완료라 부르기 전에 모든 화면을 폰 너비에서 확인하세요. 여기서 가장 흔한 FAIL은 데드 존으로 빠지는 하단 바나 마지막 행 컨트롤인데, 데스크톱 크기에서는 보이지 않습니다.
내보내기
화면 세트는 화면당 PNG 또는 세트 PDF로 내보냅니다. 덱, 스펙, 이해관계자 문서용입니다. 파일은 다음 스티어링을 위해 프로젝트 폴더에 남습니다.