ब्रांड मोशन गाइडलाइन कैसे लिखें (लोगो, मैस्कॉट और UI)

Brand motion guidelines में क्या होना चाहिए?

वह सब कुछ जो वरना किसी डिज़ाइनर, डेवलपर या agency को अंदाज़े से तय करना पड़े। एक व्यावहारिक ढाँचा, इतना छोटा कि लोग सच में पढ़ें:

सिद्धांत लिखना सबसे आसान है और अकेले सबसे कम काम का। Atlassian के motion foundations सही साइज़ दिखाते हैं: चार सिद्धांत (Human, Clarity, Accessible, Performant), हर एक एक वाक्य का, जैसे "Motion is a clarifying layer, not decoration." Apple की Human Interface Guidelines मुख्य बात एक लाइन में कहती हैं: "Add motion purposefully, supporting the experience without overshadowing it." अपने सिद्धांत इतनी ही लंबाई में लिखें, फिर बाकी document ऐसे नियमों पर लगाएँ जिन्हें कोई जाँच सके।

मोशन के लिए duration और easing tokens कैसे तय करें?

एक छोटा, नाम वाला scale चुनें और हर step के साथ एक उपयोग जोड़ें। Public systems अच्छी शुरुआत हैं क्योंकि वे documented हैं और बड़े पैमाने पर टेस्ट किए गए हैं:

Android के लिए Material के theme attributes 16 durations तय करते हैं, motionDurationShort1 (50 ms) से motionDurationExtraLong4 (1000 ms) तक, इस नियम के साथ कि "duration should increase as the area/traversal of an animation increases." Atlassian tokens के बजाय ranges देता है: interactions के लिए लगभग 50 से 150 ms और transitions के लिए 150 से 400 ms।

Easing के साथ भी ऐसा ही होता है। Carbon curves को productive ("efficiency and responsiveness, while remaining subtle") और expressive ("enthusiastic, vibrant, and highly visible") सेट में बाँटता है, हर एक में standard, entrance और exit curves हैं; productive standard cubic-bezier(0.2, 0, 0.38, 0.9) है। Material की standard easing cubic-bezier(0.2, 0, 0, 1) है, जिसमें आने वाले एलिमेंट्स के लिए decelerate curves और जाने वाले एलिमेंट्स के लिए accelerate curves हैं। Material fast, default और slow speeds में spring tokens भी तय करता है, जो movement के लिए "spatial" springs और रंग व opacity के लिए "effects" springs में बँटे हैं, और इन्हें overshoot नहीं करना चाहिए।

Productive और expressive का यह बँटवारा ब्रांड पर अच्छी तरह बैठता है: interface feedback के लिए productive tokens, और expressive tokens लोगो, मैस्कॉट और launch के पलों के लिए। Tokens को कोड के रूप में ship करें ताकि कोई उन्हें दोबारा टाइप न करे:

:root {
  --motion-duration-fast: 120ms;     /* hover, press, toggle */
  --motion-duration-moderate: 240ms; /* panels, toasts */
  --motion-duration-slow: 400ms;     /* page transitions */
  --motion-duration-brand: 1200ms;   /* logo intro, mascot reactions */

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-moderate: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-brand: 0ms;
  }
}

ऊपर की values एक उदाहरण scale हैं, कोई standard नहीं: अपना चुनें, लेकिन लिस्ट छोटी रखें। चार से छह durations और तीन easing curves लगभग हर प्रोडक्ट के लिए काफ़ी हैं।

एनिमेटेड लोगो क्या कर सकता है, और क्या मना है?

लोगो एनिमेशन फिर भी लोगो ही है, इसलिए static ब्रांड नियम लागू रहते हैं, और मोशन अपने कुछ नियम जोड़ता है। करें और न करें की लिस्ट सबसे साफ़ format है:

चार नियम जो static guidelines में अक्सर छूट जाते हैं:

1. Clear space में motion envelope भी शामिल है। अगर निशान अपनी resting ऊँचाई से 10% ऊपर उछलता है, तो clear space उछाल के सबसे ऊपरी बिंदु से मापा जाता है। वरना एनिमेटेड लोगो navigation या वीडियो के किनारे से टकराता है।
2. एनिमेटेड वर्ज़न के लिए न्यूनतम साइज़। जो डिटेल 200 px पर पढ़ी जाती है, वह 32 px पर झिलमिलाहट बन जाती है। एक साइज़ तय करें जिसके नीचे सिर्फ़ static लोगो इस्तेमाल हो (favicons, छोटे avatars, भरे हुए headers)।
3. आखिरी फ़्रेम लोगो है। हर one-shot approved artwork पर रुककर खत्म होता है, क्योंकि pause किया गया वीडियो या धीमा डिवाइस वही फ़्रेम दिखाता है जिस पर वह रुकता है।
4. एक static fallback हमेशा होता है, जो आखिरी फ़्रेम जैसा ही है, ईमेल, प्रिंट, reduced motion और फ़ेल हुए loads के लिए।

Reveals, stings और loops की शब्दावली के लिए देखें logo reveal vs sting vs loop।

ब्रांड मैस्कॉट या कैरेक्टर को कैसा बर्ताव करना चाहिए?

मैस्कॉट को किसी शो की bible में लिखे कैरेक्टर की तरह लिखें: वह कौन है, हर स्थिति में क्या करता है, और क्या कभी नहीं करता। एक पेज का वर्ज़न:

• तीन शब्दों में व्यक्तित्व, हर एक के साथ एक बर्ताव। Kiko जैसे मैस्कॉट के लिए: उत्सुक (यूज़र के टाइप करने पर आगे झुकता है), शांत (धीमी साँस वाला idle), हौसला बढ़ाने वाला (success पर हल्का सिर हिलाना, रोज़मर्रा के काम पर कभी जश्न नहीं)।
• स्टेट की एक तय लिस्ट। Idle, loading, success, error, empty, attention, और असिस्टेंट की स्टेट जैसे listening और talking। नई स्टेट review से गुज़रती हैं, नए लोगो एनिमेशन की तरह। पूरी लिस्ट के लिए देखें मैस्कॉट एनिमेशन स्टेट।
• Error पर बर्ताव। मैस्कॉट चिंतित दिख सकता है, मज़ाक उड़ाता हुआ कभी नहीं। वह यूज़र पर हँसता नहीं, error message को ढकता नहीं, और दोबारा कोशिश करने से पहले यूज़र को अपने रिएक्शन का इंतज़ार नहीं कराता।
• कितनी बार। Apple की सलाह सीधे लागू होती है: "generally avoid adding motion to UI interactions that occur frequently", और "let people cancel motion", क्योंकि किसी को भी ऐसे रिएक्शन का इंतज़ार नहीं करना चाहिए जो वह बीस बार देख चुका हो। एक अच्छा नियम है कि मैस्कॉट milestones पर रिएक्ट करे, हर क्लिक पर नहीं।
• अनुपात और model sheet। Squash और stretch की सीमाएँ, कौन से pose on model हैं, और किन angles से कैरेक्टर कभी नहीं बनाया जाता।
• जगह। मैस्कॉट कहाँ दिख सकता है (onboarding, empty states, loading, जश्न) और कहाँ नहीं (checkout errors, legal screens, कुछ भी ज़रूरी)।

Apple "brevity and precision in feedback animations" भी माँगता है, जिसका मैस्कॉट के लिए मतलब है किसी असली event से जुड़े छोटे रिएक्शन, फिर वापस idle।

ब्रांड मोशन कब loop होना चाहिए, और कब आवाज़ करनी चाहिए?

हर एनिमेशन के लिए तय करें और spec में लिखें, क्योंकि इससे accessibility और फ़ाइल का चुनाव दोनों बदलते हैं।

• डिफ़ॉल्ट रूप से one-shot। लोगो intros, reveals और मैस्कॉट रिएक्शन एक बार चलकर रुक जाते हैं।
• Loops को एक वजह और एक सीमा चाहिए। कंटेंट के साथ चलने वाले idle loop को, जो अपने आप शुरू होता है और पाँच सेकंड से ज़्यादा चलता है, WCAG 2.2 SC 2.2.2 (Level A) के तहत pause, stop या hide करने का तरीका चाहिए। या तो loop को कुछ cycles के बाद रोकें, या दिखने वाला pause control दें।
• Loops seamless होने चाहिए। Loop का आखिरी फ़्रेम position या रंग में बिना किसी झटके के पहले फ़्रेम में मिल जाए। इसे review checklist में डालें।

Sound डिफ़ॉल्ट रूप से बंद होना चाहिए और अकेले कभी कोई मतलब नहीं ले जाना चाहिए। Apple की सलाह है "make motion optional" और इसे "the only way to communicate important information" बनने से बचाना; यही तर्क sound पर भी लागू होता है। वेब पर ब्राउज़र वैसे भी आपके लिए तय कर देते हैं: MDN बताता है कि audio वाले media का playback आम तौर पर तब तक blocked रहता है जब तक यूज़र ने पेज से interact न किया हो, जबकि muted वीडियो autoplay हो सकता है। नियमों का एक काम का सेट:

• Interface मोशन में आवाज़ नहीं होती।
• Sonic logo (लोगो का sound वर्ज़न) सिर्फ़ वीडियो और broadcast में होता है, जहाँ दर्शक ने खुद sound चलाना चुना हो।
• मैस्कॉट की आवाज़ें, अगर हों, सिर्फ़ यूज़र के किसी action के बाद चलती हैं और mute सेटिंग का सम्मान करती हैं।

Motion guidelines में reduced motion और flashing के बारे में क्या लिखा होना चाहिए?

Guidelines के हर एनिमेशन को एक लिखा हुआ reduced-motion वर्ज़न दें। सजावट के लिए "बंद कर दें" सही जवाब है; जो कुछ भी मतलब ले जाता है, उसके लिए replacement तय करें। Atlassian का सिस्टम अपना नियम साफ़ कहता है: "when reduced motion is active, motion is off and instant", और teams से कहता है "verify the interface remains fully usable with all motion disabled." IBM Carbon कहता है: "Always provide alternatives for interface state transitions" और "make sure there is always a way to communicate similar messages statically."

वेब पर यह सेटिंग prefers-reduced-motion media feature है, जिसे MDN यूज़र की ऐसे interface की पसंद बताता है जो "removes, reduces, or replaces motion-based animations." Implementation की डिटेल accessible animation और reduced motion में है।

हर ब्रांड guideline में दो और नियम होने चाहिए:

• Flashing। WCAG 2.2 SC 2.3.1 (Level A): कुछ भी "flashes more than three times in any one second period" नहीं, जब तक वह general और red flash thresholds से नीचे न रहे। तेज़ light sweeps, glitch effects और strobing launch videos को जाँचना ज़रूरी है।
• Scroll और parallax। SC 2.3.3 (Level AAA) माँगता है कि interaction से शुरू होने वाला मोशन बंद किया जा सके; W3C की व्याख्या parallax scrolling को अक्सर गैर-ज़रूरी एनिमेशन बताती है जो "can trigger vestibular disorders."

Motion guidelines में कौन सी फ़ाइलें और formats handoff होने चाहिए?

Deliverables को प्लेटफ़ॉर्म के हिसाब से, नामों के साथ तय करें, ताकि डेवलपर को वही एनिमेशन मिले जिसे डिज़ाइनर ने approve किया था:

Rive वाली row पर खास ध्यान दें: state machine के नाम एक API हैं। अगर guidelines कहती हैं कि मैस्कॉट के पास एक mood number और एक success trigger है, तो हर नई फ़ाइल में वही नाम रहने चाहिए, वरना ऐप का कोड टूट जाता है। इनका नाम बदलने को breaking change की तरह लें।

अगर आपको मौजूदा लोगो से ये फ़ाइलें चाहिए, तो Charmotion आपके अपने लोगो के हिस्सों को एनिमेट करता है, उसे दोबारा बनाए बिना, और कैरेक्टर सेट एक Rive फ़ाइल के रूप में आते हैं जिसमें 17 एनिमेशन, एक state machine और data binding है, साथ में MP4, GIF, transparent WebM और MOV, posters और वेब, iOS, Android, Flutter और React Native के लिए copy-paste कोड। इससे आपकी guidelines को document करने के लिए एक ठोस, नाम वाला सेट मिलता है। प्लान pricing पेज पर हैं।

Brand motion guidelines कैसे लिखें

1. सिद्धांत लिखें. एक-एक वाक्य के तीन या चार सिद्धांत जो बताएँ कि मोशन कैसा महसूस होना चाहिए और किसलिए है।
2. Tokens तय करें. चार से छह नाम वाले durations और तीन easing curves, हर एक का उपयोग बताकर, कोड के रूप में ship किए गए।
3. लोगो के नियम तय करें. Approved लोगो एनिमेशन, क्या मना है, motion envelope सहित clear space, और एनिमेटेड इस्तेमाल के लिए न्यूनतम साइज़ लिखें।
4. मैस्कॉट का वर्णन करें. व्यक्तित्व, स्टेट की तय लिस्ट, error पर बर्ताव, कितनी बार रिएक्ट करता है और कहाँ दिख सकता है।
5. Loops और sound तय करें. हर एनिमेशन को loop या one-shot के रूप में मार्क करें, पाँच सेकंड से लंबे loops के लिए रुकने के नियम जोड़ें, और interface मोशन को बिना आवाज़ रखें।
6. Reduced-motion कॉलम लिखें. हर एनिमेशन को एक reduced-motion वर्ज़न दें और flashing को WCAG 2.3.1 के हिसाब से जाँचें।
7. Handoff तय करें. हर प्लेटफ़ॉर्म के formats, Rive state machine और property के नाम, posters और source फ़ाइलें कहाँ हैं, यह लिखें।

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

Brand guidelines में लोगो एनिमेशन कितना लंबा होना चाहिए?

पढ़ने लायक लंबा, और इतना छोटा कि किसी चीज़ में देरी न हो। Carbon, Material और Atlassian में ज़्यादातर interface मोशन लगभग 50 से 400 ms के बीच है, और लंबी values बड़े या full-screen बदलावों के लिए रखी जाती हैं। लोगो intros लंबे चलते हैं क्योंकि वे ब्रांड के पल हैं, लेकिन वेब पर उन्हें एक-दो सेकंड में रखें, static लोगो पर खत्म करें, और skip करने लायक बनाएँ।

Motion guidelines में easing curves इस्तेमाल करें या springs?

दोनों चलते हैं, अगर उनका नाम हो और वे डेवलपर्स के साथ शेयर हों। Carbon और Atlassian cubic-bezier curves पब्लिश करते हैं; Material easing curves और spring tokens दोनों तय करता है, movement के लिए spatial springs और रंग व opacity के लिए effects springs के साथ। हर प्लेटफ़ॉर्म के लिए एक तरीका चुनें और values document करें।

ब्रांड की motion guidelines का मालिक कौन होना चाहिए?

आम तौर पर design system या brand team, और tokens व फ़ाइल नामों के co-owner के रूप में एक डेवलपर। Tokens और Rive property के नाम कोड में रहते हैं, इसलिए बदलावों को किसी भी API बदलाव जैसा ही review चाहिए।

स्रोत

• Motion, IBM Carbon Design System
• Motion system: easings, durations and springs (Material 3 theme attributes), Material Components for Android on GitHub
• Motion, Apple Human Interface Guidelines
• Motion, Atlassian Design System
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Autoplay guide for media and Web Audio APIs, MDN Web Docs