कंटेंट पर जाएँ
charmotion
शुरू करें

एनिमेटेड ऐप आइकन कहाँ इस्तेमाल करें: वेबसाइट, प्रेस किट और लॉन्च वीडियो

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर इलस्ट्रेशन: एनिमेटेड ऐप आइकन कहाँ इस्तेमाल करें: वेबसाइट, प्रेस किट और लॉन्च वीडियो, Charmotion के डेमो कैरेक्टर के साथ

एनिमेटेड ऐप आइकन वहाँ इस्तेमाल करें जहाँ pixels आपके नियंत्रण में हों: आपके लैंडिंग पेज का हीरो सेक्शन (ट्रांसपेरेंट WebM और Safari के लिए HEVC MOV के रूप में), आपका press kit, Product Hunt gallery, Reels, TikTok और Shorts के लिए 9:16 लॉन्च वीडियो, और ऐप की असली footage से बने store preview वीडियो। store listing का आइकन खुद एक still PNG ही रहता है।

मुख्य बातें

  • हीरो आइकन में पहला source HEVC alpha MOV और दूसरा VP9 alpha WebM रखें, साथ में एक still poster।
  • इंट्रो एक बार चलाएँ और आराम वाले फ़्रेम पर रोक दें; लंबे लूप के लिए pause control ज़रूरी है।
  • press kit में still आइकन के साथ ट्रांसपेरेंट और opaque motion फ़ाइलें होनी चाहिए।
  • 9:16 लॉन्च वीडियो की शुरुआत आइकन इंट्रो से करें, फिर ऐप दिखाएँ।
  • store आइकन still होते हैं: Google Play को 1,024 KB तक का 512×512 PNG चाहिए।

पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।

लैंडिंग पेज के हीरो सेक्शन में एनिमेटेड ऐप आइकन कैसे लगाएँ?

दो sources और एक poster वाला ट्रांसपेरेंट वीडियो इस्तेमाल करें। Safari अल्फ़ा के साथ HEVC चलाता है; Chrome और Firefox WebM में अल्फ़ा के साथ VP9 चलाते हैं। HEVC source पहले रखें: Safari WebM चला तो लेता है लेकिन उसका अल्फ़ा चैनल हटा देता है, इसलिए उसे MOV ही चुनना चाहिए, और Jake Archibald भी यही क्रम सुझाते हैं (Jake Archibald)।

<video class="hero-icon" width="320" height="320"
       autoplay muted playsinline
       poster="/img/app-icon-rest.webp">
  <source src="/video/app-icon-intro.mov" type='video/mp4; codecs="hvc1"'>
  <source src="/video/app-icon-intro.webm" type="video/webm">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-icon { display: none; }
    .hero-icon-still { display: block; }
  }
</style>
  • muted और playsinline की वजह से ही यह ऑटोप्ले हो पाता है; muted ऑटोप्ले लगभग हर जगह allowed है, और iOS Safari को page के अंदर चलाने के लिए playsinline चाहिए (MDN)।
  • तय width और height वीडियो load होते समय layout को खिसकने से रोकते हैं।
  • poster आराम की स्थिति वाला आइकन है, ताकि वीडियो न चले तब भी हीरो पूरा दिखे।
  • मोशन कम करें चालू होने पर इसकी जगह still image दिखती है (MDN)।

अगर आइकन को hover या scroll पर भी react करना है, तो स्टेट मशीन वाली .riv फ़ाइल यही काम interactive तरीके से करती है। पूरा markup और fallbacks: वेबसाइट पर ट्रांसपेरेंट वीडियो और वेबसाइट header में एनिमेटेड लोगो।

वेबसाइट आइकन एक बार चले या लूप में?

इंट्रो एक बार चलाएँ और आराम वाले फ़्रेम पर रोक दें। आइकन पर खत्म होने वाला छोटा इंट्रो स्वागत जैसा लगता है; वही क्लिप हमेशा लूप में चले तो आपकी headline के पास शोर बन जाती है।

अगर आप लगातार हलचल चाहते हैं, तो entrance दोबारा चलाने के बजाय हल्के idle लूप पर जाएँ (धीमी साँस या कभी-कभार पलक झपकना)। एक्सेसिबिलिटी का ध्यान रखें: WCAG 2.2 success criterion 2.2.2 कहता है कि जो moving content अपने आप शुरू हो, पाँच सेकंड से ज़्यादा चले और दूसरे content के साथ दिखे, उसे pause, stop या hide करने का तरीका होना चाहिए (W3C WAI)। पाँच सेकंड से छोटा वन-शॉट इंट्रो इस समस्या से बच जाता है; लूप के लिए pause control चाहिए।

ऐप आइकन press kit में क्या होना चाहिए?

journalists, partners और app directories, हर किसी को अलग फ़ाइल चाहिए। एक पूरा आइकन folder इन सबकी ज़रूरत पूरी करता है:

फ़ाइलक्यों
Still आइकन, 1024×1024 PNGApple का iOS आइकन layout size; articles और listings के लिए default
ट्रांसपेरेंट MOV (HEVC alpha)Mac पर video editors, Keynote, Safari pages
ट्रांसपेरेंट WebM (VP9 alpha)Chrome और Firefox में web embeds
आपके brand color पर MP4जहाँ ट्रांसपेरेंसी सपोर्ट नहीं होती: social posts, slide decks, chat apps
GIFऐसी जगहें जहाँ वीडियो बिल्कुल स्वीकार नहीं होता, जैसे कुछ forums और email
9:16 लॉन्च वीडियोStories, Reels, TikTok और Shorts

फ़ाइलों के नाम सीधे और साफ़ रखें (appname-icon-intro.mov, appname-icon-1024.png) और clear space व बैकग्राउंड रंगों पर एक छोटा नोट भी जोड़ें। GIF उसी क्लिप के वीडियो वर्ज़न से कहीं ज़्यादा भारी होता है, इसलिए इसे सिर्फ़ fallback के तौर पर दें (web.dev)।

Product Hunt पर एनिमेटेड आइकन का इस्तेमाल कैसे करें?

Product Hunt पर आपका thumbnail एक एनिमेटेड GIF हो सकता है, और यह तभी चलता है जब कोई आपकी पोस्ट पर hover करता है। इसलिए ज़्यादातर लोग इसका पहला फ़्रेम ही देखते हैं। thumbnail को खाली फ़्रेम से नहीं, बल्कि स्थिर आइकन से शुरू करें (आपके इंट्रो का "आइकन में जान आ जाती है" वाला वर्ज़न, square crop किया हुआ)।

गैलरी में सबसे पहले यह दिखाएँ कि प्रोडक्ट क्या करता है, और आइकन एनिमेशन को पूरी स्लाइड की बजाय शुरुआत या आखिरी फ़्रेम के रूप में इस्तेमाल करें। डाइमेंशन, फ़ाइल साइज़ की सीमाएँ और GIF टिप्स Product Hunt launch GIF स्पेसिफ़िकेशन में दिए गए हैं।

अपने आइकन के इर्द-गिर्द 9:16 लॉन्च वीडियो कैसे बनाएँ?

आइकन को शुरुआत और अंत में दिखाएँ, और बीच में ऐप की असली फ़ुटेज को दर्शकों को कायल करने दें:

  1. शुरुआत (पहले 1 से 3 सेकंड): आपके ब्रांड रंग पर आइकन इंट्रो। यह scroll रोकता है और बताता है कि यह वीडियो किसका है।
  2. बीच का हिस्सा: ऐप की असली फ़ुटेज, हर हिस्से में एक फ़ीचर, captions के साथ, क्योंकि ज़्यादातर लोग वीडियो म्यूट करके देखते हैं।
  3. अंत: स्थिर आइकन, ऐप का नाम और उसे कहाँ से डाउनलोड करें।

टेक्स्ट और आइकन को किनारों से दूर रखें, जहाँ प्लेटफ़ॉर्म के बटन और captions आते हैं; हर प्लेटफ़ॉर्म के safe zones Reels, TikTok और Shorts के लिए वर्टिकल वीडियो स्पेसिफ़िकेशन में दिए गए हैं।

Charmotion आपके आइकन की एक इमेज से इसके लिए सारे हिस्से बनाता है: एक 9:16 लॉन्च वीडियो, 1080×1080 पर MP4, GIF, और आपकी साइट के लिए ट्रांसपेरेंट WebM और HEVC MOV, साथ में ऐप के लिए .riv। यह सब पेड प्लान के साथ मिलता है।

क्या एनिमेटेड आइकन App Store या Google Play पर दिख सकता है?

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

  • App Store: guideline 2.3.4 के मुताबिक App Previews में सिर्फ़ ऐप की अपनी स्क्रीन रिकॉर्डिंग का वीडियो इस्तेमाल किया जा सकता है, जिसमें narration और वीडियो या टेक्स्ट overlays की अनुमति है (App Review Guidelines)। डिवाइस से रिकॉर्ड किया गया आपका इन-ऐप लॉन्च इंट्रो मान्य है; अलग से बना motion-graphics लोगो एनिमेशन मान्य नहीं है। स्पेसिफ़िकेशन: App Store App Preview स्पेसिफ़िकेशन।
  • Google Play: ऐप आइकन 512×512 px का, अल्फ़ा वाला 32-bit PNG होता है, अधिकतम 1,024 KB। प्रीव्यू वीडियो एक YouTube URL होता है; यह inline, म्यूट होकर 30 सेकंड तक ऑटोप्ले हो सकता है, और यह monetized, private या age-restricted नहीं होना चाहिए (Play Console Help)। ज़्यादा जानकारी Google Play feature graphic और promo video में है।

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

क्या मैं Safari और Chrome पर अपने ऐप आइकन का ट्रांसपेरेंट वीडियो इस्तेमाल कर सकता हूँ?

हाँ, दो sources के साथ: Safari के लिए अल्फ़ा वाला HEVC MOV, जिसे पहले लिखें, और Chrome व Firefox के लिए अल्फ़ा वाला VP9 WebM। स्थिर आइकन का एक still poster और तय डाइमेंशन जोड़ें, ताकि लेआउट कभी शिफ़्ट न हो।

क्या मेरी वेबसाइट पर एनिमेटेड आइकन ऑटोप्ले होना चाहिए?

छोटा, म्यूट, वन-शॉट इंट्रो जो स्थिर आइकन पर खत्म होता है, ऑटोप्ले करने में कोई दिक्कत नहीं। iOS Safari के लिए playsinline जोड़ें, play() ब्लॉक होने पर fallback के तौर पर poster रखें, और जब विज़िटर ने मोशन कम करें चुना हो तो सिर्फ़ स्थिर इमेज दिखाएँ।

क्या मेरा Google Play प्रीव्यू वीडियो मेरा एनिमेटेड आइकन दिखा सकता है?

हाँ। प्रीव्यू एक YouTube वीडियो होता है जिसे आप Play Console में लिंक करते हैं, और यह म्यूट होकर 30 सेकंड तक ऑटोप्ले हो सकता है, इसलिए आइकन इंट्रो से शुरुआत करें और जल्दी से ऐप की असली फ़ुटेज पर आएँ। उस वीडियो पर ads बंद रखें और उसे public या unlisted रखें।

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

स्रोत

संबंधित गाइड