एपीपी आविष्कारक 2 - स्वच्छ सामने युक्तियाँ (+4 उदाहरण): 6 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

हम यह देखने जा रहे हैं कि कैसे हम आपके ऐप को AI2 पर सुंदर बना सकते हैं:)

इस बार कोई कोड नहीं, शीर्ष पर 4 उदाहरण जैसे आसान ऐप के लिए केवल सुझाव!

आपूर्ति

चरण 1: परिचय

यह निर्देश MIT द्वारा विकसित सॉफ्टवेयर ऐप आविष्कारक 2 सीखने या उपयोग करने वाले सभी के लिए है।

MIT AI2 एक मुफ़्त, सरल और अद्भुत स्मार्टफोन ऐप डेवलपमेंट है, जो हर DIY Arduino या इलेक्ट्रॉनिक डिवाइस के लिए एकदम सही है। लेकिन उनकी सादगी भी उन्हें काफी सीमित कर देती है, खासकर जब आप अपने ऐप को आकर्षक बनाने की कोशिश कर रहे हों।

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

हम एक ऐप बनाने के लिए मूल बातें देखने जा रहे हैं जो दिखाए गए 4 उदाहरण की तरह दिखने वाली है।

आएँ शुरू करें !

पुनश्च: यदि आप इस परियोजना से प्यार करते हैं, तो आप मुझे कक्षा विज्ञान प्रतियोगिता में वोट कर सकते हैं। आपका बहुत बहुत धन्यवाद !!

PS2: कुछ अंग्रेजी गलतियाँ होंगी, मुझे क्षमा करें:)

चरण 2: पृष्ठभूमि

मैंने फिगमा पर आगे की रचना की है, जो एक उन्नत पेंट की तरह एक वेक्टरियल फ्री सॉफ्टवेयर है, जो आपको आसानी से आकार और रंग बनाने की अनुमति देता है: यह बहुत सहज है, मैं इसकी अनुशंसा करता हूं: www.figma.com!

आपको अपने सामने के लिए Figma का उपयोग करने की आवश्यकता नहीं है, लेकिन मुझे एप्लिकेशन बनाने से पहले डिज़ाइन बनाना पसंद है।

जैसा कि आप चित्र पर देख सकते हैं, पृष्ठभूमि बहुत नरम होनी चाहिए, क्योंकि हम उस पर कुछ बटन, चित्र आदि डालने जा रहे हैं…

मैं आपके द्वारा उपयोग किए जाने वाले रंग पर 30% पारदर्शिता और केवल 1 रंग वाली पृष्ठभूमि की अनुशंसा करता हूं।

चरण 3: रंग

ऐप में आपके द्वारा चुने गए रंग और उनकी तीव्रता बहुत महत्वपूर्ण हैं।

पहली सलाह जो मैं देता हूं वह है अधिकतम 3 रंग (+ काला और सफेद) चुनना: हम अभी भी नरम होने की कोशिश कर रहे हैं:)

मैंने जो ४ उदाहरण बनाए हैं, उनके लिए मैंने जो सलाहें चुनी हैं (आप उन्हें चित्र पर भी देख सकते हैं, संक्षिप्त विवरण के रूप में):

पृष्ठभूमि: एक नरम और हल्की पृष्ठभूमि जिसमें कोई आकार नहीं है (रंग की 30% पारदर्शिता)। अपने बटनों को एकीकृत करने के लिए इस रंग को याद रखें!

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

बटन: एक रंग, सामान्य तौर पर आपकी पृष्ठभूमि का रंग (80-100% पारदर्शिता) के साथ, फिर इसे खत्म करने के लिए काला या सफेद।

स्लाइडर: उनके लिए 2 रंगों का उपयोग न करें, केवल एक रंग बाईं ओर और दाईं ओर काले रंग की छाया में।

इतना ही !!

थोड़ा ही काफी है !!!! बहुत अधिक रंग, आकार और आकार का प्रयोग न करें, सूक्ष्म बनें!

चरण 4: स्क्रीन का सही पैरामीटर सेट करें

ऐप आविष्कारक डिज़ाइनर भाग की मुख्य स्क्रीन पर, आप स्क्रीन की मुख्य विशेषता का चयन कर सकते हैं।

Screen1 पर -> गुण, AI2 से अतिरिक्त फ़्रेम को हटाने के लिए निम्न क्रिया का पालन करें जो वास्तव में अच्छा नहीं दिखता ^_^।

1 - स्क्रीन की ओरिएंटेशन

केवल एक ओरिएंटेशन चुनें क्योंकि जब आप इसे चालू करते हैं तो एप्लिकेशन बहुत अच्छी तरह से अनुकूल नहीं होता है।

मैंने पोर्ट्रेट ओरिएंटेशन को चुना।

2 - 'शीर्षक दृश्यमान' अक्षम करें और 3- 'ShowStatusBar' अक्षम करें

मैं शीर्षक और स्टेटस बार को अक्षम करता हूं, क्योंकि यह ऐप पर कुछ बार जोड़ता है, जो बहुत ही सौंदर्यवादी नहीं हैं (मेरी राय में)।

4 - आयाम

आम ऐप का डाइमेंशन 505x320 (ऊंचाई x चौड़ाई) है। अपनी पृष्ठभूमि और चित्र बनाने के लिए उन आयामों को याद रखें (कम से कम समान अनुपात में हों)! यदि आप Figma का उपयोग करते हैं, तो आप तुरंत अपने ऐप का सही आकार बना सकते हैं।

5 - साइजिंग

यदि आप Fixed चुनते हैं, तो ऐप 505x320 आकार का होगा। यदि आप Responsive चुनते हैं, तो ऐप आपके स्मार्टफोन में फिट हो जाएगा, लेकिन सावधान रहें, आपको अपने चित्रों को अनुकूलित करना होगा।

चरण 5: इसे कैसे करें:)

पहले उदाहरण को पुन: पेश करने के लिए, हम 3 चरणों का पालन करने जा रहे हैं (चित्रों की तरह):

1 - आयाम लें

अंजीर में सबसे अच्छी बात यह है कि आप अपने फ्रेम और वस्तु का आकार देख सकते हैं, ताकि आप देख सकें कि आपकी वस्तुओं का आकार क्या होगा, और रिक्त! ऐप आविष्कारक पर रिक्त स्थान बहुत महत्वपूर्ण हैं क्योंकि हम अदृश्य लेबल लगाकर उन्हें बनाने जा रहे हैं!

2 - रिक्त स्थान की पूर्ति अदृश्य लेबल करेगा

जैसा कि आप दूसरी तस्वीर पर देख सकते हैं, हम उपयुक्त आकार के साथ लेबल लगाकर सामने वाले को पुन: पेश करते हैं जिसे हम चाहते हैं। फिर इसे अदृश्य दिखाएँ ('दृश्यमान' बटन को अनक्लिक करें)।

अपने आइटम रखने के लिए लेआउट -> व्यवस्था का भी उपयोग करें

3 - सॉफ्टवेयर पर अपने बटन बनाने का प्रयास करें

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

चरण 6: परिणाम:)

बाईं ओर: मेरे स्मार्टफोन से AI2 पर एक स्क्रीनशॉट।

दाईं ओर: फिगमा पर बना ड्राफ्ट।

मुझे वास्तव में उम्मीद है कि यह निर्देश आपको AI2 पर शानदार एप्लिकेशन बनाने में मदद करेगा।

देखने के लिए आपका बहुत-बहुत धन्यवाद। अगर आपको कुछ और सलाह चाहिए तो कृपया मुझे बताएं …

AI2 के बैकएंड पर एक और इंस्ट्रक्शनल जल्द ही जारी किया जाएगा!

सादर, टेक्नोफैब्रिक से थॉमस,