WP7 के लिए आवेदन डिजाइन। मेट्रो का तरीका

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



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




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



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

(ईमानदारी से, मेरे लिए सभी सिद्धांतों का शाब्दिक अनुवाद करना मुश्किल था, लेकिन मैं मूल सार को संरक्षित करने की कोशिश करूंगा।)

मेट्रो डिजाइन के सिद्धांत

हल्के, सरल, खुले और तेज

इस सिद्धांत को कुल स्वीप (भयंकर कमी) कहा जा सकता है, हम यूआई से उन सभी तत्वों को हटाने का प्रयास करते हैं जो अनावश्यक लगते हैं; इसके अलावा, दोनों दृश्य तत्व और कार्यक्षमता की अधिकता। यह UI के प्राथमिक कार्यों पर ध्यान केंद्रित करने के लिए प्रोत्साहित करता है और UI को स्मार्ट, खुला, तेज और उत्तरदायी दिखने देता है।

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



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

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

गुणवत्ता टाइपोग्राफी

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



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



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

गति में जिंदा

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

आंदोलन सामग्री में गहराई और विसर्जन की भावना देता है, ऊपरी स्तर तक विस्तार या वापस करने के लिए संक्रमण। द्रवीकरण अंतरिक्ष में आकार और अभिविन्यास की भावना पर निर्भर करता है। जीवित प्रणाली उपयोगकर्ता की कार्रवाइयों पर प्रतिक्रिया देती है, बताती है कि आप कहां क्लिक कर सकते हैं और आप किसके साथ बातचीत कर सकते हैं। एक सहज ज्ञान युक्त स्तर गाइड पर और यह पता लगाने में मदद करता है कि क्या है।



जिम्मेदार यूआई तत्व सिस्टम के साथ बातचीत के जीवन को भरते हैं। यूट्यूब पर विंडोज फोन चैनल पर कई वीडियो समीक्षा भी देखें।

सामग्री पहले

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



सामग्री को केवल अपने दम पर होना नहीं है, यह UI का हिस्सा है - और इससे भी अधिक: सामग्री UI है।



और पारंपरिक प्रतीक प्रणालियों के विपरीत:



मेट्रो-डिज़ाइन वाले सिस्टम इन्फोग्राफिक्स पर अधिक केंद्रित होते हैं, जिसमें स्टार्ट स्क्रीन पर भी तत्व जीवन और सूचनाओं से भरे होते हैं, और आंतरिक सामग्री में, प्राथमिकता डिज़ाइन और बटन के बजाय सामग्री को दी जाती है;)



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



इसका मतलब यह नहीं है कि फोटोग्राफिक (मीडिया) सामग्री मेट्रो डिजाइन में प्रासंगिकता खो रही है। उदाहरण के लिए, यह केवल महत्व रखता है, क्योंकि सामग्री में UI तत्वों पर पूर्ण प्राथमिकता है। एक तस्वीर सामग्री है, एक बटन के लिए समर्थन नहीं।

डिजिटल ईमानदारी

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

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



एक यूआई वह नहीं होना चाहिए जो वह नहीं है। अपने उपयोगकर्ताओं के साथ ईमानदार रहें।

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



आपके लिए मेट्रो का काम।

वर्तमान और भविष्य

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

अवतार या आयरन मैन 2 जैसे विज्ञान कथाओं में हम सभी ने देखा है कि कई वर्षों की बात है, लेकिन मेट्रो आज एक अच्छी शुरुआत की तरह लगता है।

वास्तविक परियोजनाओं में मेट्रो का दृष्टिकोण

मेट्रो-डिज़ाइन के विचारों को पहले से ही विभिन्न परियोजनाओं में पूरी तरह से लागू किया जा रहा है (यह विंडोज फोन 7 के लिए हजारों अनुप्रयोगों को भी ध्यान में नहीं रखता है)।



पहले से ही आज आप मेट्रोटविट - मेट्रो शैली में बने ट्विटर के लिए एक क्लाइंट, या मेट्रोटविट शो - कोशिश कर सकते हैं - एक सम्मेलन के दौरान (उदाहरण के लिए, एक सम्मेलन के दौरान या स्क्रीन सेवर के रूप में)।



विजुअल स्टूडियो लाइटस्विच का उपयोग करके किए गए अनुप्रयोगों के लिए एक विशेष मेट्रो थीम है ।



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



एक और दिलचस्प उदाहरण विंडोज लाइव हॉटमेल साइट है । वैसे, यह HTML5 का उपयोग करता है।

अंत में, आपने शायद हमारी अपडेटेड MSDN वेबसाइट या P & P समिट वेबसाइट देखी है। ठीक है, मेट्रो वेबसाइट संरचना में डेस्कटॉप या मोबाइल प्लेटफ़ॉर्म से कम नहीं है।

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

• हल्के, सरल, खुले और तेज
• गुणवत्ता टाइपोग्राफी
• गति में जिंदा
• सामग्री पहले
• डिजिटल ईमानदारी

विंडोज 8

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

उपयोगी लिंक

• मेगन डोनह्यू द्वारा विंडोज फोन के लिए एप्लीकेशन डिजाइन
• .toolbox डिज़ाइन ट्रेनिंग
• विंडोज फोन डिजाइन दिवस रिकॉर्डिंग
• WP7 UI गाइड और डिज़ाइन टेम्पलेट
• विंडोज फोन के लिए उपयोगकर्ता अनुभव डिजाइन दिशानिर्देश
• विंडोज फोन के लिए बुक डिजाइनिंग
• अद्यतन मुक्त विकास और डिजाइन उपकरण
  - विंडोज फोन एसडीके 7.1 आरसी , सहित
  विंडोज फोन 7.1 के लिए माइक्रोसॉफ्ट एक्सप्रेशन ब्लेंड एसडीके

विंडोज फोन पर पिछले बिजस्पार्क शिविर में मेरी बात भी देखें।


और 5 सितंबर को विंडोज फोन 7 कैंप से स्ट्रीमिंग करना न भूलें।