डिज़ाइनिंग एप्लिकेशन स्क्रीन: योजना से लेकर डिज़ाइन लेआउट तक

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

लेख प्रारंभिक डिजाइन के लिए समर्पित है - इस पर काम शुरू करने से पहले निर्मित कार्यक्रम के कार्यों और क्षमताओं का विश्लेषण करने की आवश्यकता है, ताकि आवेदन बनाते समय सभी आवश्यक बिंदुओं को ध्यान में रखा जा सके। यह ध्यान देने योग्य है कि यह सामग्री शुरुआती (पूरी तरह से नवागंतुकों) के लिए विशेष रूप से उपयोगी होगी, क्योंकि लेखक स्वयं हाल ही में ऐसा कर रहा है।

स्किलबॉक्स की सिफारिश: यूएक्स डिजाइन में दो महीने का हैंड्सन कोर्स।
हम आपको याद दिलाते हैं: हैबर के सभी पाठकों के लिए - जब हेरा प्रचारक कोड के अनुसार किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

सामान्य तौर पर, एप्लिकेशन के डिजाइन पर काम निम्न चरणों में विभाजित होता है:

• प्रत्येक स्क्रीन के लिए कार्यों के प्रवाह (उपयोगकर्ता-प्रवाह) के आरेख का निर्माण;
• वायरफ्रेम बना;
• रंग पैलेट और शैली की पसंद;
• लेआउट का निर्माण;
• उपयोगकर्ताओं को परीक्षण कर सकते हैं कि आवेदन के एक इंटरैक्टिव प्रोटोटाइप बनाने;
• अंतिम डिजाइन पर ग्लोस मार्गदर्शन।

टास्क प्रवाह आरेख

विकास में पहला कदम उन सुविधाओं की एक सूची को परिभाषित करना है जिन्हें आप अपने आवेदन में जोड़ना चाहते हैं। एक बार जब आपके पास स्पष्ट रूप से व्यक्त विचार होता है, तो आपको एक कार्य प्रवाह आरेख बनाने पर काम करना शुरू करना चाहिए। यह आपको नेत्रहीन यह देखने की अनुमति देता है कि ऐप कैसे काम करेगा।

काम के दौरान, आमतौर पर 3 तत्वों का उपयोग किया जाता है:

• आयतें जो स्क्रीन का प्रतिनिधित्व करती हैं।
• उपयोगकर्ता के निर्णय लेने (बटन पर क्लिक करने, स्वाइप करने आदि) को प्रदर्शित करने के लिए Rhombuses।
• तीर जो तत्वों को एक साथ जोड़ते हैं।

असल में, हम एक पारंपरिक फ्लोचार्ट के बारे में बात कर रहे हैं जो उपयोगकर्ता द्वारा निर्णय का प्रदर्शन करता है जब यह एप्लिकेशन के विभिन्न स्क्रीन में प्रवेश करता है।

Vayrfreymy

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

हर बार फोन केस की सीमाओं को न खींचने के लिए, मैं यूआई स्टेंसिल सेवा का उपयोग करता हूं।

यहां वायरफ्रेम का एक उदाहरण दिया गया है।



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

डिजाइन और रंग पैलेट

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

लेआउट

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

विभिन्न विकास उपकरण, लेआउट बनाने के लिए उपकरण हैं। मैं एफिनिटी का इस्तेमाल कर रहा हूं। IOS ऐप बनाते समय, मैं अक्सर स्केच के साथ काम करता हूं।

यहाँ मेरे अपने आवेदन के कुछ शुरुआती लेआउट का एक उदाहरण है।



यहाँ रंग पैलेट के साथ काम है।



इस प्रक्रिया में, सहकर्मियों और परिचितों को आपके लेआउट दिखाना संभव है - इसलिए आप संभावित उपयोगकर्ताओं तक सीधे पहुंच के बिना प्रतिक्रिया प्राप्त कर सकते हैं। मेरे मामले में, जिन लोगों को मैंने दिखाया, उनमें से अधिकांश ने काले और सोने के संस्करण को पसंद किया।

वैसे, अपने काम पर चर्चा करने की प्रक्रिया में, नए विचारों को पूरा करने के लिए तैयार रहें - वे आपको कुछ दिलचस्प पेश कर सकते हैं! - और ऑफर। एप्लिकेशन के संभावित उपयोगकर्ताओं के साथ संवाद करते समय आप बहुत दिलचस्प विचार प्राप्त कर सकते हैं।

मेरे मामले में, मुझे कुछ विचार मिले जो मैंने तब एक नए लेआउट में उपयोग किए थे।



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

परिणाम को एडोब एक्सडी में समेकित किया गया था।

स्किलबॉक्स अनुशंसा करता है:

• व्यावहारिक पाठ्यक्रम "खरोंच से मोबाइल डेवलपर । "
• ऑनलाइन पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• स्क्रैच से प्रैक्टिकल कोर्स पायथन डेवलपर ।