प्रोग्रामर और डेवलपर्स आम तौर पर डिजाइनर नहीं होते हैं - यह व्यापक रूप से सच होने के रूप में स्वीकार किया जाता है। डेवलपर किसी ऐप्लिकेशन को काम करने . बनाने पर ध्यान केंद्रित करते हैं - डिज़ाइनर ऐप को सौंदर्य की दृष्टि से आकर्षक . बनाने पर ध्यान केंद्रित करते हैं . लेकिन डेवलपर ऐसा क्यों नहीं कर सकते?
दिन में वापस, जब एनिमेटेड स्प्लैश लैंडिंग पृष्ठ और फैंसी लेआउट एक चीज थे, तो निश्चित रूप से, एक पेशेवर डिजाइनर को किराए पर लेना समझ में आता था। लेकिन आज का चलन न्यूनतम है - या कम से कम बेहद सरलीकृत।
मैं आपको एक वास्तविक उदाहरण देता हूं - कुछ समय पहले, किसी ने मुझे अपने पीसी सॉफ्टवेयर के लिए एक स्प्लैश स्क्रीन बनाने के लिए कहा था। तो मैं पूरी तरह से बाहर चला गया - इसे स्केच पेपर पर निकाला, इसे फोटोशॉप में आयात किया, बहुत सारी फैंसी नियॉन लाइनें और प्रभाव बनाए। यह स्प्लैश स्क्रीन के बजाय एक डेस्कटॉप वॉलपेपर हो सकता था। मुद्दा यह है कि मैंने उनके लिए यह वास्तव में फैंसी और विस्तृत डिजाइन बनाया है।
जैसा कि आप शायद अनुमान लगा सकते हैं, उन्हें यह पसंद नहीं आया। वे जिस डिज़ाइन के साथ गए थे, वह वस्तुतः कुछ अतिव्यापी रंगीन हलकों का एक छोटा लोगो था, और इसके नीचे सॉफ़्टवेयर का नाम था। जैसे, फोटोशॉप जॉब में 2 मिनट। और क्या आपको पता है? मुझे इस बात से सहमत होना पड़ा कि यह मेरे से बेहतर है।
मैं जो बिंदु बना रहा हूं वह इस प्रकार है - मुझे लगता है कि प्रोग्रामर उसी गलती को करने के इस जाल में पड़ते हैं जो मैंने किया था। हम यूआई और स्प्लैश स्क्रीन के बारे में सोचते हैं जो वास्तव में फैंसी, आकर्षक चीजें हैं जो ऐप को बाहर खड़े बनाती हैं। . लेकिन उनका होना जरूरी नहीं है - ईमानदारी से, उन्हें नहीं होना चाहिए। हमें एक प्रोग्रामर . लेना चाहिए मानसिकता और इसे सौंदर्य डिजाइन पर लागू करें - सरल, कार्यात्मक, काम करता है।
इस लेख में, हम एक शानदार Android APP UI / UX बनाने के कुछ बहुत ही सरल तरीकों को देखेंगे, भले ही आपके पास लगभग कोई डिज़ाइनिंग अनुभव न हो।
जब तक आप वास्तव में कुछ और नहीं चाहते, तब तक मटेरियल डिज़ाइन से चिपके रहें
आपका ऐप्लिकेशन "अद्वितीय" . होना ज़रूरी नहीं है और "बाकी से अलग दिखें" ताकि वह लोकप्रिय हो और अच्छी दिखे। यही Google का मटीरियल डिज़ाइन हासिल करने के लिए निर्धारित है - पूरे उद्योग में ऐप UI के लिए एक मानक, और उन्होंने अच्छा काम किया है। वहाँ बहुत सारे लोकप्रिय ऐप हैं जो मटीरियल डिज़ाइन से चिपके रहते हैं - एंड्रॉइड ऐप में कुछ सबसे बड़े नाम, जैसे स्विफ्टकी, नोवा लॉन्चर, टेक्स्ट्रा एसएमएस, यूट्यूब, बस कुछ ही नाम के लिए।
मटीरियल डिज़ाइन का मुख्य फोकस एक कार्ड-आधारित लेआउट पर है, जिसमें एक ठोस रंग पैलेट है। Google ने शीर्ष उद्योग डिजाइनरों के साथ काम किया, न्यूनतम डिजाइन प्रथाओं से बहुत सारे तत्वों को आकर्षित किया, और फिर पूरी चीज को मुफ्त में जारी किया - यह एक बहुत अच्छा सौदा है, क्योंकि वेबसाइट और ऐप डिज़ाइन पाठ्यक्रम ई-पुस्तकों, वीडियो के लिए सैकड़ों डॉलर चला सकते हैं। आदि.
मटीरियल डिज़ाइन के साथ शुरुआत करना अविश्वसनीय रूप से आसान है, और कुछ ऐसे टूल हैं जो इसे और भी सरल बनाते हैं, जिन्हें हम नीचे सूचीबद्ध करेंगे:
- सामग्री थीम संपादक (macOS + स्केच)
- सामग्री डिज़ाइन रंग पैलेट प्लग-इन (फ़ोटोशॉप / इलस्ट्रेटर)
- सामग्री डिज़ाइन UI किट PSD (फ़ोटोशॉप)
- Android सामग्री डिज़ाइन UI किट (स्केच)
- सामग्री UI थीम जेनरेटर
और यदि आपको सरल, सुरुचिपूर्ण सामग्री डिज़ाइन थीम बनाने के लिए कुछ प्रेरणा की आवश्यकता है, तो इन सूची ब्लॉगों को देखें:
- MaterialDesignBlog - मटीरियल डिज़ाइन के 15 बेहतरीन उदाहरण सही किए गए
- MockPlus - प्रेरणा लेने के लिए 12 सर्वश्रेष्ठ सामग्री डिज़ाइन वेबसाइट उदाहरण
- AndroidAuthority - Android के लिए 10 सर्वश्रेष्ठ सामग्री डिज़ाइन ऐप्स
रंग ग्रेडिएंट आपके विचार से कहीं अधिक आसान हैं
मटीरियल डिज़ाइन के विकल्प के लिए, डोलर ग्रेडिएंट सरल, ट्रेंडी और आकर्षक हैं। और आप सोच सकते हैं कि डिजाइनर सभी रंगों में पेंटिंग करने, या अंतिम ढाल को डिजाइन करने में बहुत समय लगाते हैं। आप गलत होंगे - इसे फोटोशॉप में 10 सेकंड में किया जा सकता है।
यह कितना आसान है, यह दिखाने के लिए मैं आपको इसके माध्यम से भी बताऊंगा।
मोबाइल के लिए एक नया PS प्रोजेक्ट बनाएं (1080 x 1920 px @ 72 ppi ठीक काम करता है)
UIGradients.com पर जाएं और अपनी पसंद की कोई चीज़ ढूंढें।
पूर्वावलोकन के ऊपर से ग्रेडिएंट रंग कॉपी करें।
PS में एक खाली लेयर पर राइट-क्लिक करें, और Blending Options> Gradient Overlay पर जाएं।
ड्रॉप-डाउन मेनू में ग्रेडिएंट पैटर्न पूर्वावलोकन पर सीधे क्लिक करें - ड्रॉपडाउन बटन पर क्लिक न करें। ग्रेडिएंट पर सीधे क्लिक करने से कलर एडिटर खुल जाता है।
अब बस रंग हेक्स मानों को UIGradient से PS ग्रेडिएंट संपादक में पेस्ट करें।
आवश्यकतानुसार समायोजित करें। अब आपके पास अपने Android ऐप के लिए एक पेशेवर ग्रेडिएंट बैकग्राउंड है।
देखने लायक अन्य ग्रेडिएंट टूल:
- WebGradients.com
- एंड्रॉइड शेप्स जेनरेटर (एक्सएमएल के जरिए शेप जेनरेट करने के लिए, ग्रेडिएंट के विकल्प के साथ)
जेपीजी / पीएनजी के बजाय एसवीजी का प्रयोग करें
अपने ग्राफिकल तत्वों (बटन, लोगो, आदि) के लिए पीएनजी या जेपीजी का उपयोग करने के बजाय आपको वास्तव में एसवीजी (स्केलेबल वेक्टर ग्राफिक्स) का उपयोग करना चाहिए। बजाय। ऐसा इसलिए है क्योंकि एसवीजी को गुणवत्ता खोए बिना आकार दिया जा सकता है - उदाहरण के लिए, यदि आप एक जेपीजी को बड़े मूल्य तक बढ़ाते हैं, तो यह गुणवत्ता खो देता है और धुंधली/पिक्सेलयुक्त हो जाता है। एक एसवीजी नहीं करता है। लोग बड़ी PNG फ़ाइलों का उपयोग करने का प्रयास करते हैं जिन्हें कम किया जाएगा Android स्क्रीन में फ़िट होने के लिए - जब इसके बजाय, आप छोटे SVG का उपयोग कर सकते हैं जो उन्नत हैं गुणवत्ता में बिना किसी नुकसान के।
इसके अलावा, एसवीजी पीएनजी की तुलना में फ़ाइल आकार में 60% से 80% तक छोटे हो सकते हैं . इसका मतलब है कि आपका ऐप या मोबाइल वेबसाइट उपयोगकर्ता के लिए तेज़ी से लोड होगी, और स्क्रीन रिज़ॉल्यूशन से कोई फर्क नहीं पड़ता।
Theme.AppCompat.DayNight का उपयोग करके एक डार्क मोड शामिल करें
आपको अपने ऐप में डार्क / नाइट मोड थीम शामिल करने के लिए दो अलग-अलग थीम डिज़ाइन करने की आवश्यकता नहीं है। यह काफी हद तक AppCompat लाइब्रेरी में निर्मित है, आपको बस इसे सक्षम करने और मानों को संपादित करने की आवश्यकता है।
Appual की मार्गदर्शिका "अपने Android ऐप में डार्क मोड कैसे लागू करें" देखें।
टेम्प्लेट या मोबाइल UI किट का उपयोग करें
यदि आपका ऐप फैंसी, अनुकूलित जीयूआई के लिए कॉल नहीं करता है, तो टेम्पलेट या किट का उपयोग करने में कुछ भी गलत नहीं है। टेम्प्लेट और किट का उपयोग एक प्रेरणादायक दिशानिर्देश के रूप में किया जा सकता है, या आप अपने स्वयं के बटन और सामान जोड़कर, टेम्पलेट / किट का शाब्दिक रूप से उपयोग कर सकते हैं।
Android UI टेम्प्लेट और किट के लिए कुछ बेहतरीन संसाधन:
- SpeckyBoy - iOS और Android के लिए 50 निःशुल्क मोबाइल UI किट
- SketchAppSources - Android UI ऐप संसाधन (स्केच)
- फ्रीबीजबग - PSD UI किट (फ़ोटोशॉप)