Mobile app फ़ोन स्क्रीन का एक सेट बनाता है — एक शॉट नहीं, बल्कि फ़्लो: ऑनबोर्डिंग, मुख्य स्क्रीन, सेटिंग्स, बीच के स्टेट — असली फ़ोन साइज़ पर artboard के बोर्ड के रूप में. यह ऐप-आकार के डिज़ाइन का टेम्पलेट है — touch टारगेट, मोबाइल nav, स्क्रीन-से-स्क्रीन फ़्लो.
एक सेट, एक स्क्रीन नहीं
फ़्लो के लिए ब्रीफ़ करें — "habit-tracker ऐप: sign-up, today व्यू, streak, settings" — और एजेंट स्क्रीन सेट बनाता है, हर एक नतीजे में एक artboard. Mobile viewer उन्हें ऐसे बोर्ड पर बिछाता है जिसमें आप चल सकते हैं या grid में देख सकते हैं, ताकि फ़्लो फ़्लो जैसा पढ़े, स्क्रीनशॉट का ढेर नहीं.
स्क्रीन तस्वीर नहीं, लाइव हैं: उनके अंदर टैप करें, कंट्रोल पर होवर करें, जाँचें कि nav सच में कहीं पहुँचता है — फ़ोन चौड़ाई पर, जहाँ touch टारगेट और bottom 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.”
मोबाइल नियम, जाँचे हुए
gate की फ़ोन-चौड़ाई वाली जाँचें यहीं सबसे ज़्यादा मायने रखती हैं — hit-target साइज़, मृत nav, वह bottom-bar जो आख़िरी पंक्ति निगल लेता है. टेम्पलेट वे नियम लोड करता है ताकि एजेंट उन्हीं के लिए बनाए: उँगलियों के साइज़ के कंट्रोल, कहीं पहुँचने वाली nav, छोटी स्क्रीन पर टिकने वाला टाइप.
यह किसमें अच्छा है
- ऐप कॉन्सेप्ट काम — बनने से पहले किसी आइडिया का स्क्रीन सेट
- फ़ीचर फ़्लो — नया फ़ीचर मौजूदा स्क्रीन से कैसे गुज़रता है
- मोबाइल-विशिष्ट पैटर्न — sheets, bottom nav, swipe स्टेट
- स्टेकहोल्डर रिव्यू — spec नहीं, बोर्ड के तौर पर फ़्लो
स्क्रीन सेट को स्टीयर करना
किसी भी नतीजे जैसी स्टीयरिंग, मोबाइल-आकार में:
- कंट्रोल या स्क्रीन हिस्से को ⌥-click करें, ठीक उस जगह कमेंट करें
- गायब स्क्रीन या ग़लत फ़्लो के लिए फ़ॉलो-अप ("sign-up और today के बीच empty स्टेट जोड़ो")
- डिज़ाइन के उजागर पैरामीटर के लिए Tweaks (density, corner radius)
- एक ही फ़्लो के दो अलग प्रयासों के लिए Variants
Phone बनाम mockup बनाम website
- Mobile app — फ़ोन-आकार की स्क्रीन, touch-स्केल कंट्रोल, मोबाइल nav
- UI mockups — डेस्कटॉप या web इंटरफ़ेस की तस्वीर
- Interactive website — ऐसी साइट जो काम करे, मल्टी-पेज, डेस्कटॉप-फ़र्स्ट
अगर स्क्रीन सेट फ़ोन-साइज़ और touch-आकार का है, तो यही टेम्पलेट है — भले ही "ऐप" एक मोबाइल web फ़्लो हो.
टिप: इसे पूरा कहने से पहले हर स्क्रीन फ़ोन चौड़ाई पर जाँचें — यहाँ सबसे आम FAIL कोई bottom bar या आख़िरी-पंक्ति का कंट्रोल है जो dead zone में गिर जाता है, जो डेस्कटॉप साइज़ पर दिखता ही नहीं.
एक्सपोर्ट करना
स्क्रीन सेट प्रति-स्क्रीन PNG या सेट के तौर पर PDF में एक्सपोर्ट होते हैं — डेक, spec या स्टेकहोल्डर डॉक के लिए. फ़ाइलें अगले स्टीयर के लिए प्रोजेक्ट फ़ोल्डर में रहती हैं.