प्रोग्रामर और डेवलपर्स आमतौर पर डिजाइनर नहीं होते - यह व्यापक रूप से सच माना जाता है। डेवलपर्स एक ऐप को काम करने पर ध्यान केंद्रित करते हैं - डिजाइनर ऐप को सौंदर्य की दृष्टि से आकर्षक बनाने पर ध्यान केंद्रित करते हैं। लेकिन डेवलपर्स वही क्यों नहीं कर सकते?
पुराने दिनों में, जब एनिमेटेड स्प्लैश लैंडिंग पेज और फैंसी लेआउट एक चीज थे, तो निश्चित रूप से एक पेशेवर डिजाइनर को नियुक्त करना समझ में आता था। लेकिन आज का ट्रेंड न्यूनतम है - या कम से कम बहुत सरलीकृत।
मैं आपको एक वास्तविक उदाहरण देता हूं - कुछ समय पहले, किसी ने मुझसे उनके PC सॉफ्टवेयर के लिए एक स्प्लैश स्क्रीन बनाने के लिए कहा। तो मैंने पूरी ताकत लगा दी - स्केच पेपर पर खींचा, इसे PhotoShop में इम्पोर्ट किया, बहुत सारी फैंसी नियॉन लाइन्स और इफेक्ट्स बनाए। यह एक स्प्लैश स्क्रीन के बजाय डेस्कटॉप वॉलपेपर हो सकता था। बात यह है कि मैंने उनके लिए वास्तव में फैंसी और विस्तृत डिजाइन बनाया।
जैसा कि आप शायद अनुमान लगा सकते हैं, उन्हें यह पसंद नहीं आया। वे जिस डिजाइन के साथ गए वह सचमुच कुछ ओवरलैपिंग रंगीन सर्कल का एक छोटा लोगो था, और उसके नीचे सॉफ्टवेयर का नाम। जैसे, PhotoShop में 2 मिनट का काम। और आप जानते हैं क्या? मुझे मानना पड़ा कि यह मेरे से बेहतर था।
मैं जो बात कह रहा हूं वह यह है - मुझे लगता है कि प्रोग्रामर वही गलती करने के जाल में पड़ जाते हैं जो मैंने की थी। हम यूआई और स्प्लैश स्क्रीन को वास्तव में फैंसी, आंखों को पकड़ने वाली चीजें मानते हैं जो ऐप को खास बनाती हैं। लेकिन उन्हें ऐसा नहीं होना चाहिए - ईमानदारी से, उन्हें ऐसा नहीं होना चाहिए। हमें एक प्रोग्रामर की मानसिकता लेनी चाहिए और इसे सौंदर्य डिजाइन पर लागू करना चाहिए - सरल, कार्यात्मक, काम करता है।
इस लेख में, हम कुछ बहुत सरल तरीकों को देखेंगे एक सुंदर Android ऐप UI/UX बनाने के लिए, भले ही आपके पास लगभग कोई डिजाइनिंग अनुभव न हो।
जब तक आप वास्तव में कुछ और नहीं चाहते, Material Design पर टिके रहें
आपके ऐप को लोकप्रिय और अच्छा दिखने के लिए "अद्वितीय" और "बाकी से अलग" होने की आवश्यकता नहीं है। यही Google के Material Design ने हासिल करने के लिए निर्धारित किया था - उद्योग भर में ऐप UI के लिए एक मानक, और उन्होंने अच्छा काम किया है। वहां बहुत सारे लोकप्रिय ऐप हैं जो Material Design पर टिके हुए हैं - Android ऐप्स में कुछ सबसे बड़े नाम, जैसे SwiftKey, Nova Launcher, Textra SMS, YouTube, बस कुछ नाम बताने के लिए।
Material Design का मुख्य फोकस कार्ड-आधारित लेआउट पर है, एक ठोस रंग पैलेट के साथ। Google ने शीर्ष उद्योग डिजाइनरों के साथ काम किया, न्यूनतम डिजाइन प्रथाओं से बहुत सारे तत्व लिए, और फिर पूरी चीज को मुफ्त में जारी किया - यह एक बहुत अच्छी डील है, क्योंकि वेबसाइट और ऐप डिजाइन कोर्स ई-बुक्स, वीडियो आदि के लिए सैकड़ों डॉलर चला सकते हैं।
Material Design के साथ शुरुआत करना अविश्वसनीय रूप से आसान है, और कुछ टूल हैं जो इसे और भी सरल बनाते हैं, जिन्हें हम नीचे सूचीबद्ध करेंगे:
- Material Theme Editor (macOS + Sketch)
- Material Design Color Palette प्लग-इन (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit (Sketch)
- Material UI Theme Generator
और यदि आपको सरल, सुंदर Material Design थीम बनाने के लिए कुछ प्रेरणा की आवश्यकता है, तो इन लिस्ट ब्लॉग को देखें:
- MaterialDesignBlog - Material Design को सही ढंग से करने के 15 बहुत बढ़िया उदाहरण
- MockPlus - प्रेरणा लेने के लिए 12 सर्वश्रेष्ठ Material Design वेबसाइट उदाहरण
- AndroidAuthority - Android के लिए 10 सर्वश्रेष्ठ Material Design ऐप्स
कलर ग्रेडिएंट्स आपके विचार से कहीं ज्यादा आसान हैं
Material Design के विकल्प के लिए, कलर ग्रेडिएंट्स सरल, ट्रेंडी और आकर्षक हैं। और आप सोच सकते हैं कि डिजाइनर सभी रंगों को पेंट करने में या अल्टीमेट ग्रेडिएंट डिजाइन करने में बहुत समय बिताते हैं। आप गलत होंगे - यह PhotoShop में 10 सेकंड में किया जा सकता है।
मैं आपको इसके माध्यम से भी चलाऊंगा, आपको दिखाने के लिए कि यह कितना आसान है।
मोबाइल के लिए एक नया PS प्रोजेक्ट बनाएं (1080 x 1920 px @ 72 ppi ठीक काम करता है)
UIGradients.com पर जाएं और कुछ ऐसा ढूंढें जो आपको पसंद हो।
ऊपर प्रीव्यू से ग्रेडिएंट रंग कॉपी करें।
PS में एक खाली लेयर पर राइट-क्लिक करें, और Blending Options > Gradient Overlay पर जाएं।
ड्रॉप-डाउन मेनू में ग्रेडिएंट पैटर्न प्रीव्यू पर सीधे क्लिक करें - ड्रॉपडाउन बटन पर क्लिक न करें। ग्रेडिएंट पर सीधे क्लिक करने से कलर एडिटर खुलता है।
अब UIGradient से कलर हेक्स वैल्यू को PS ग्रेडिएंट एडिटर में पेस्ट करें।
आवश्यकतानुसार समायोजित करें। अब आपके Android ऐप के लिए एक प्रोफेशनल ग्रेडिएंट बैकग्राउंड है।
जांच के लायक अन्य ग्रेडिएंट टूल:
- WebGradients.com
- Android Shapes Generator (XML के माध्यम से शेप्स उत्पन्न करने के लिए, ग्रेडिएंट के विकल्प के साथ)
JPG / PNG के बजाय SVGs का उपयोग करें
अपने ग्राफिकल एलिमेंट्स (बटन, लोगो, आदि) के लिए PNG या JPG का उपयोग करने के बजाय, आपको वास्तव में SVGs (स्केलेबल वेक्टर ग्राफिक्स) का उपयोग करना चाहिए। ऐसा इसलिए है क्योंकि SVGs को बिना गुणवत्ता खोए रिसाइज़ किया जा सकता है - उदाहरण के लिए, यदि आप JPG को बड़े मूल्य पर अपस्केल करते हैं, तो यह गुणवत्ता खो देता है और धुंधला/पिक्सेलेटेड हो जाता है। एक SVG नहीं करता। लोग विशाल PNG फाइलों का उपयोग करने की कोशिश करते हैं जिन्हें Android स्क्रीन में फिट करने के लिए डाउनस्केल किया जाएगा - जब इसके बजाय, आप छोटे SVGs का उपयोग कर सकते हैं जो गुणवत्ता में किसी भी नुकसान के बिना अपस्केल होते हैं।
इसके अलावा, SVGs PNG की तुलना में 60% से 80% तक छोटे फ़ाइल आकार के हो सकते हैं। इसका मतलब है कि आपका ऐप या मोबाइल वेबसाइट उपयोगकर्ता के लिए तेजी से लोड होगी, और स्क्रीन रिज़ॉल्यूशन कोई फर्क नहीं पड़ता, अच्छा दिखेगा।
Theme.AppCompat.DayNight का उपयोग करके डार्क मोड शामिल करें
आपको अपने ऐप में डार्क/नाइट मोड थीम शामिल करने के लिए दो अलग-अलग थीम डिजाइन करने की आवश्यकता नहीं है। यह बहुत अधिक AppCompat लाइब्रेरी में बिल्ट-इन है, आपको बस इसे सक्षम करने और मूल्यों को संपादित करने की आवश्यकता है।
Appual's गाइड "How to Implement a Dark Mode in your Android App" देखें।
टेम्पलेट या मोबाइल UI किट का उपयोग करें
यदि आपके ऐप में फैंसी, कस्टमाइज़्ड GUI की आवश्यकता नहीं है, तो टेम्पलेट या किट का उपयोग करने में कुछ भी गलत नहीं है। टेम्पलेट्स और किट्स को प्रेरणादायक दिशानिर्देश के रूप में उपयोग किया जा सकता है, या आप सचमुच टेम्पलेट/किट का उपयोग वैसे ही कर सकते हैं, अपने बटन और सामान जोड़कर।
Android UI टेम्पलेट्स और किट्स के लिए कुछ बेहतरीन संसाधन:
- SpeckyBoy - iOS और Android के लिए 50 मुफ्त मोबाइल UI किट्स
- SketchAppSources - Android UI ऐप संसाधन (Sketch)
- Freebiesbug - PSD UI किट्स (PhotoShop)
