ऐप लॉन्च और स्प्लैश स्क्रीन एनिमेशन गाइड

क्या iOS लॉन्च स्क्रीन को एनिमेट किया जा सकता है?

क्या आप ऐप आइकन को ही एनिमेट करना चाहते हैं? न iOS और न Android किसी ऐप को अपना Home Screen आइकन एनिमेट करने देता है; क्या ऐप आइकन एनिमेट किया जा सकता है गाइड बताती है कि क्यों, और यह भी कि आपका आइकन और कहाँ मूव कर सकता है। Android 12+ स्प्लैश आइकन की सटीक specs, XML और exit handoff के लिए Android स्प्लैश स्क्रीन एनिमेटेड आइकन गाइड देखें।

नहीं। iOS लॉन्च स्क्रीन आपका code चलने से पहले सिस्टम दिखाता है, इसलिए यह एनिमेशन नहीं चला सकती।

आप इसे दो में से किसी एक तरीके से तय करते हैं (Apple Developer Documentation):

• Info.plist में UILaunchScreen, जो बैकग्राउंड कलर, एक इमेज और वैकल्पिक bars सेट करता है।
• एक launch storyboard, जिसमें सिर्फ़ स्टैंडर्ड UIKit classes इस्तेमाल हो सकती हैं। इसमें code connections, कस्टम classes या runtime attributes नहीं हो सकते।

इसका मतलब है कि लॉन्च स्क्रीन पर Rive views, Lottie views, वीडियो प्लेयर या कोई भी कस्टम एनिमेशन code नहीं चल सकता।

समाधान है एनिमेशन को एक स्टेप आगे खिसकाना। एक स्थिर लॉन्च स्क्रीन दिखाएँ जो बिल्कुल आपके एनिमेशन के पहले फ़्रेम जैसी हो, फिर पहला view controller या SwiftUI view दिखते ही एनिमेशन शुरू करें। यूज़र को लगता है कि लॉन्च स्क्रीन ही जीवंत हो उठी।

स्प्लैश स्क्रीन की जगह Apple क्या सुझाता है?

Apple की Human Interface Guidelines लॉन्च स्क्रीन के बारे में साफ़ हैं (Apple HIG):

• लॉन्च स्क्रीन ऐप की पहली स्क्रीन से लगभग एक जैसी होनी चाहिए।
• यह स्प्लैश स्क्रीन नहीं है और ब्रांडिंग का मौका भी नहीं।
• इस पर टेक्स्ट न रखें।
• अगर आप स्प्लैश स्क्रीन चाहते हैं, तो उसे ऑनबोर्डिंग की शुरुआत में या लॉन्च पूरा होने के बाद दिखाएँ।

व्यवहार में इससे ब्रांडेड इंट्रो का एक साफ़ पैटर्न बनता है:

1. लॉन्च स्क्रीन आपका बैकग्राउंड कलर दिखाती है और, चाहें तो, मैस्कॉट या लोगो को उसके आराम वाले पोज़ में, ठीक उसी जगह जहाँ वह पहले व्यू में दिखेगा।
2. पहला व्यू उसी लेआउट के साथ लोड होता है और तुरंत एक छोटा इंट्रो एनिमेशन चलाता है।
3. इंट्रो आराम वाले पोज़ पर खत्म होता है और इंटरफ़ेस उसके चारों ओर fade in होता है।

इंट्रो छोटा रखें और इसे रुकावट न बनाएँ। अगर ऐप तैयार है, तो आखिरी फ़्रेम पूरे होते समय भी यूज़र इंटरैक्ट कर सके। पूरा इंट्रो सिर्फ़ पहली बार लॉन्च पर या अपडेट के बाद चलाने पर विचार करें, और बाकी हर लॉन्च पर छोटा वर्ज़न चलाएँ, या कुछ भी नहीं।

ऐप लॉन्च एनिमेशन में क्या दिखाना चाहिए?

लॉन्च एनिमेशन का एक ही काम है: "ऐप शुरू हो रहा है" से "ऐप तैयार है" तक के बदलाव को सोचा-समझा महसूस कराना। यह कहानी सुनाने की जगह नहीं है। अच्छे लॉन्च एनिमेशन में कुछ बातें एक जैसी होती हैं।

• एक ही विषय। आपका लोगो या मैस्कॉट, बीच में या उसी जगह जहाँ वह पहली स्क्रीन पर रहेगा।
• एक ही मोशन। उछलकर अपनी जगह पर आना, हाथ हिलाना, सिंबल का reveal। एक क्रम की जगह एक साफ़ एक्शन चुनें।
• साफ़ अंत। एनिमेशन ऐसे पोज़ में रुकना चाहिए जिसे अगली स्क्रीन इस्तेमाल कर सके, जैसे होम स्क्रीन के कोने में idle करता मैस्कॉट या navigation bar में बैठता लोगो।
• पढ़ने के लिए कोई टेक्स्ट नहीं। Apple लॉन्च स्क्रीन पर टेक्स्ट न रखने की सलाह देता है, और यही तर्क उसके बाद के पहले सेकंड पर भी लागू होता है। यूज़र अभी पढ़ने के लिए तैयार नहीं होते।
• बैकग्राउंड में ब्रांड कलर। लॉन्च स्क्रीन और पहले व्यू में एक ही बैकग्राउंड रखें ताकि उनके बीच कुछ भी फ़्लैश न हो।

मैस्कॉट वाले ऐप थोड़ा आगे जा सकते हैं। एक enter एनिमेशन, जिसमें कैरेक्टर चलकर या अचानक सामने आता है और फिर हाथ हिलाता है, बिना ज़्यादा देरी के प्रोडक्ट को व्यक्तित्व देता है। इससे लंबा कुछ भी ऑनबोर्डिंग के लिए बचाकर रखें, जहाँ यूज़र ने खुद समय देना चुना है।

Android 12 SplashScreen API एनिमेशन कैसे करता है?

Android 12 से हर ऐप को एक सिस्टम स्प्लैश स्क्रीन मिलती है। आप इसे कस्टमाइज़ कर सकते हैं, और बीच का आइकन AnimatedVectorDrawable हो सकता है (Android Developers)। androidx.core:core-splashscreen library इस API को API level 23 तक backport करती है।

Google के documentation की मुख्य बातें:

ध्यान दें कि duration attribute सिर्फ़ यह बताता है कि Android 12 आइकन एनिमेशन कितनी देर चलाए। यह स्प्लैश को स्क्रीन पर बनाए नहीं रखता; इसके लिए setKeepOnScreenCondition का इस्तेमाल करें (androidx reference)।

1,000 ms का आँकड़ा एक सुझाव है, कोई सख्त सीमा नहीं। असल बात यह है कि splash तब खत्म हो जब ऐप तैयार हो, न कि तय लंबाई का कोई शो चलाए।

AnimatedVectorDrawable एक वेक्टर फ़ॉर्मेट है, इसलिए यह सादे लोगो या फ़्लैट आइकन के लिए सही है। डिटेल वाला कैरेक्टर या raster लोगो इसमें ठीक से नहीं ढल पाएगा। ऐसे मामलों में सिस्टम स्प्लैश आइकन को स्थिर रखें और ज़्यादा डिटेल वाला एनिमेशन अपनी पहली activity या composable में चलाएँ, ठीक उसी handoff पैटर्न से जैसे iOS पर।

लॉन्च एनिमेशन कितना लंबा होना चाहिए?

जितना छोटा हो सके, बशर्ते वह साफ़ समझ आए। लॉन्च एनिमेशन यूज़र और उस काम के बीच आता है जिसके लिए उसने ऐप खोला है।

आधिकारिक स्रोतों से कुछ काम के संदर्भ:

• Android की splash गाइडेंस फ़ोन पर splash आइकन एनिमेशन के लिए 1,000 ms से ज़्यादा न रखने का सुझाव देती है (Android Developers)।
• Nielsen की response-time सीमाएँ: यूज़र के विचार का प्रवाह बिना रुकावट बनाए रखने की सीमा लगभग 1 सेकंड है (NN/g)।
• Material Design के tokens में सबसे लंबे transitions की अधिकतम अवधि 1,000 ms है (Material Components)।

इसलिए जो हिस्सा इंटरैक्शन को रोकता है, उसे लगभग एक सेकंड रखें। उसके बाद भी कैरेक्टर हिलता रह सकता है, बशर्ते उसके आसपास का इंटरफ़ेस पहले से इस्तेमाल के लायक हो।

दो व्यावहारिक नियम:

• तेज़ लॉन्च को कभी जानबूझकर लंबा न करें। अगर ऐप 300 ms में तैयार है, तो यूज़र को पूरे इंट्रो के लिए न रोकें। एनिमेशन को चालू इंटरफ़ेस के ऊपर खत्म होने दें या आगे बढ़ जाएँ।
• लंबा इंट्रो हर बार न दोहराएँ। पहला लॉन्च खास हो सकता है। रोज़ाना का इस्तेमाल तेज़ होना चाहिए।

लॉन्च स्क्रीन से ऐप के अंदर वाले इंट्रो पर handoff कैसे करें?

लक्ष्य एक ऐसा जोड़ है जो दिखे ही नहीं। यूज़र को पता नहीं चलना चाहिए कि static OS स्क्रीन कहाँ खत्म हुई और आपका एनिमेशन कहाँ शुरू हुआ।

• पहला फ़्रेम मिलाएँ। अपने इंट्रो का पहला फ़्रेम लॉन्च इमेज के रूप में एक्सपोर्ट करें, उसी साइज़ और पोज़िशन पर जो एनिमेटेड कैरेक्टर की पहले view में होगी। बैकग्राउंड कलर भी वही रखें।
• एनिमेशन पहले से लोड करें। एनिमेशन फ़ाइल को लॉन्च के समय डाउनलोड करने के बजाय ऐप के साथ bundle करें, ताकि view दिखते ही वह तैयार रहे।
• एक बार चलाएँ, आराम की मुद्रा पर खत्म करें। इंट्रो कैरेक्टर के idle पोज़ पर खत्म होना चाहिए, जो फिर चुपचाप लूप हो सकता है या ठहर सकता है।
• इनपुट को ब्लॉक न करें। इंट्रो के आखिरी हिस्से में इंटरफ़ेस को fade in करें।
• मोशन कम करें सेटिंग का सम्मान करें। अगर यूज़र ने मोशन कम करें चालू किया है, तो इंट्रो छोड़ दें और आराम वाला पोज़ दिखाएँ (SwiftUI में accessibilityReduceMotion)।

Charmotion के सेट में इसी handoff के लिए बना एक लॉन्च इंट्रो शामिल है: Rive file में यह एक बार चलता है और idle पर खत्म होता है, और जहाँ आपको वीडियो चाहिए (जैसे app previews), उनके लिए लॉन्च एनिमेशन का 9:16 MP4 भी मिलता है।

वेबसाइट के हीरो सेक्शन में इंट्रो एनिमेशन कैसे जोड़ें?

वेब पर OS लॉन्च स्क्रीन नहीं होती, लेकिन सिद्धांत वही है: पेज तुरंत इस्तेमाल के लायक होना चाहिए, और एनिमेशन उसे सिर्फ़ सजाता है।

• पहले static पोज़ render करें। HTML में एक still image या poster रखें, ताकि कोई भी script चलने से पहले हीरो में कंटेंट हो। फिर एनिमेशन शुरू करें।
• सादे इंट्रो के लिए muted, inline वीडियो इस्तेमाल करें। ब्राउज़र muted ऑटोप्ले की अनुमति देते हैं; iOS Safari पर inline चलने के लिए वीडियो को playsinline भी चाहिए (MDN)। अगर play() promise reject हो, तो poster को बनाए रखें।
• इंटरैक्टिव इंट्रो के लिए Rive इस्तेमाल करें, जहाँ इंट्रो एक idle लूप को handoff करता है जो hover या scroll पर रिएक्ट करता है।
• हर ब्राउज़र में ट्रांसपेरेंसी बनाए रखें। आपके बैकग्राउंड पर ट्रांसपेरेंट कैरेक्टर के लिए पहले alpha वाला HEVC MOV और फिर alpha वाला VP9 WebM दें (Jake Archibald)।
• prefers-reduced-motion का पालन करें। poster दिखाएँ और इंट्रो छोड़ दें।

पूरे markup के लिए वेबसाइट पर ट्रांसपेरेंट वीडियो देखें।

अपने ऐप में लॉन्च एनिमेशन कैसे जोड़ें

1. OS लॉन्च स्क्रीन को static रखें. iOS पर UILaunchScreen या launch storyboard से, और Android पर SplashScreen API theme से एक बैकग्राउंड कलर और एक still image सेट करें।
2. पहला फ़्रेम मिलाएँ. अपने इंट्रो एनिमेशन का पहला फ़्रेम लॉन्च इमेज के रूप में इस्तेमाल करें, उसी साइज़ और पोज़िशन पर जो पहले view में है।
3. इंट्रो पहले view में चलाएँ. पहली स्क्रीन दिखते ही एनिमेशन शुरू करें, और एनिमेशन फ़ाइल ऐप के अंदर bundle रखें।
4. आराम वाले पोज़ पर खत्म करें. इंट्रो को idle पोज़ पर खत्म करें और आखिरी हिस्से में इंटरफ़ेस fade in करें, ताकि यूज़र तुरंत इंटरैक्ट कर सकें।
5. मोशन कम करें के लिए अलग रास्ता जोड़ें. जब यूज़र ने मोशन कम करें चालू किया हो, तो इंट्रो छोड़ दें और आराम वाला पोज़ दिखाएँ।

अक्सर पूछे जाने वाले सवाल

क्या iOS लॉन्च स्क्रीन पर Lottie या Rive एनिमेशन लगा सकते हैं?

नहीं। iOS लॉन्च स्क्रीन Info.plist या launch storyboard में तय होती है, जिसमें सिर्फ़ standard UIKit classes इस्तेमाल हो सकती हैं, कोई custom code नहीं। ऐसी static लॉन्च स्क्रीन दिखाएँ जो आपके एनिमेशन के पहले फ़्रेम से मेल खाए, फिर एनिमेशन अपने पहले view में चलाएँ।

Android स्प्लैश स्क्रीन एनिमेशन कितना लंबा होना चाहिए?

Google का सुझाव है कि फ़ोन पर स्प्लैश स्क्रीन आइकन एनिमेशन 1,000 ms से ज़्यादा न हो, और शुरुआत में अधिकतम 166 ms की देरी हो सकती है। यह एक सुझाव है, सख्त सीमा नहीं। अगर startup में ज़्यादा समय लगे, तो Google इसकी जगह लूपिंग एनिमेशन का सुझाव देता है।

क्या स्प्लैश स्क्रीन खराब UX है?

ब्रांडिंग के लिए यूज़र को रोकने वाली स्प्लैश स्क्रीन की सलाह नहीं दी जाती; Apple कहता है कि लॉन्च स्क्रीन ब्रांडिंग का मौका नहीं है। छोटा इंट्रो जो ऐप के सच में लोड होते समय चले, या पहले लॉन्च पर एक बार चले, ठीक है, बशर्ते वह कभी इंटरैक्शन को ब्लॉक न करे।

Android 12 स्प्लैश आइकन का साइज़ क्या होना चाहिए?

Android के documentation के अनुसार, आइकन बैकग्राउंड के साथ आइकन 240×240 dp होता है और उसका कंटेंट 160 dp के गोले में आना चाहिए। बैकग्राउंड के बिना यह 288×288 dp होता है और कंटेंट 192 dp के गोले में आना चाहिए।

इस गाइड से झटपट जवाब

• क्या iOS लॉन्च स्क्रीन को एनिमेट किया जा सकता है?
• iOS लॉन्च स्क्रीन कैसी दिखनी चाहिए?
• Android स्प्लैश स्क्रीन एनिमेशन कितना लंबा होना चाहिए?
• Android 12 स्प्लैश स्क्रीन आइकन का साइज़ क्या है?

स्रोत

• Launching, Apple Human Interface Guidelines
• Specifying your app's launch screen, Apple Developer Documentation
• Splash screens, Android Developers
• SplashScreen (androidx.core:core-splashscreen), Android Developers
• Response Times: The 3 Important Limits, Nielsen Norman Group
• Motion theming, Material Components for Android
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Video with alpha transparency on the web, Jake Archibald
• accessibilityReduceMotion, Apple Developer Documentation