मेट्रो यूजर इंटरफेस: वेब डिज़ाइन का विवरण और उदाहरण

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

मेट्रो क्या है, इसके लिए क्या उपयोग किया जाता है, आदि।

---

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



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

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



मेट्रो शैली के लिए, मालिकाना सिद्धांत विकसित किए गए थे जो कि Microsoft अपने ऑपरेटिंग सिस्टम और एप्लिकेशन बनाने के लिए उपयोग करता था। कंपनी तृतीय-पक्ष अनुप्रयोगों को विकसित करने की सिफारिश करती है जो समान सिद्धांतों का उपयोग करते हैं।

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

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

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

विंडोज फोन 7 के लिए, माइक्रोसॉफ्ट ने एक विशेष सेगो फ़ॉन्ट परिवार विकसित किया है ।



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

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

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

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

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

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

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

मेट्रो इंटरफ़ेस की विचारधारा के इस संक्षिप्त विवरण में, हमने माइक्रोसॉफ्ट की सलाह का इस्तेमाल किया, सभी माध्यमिक तत्वों को छोड़ दिया, और मुख्य बात पर ध्यान केंद्रित किया।

पेटेंटेड मेट्रो यूआई कॉन्सेप्ट

18 अगस्त, 2011 को, यूएसपीटीओ एजेंसी ने माइक्रोसॉफ्ट से एक पेटेंट आवेदन को मंजूरी दी, जो बहुत सार लगता है: "उपयोगकर्ता इंटरफ़ेस फीडबैक के लिए दृश्य आंदोलन"। दस्तावेज़ का एक अंश, जो इंटरफ़ेस का एक सार वर्णन है, सीधे MetroUI की सुविधाओं को इंगित करता है।

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

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

मेट्रो यूआई स्टाइल वेब डिज़ाइन में उदाहरण

---

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

विंडोज यूजर इंटरफेस अवधारणा

मेट्रो का डैशबोर्ड

विंडोज 8 डे मोड

विंडोज 8 नाइट मोड

Zepppelin

मेट्रो ड्रिबल

मेट्रो वेब

मेट्रो स्टाइल फॉर्म

मेट्रो यूआई के साथ प्रयोग

पोर्टफोलियो

Metrofy

मेट्रो - व्यक्तिगत पोर्टफोलियो एचटीएमएल 5 / CSS3 vCard

MetroStyle

प्रेसबोर्ड - उत्तरदायी सामाजिक पत्रिका थीम

मैट्रिक्स - उत्तरदायी वर्डप्रेस थीम

विंडोज फोन यूके

WinRumors

कगार

\

स्रोत।

निष्कर्ष

---

मेरी राय में, Microsoft ने एक बहुत ही दिलचस्प डिज़ाइन बनाया है। हम कई प्लसस के बारे में बहस कर सकते हैं, और कई कम minuses नहीं, लेकिन कम से कम एक दिलचस्प अवधारणा है। और सबसे महत्वपूर्ण बात, ऑपरेटिंग सिस्टम का अपना चेहरा है, जो इसे बाजार में अलग करता है।