Mobile app dựng một bộ màn hình phone — không chỉ một shot mà cả luồng: onboarding, màn hình chính, settings, các trạng thái ở giữa, bố trí thành một board của các artboard ở kích thước phone thật. Đây là mẫu cho thiết kế dáng app — vùng chạm, nav mobile, luồng màn hình-sang-màn hình.
Một bộ, không phải một màn hình
Brief nó theo luồng — "app theo dõi thói quen: đăng ký, màn hình hôm nay, streak, settings" — và agent dựng bộ màn hình, mỗi màn hình là một artboard trong kết quả. Mobile viewer bố trí chúng thành một board bạn bước qua hoặc xem dạng lưới, nên luồng đọc như một luồng, không phải đống screenshot.
Các màn hình là live, không phải hình: tap qua chúng, hover các điều khiển, kiểm tra nav thực sự dẫn đi đâu — ở độ rộng phone, nơi vùng chạm và bottom nav là thứ hay hỏng.
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.”
Luật mobile, đã kiểm tra
Các kiểm tra độ rộng phone của cổng quan trọng nhất ở đây — kích thước vùng chạm, nav chết, thanh bottom-bar nuốt mất hàng cuối. Mẫu nạp các luật đó để agent dựng cho chúng: điều khiển đủ lớn cho ngón tay, nav dẫn tới đâu đó, chữ sống sót trên màn hình nhỏ.
Nó giỏi gì
- Concept app — bộ màn hình cho một ý tưởng trước khi được dựng
- Luồng feature — một feature mới luồn qua các màn hình có sẵn thế nào
- Pattern riêng mobile — sheet, bottom nav, trạng thái swipe
- Review với stakeholder — luồng như một board, không phải spec
Điều hướng một bộ màn hình
Điều hướng giống mọi kết quả, theo dáng mobile:
- ⌥-click điều khiển hoặc vùng màn hình, bình luận đúng chỗ
- Follow-ups cho màn hình thiếu hoặc luồng sai ("thêm empty state giữa đăng ký và màn hình hôm nay")
- Tweaks cho các tham số thiết kế expose (mật độ, bán kính góc)
- Variants cho hai phương án khác nhau của cùng một luồng
Phone vs mockup vs website
- Mobile app — màn hình dáng phone, điều khiển cỡ chạm, nav mobile
- UI mockups — một hình của giao diện desktop hoặc web
- Interactive website — một site hoạt động, nhiều trang, desktop-first
Nếu bộ màn hình cỡ phone và dáng chạm, đó là mẫu này — kể cả khi "app" là một luồng mobile web.
Mẹo: Kiểm tra mọi màn hình ở độ rộng phone trước khi gọi là xong — FAIL phổ biến nhất ở đây là một bottom bar hoặc điều khiển hàng cuối rơi vào vùng chết, thứ bạn không thấy ở kích thước desktop.
Export
Bộ màn hình export ra PNG mỗi màn hình hoặc PDF cả bộ — cho một deck, một spec, hoặc một doc cho stakeholder. File nằm lại trong thư mục dự án cho lần điều hướng tiếp theo.