विंडोज फोन के लिए 24 सप्ताह का मेट्रो डिजाइन | # 2 विंडोज फोन के लिए एप्लीकेशन डिजाइन प्रक्रिया

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

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

इस योजना को नीचे से ऊपर तक पढ़ा गया है ... :-)


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

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

अनुप्रयोग थीम

हम एक आवेदन विषय के साथ अपनी प्रक्रिया शुरू करते हैं। प्रतीक्षा करें! यह पहला बिंदु है जहां सब कुछ अलग हो सकता है! "लेकिन हम अभी शुरू कर रहे हैं, आर्टुरो!" मुझे पता है, मुझे पता है, लेकिन अगले कुछ चरणों में सफलता के लिए आवेदन का विषय बेहद महत्वपूर्ण है। जिस चीज पर मैंने बार-बार ध्यान दिया, वह यह है कि जब हम अपने एप्लिकेशन को डिजाइन करने की प्रक्रिया शुरू करते हैं, तो हम 1) पहले से ही एक स्पष्ट विचार रखते हैं कि हम क्या चाहते हैं, या 2) हम मौजूदा एपीआई और सुलभ वेब पर अपने लक्ष्य को आधार बनाते हैं। सेवाएं। मेरी राय में दोनों गलत हैं।

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

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

चूंकि लक्ष्य व्यापक है, निर्णय कम विशिष्ट हैं और यह वही है जो इस समय आपकी आवश्यकता है। नवोन्मेषी विचारों का पता लगाने और आने में सक्षम होने के लिए लक्ष्य को खुला रखना आवश्यक है। एपीआई के संदर्भ में सोचने के बजाय, उपयोगकर्ता अनुभव के संदर्भ में सोचें, जैसे कि चल रहा अनुभव, दोपहर के भोजन का अनुभव, नौकायन अनुभव, और फिर अपने आप से और अपनी टीम से पूछें कि आप अपने उपयोगकर्ताओं के लिए इस अनुभव को मजबूत करने में कैसे मदद कर सकते हैं। कृपया ध्यान दें कि इसका मतलब पूरी उपयोगकर्ता प्रक्रिया के लिए समस्या को हल करना नहीं है ... इसका मतलब यह हो सकता है कि केवल X या Y अनुभव के कुछ हिस्सों में सुधार हो, जिसमें उपयोगकर्ता कठिनाइयों का पता लगाते हैं, या जहां आप उपयोगकर्ताओं को उनकी पूरी क्षमता तक पहुंचने में मदद करने का अवसर देखते हैं। बाद में एप्लिकेशन को विकसित करने की प्रक्रिया में, आप यह तय करेंगे कि क्या आप किसी स्रोत से एपीआई या आरएसएस फ़ीड का उपयोग करना चाहते हैं, लेकिन तकनीकी समाधान शुरुआती बिंदु नहीं होना चाहिए। ट्विटर (सीस्मिक) और फोरस्क्वेयर (4 वें और मेयर) के लिए सबसे लोकप्रिय क्लाइंट एप्लिकेशन ठीक से सफल हैं क्योंकि वे मुख्य रूप से अनुभव के बारे में सोचते हैं - एपीआई नहीं।

हालाँकि, यदि आप किसी ऐसे ग्राहक के लिए एक एप्लिकेशन बनाते हैं, जिसके पास एक विशिष्ट उत्पाद या सेवा है, या आप iPhone या Android से विंडोज फोन में एप्लिकेशन ट्रांसफर करते हैं, तो, निश्चित रूप से, विषय (और अन्य विवरण) पहले से ही परिभाषित होंगे। इनमें से अधिकांश मामलों में (बजट और ग्राहक की जरूरतों के आधार पर), आपको सूचना वास्तुकला चरण में सही जाना पड़ सकता है। ईमानदार होने के लिए, मैं आपको बताना चाहूंगा कि आप अभी भी एक विचार और अवधारणा विकसित करने के लिए समय ले सकते हैं, लेकिन वास्तविक दुनिया में, जैसा कि सभी जानते हैं, अगर आपके पास एक क्लाइंट है जो आपको विंडोज़ फोन के बजाय iPhone / Android एप्लिकेशन को पोर्ट करने के लिए किराए पर लेता है, बल्कि कुल मिलाकर, विषय, अवधारणा और यहां तक ​​कि सूचना वास्तुकला को पहले से ही परिभाषित किया जाएगा।

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

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

विचारों और अवधारणाओं का गठन
अब जब आपके पास एप्लिकेशन का विषय (या मिशन) है, तो इसके लिए विचार उत्पन्न करना शुरू करने का समय है। विचारों और अवधारणाओं को आकार देना एक मजेदार चरण है! - यह लगभग गेम खेलने जैसा है। बुद्धिशीलता, स्केचिंग और कहानी सुनाने का खेल। विचारों और अवधारणाओं के गठन के चरण में तीन मुख्य चरण हैं: 1) विचार-मंथन, 2) अनुसंधान और 3) समेकन। संक्षेप में, बुद्धिशीलता के चरण के दौरान, आप विचारों के टन का निर्माण करते हैं, अनुसंधान चरण के दौरान आप इनमें से कई विचारों का विच्छेद और अध्ययन करते हैं (लेकिन सभी नहीं), और पिनिंग चरण के दौरान आप तय करते हैं कि कौन से विचार आपके आवेदन का हिस्सा बनने के लिए आगे बढ़ेंगे। उनमें से कुछ ही उसे जीवित करते हैं।



बुद्धिशीलता - पूर्ण स्वतंत्रता

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

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

अनुसंधान - आलोचना / अध्ययन / सत्यापन

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

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

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

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

मुझे पता है कि यह पूरी तरह से गूंगा गतिविधि की तरह लगता है! :-) लेकिन गंभीरता से, ऐसा नहीं है ... यह बहुत गंभीर बात है। यह आश्चर्यजनक है कि एक पेपर प्रोटोटाइप बनाने के लिए $ 0 और केवल 15-60 मिनट का निवेश करके आपको कितनी प्रतिक्रिया मिल सकती है। मैं आपको डिजाइन प्रक्रिया के बाद के चरणों में पेपर प्रोटोटाइप बनाने की सलाह नहीं दूंगा, लेकिन फिलहाल यह आपका सबसे अच्छा उपकरण है।

दूसरा तरीका यह है कि एक्सप्रेशन ब्लेंड (या पावरपॉइंट या किसी अन्य "इंटरेक्टिव टूल") का उपयोग करके पेपर प्रोटोटाइप बनाया जाए। यह एक मिश्रित एनालॉग-डिजिटल तकनीक है, जिसे मुझे पहले जेरेड पॉटर / - सीनियर ने दिखाया था। डिज़ाइन स्टूडियो में डिज़ाइन इंटीग्रेटर। संक्षेप में, आप कागज पर स्क्रीन स्केच करते हैं, उनकी तस्वीरें लेते हैं, इन तस्वीरों को एक्सप्रेशन ब्लेंड में पेस्ट करते हैं, "क्लिक करने योग्य" क्षेत्रों के शीर्ष पर पारदर्शी बटन जोड़ते हैं और नेविगेशन को कनेक्ट करते हैं। हो गया! वह इसे 15 मिनट के पेपर प्रोटोटाइप कहते हैं, और हम भविष्य के लेख में इसके बारे में बात करेंगे।



बंधन - निर्णय करना

आपने विचार मंथन सत्र के दौरान विचारों के एक समूह के साथ प्रक्रिया शुरू की। आपने अपने और अपनी टीम को इनमें से कई विचारों का पता लगाने की अनुमति दी ... लेकिन यहां, समेकन के स्तर पर, केवल कुछ विचार, सर्वश्रेष्ठ वाले, जीवित रहेंगे। यह ठीक वैसा ही चरण है जब आप निर्णय लेते हैं कि आवेदन में क्या लागू किया जाए और क्या नहीं। आपकी टीम को सूची को संकीर्ण करने और विचारों की सूची को प्राथमिकता से क्रमबद्ध करने में मदद करने के लिए विभिन्न अभ्यास हैं। यहाँ लक्ष्य जितना संभव हो अनिश्चितता को दूर करना है। इस बिंदु पर, विचार केवल अवधारणाओं से अधिक में विकसित हुए हैं, और, ज्यादातर मामलों में, उपयोगकर्ता स्क्रिप्ट (या सूचना स्क्रिप्ट) बन गए हैं। प्राथमिकता परिदृश्यों की सूची वह है जो आपको अगले चरण पर जाने की आवश्यकता है।

सूचना वास्तुकला

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

सूचना वास्तुकला (IA) एक अलग अनुशासन है (यहां तक ​​कि सूचना वास्तुकला संस्थान भी है)। सूचना वास्तुकला का उद्देश्य सूचना को व्यवस्थित करना है।

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

हमारे पास दो बहुत ही उपयोगी उपकरण हैं जो हमें हमारे IA को परिभाषित करने में मदद करते हैं: एप्लिकेशन फ़्लोचार्ट (s) (एप्लीकेशन फ़्लो डायग्राम) और रफ़ फ़ॉरमेटिंग ।



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

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

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

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

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

विंडोज फोन के लिए एप्लिकेशन डिजाइन प्रक्रिया का एक आरेख बनाने के बाद, मैंने एक बात पर गौर किया: सूचना वास्तुकला कुल ऊंचाई का लगभग 35% प्रतिनिधित्व करता है, लगभग उतना ही जितना इंटरैक्टिव डिजाइन (अगला चरण)। यद्यपि मेरा आरेख आवश्यक रूप से परियोजना के भीतर चरणों के पैमाने को प्रतिबिंबित नहीं करता है, लेकिन मुझे यह कहना होगा कि यह काफी सटीक मूल्यांकन है - सूचना वास्तुकला इस बार इसके लायक है। यदि आप आईए का पता लगा लेते हैं, तो बाकी सब कुछ बहुत आसान हो जाता है।

हमारे पास कुछ हफ्तों में विंडोज फोन अनुप्रयोगों के लिए सूचना वास्तुकला पर एक विशेष लेख होगा।

इंटरेक्शन डिजाइन

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

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

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

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

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

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



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

जब अपने स्वयं के डिज़ाइन टेम्प्लेट को कस्टमाइज़ या बनाने की बात आती है, तो आपके पास 3 अच्छे उपकरण होते हैं जिनका आप उपयोग कर सकते हैं: 1) एक डिज़ाइन ग्रिड 2% के लिए डिज़ाइन ग्रिड )संरचित जानकारी प्रसारित करने के लिए विभिन्न आकारों और संतृप्तियों के फोंट; और 3) मेट्रो के लिए विभिन्न अंतर्निहित नियंत्रणों का उपयोग। हालांकि यह तीन, निश्चित रूप से, संपूर्ण शस्त्रागार नहीं है जो आपके निपटान में है, यह इसमें सबसे महत्वपूर्ण घटक है। अपने शस्त्रागार के सबसे पूर्ण विवरण के लिए, विंडोज फोन यूजर इंटरफेस गाइड देखें ।

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

आप कुछ पा सकते हैंफ़ोटोशॉप सूची डिज़ाइन टेम्पलेट (ListView_PSD.psd), पैनोरमा पैनल (Panorama_PSD.psd), और अन्य नियंत्रण यहाँ । हम उनमें से कई के बारे में अधिक बात करेंगे।





अब जब आपने डिज़ाइन पैटर्न चुना है, तो कुछ को अपने लिए अनुकूलित किया है और कुछ और बनाया है, सामान्य शब्दों में एप्लिकेशन डिज़ाइन किया गया है। यह बहुत आसान लगता है! - यह है ... ऐसा नहीं है :-) वास्तविकता यह है कि डिजाइन पैटर्न का सही विकल्प है, और फिर उन्हें स्थापित करना बहुत काम है। मुझे एक दिलचस्प बात पता चली है: विंडोज फोन डिजाइन स्टूडियो ने विंडोज फोन के लिए इंटरैक्शन अनुभव और यूजर इंटरफेस बनाने और विकसित करने में दो साल से अधिक का निवेश किया है। आपके फ़ोन पर मिलने वाले डिज़ाइन पैटर्न बहुत ही लचीले और विस्तृत हैं। विंडोज फोन डिज़ाइन डे टूर के आखिरी दौर में लगभग 200 अनुप्रयोगों का अध्ययन करने के बाद, मैंने महसूस किया कि उनमें से 90% मौजूदा डिज़ाइन पैटर्न या परिष्कृत डिज़ाइन पैटर्न का उपयोग करके बनाए जा सकते थे।

जब मैंने पहली बार एक डिजाइन स्टूडियो में अपना काम शुरू किया, तो मैं मेट्रो-डिज़ाइन से परिचित नहीं था और मुझे ऐसा लग रहा था कि यह सुंदर था, लेकिन एक ही समय में, सभी एप्लिकेशन समान दिखते हैं। अब मैं आपके एप्लिकेशन को विकसित करने के लिए मौजूदा डिज़ाइन पैटर्न का पुन: उपयोग करने के बारे में आपको लिख रहा हूं। :-) कुछ बदल गया है? हाँ!- 6 महीने पहले मुझे आभास हुआ कि विंडोज फोन में सब कुछ एक धुरी या पैनोरमा था। लेकिन इन महीनों के बाद, मैंने पाया कि विंडोज फोन एप्लिकेशन में केवल एक समेकित पृष्ठ या एकल पैनोरमा का उपयोग करने की तुलना में अधिक समृद्ध पथ है।

विंडोज फोन एप्लिकेशन पेज, पेज पेज और पैनोरमा से बने होते हैं। उनमें से कई।सभी आपस में जुड़े हुए हैं। बदले में, इन 3 प्रकार की स्क्रीन अनुप्रयोगों में अनंत संख्या में संरचनागत विकल्पों की ओर ले जाती हैं। यह वह जगह है जहां अनुप्रयोगों के बीच भेदभाव होता है (डेवलपर्स से एक लगातार सवाल)। पैनोरमा पैनलों और सारांश पृष्ठों को परिष्कृत करने की संभावनाएं अनंत हैं। मेट्रो डिजाइन भाषा का उपयोग करते हुए विंडोज फोन एप्लिकेशन बहुत समृद्ध और अद्वितीय हो सकते हैं। कुछ समय के लिए ऐसे मिथक भी थे कि "यदि पृष्ठभूमि काली नहीं है, तो यह मेट्रो नहीं है," लेकिन यह सच्चाई से बहुत दूर है। माइक Kruzeniski के इस लेख या विंडोज फोन के लिए Core77 आवेदन डिजाइन प्रतियोगिता के विजेताओं के बारे में लेख पढ़ें ।

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

प्रक्रिया पर वापस लौटते हुए, डिज़ाइन पैटर्न की आपकी पसंद, उनका शोधन और नए लोगों के निर्माण को पृष्ठ लेआउट (वायरफ्रेम) के रूप में मूर्त रूप दिया जाएगा। लेआउट काले और सफेद होंगे। रंगीन नहीं! ब्रांडेड (अभी तक) नहीं ... बिना पैनोरमिक पृष्ठभूमि के! ये लेआउट, आदर्श रूप से, एक्सप्रेशन डिज़ाइन, विज़ियो, फ़ोटोशॉप या इलस्ट्रेटर में बनाए जाएंगे (यह मुझे लगता है कि हमें विज़िओ प्रारूप में डिजाइन टेम्पलेट प्रदान करने की भी आवश्यकता है ... हम्म)।



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

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

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

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

दृश्य डिजाइन

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

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

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

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

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



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

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

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

लाल और हरी रेखाएँ

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

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

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

तो इस दूसरे व्यक्ति को XAML में उपयोगकर्ता इंटरफ़ेस को पुन: पेश करने के लिए एक रास्ता चाहिए - और लाल रेखाएं इसे प्राप्त करने में मदद करती हैं। "लाल रेखाओं" (हालांकि हमेशा सवाल होते हैं) के साथ कोई अस्पष्टता नहीं है: यदि इस बटन का आकार 30 x 150 पिक्सेल है, तो स्क्रीन की बाईं सीमा से 24 पिक्सेल और ऊपर से 427 पिक्सेल स्थित हैं, तो ठीक यही करना है। बिंदु। कोई चर्चा नहीं। अतीत में, "लाल रेखाओं" के बिना, डिजाइनर वेबसाइट बना सकते थे और लेआउट को जेपीजी में स्थानांतरित कर सकते थे (कभी भी लेआउट के लिए जेपीजी का उपयोग न करें, केवल PNG! - संपीड़न कलाकृतियों के बिना) HTML और CSS बनाने के लिए किसी और को। यह प्रक्रिया हमेशा डिजाइन को बाधित करेगी और परिणाम मूल दृष्टि से अलग होंगे। "रेड लाइन्स" एक "अनुबंध" है, एक लिखित दस्तावेज जिसमें दोनों पक्ष एक समझौते पर शाब्दिक रूप से आ सकते हैं! हम "लाल रेखाओं" और भविष्य के लेख में उन्हें बनाने के तरीके के बारे में भी बात करेंगे।

हरी रेखाएँ क्या हैं? डिजाइन स्टूडियो विंडोज फोन ने महसूस किया कि स्पर्श क्षेत्रों की परिभाषा मौलिक है। कुछ बटन व्यास में 10 पिक्सेल कहेंगे, लेकिन उनका स्पर्श क्षेत्र 20 पिक्सेल होगा (उंगली से दबाने के लिए इसे और अधिक सुविधाजनक बनाने के लिए)। "हरी रेखाएँ" इन संवेदी क्षेत्रों को दर्शाती हैं, इससे कोई फर्क नहीं पड़ता कि वे वस्तुओं के आकार के साथ मेल खाते हैं या, जैसा कि कई मामलों में, वे वस्तुओं के बढ़े हुए आकार हैं जो एक क्लिक को ट्रिगर करेंगे। लाल रेखाओं से अलग हरी रेखाएँ खींची जाती हैं।

निष्कर्ष में

नतीजतन, आपको "लाल रेखाएं", "हरी रेखाएं", दृश्य डिजाइन की एक पूरी तरह से उच्च गुणवत्ता वाली पॉलिश रचना और सूचना वास्तुकला का वर्णन करने वाला एक दस्तावेज मिलेगा। जब एप्लिकेशन डिज़ाइन किया जाता है, तो यह एकीकरण टीम के लिए आगे बढ़ता है, जो चयनित प्लेटफ़ॉर्म पर उपयोगकर्ता इंटरफ़ेस का निर्माण करेगा। विंडोज फोन के मामले में, यह एक्सएएमएल होगा। विंडोज 8 के मामले में, यह HTML / CSS भी हो सकता है। लेकिन आपके द्वारा उपयोग किए जाने वाले प्लेटफ़ॉर्म की परवाह किए बिना, आपका डिज़ाइन इस क्षण तक पूरा और डिज़ाइन किया गया है, आपकी स्क्रीन इतनी साफ है, आपके पैनोरमा और पिवोट्स को इतनी अच्छी तरह से सोचा जाता है कि वे कोड में लागू होने के लिए तैयार हैं।

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

वह सब है। फिर से, एक लंबा लेख सामने आया। यह प्रक्रिया का एक सामान्य अवलोकन था, लेकिन अगले लेख से शुरू करते हुए हम विस्तार से प्रक्रिया के अध्ययन में जाएंगे।

अगला लेख | # 3 विचारों और अवधारणाओं का गठन

पिछला लेख | # 1 मेट्रो डिज़ाइन सिद्धांत और मेट्रो डिज़ाइन भाषा

Arturo Toledo द्वारा पोस्ट किया गया
अनुवाद: पेट्रीशको , किचिक
दृष्टांतों का स्थानीयकरण: किचिक

PS रूसी में मेट्रो के बारे में अन्य सामग्री मेट्रो-डिज़ाइन हब में MSDN पर एकत्र की जाती है