एंड्रॉइड ऐप यूआई कैसे डिजाइन करें, यह समझ में नहीं आता

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

मुझे आपको एक महत्वपूर्ण उदाहरण दें - कुछ समय पहले, किसी ने मुझे अपने पीसी सॉफ्टवेयर के लिए एक स्प्लैश स्क्रीन बनाने के लिए कहा। तो मैं बाहर चला गया - इसे स्केच पेपर पर आकर्षित किया, इसे फोटोशॉप में आयात किया, बहुत सारे फैंसी नीयन रेखाएं और प्रभाव पैदा किए। यह एक स्‍कैश स्‍क्रीन के बजाय एक डेस्कटॉप वॉलपेपर हो सकता है। मुद्दा यह है कि मैंने उनके लिए वास्तव में फैंसी और विस्तृत डिजाइन बनाया है।

जैसा कि आप शायद अनुमान लगा सकते हैं, वे इसे पसंद नहीं करते। जिस डिजाइन के साथ वे गए थे वह सचमुच कुछ अतिव्यापी रंगीन हलकों का एक छोटा लोगो था, और इसके नीचे सॉफ्टवेयर का नाम। जैसे, फोटोशॉप जॉब में 2 मिनट। और क्या आपको पता है? मुझे इस बात से सहमत होना पड़ा कि यह मेरी तुलना में बेहतर था।

इस प्रकार मैं बना रहा हूँ - मुझे लगता है कि प्रोग्रामर उसी गलती की गिरफ्त में हैं जो मैंने किया था। हम UI और स्प्लैश स्क्रीन के बारे में सोचते हैं, जो वास्तव में फैंसी, आंखों को पकड़ने वाली चीजें हैं जो ऐप बनाती हैं अलग दिखना । लेकिन उन्हें होना नहीं चाहिए - ईमानदारी से, वे नहीं होना चाहिए। हमें एक लेना चाहिए प्रोग्रामर मानसिकता और सौंदर्य डिजाइन के लिए इसे लागू - सरल, कार्यात्मक, काम करता है।

इस लेख में, हम एक बहुत ही सरल तरीके से एक सुंदर एंड्रॉइड एपीपी यूआई / यूएक्स बनाने के लिए देख रहे हैं, भले ही आपके पास लगभग सभी डिज़ाइनिंग अनुभव हों।

जब तक आप वास्तव में कुछ और चाहते हैं, सामग्री डिजाइन से चिपके रहें

आपका ऐप होना जरूरी नहीं है ” अद्वितीय' तथा ' बाकी से बाहर खड़े हो जाओ ” इसके लिए लोकप्रिय होना और अच्छा दिखना। यही Google का है सामग्री डिजाइन पूरे उद्योग में ऐप यूआई के लिए एक मानक - और उन्होंने एक अच्छा काम किया है। मटेरियल डिज़ाइन से चिपके हुए कुछ लोकप्रिय ऐप्स हैं - एंड्रॉइड ऐप में कुछ सबसे बड़े नाम, जैसे स्विफ्टके, नोवा लॉन्चर, टेक्सरा एसएमएस, यूट्यूब, कुछ ही नाम हैं।

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

सामग्री डिज़ाइन के साथ शुरुआत करना अविश्वसनीय रूप से आसान है, और इसमें कुछ मुट्ठी भर उपकरण हैं जो इसे और भी सरल बनाते हैं, जिन्हें हम नीचे सूचीबद्ध करेंगे:

• सामग्री थीम संपादक (macOS + स्केच)
• सामग्री डिजाइन रंग पैलेट प्लग-इन (फोटोशॉप / इलस्ट्रेटर)
• सामग्री डिजाइन यूआई किट PSD (फोटोशॉप)
• Android सामग्री डिजाइन UI किट ( स्केच)
• सामग्री यूआई थीम जनरेटर

और अगर आपको सरल, सुरुचिपूर्ण सामग्री डिज़ाइन थीम बनाने के लिए कुछ प्रेरणा की आवश्यकता है, तो इन सूची ब्लॉगों को देखें:

• MaterialDesignBlog - सही सामग्री डिजाइन के 15 बहुत बढ़िया उदाहरण
• मॉकप्लस - 12 सर्वश्रेष्ठ सामग्री डिजाइन वेबसाइट उदाहरण प्रेरणा बनाने के लिए
• AndroidAuthority - Android के लिए 10 सर्वश्रेष्ठ सामग्री डिज़ाइन ऐप

कलर ग्रैडिएर्स आपके विचार से बहुत आसान हैं

मैटेरियल डिज़ाइन के विकल्प के लिए, डोलर ग्रेडिएंट सरल, ट्रेंडी और आई-कैचिंग हैं। और आप सोच सकते हैं कि डिजाइनर सभी रंगों में बहुत समय पेंटिंग करते हैं, या अंतिम ढाल डिजाइन करते हैं। आप गलत हैं - यह फ़ोटोशॉप में 10 सेकंड में किया जा सकता है।

फोटोशॉप ढाल यूआई में 10 सेकंड।

मैं आपको यह दिखाने के लिए भी चलूंगा कि यह कितना आसान है।

मोबाइल के लिए एक नया PS प्रोजेक्ट बनाएं ( 1080 x 1920 px @ 72 पीपीआई ठीक काम करता है)

UIGradients.com - पूर्व-निर्मित ग्रेडिएंट का बड़ा संग्रह।

के लिए जाओ UIGradients.com और आप की तरह कुछ पाते हैं।

UIGradients से रंग हेक्स मूल्यों की प्रतिलिपि बनाएँ

पूर्वावलोकन के ऊपर से ढाल रंग कॉपी करें।

फोटोशॉप ढाल चयनकर्ता।

PS में एक खाली लेयर पर राइट-क्लिक करें, और Blending Options> Gradient Overlay पर जाएं।

ड्रॉप-डाउन मेनू में ग्रेडिएंट पैटर्न पूर्वावलोकन पर सीधे क्लिक करें - ड्रॉपडाउन बटन पर क्लिक न करें। ग्रेडिएंट पर सीधे क्लिक करने से कलर एडिटर खुल जाता है।

इनपुट से हेक्स मान UIGradient से PS ढाल उपकरण में।

अब बस पेस्ट रंग ढाल को UIGradient से PS ग्रेडिएंट एडिटर में पेस्ट करें।

आवश्यकतानुसार समायोजित करें। अब आपके पास अपने एंड्रॉइड ऐप के लिए एक पेशेवर ढाल पृष्ठभूमि है।

अन्य ग्रेडिएंट टूल चेक आउट करने लायक हैं:

• WebGradients.com
• Android आकार जनरेटर ( XML के माध्यम से आकृतियाँ बनाने के लिए, ढाल के लिए विकल्प के साथ)

JPG / PNG के बजाय SVGs का उपयोग करें

अपने ग्राफिकल तत्वों (बटन, लोगो इत्यादि) के लिए PNG या JPGs का उपयोग करने के बजाय, आपको वास्तव में SVGs का उपयोग करना चाहिए ( स्केलेबल वेक्टर ग्राफिक्स) बजाय। ऐसा इसलिए है क्योंकि SVGs को गुणवत्ता खोए बिना ही आकार दिया जा सकता है - उदाहरण के लिए, यदि आप किसी JPG को बड़े मूल्य पर अपग्रेड करते हैं, तो यह गुणवत्ता खो देता है और धुंधली / पिक्सेलयुक्त हो जाती है। एक एसवीजी नहीं करता है। लोग पीएनजी की विशाल फाइलों का उपयोग करने की कोशिश करते हैं जो कि होगी downscaled एंड्रॉइड स्क्रीन को फिट करने के लिए - जब इसके बजाय, आप छोटे एसवीजी का उपयोग कर सकते हैं जो हैं upscaled गुणवत्ता में किसी भी नुकसान के बिना।

इसके अलावा, एसवीजी तक हो सकते हैं पीएनजी की तुलना में फ़ाइल आकार में 60% से 80% छोटा है । इसका मतलब है कि आपका ऐप या मोबाइल वेबसाइट उपयोगकर्ता के लिए तेज़ी से लोड होगा, और स्क्रीन रिज़ॉल्यूशन पर कोई फर्क नहीं पड़ेगा।

Theme.AppCompat.DayNight का उपयोग करके एक डार्क मोड शामिल करें

आपको अपने ऐप में डार्क / नाइट मोड थीम को शामिल करने के लिए दो अलग-अलग थीम डिज़ाइन करने की आवश्यकता नहीं है। इसका बहुत ज्यादा AppCompat पुस्तकालय में बनाया गया है, आपको बस इसे सक्षम करने और मूल्यों को संपादित करने की आवश्यकता है।

देखें एप्लाइड की गाइड “ अपने एंड्रॉइड ऐप में एक डार्क मोड कैसे लागू करें '।

टेम्प्लेट या मोबाइल UI किट का उपयोग करें

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

Android UI टेम्पलेट और किट के लिए कुछ बेहतरीन संसाधन:

• SpeckyBoy - IOS और Android के लिए 50 मुफ्त मोबाइल यूआई किट
• स्केचऐप सोर्स - Android UI ऐप संसाधन ( स्केच)
• फ्रीबसबग - PSD UI किट ( फोटोशॉप)