मोशन

गति एक शक्तिशाली उपकरण है जिसका उपयोग ड्राइविंग के संदर्भ में संयम से किया जाना चाहिए। यह तभी उपयुक्त है जब यह ड्राइवरों को सड़क से ध्यान भटकाए बिना उन्हें जानकारी देने में मदद कर सके।

संक्षिप्त मार्गदर्शन (TL;DR):

  • अनावश्यक गतिविधियों से उपयोगकर्ताओं का ध्यान भटकाने से बचें।
  • गति का उपयोग करके उपयोगकर्ताओं की समझ बढ़ाएं और उनकी दक्षता का निर्माण करें।
  • अपनी मोशन लैंग्वेज को सभी संबंधित हार्डवेयर के लिए पर्याप्त लचीला बनाएं।
  • अपनी परिस्थिति के अनुसार अनुशंसित गति पैटर्न का उपयोग करें।

गति के सिद्धांत

एंड्रॉइड फॉर कार्स इंटरफेस के लिए मोशन डिजाइन करते समय, तीन बुनियादी सिद्धांतों को ध्यान में रखें: सुरक्षित रहें, जानकारीपूर्ण रहें और लचीले रहें।

सुरक्षित

वाहन चलाना उपयोगकर्ता का प्राथमिक कार्य है – बाकी सब गौण है। उपयोगकर्ता के ध्यान को एक सीमित संसाधन मानें और अनावश्यक ध्यान भटकाने के लिए गति का उपयोग करने से बचें।

आँख gif

जानकारीपूर्ण

गति का उपयोग करके उपयोगकर्ताओं को उपयोगी जानकारी दें। उदाहरण के लिए, गति विभिन्न तत्वों के बीच पदानुक्रमित और स्थानिक संबंधों को दर्शाकर उत्पाद के बारे में उपयोगकर्ताओं की समझ को बढ़ा सकती है। गति उपलब्ध अंतःक्रियाओं को इंगित करके इंटरफ़ेस के साथ उपयोगकर्ताओं की दक्षता बढ़ाने में भी मदद कर सकती है।

जानकारीपूर्ण जीआईएफ

लचीला

एक ऐसी मोशन लैंग्वेज को परिभाषित करें जो सभी आकार और प्रकार की स्क्रीन के साथ-साथ सभी प्रकार के उपयोगकर्ता इनपुट के अनुरूप ढलने के लिए पर्याप्त रूप से स्केलेबल और लचीली हो।

फ्लेक्स स्क्रीन जीआईएफ

गति पैटर्न

सभी ऐप्स में एक समान उपयोगकर्ता अनुभव सुनिश्चित करने के लिए, एंड्रॉइड ऑटोमोटिव निम्नलिखित स्थितियों में उपयोग किए जाने वाले विशिष्ट गति पैटर्न के लिए अनुशंसाएँ प्रदान करता है:

  • एक ही स्तर के दृश्यों के बीच स्विच करना
  • विस्तृत दृश्य पर जाना
  • किसी मौजूदा कार्रवाई का विस्तार करना
  • किसी क्रिया को छोटा करना और उसका विस्तार करना
  • किसी क्रिया को बाधित करना

इस खंड में सभी गति पैटर्न मानक सहजता पर आधारित हैं, जैसा कि मटेरियल डिज़ाइन सहजता दिशानिर्देशों में चर्चा की गई है। अर्थात्, गतियाँ तेज़ी से बढ़ती हैं और धीरे-धीरे कम होती हैं, ताकि ध्यान संक्रमण के अंत की ओर आकर्षित हो सके।


एक ही स्तर के दृश्यों के बीच स्विच करना

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

सहकर्मी संक्रमण उदाहरण
एंड्रॉइड ऑटोमोटिव में एक त्वरित क्रॉसफ़ेड उपयोगकर्ता को नेविगेशनल ऐप से मीडिया ऐप और फिर वापस नेविगेशनल ऐप पर ले जाता है।

उदाहरण

एंड्रॉइड ऑटोमोटिव ओएस में, मीडिया ऐप में होम टैब से प्लेलिस्ट टैब पर स्विच करते समय साइड-टू-साइड मोशन इस बात को पुष्ट करता है कि दोनों टैब कंटेंट के टॉप-लेवल व्यू हैं।

विस्तृत दृश्य पर जाना

जब आप किसी कंटेंट के उच्च-स्तरीय दृश्य से विस्तृत दृश्य पर जाते हैं, तो एक ज़ेड-डेप्थ मोशन का उपयोग करें जो निचली परत को बड़ा करता है और ऊपरी परत के धुंधला होने के साथ-साथ उसे स्पष्ट रूप से दिखाता है। यह मोशन उच्च-स्तरीय दृश्य और विस्तृत दृश्य के बीच पैरेंट-चाइल्ड संबंध को मजबूत करता है, जिससे ध्यान विस्तृत दृश्य पर केंद्रित होता है।

माता-पिता से बच्चे में परिवर्तन
पैरेंट स्क्रीन से, चाइल्ड एलिमेंट ऊपर उठता है और उसी स्थान पर फैलता है।

उदाहरण

विस्तृत दृश्य पर स्विच करना
एंड्रॉइड ऑटोमोटिव ओएस मीडिया टेम्प्लेट में, जब उपयोगकर्ता एल्बमों की ग्रिड में किसी विशिष्ट एल्बम पर क्लिक करता है, तो उस एल्बम की गीत सूची का आकार बढ़ जाता है और वह फैल जाती है, जिससे विवरण स्पष्ट रूप से दिखाई देने लगते हैं।

किसी मौजूदा कार्रवाई का विस्तार करना

जब कोई उपयोगकर्ता किसी क्रिया में हो और उससे संबंधित कोई अन्य क्रिया करे, तो प्राथमिक क्रिया के ऊपर, एक परदे की पृष्ठभूमि पर, द्वितीयक क्रिया को दिखाने के लिए ऊर्ध्वाधर (ऊपर या नीचे) गति का उपयोग करें। पर्दे के माध्यम से प्राथमिक क्रिया का दिखाई देना इस बात को पुष्ट करता है कि उपयोगकर्ता अभी भी उसी क्रिया में है।

द्वितीयक क्रिया को समाप्त करते समय, इस क्रिया के विपरीत का प्रयोग करें। विपरीत क्रिया में मूल क्रिया की तुलना में कम समय लगना चाहिए, क्योंकि उपयोगकर्ता द्वितीयक क्रिया पूरी कर चुका है और बाहर निकलने के लिए तैयार है।

कॉलआउट आइकन
अवधि
सामग्री डिजाइन दिशानिर्देश बताते हैं कि बदलावों में कितना समय लगना चाहिए।
द्वितीयक क्रिया ओवरले
यहां, द्वितीयक क्रिया प्राथमिक क्रिया से एक ओवरले पर उभरती है, जबकि प्राथमिक क्रिया आंशिक रूप से स्क्रिम के पीछे दिखाई देती रहती है।

उदाहरण

एंड्रॉइड ऑटो ओएस एक्शन ओवरले उदाहरण
एंड्रॉइड ऑटोमोटिव ओएस मीडिया टेम्प्लेट में, जब उपयोगकर्ता कंट्रोल बार को विस्तारित करने के लिए ओवरफ़्लो बटन पर टैप करता है, तो अतिरिक्त नियंत्रण ऊपर उठते हैं और ओवरले पर दिखाई देते हैं।

किसी क्रिया को छोटा करना और उसका विस्तार करना

जब किसी चल रही क्रिया को, जिसे मल्टीटास्किंग की सुविधा के लिए स्क्रीन पर छोटे प्रारूप में छोटा किया गया हो, विस्तारित किया जाता है, तो पूर्ण-स्क्रीन फ़ेड-इन के साथ एक विस्तारित विंडो मास्क का उपयोग करें।

किसी चल रही क्रिया को छोटा करते समय, इस क्रिया के विपरीत का प्रयोग करें। छोटा करने की क्रिया में विस्तार करने की क्रिया से कम समय लगना चाहिए, क्योंकि उपयोगकर्ता मूल रूप से इस क्रिया को छोड़ रहा होता है और इसे समाप्त करने के लिए तैयार होता है।

कॉलआउट आइकन
अवधि
सामग्री डिजाइन दिशानिर्देश बताते हैं कि बदलावों में कितना समय लगना चाहिए।
एक छोटी स्क्रीन को बड़ा करना
छोटा किया गया एक्शन मौजूदा एक्शन के ऊपर धीरे-धीरे दिखाई देने के साथ ही पूरी स्क्रीन पर फैल जाता है।

उदाहरण

एंड्रॉइड ऑटोमोटिव ओएस कंट्रोल बार का उदाहरण
एंड्रॉइड ऑटोमोटिव ओएस मीडिया टेम्प्लेट में, मिनिमाइज्ड कंट्रोल बार फुल प्लेबैक व्यू में फैल जाता है – और फिर उपयोगकर्ता द्वारा नीचे तीर पर टैप करने पर वापस अपने मिनिमाइज्ड रूप में सिकुड़ जाता है।

किसी क्रिया को बाधित करना

जब किसी चल रही क्रिया के ऊपर अचानक कोई छोटी, बिना रुकावट वाली क्रिया दिखानी हो, तो उसे स्क्रीन के किनारे से नीचे या ऊपर खिसकाएँ (आंशिक स्क्रीन के साथ) या बीच में धीरे-धीरे लाएँ (पूर्ण स्क्रीन के साथ)। गति को उस स्थान से शुरू करें जो उस स्थान के सबसे करीब हो जहाँ आप नई क्रिया दिखाना चाहते हैं।

संक्षिप्त कार्रवाई उदाहरण
जब व्यवधानकारी क्रिया स्क्रीन के ऊपरी भाग के पास दिखाई दे, तो उसे आंशिक स्क्रीन के साथ ऊपर से स्लाइड करके अंदर लाएँ।

उदाहरण

संवाद उदाहरण
जब एंड्रॉइड ऑटोमोटिव ओएस मीडिया टेम्पलेट के बीच में कोई व्यवधान उत्पन्न करने वाली गतिविधि दिखाई देती है, तो वह धीरे-धीरे धुंधली होकर प्रकट होती है ताकि उपयोगकर्ता का ध्यान अस्थायी रूप से नई गतिविधि पर केंद्रित हो सके - इस मामले में, स्थान डेटा का उपयोग करने की अनुमति का अनुरोध।