वेब इंटरफेस में मेट्रो

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

आईओएस शैली या मेट्रो शैली?

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

Microsoft, अपनी मेट्रो अवधारणा के साथ, एक कठिन समय था। निगम, जो अस्सी के दशक में आईटी का लोकोमोटिव था, ने 2000 के दशक तक Apple और Google को उद्योग में मुख्य प्रर्वतक का खिताब दिया। और हालाँकि, Microsoft ने, मेरी राय में, बदला लेने का हर मौका दिया है, अब इसके समाधान और विचारों को बढ़ावा देने के लिए बहुत अधिक प्रयास करना होगा। और मेट्रो कोई अपवाद नहीं है: एप्पल की तुलना में, Microsoft इंजीलवादी कंपनी के दर्शन को जन-जन तक पहुंचाने के लिए अधिक सक्रियता का एक आदेश है।

वैसे, जब से मैंने Google का उल्लेख किया है। यह कंपनी इंटरफ़ेस सरलीकरण को अधिकतम करने के मामले में Microsoft के समान पथ का अनुसरण करती है। मैं इस बारे में इंटरनेट जानकारी नहीं पा सका कि क्या Google के विचारों ने Microsoft को प्रभावित किया या इसके विपरीत, या क्या कंपनियां स्वतंत्र रूप से इस पर आईं, लेकिन दोनों कंपनियों के उत्पाद / सेवा इंटरफेस के चित्रमय कार्यान्वयन की समानता स्पष्ट है।

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

निष्पक्षता में, यह ध्यान दिया जाना चाहिए कि Microsoft के प्रतिनिधि खुद अतिसूक्ष्मवाद को मेट्रो की हठधर्मिता नहीं मानते हैं, बल्कि इस अवधारणा के सिद्धांतों से उत्पन्न परिणाम हैं।

मैं उपयोगकर्ता अनुभव आर्टुरो टोलेडो के विशेषज्ञ को उद्धृत करूंगा (उनके लेख का अनुवाद हैबे पर प्रकाशित किया गया था ):

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

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

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

निरोधक प्रक्रिया

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

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

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

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

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

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

सारांश

तो क्या मेट्रो-स्टाइल वेब एप्लिकेशन इंटरफ़ेस बनाने के लिए इसके लायक है? मैं इसे इसके लायक मानता हूँ अगर:

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

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

UPD: क्योंकि टिप्पणियों में वे छवियों की कमी के साथ असंतोष व्यक्त करते हैं, मैं साइट के संबंधित अनुभाग से कई स्क्रीनशॉट पोस्ट करता हूं:

---

---

---