मोबाइल एप्लिकेशन इंटरफ़ेस विकसित करने की प्रक्रिया के 8 चरण

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

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

संकल्पना निर्माण

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

इस स्तर पर, बटन और रूपों, फोंट और इंटरफ़ेस संरचना के कई अन्य पहलुओं जैसे आकार और स्थान प्रभावित हो सकते हैं। आइए फिनटेक एप्लिकेशन और टैक्सी कंपनी सेवा की तुलना करें।


Fintech आवेदन। कई आइकन, वे बहुत बड़े नहीं हैं, लेकिन उनके साथ काम करना सुविधाजनक है। विविध विशेषताओं की एक बहुतायत


टैक्सी सेवाओं में से एक का अनुप्रयोग। कई बटन नहीं हैं, और वे इतने बड़े हैं कि याद करना मुश्किल है

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

बुद्धिशीलता और रेखाचित्र

जैसे ही परियोजना की अवधारणा स्पष्ट होती है, हम अगले चरण में आते हैं - मंथन। एक इंटरफ़ेस के विचार को वास्तविकता बनाने के लिए इसकी आवश्यकता है। Django स्टार्स में, हम एक कलम और कागज का एक टुकड़ा लेते हैं - यह Balsamiq Mockups, Sketch, Photoshop, और InVision जैसे उन्नत उपकरणों का उपयोग करने से अधिक तेज़ है।

रूपांतरण चार्ट

एक स्केच बनाने से हमें एक इंटरफ़ेस संरचना मिलती है। लेकिन उपयोगकर्ता को उसके साथ कैसे बातचीत करनी चाहिए? उपयोगकर्ता प्रवाह आरेख यहां मदद करेगा। वह उत्पाद के तर्क को चित्रित करेगा, इंटरफ़ेस के साथ बातचीत करने के सभी प्रकार के तरीके दिखाएगा, इन इंटरैक्शन का एक रोडमैप और प्रत्येक चरण में इंटरफ़ेस की स्थिति।

संरचना और संक्रमण आरेखों का अनुमोदन

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

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

इंटरफ़ेस शैली चयन

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

शैली की पुष्टि

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

संबंधित पाठ्यक्रम: फुलस्टैक मोबाइल डेवलपर ।

पाठ्यक्रम Skillbox और Agima द्वारा बनाया गया था। सभी उपकरणों के बारे में 4 महीने का कार्यक्रम जिसके बिना मोबाइल उत्पादों का विकास असंभव है।

प्रोटोटाइपिंग, डिज़ाइन और उनका प्रदर्शन

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

वायरफ़्रेम



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

ख़ाका



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

क्लिक करने योग्य प्रोटोटाइप



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

So. यह रिबास का समय है, आप बहुत अधिक जगह पर हैं जहां आप छूट पा सकते हैं। ध्यान रखें कि यहां अंग्रेजी रूसी के साथ हस्तक्षेप कर सकती है, और सबसे महत्वपूर्ण बात - यह मत भूलो कि हम टिप्पणियों का सावधानीपूर्वक पालन करेंगे और उनके बारे में सुझाव और उत्तर निकालेंगे! रिब्यूस में एन्क्रिप्ट किए गए प्रस्ताव को तब बुलाया जाना चाहिए जब कोर्स के लिए आवेदन भेजने के बाद हमारे प्रबंधक आपसे संपर्क करें। सुलझी हुई विद्रोहियों के लिए छूट को आपस में जोड़ दिया जाता है (इस लेख को ध्यान में रखते हुए चार विद्रोह होते हैं), लेकिन साइट पर छूट के साथ नहीं। आपको बहुत देरी नहीं करनी चाहिए - 30 अगस्त, 2018 तक प्रोमो काम करता है।



एनिमेटेड प्रवाह



और यह एप्लिकेशन के साथ उपयोगकर्ता सहभागिता का एक वीडियो है। इस प्रकार का एक प्रदर्शन मॉडल बनाने के लिए अधिकतम समय की आवश्यकता होती है, क्योंकि यह न केवल एक प्रोटोटाइप बनाने के लिए आवश्यक है, बल्कि वीडियो पर इसके साथ काम रिकॉर्ड करने के लिए भी आवश्यक है। फिर भी, यह एक बहुत ही स्पष्ट मॉडल है।

डिजाइन अनुमोदन

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

निष्कर्ष के रूप में

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

स्किलबॉक्स की सलाह देते हैं

• UX डिजाइन
• डिजाइनरों के लिए स्केचिंग
• मोबाइल ऐप डिजाइन