इस गाइड की मदद से, Android डिज़ाइन का इस्तेमाल शुरू किया जा सकता है. इसके लिए, iOS मोबाइल के मौजूदा डिज़ाइन को Android में ट्रांसलेट किया जाता है. इसमें Android के बुनियादी यूज़र एक्सपीरियंस पैटर्न के साथ-साथ, Material Design का इस्तेमाल किया जाता है.
इन्हें डिज़ाइन के हिसाब से एक जैसा बनाया गया है और बेहतर तरीके से काम करने के लिए क्रम से लगाया गया है. अगर आपको शेयर किए गए किसी बुनियादी डिज़ाइन सिस्टम का इस्तेमाल करना है, तो Material 3 के बजाय अपने सिस्टम का इस्तेमाल करके डिज़ाइन का अनुवाद किया जा सकता है. Android और iOS, दोनों ही इस बात पर ज़ोर देते हैं कि कॉन्टेंट सबसे ज़रूरी है.
इसके बाद, ब्रैंडिंग को रंग, टाइप, और आकार के तौर पर दिखाया जा सकता है. इससे न सिर्फ़ कॉन्टेंट को आसानी से पढ़ा जा सकता है, बल्कि इसे एक साथ जोड़कर बनाना भी आसान हो जाता है.
iOS डिज़ाइन से शुरुआत करना
शुरू करने से पहले, अपने iOS ऐप्लिकेशन की एक कॉपी बना लें. iOS ऐप्लिकेशन को तीन हिस्सों में बांटा गया है: बार, व्यू, और कंट्रोल. इस स्ट्रक्चर का इस्तेमाल करके, अनुवाद किया जा सकता है. हालांकि, स्टाइलिंग सबसे आखिर में की जाती है.
Android ऐप्लिकेशन के हिस्सों के बारे में जानें.
1. iOS सिस्टम यूज़र इंटरफ़ेस (यूआई) को मिटाएं
स्टेटस बार और होम इंडिकेटर मिटाएं. अब यह काम आसानी से किया जा सकता है.
2. फ़्रेम का साइज़ बदलना
Android के लिए, 412 डीपी का कॉम्पैक्ट साइज़ इस्तेमाल किया जा सकता है. हालांकि, विंडो क्लास के साइज़ के हिसाब से डिवाइसों की रेंज पर विचार करें. उदाहरण के लिए, छोटी स्क्रीन के लिए 360 डीपी पर टेस्ट करें. साथ ही, सभी विंडो क्लास के साइज़ के हिसाब से अडैप्ट करें.
3. Android सिस्टम बार से बदलें
Android सिस्टम यूज़र इंटरफ़ेस (यूआई), उपयोगकर्ता के डिवाइस और सेटिंग के हिसाब से अलग-अलग हो सकता है. हालांकि, स्टॉक सिस्टम यूज़र इंटरफ़ेस (यूआई) दिखाने से, आपके डिज़ाइन को ज़्यादा कॉन्टेक्स्ट मिल सकता है. सूचना बार को सबसे ऊपर और जेस्चर वाले नेविगेशन या तीन बटन वाले नेविगेशन बार को सबसे नीचे रखें.
ज़्यादा जानकारी के लिए, Android सिस्टम बार लेख पढ़ें.
4. नेविगेशन के हिसाब से
टैबबार (सबसे नीचे मौजूद नेविगेशन) को नेविगेशन बार से बदलें.
अपने फ़्लो मैप पर एक नज़र डालें. क्या आपका iOS ऐप्लिकेशन, 'ज़्यादा' मेन्यू का इस्तेमाल कर रहा है? (एचआईजी के सबसे सही तरीकों के मुताबिक, इस पैटर्न का इस्तेमाल नहीं करना चाहिए). पांच या इससे कम आइटम इस्तेमाल करें, बॉटम नेविगेशन बार को प्राइमरी नेविगेशन के लिए रखें, देखें कि क्या प्रोफ़ाइल या सेटिंग जैसी कोई सेकंडरी चीज़, टॉप ऐप्लिकेशन बार में ले जाई जा सकती है या हो सकता है कि आपके पास कोई प्राइमरी ऐक्शन हो जिसे FAB में बदला जा सकता है?
आपका प्राइमरी नेविगेशन, पैरंट व्यू (आपके फ़्लो मैप में किसी सेक्शन का टॉप लेवल) पर हमेशा मौजूद होना चाहिए. चाइल्ड व्यू (पैरंट व्यू के नीचे मौजूद कोई भी व्यू) में प्राइमरी नेविगेशन शामिल हो सकता है. ऐसा तब होता है, जब वे नेविगेशन के क्रम में ऊपर हों और मॉडल न हों.
सबसे नीचे मौजूद नेविगेशन बार को सही आइकॉन और लेबल के साथ अपडेट करें. दोनों प्लैटफ़ॉर्म, नेविगेशन डेस्टिनेशन के बीच लैटरल मोशन से बचते हैं.
5. नेविगेशन बार से टॉप ऐप्लिकेशन बार पर माइग्रेट करना
इन्हें सेक्शन के हिसाब से तोड़ें. सबसे पहले पैरंट व्यू और फिर चाइल्ड व्यू. ऐप्लिकेशन बार में ये चीज़ें शामिल होती हैं: बाईं ओर नेविगेशन और टाइटल, और दाईं ओर ऐक्शन आइटम.
अगर आपका ऐप्लिकेशन, बॉटम नेविगेशन बार के बजाय नेविगेशन ड्रॉअर मेन्यू का इस्तेमाल करता है, तो सभी पैरंट व्यू पर ड्रॉअर आइकॉन दिखेगा.
अगर आपके ऐप्लिकेशन में रेल या ड्रॉअर नहीं है, तो पैरंट व्यू में प्राइमरी नेविगेशन आइकॉन नहीं दिखता.
Android के लिए App Bar में, टाइटल डिफ़ॉल्ट रूप से बाईं ओर अलाइन होता है.
चाइल्ड व्यू में, नेविगेशन आइकॉन की जगह पर ऊपर की ओर इशारा करने वाला ऐरो होता है. इसे पीछे की ओर ले जाने के साथ भ्रमित न करें. ऊपर की ओर इशारा करने वाला ऐरो, उपयोगकर्ता को ऐप्लिकेशन के नेविगेशन की एक लेवल ऊपर की ओर ले जाता है. वहीं, पीछे की ओर इशारा करने वाला ऐरो या किनारे से स्वाइप करने की सुविधा, सिस्टम नेविगेशन में मौजूद होती है. इससे उपयोगकर्ता को पीछे की ओर ले जाया जाता है. साथ ही, इससे उपयोगकर्ता को ऐप्लिकेशन से बाहर भी ले जाया जा सकता है.
मोडल व्यू के बारे में क्या जानकारी है? फ़ुल-स्क्रीन मोडल (जैसे, वीडियो प्लेयर और इमेज) के लिए, यह चाइल्ड व्यू ऐप्लिकेशन बार की तरह ही होगा. हालांकि, नेविगेशन आइकॉन को बंद करने के आइकॉन में बदल दिया जाना चाहिए, ताकि मोडल को खारिज किया जा सके.
6. थोड़ी ज़्यादा मॉडेलिटी
बड़े मोडल व्यू से शुरुआत करें. इनका इस्तेमाल, उपयोगकर्ता का ध्यान किसी टास्क पर केंद्रित करने के लिए सबसे सही होता है. iOS पर ये अक्सर शीट के तौर पर दिखते हैं. उपयोगकर्ता इन्हें नीचे की ओर स्वाइप कर सकता है.
ऐप्लिकेशन बार बदलने की प्रोसेस पूरी करें. iOS शीट मॉडल के लिए, सबसे ऊपर मौजूद शीट के हिस्से और बैकग्राउंड पीक को फ़ुलस्क्रीन डायलॉग ऐप्लिकेशन बार से बदलें.
बोनस: देखें कि क्या आपकी किसी iOS मोडल शीट को बॉटम शीट में बदला जा सकता है.
कार्रवाई और गतिविधि की जानकारी वाली शीट को बॉटम शीट में बदल दिया गया है. (शेयर की गई शीट का अनुवाद भी किया जा सकता है).
चेतावनी के लिए, सिस्टम डायलॉग का इस्तेमाल करें. अगर इनका इस्तेमाल ऐसी ज़रूरी जानकारी के लिए किया जा रहा है जिसे उपयोगकर्ता को किसी तरह से स्वीकार करना है, तो इन्हें सिस्टम डायलॉग से बदलें. इस समय, सभी इनपुट और पिकर को भी बदलें.
7. भाई-बहन का कॉन्टेंट
टैब या व्यू पेजर या स्वाइप करने वाले टैब. अगर iOS पर सेगमेंट किए गए कंट्रोल का इस्तेमाल किया जा रहा है, तो Android पर ये टैब में बदल जाते हैं. ये दोनों, एक जैसी लेकिन अलग-अलग जानकारी को फ़िल्टर करने का काम करते हैं. Android टैब आम तौर पर ऐप्लिकेशन बार से जुड़े होते हैं. साथ ही, इनमें कॉन्टेंट के बीच स्वाइप करने की सुविधा भी होती है.
8. कॉन्टेंट और कंट्रोल
आपने जिस तरह से कॉन्टेंट के साइज़ को बदलने की सुविधा सेट अप की है उसके हिसाब से, हो सकता है कि आपके ज़्यादातर कॉन्टेंट का साइज़ पहले ही बदल गया हो. हालांकि, इस दौरान मार्जिन सेट करने के लिए समय निकालें. छोटी स्क्रीन पर 16 डीपी एक अच्छा स्टैंडर्ड है.
बेसलाइन ग्रिड, कॉम्पोनेंट के लिए 8dp ग्रिड और टाइप और आइकॉन के लिए 4dp पर आधारित होती है. iOS पर 8pt ग्रिड अच्छी तरह से काम करता है. इसलिए, हो सकता है कि आपको दोनों प्लैटफ़ॉर्म के लिए इसे शुरुआती पॉइंट के तौर पर इस्तेमाल करना पड़े.
कंट्रोल. उन टॉगल को Android स्विच में बदलें. Android के चेकबॉक्स और रेडियो बटन का इस्तेमाल करें. Android में ये सभी सुविधाएं पहले से मौजूद होती हैं.
अगर आपके पास फ़ॉर्म हैं, तो iOS के टेक्स्ट फ़ील्ड को Android के टेक्स्ट फ़ील्ड से बदलें. मटेरियल में आउटलाइन या फ़िल किए गए जैसे विकल्प होते हैं. इसलिए, वह विकल्प चुनें जो आपके ब्रैंडिंग के हिसाब से सबसे सही हो.
iOS टेबल सेल की तुलना में, मटेरियल लिस्ट में कुछ अंतर होते हैं:
- डिवाइडर लाइनों का इस्तेमाल कम से कम किया जाता है.
- विज़ुअल नॉइज़ को कम से कम रखने के लिए, सूचियों में इंडिकेटर का इस्तेमाल नहीं किया जाता.
- डाइमेंशन, 8dp ग्रिड के मुताबिक होते हैं.
9. शैली
रंग: यूज़र इंटरफ़ेस (यूआई) के रंग में एक्सेंट, सिमैंटिक, और सर्फ़ेस के रंग शामिल होते हैं. इन्हें कलर स्कीम में शामिल किया जाता है. इन रंगों को यूज़र इंटरफ़ेस (यूआई) पर उनकी भूमिकाओं के हिसाब से लागू किया जाता है.
टाइप: अगर सिस्टम फ़ॉन्ट का इस्तेमाल किया जा रहा है, तो San Francisco को बदलें. Roboto, Android के लिए डिफ़ॉल्ट सिस्टम फ़ॉन्ट है. हालांकि, हमारा सुझाव है कि आप थीम और डाउनलोड किए जा सकने वाले Google फ़ॉन्ट का इस्तेमाल करके, अपने ब्रैंड की यूनीक स्टाइल दिखाएं.
आइकॉन: यहां भी आइकॉन एक जैसे हैं. अगर SF सिंबल का इस्तेमाल किया जा रहा है, तो दो बार जांच कर लें कि सभी सिंबल, Material Icons या Symbols में बदल दिए गए हों. अपने ब्रैंड के हिसाब से सही वैरिएंट चुनें. क्या आपको पता है कि किसी भी प्लैटफ़ॉर्म पर मटीरियल आइकॉन इस्तेमाल किए जा सकते हैं?
मोशन: Android और iOS, दोनों के लिए अलग-अलग मोशन डिज़ाइन उपलब्ध हैं. इसलिए, हर प्लैटफ़ॉर्म के लिए इनका इस्तेमाल करना चाहिए. मटेरियल मोशन में जानकारी दी गई हो, फ़ोकस किया गया हो, और उसे दिखाया गया हो. रिपल इफ़ेक्ट, एक खास हाइलाइट होती है. इसका इस्तेमाल कॉम्पोनेंट में टच फ़ीडबैक देने के लिए किया जाता है. मोशन सिस्टम, ट्रांज़िशन पैटर्न का एक सेट है. इससे कंटेनर ट्रांसफ़ॉर्म, शेयर किए गए ऐक्सिस, फ़ेड थ्रू, और फ़ेड एनिमेशन का फ़ायदा मिलता है. देखें कि क्या आपके डिज़ाइन में मौजूद एलिमेंट के लिए कंटेनर मौजूद हैं, एलिमेंट के बीच संबंध कैसा है, और उन्हें कैसे दिखाना या छिपाना है.
10. व्यवस्थित करें
अगर किसी प्रोटोटाइप का अनुवाद किया जा रहा है, तो यह चीज़ों को फिर से व्यवस्थित करने का सही समय है. मुख्य नेविगेशन का इस्तेमाल करके, वापस जाएं. इसके बाद, अपने ऐप्लिकेशन बार में बदलाव करें. इसमें ऊपर और पीछे के बीच के अंतर को ध्यान में रखें. साथ ही, यह पक्का करें कि आपने Android के हिसाब से पेज ट्रांज़िशन चुने हों. इनके बारे में नौवें चरण में बताया गया है.
आपके पास पूरी तरह से काम करने वाला प्रोटोटाइप तैयार होना चाहिए. आपने इसका साइज़ बदल दिया है, इसलिए अब इसे डेवलपर को सौंपा जा सकता है.
स्टाइल और कॉम्पोनेंट गाइड
अगर आपके पास पहले से कोई डिज़ाइन सिस्टम या स्टाइल गाइड है, तो आपके पास अपने बुनियादी स्टाइल (रंग, टाइप, आइकॉन, आकार) हो सकते हैं. इनका इस्तेमाल Material Design के साथ किया जा सकता है. ठीक उसी तरह जैसे इनका इस्तेमाल iOS के दिशा-निर्देशों के साथ किया जाता है. मटीरियल थीमिंग का इस्तेमाल करके, मटीरियल कॉम्पोनेंट को अपने ब्रैंड की यूनीक स्टाइल के हिसाब से पसंद के मुताबिक बनाया जा सकता है. इसके लिए, रंग, टाइप, और आकार का इस्तेमाल किया जा सकता है.
एक से ज़्यादा प्लैटफ़ॉर्म पर काम करने वाले प्रॉडक्ट के लिए, प्लैटफ़ॉर्म के हिसाब से दिशा-निर्देश होना आम बात है. इससे आपका डिज़ाइन सिस्टम, उपयोगकर्ताओं की ज़रूरतों के हिसाब से ज़्यादा बेहतर बन सकता है.
आखिर में, अगर आपके पास कोई कस्टम डिज़ाइन सिस्टम नहीं है, तो जान लें कि हर ऐप्लिकेशन या प्रॉडक्ट के लिए, कस्टम डिज़ाइन सिस्टम की ज़रूरत नहीं होती! एक पेज की स्टाइल गाइड बनाएं. स्टाइल गाइड एक ऐसा दस्तावेज़ होता है जिसमें डिज़ाइन के लिए बुनियादी स्पेसिफ़िकेशन की जानकारी दी जाती है. ब्रैंडिंग के दिशा-निर्देशों में अक्सर स्टाइल गाइड शामिल होती है.
इसे Android के लिए कॉपी किया जा सकता है. साथ ही, इसका इस्तेमाल स्टाइल (या सिंबल, कॉम्पोनेंट या लाइब्रेरी) अपडेट करने के सोर्स के तौर पर किया जा सकता है.