अपने ऐप आइकन को लॉन्च इंट्रो में बदलें
Charmotion टीम द्वारा · अपडेट:
ऐप आइकन को लॉन्च इंट्रो में बदलने के लिए OS की लॉन्च स्क्रीन को स्टैटिक रखें, जिसमें आपके ब्रांड कलर पर रुका हुआ आइकन हो। फिर पहली स्क्रीन पर एक छोटा इंट्रो चलाएँ जो बिल्कुल उसी आइकन से शुरू होकर उसी पर खत्म हो, ताकि बदलाव दिखे ही नहीं। 3D या gradient आइकन को फिर से बनाने की बजाय पूरी इमेज के रूप में squash, tilt और hop के साथ हिलाया जा सकता है।
मुख्य बातें
- इंट्रो आपकी पहली स्क्रीन पर चलता है; OS की लॉन्च स्क्रीन सिर्फ़ स्थिर आइकन दिखाती है।
- लॉन्च स्क्रीन और intro के पहले व आखिरी फ़्रेम के बीच साइज़, center और बैकग्राउंड hex मिलाएँ।
- एक ही मोशन काफ़ी है: pop in, landing पर squash, फिर settle। जो हिस्सा यूज़र को रोकता है, उसे लगभग एक सेकंड तक सीमित रखें।
- 3D, gradient और text वाले आइकन को vectors में trace करने की बजाय पूरी इमेज के रूप में हिलाना बेहतर है।
- मोशन कम करें सेटिंग चालू होने पर और तेज़ warm launch पर इंट्रो न चलाएँ।
पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।
ऐप आइकन लॉन्च इंट्रो क्या है?
यह उस आइकन का एक से तीन सेकंड का एनिमेशन है जिसे लोगों ने अभी टैप किया, जो static लॉन्च स्क्रीन के ठीक बाद आपकी पहली स्क्रीन पर चलता है। यह "animated app icon" का ईमानदार रूप है: iOS और Android आपको Home Screen आइकन एनिमेट नहीं करने देते (देखें क्या ऐप आइकन को एनिमेट कर सकते हैं), लेकिन आपका ऐप चलने लगने के बाद वे उसे कुछ भी एनिमेट करने देते हैं।
Apple की HIG के अनुसार लॉन्च स्क्रीन लगभग आपकी पहली स्क्रीन जैसी होनी चाहिए और यह branding का मौका नहीं है (Apple HIG)। आइकन intro इस बात का सम्मान करता है: लॉन्च स्क्रीन सादी रहती है, और ब्रांड का पल ऐप के अंदर, थोड़ी देर के लिए होता है, और ऐसे स्टेट पर खत्म होता है जिसे अगली स्क्रीन इस्तेमाल कर सके।
iOS, Android और web पर लॉन्च स्क्रीन के प्लेटफ़ॉर्म नियमों के लिए ऐप लॉन्च और स्प्लैश स्क्रीन एनिमेशन पढ़ें। यह गाइड खुद आइकन के बारे में है: उसे कौन-सा मोशन दें और फ़्रेम को कैसे मिलाएँ।
ऐप आइकन इंट्रो के लिए कौन-सा मोशन ठीक रहता है?
एक साफ़ action चुनें और उसे physical बनाएँ। आइकन छोटे, ठोस आकार होते हैं, इसलिए उन्हें चीज़ों की तरह बरतने वाला मोशन सबसे अच्छा लगता है:
- Overshoot के साथ pop in: लगभग 60% से scale करके 100% से थोड़ा आगे ले जाएँ, फिर settle करें।
- लैंड करते समय squash और stretch: एक छोटा-सा ड्रॉप या हॉप, और लैंड होते ही squash, icon को भारी और असली जैसा महसूस कराता है।
- हल्का-सा झुकाव: कुछ डिग्री घुमाकर वापस लाना silhouette बदले बिना जान डाल देता है।
- पलक झपकाना, अगर icon की आँखें हों: रुकी हुई अवस्था में एक बार पलक झपकाना अक्सर सबसे प्यारा पल होता है।
जो हिस्सा यूज़र को रोकता है, उसे छोटा रखें। Google सलाह देता है कि Android splash icon एनिमेशन 1,000 ms से ज़्यादा न हो (Android Developers), और यूज़र के विचारों का प्रवाह बिना रुकावट बनाए रखने की सीमा लगभग एक सेकंड है (NN/g)। अगर आपका इंट्रो इससे लंबा है, तो उसके आखिरी हिस्से में इंटरफ़ेस को fade in करें, ताकि लोग इंट्रो खत्म होने से पहले ही काम शुरू कर सकें।
इंट्रो को स्टैटिक लॉन्च स्क्रीन से कैसे मैच करें?
लॉन्च स्क्रीन आपके इंट्रो का एक स्थिर फ़्रेम है। इन दो सेटअप में से एक चुनें और उसी पर टिके रहें:
| सेटअप | लॉन्च स्क्रीन पर क्या दिखता है | इंट्रो की शुरुआत | इंट्रो का अंत |
|---|---|---|---|
| Icon reveal | सिर्फ़ बैकग्राउंड कलर | खाली, फिर icon पॉप होकर आता है | रुका हुआ icon |
| Icon में जान आना | बैकग्राउंड पर रुका हुआ icon | रुका हुआ icon (anticipation squash, हॉप) | रुका हुआ icon |
"icon में जान आना" के लिए, रुका हुआ icon दोनों जगह एक ही साइज़ और एक ही सेंटर पर होना चाहिए। iOS पर UILaunchScreen एक कलर और एक इमेज लेता है, और launch storyboard सिर्फ़ स्टैंडर्ड UIKit classes का इस्तेमाल कर सकता है (Apple Developer Documentation)। Android पर स्टैटिक splash icon 288×288 dp का होता है जिसका कंटेंट 192 dp के गोले में होता है, या icon बैकग्राउंड के साथ 240×240 dp जिसका कंटेंट 160 dp के गोले में होता है, इसलिए इंट्रो का icon उसी दिखने वाले साइज़ पर बनाया जाना चाहिए।
हर बैकग्राउंड के लिए एक named color asset या एक ही hex value इस्तेमाल करें, और light व dark mode अलग-अलग जाँचें। एक शेड का फ़र्क ही सबसे आम वजह है जिससे handoff पलक झपकने जैसा दिखता है।
क्या 3D या gradient ऐप आइकन को एनिमेट किया जा सकता है?
हाँ, अगर आप उसे दोबारा बनाने के बजाय सिर्फ़ हिलाएँ। चमकदार 3D icon, mesh gradient या lettering को वेक्टर shapes में trace करने से उसका लुक बदल जाता है, और यही वह चीज़ है जो कोई ब्रांड स्वीकार नहीं कर सकता। इसके बजाय, icon को एक ही इमेज मानें और उसके transform को एनिमेट करें: scale, rotation, position और squash व stretch के लिए non-uniform scale। पिक्सेल कभी नहीं बदलते, इसलिए रुका हुआ icon बिल्कुल वही होता है जो Home Screen पर है।
Charmotion इन आइकन को ऐसे ही संभालता है। एक PNG, JPEG या WebP (कम से कम 512 px) अपलोड करें: फ़्लैट आर्ट को वेक्टर रिग मिलता है, जबकि 3D, ग्रेडिएंट और टेक्स्ट वाले आइकन Motion मोड में जाते हैं, जो बैकग्राउंड हटाता है और आपकी हूबहू आर्टवर्क को स्क्वैश, स्ट्रेच, झुकाव, उछाल और, जहाँ आँखें मिलें वहाँ, पलक झपकने के साथ एनिमेट करता है। दोनों तरह से आपको 2.6 सेकंड का एक लॉन्च इंट्रो मिलता है जो रुके हुए आइकन पर खत्म होता है, साथ में 16 और एनिमेशन (लूप होने वाले मूड और वन-शॉट रिएक्शन), LaunchStateMachine वाली Rive फ़ाइल, ट्रांसपेरेंट WebM और HEVC MOV, MP4, GIF और एक 9:16 लॉन्च वीडियो के रूप में। सेट पेड प्लान के साथ मिलते हैं ($20/माह से) और आमतौर पर कुछ ही मिनट लगते हैं। यह Lottie या AnimatedVectorDrawable फ़ाइलें नहीं बनाता। फ़्री प्रीव्यू आपके आइकन को ऐप स्क्रीन में दिखाता है और, फ़्लैट आर्ट के लिए, पहले एक छोटी एनिमेटेड टेस्ट क्लिप भी।
Icon इंट्रो किस फ़ॉर्मेट में ship करें?
| प्लेटफ़ॉर्म | इंट्रो फ़ॉर्मेट | नोट्स |
|---|---|---|
| iOS (SwiftUI, UIKit) | .riv, या alpha के साथ HEVC MOV | Apple प्लेटफ़ॉर्म alpha के साथ HEVC decode करते हैं (WWDC19)। देखें SwiftUI में एनिमेटेड splash। |
| Android | पहली activity में .riv; system splash में AVD वैकल्पिक | देखें Android splash icon। |
| Expo, React Native | .riv (development build) या वीडियो | देखें Expo splash। |
| Flutter, FlutterFlow | .riv या वीडियो | देखें Flutter splash। |
| वेबसाइट हीरो | VP9 alpha WebM के साथ HEVC alpha MOV, या .riv | देखें वेबसाइट और launch video। |
फ़ॉर्मेट जो भी हो, जाँचें कि आपके code को कैसे पता चलता है कि इंट्रो खत्म हो गया। Video players और Lottie completion की सूचना देते हैं। Rive स्टेट मशीन सिर्फ़ वही बताती है जो उसके author ने उसमें बनाया हो, इसलिए अगर आपकी launch file में कोई end event नहीं है, तो timer से इंट्रो की लंबाई जितना इंतज़ार करें।
लॉन्च इंट्रो कब चलना चाहिए?
- Cold start पर, हर resume पर नहीं। बैकग्राउंड से वापस आने पर ऐप तुरंत दिखना चाहिए।
- पहले लॉन्च पर पूरा इंट्रो, बाद में छोटा। install या update के बाद पूरा वर्ज़न और रोज़ के लॉन्च पर एक छोटा-सा settle रखने पर विचार करें।
- तेज़ लॉन्च को कभी जानबूझकर लंबा न करें। अगर ऐप तैयार है, तो आखिरी फ़्रेम खत्म होते समय ही लोगों को इस्तेमाल करने दें।
- मोशन कम करें सेटिंग का सम्मान करें। रुका हुआ आइकन दिखाएँ और आगे बढ़ें। SwiftUI में
accessibilityReduceMotionपढ़ें (Apple); वेब परprefers-reduced-motion। - इसे ऐप के बाहर भी इस्तेमाल करें। यही इंट्रो आपके store preview और launch video का दमदार पहला सेकंड बन जाता है।
अपने ऐप आइकन को लॉन्च इंट्रो में कैसे बदलें
- सेटअप चुनें. तय करें कि लॉन्च स्क्रीन पर सिर्फ़ आपका बैकग्राउंड कलर दिखेगा (icon reveal) या रुका हुआ icon (icon में जान आना)।
- एक मोशन एनिमेट करें. Icon को pop-in, हॉप या squash दें जो बिल्कुल रुके हुए icon पर खत्म हो, और रोकने वाला हिस्सा लगभग एक सेकंड तक रखें।
- फ़्रेम मैच करें. लॉन्च स्क्रीन और इंट्रो दोनों में एक ही बैकग्राउंड hex, एक ही icon साइज़ और एक ही सेंटर इस्तेमाल करें।
- पहली स्क्रीन पर चलाएँ. .riv या वीडियो को bundle करें, पहली स्क्रीन दिखते ही उसे शुरू करें, और उसकी लंबाई पूरी होने के बाद आगे बढ़ें।
- Fallback जोड़ें. मोशन कम करें चालू होने पर और warm resume पर इसे छोड़ दें, और अगर फ़ाइल लोड न हो तो एक safety timeout जोड़ें।
अक्सर पूछे जाने वाले सवाल
लॉन्च इंट्रो icon पर खत्म हो या ऐप की पहली स्क्रीन पर?
रुके हुए icon पर खत्म करें, फिर इंटरफ़ेस को उसके आसपास दिखने दें या icon को उसकी जगह पर ले जाएँ, जैसे navigation bar का लोगो। किसी अलग pose पर खत्म करने से cut लगाना पड़ता है, और यही वह जोड़ है जिसे आप छिपाना चाहते हैं।
क्या मैं यही icon इंट्रो अपने App Store preview में इस्तेमाल कर सकता हूँ?
हाँ, अगर यह आपके ऐप के screen capture का हिस्सा बनकर दिखे। Guideline 2.3.4 कहती है कि previews में सिर्फ़ ऐप के ही video screen captures इस्तेमाल हो सकते हैं, narration और overlays की अनुमति है। जो इंट्रो आपका ऐप सच में लॉन्च पर चलाता है, वह इसके योग्य है।
क्या लॉन्च इंट्रो मेरे ऐप का startup धीमा कर देगा?
यह समय तभी बढ़ाता है जब आप यूज़र को उसके लिए इंतज़ार कराएँ। File को तब लोड करें जब स्टैटिक लॉन्च स्क्रीन अभी दिख रही हो, पहली स्क्रीन दिखते ही इंट्रो शुरू करें, और उसके आखिरी हिस्से में इंटरफ़ेस को input लेने दें। Warm resume पर इसे छोड़ दें।
स्रोत
- Launching, Apple Human Interface Guidelines
- Specifying your app's launch screen, Apple Developer Documentation
- Splash screens, Android Developers
- Response Times: The 3 Important Limits, Nielsen Norman Group
- HEVC Video with Alpha (WWDC19), Apple Developer
- accessibilityReduceMotion, Apple Developer Documentation
- App Review Guidelines (2.3.4, 2.3.8, 2.5.1), Apple
संबंधित गाइड
- ऐप लॉन्च और स्प्लैश स्क्रीन एनिमेशन गाइड
- क्या ऐप आइकन को एनिमेट किया जा सकता है? iOS और Android असल में क्या अनुमति देते हैं
- SwiftUI में एनिमेटेड स्प्लैश स्क्रीन (कोड पैटर्न)
- Android स्प्लैश स्क्रीन एनिमेटेड आइकन: स्पेक्स, XML और हैंडऑफ़
- एनिमेटेड ऐप आइकन कहाँ इस्तेमाल करें: वेबसाइट, प्रेस किट और लॉन्च वीडियो