टाइपोग्राफिक यूआई - उपयोगकर्ता इंटरफेस विकसित करने का एक नया तरीका है

टाइपोग्राफिक यूआई एक नई डिजाइन अवधारणा है, जिसका दर्शन तीन शब्दों में व्यक्त किया गया है: इंटरफ़ेस पाठ है।

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

प्राकृतिक यूआई

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

महान मालेविच ने इस शैली को बर्बरता की कला कहा: "उन पर शर्म करो ..." और दृढ़ता से उसे त्यागने के लिए प्रोत्साहित किया: "मांस और हड्डी की दुनिया को जाना चाहिए।"

कैंडिंस्की

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

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



अप्राकृतिक रंग, जो प्रकृति में नहीं पाए जाते हैं, प्राकृतिक रंगों की तुलना में धारणा को प्रभावित करते हैं। कैंडिंस्की ने समझा: यदि आप प्राकृतिक फूलों को छोड़ सकते हैं, तो आगे क्यों न जाएं और प्राकृतिक रूपों को न छोड़ें। अमूर्त में यथार्थवादी परिवर्तन।

सार यूआई

क्लासिक यूआई को मेट्रो-डिज़ाइन माना जा सकता है। आईओएस की प्राकृतिक आइकन पेंटिंग के विपरीत, कुछ अलग रंग की टाइलें हैं।

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



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

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

बेशर्म डिजाइन

प्रकृतिवाद की तुलना में डिजाइन में अमूर्ततावाद, ज़ाहिर है, अतिसूक्ष्मवाद की ओर एक आंदोलन है। लेकिन इस आंदोलन को जारी रखने से कोई किस हद तक जा सकता है? न्यूनतम UI की सीमाएँ क्या हैं? क्या फॉर्म को पूरी तरह से छोड़ना संभव है और अंत में क्या रहेगा?

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



खैर? हमारा UI देखें? नहीं! लेकिन वह है! पिक्सेल इतना छोटा है कि यह पृष्ठभूमि में विलय हो जाता है और किसी व्यक्ति के लिए स्वीकार्य स्तर का संचार प्रदान नहीं कर सकता है। पिक्सेल इंटरफ़ेस रोबोट के लिए उपयुक्त हो सकता है, लेकिन मनुष्यों के लिए नहीं।

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

इस पंक्ति को खोजने का प्रयास करने के लिए, हम सुझाव देते हैं कि आकार में अधिकतम संभव UI से न्यूनतम तक बढ़ते हुए, रास्ते में आने वाली सभी चीजों को काट दिया जाए।

यूआई का अधिकतम क्षेत्र कार्य क्षेत्र तक सीमित है। अधिकतम UI छवि के रूप में विचार करें, जो स्क्रीन के 100% हिस्से पर कब्जा करती है। आइए हम ऐसी ही छवि के रूप में मोनेट की उत्कृष्ट कृति लेते हैं। और जब आप हिस्टैक पर क्लिक करते हैं तो कुछ फंक्शन को निष्पादित किया जाता है।

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

हमारे मामले में, संचार के लिए उपयोगी जानकारी संचारित करने की क्षमता के मामले में अधिकतम UI न्यूनतम एक-पिक्सेल के बराबर है। यह सब एन्ट्रापी के बारे में है।

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

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

लेकिन उस उदाहरण पर वापस जाएं जहां UI छवि के रूप में 100% स्क्रीन पर बना हुआ है। हमारे लिए सही जगह पर स्पष्टीकरण लिखना पर्याप्त है - और स्थिति मौलिक रूप से बदल रही है।



यह तुरंत स्पष्ट हो गया कि कहाँ काटना है। इस शिलालेख के साथ हमने एंट्रोपी को तेजी से कम किया। पाठ से अधिक विशिष्ट कुछ भी नहीं है।

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

इंटरफ़ेस पर मोनेट की तस्वीर बेकार है। यद्यपि यह कला का एक महान काम है, लेकिन यह सभी जगहों पर इसे दूर करने का कारण नहीं है। जो कोई भी मोनेट को देखना चाहता है वह प्रदर्शनी में जाएगा, या प्रतिकृतियों के साथ एक पुस्तक खरीदेगा, या एक वृत्तचित्र देख सकता है।

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

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


विकल्प 1

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


विकल्प 2

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

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


विकल्प 3

इस विकल्प के साथ तुलना करें। 1. बिना जानकारी खोए हमें कितनी अनावश्यक जानकारी मिली, इंटरफ़ेस कितना आसान लगता है।

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

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

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

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

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

IPTVPORTAL प्रोजेक्ट पर काम करते हुए टाइपोग्राफिक UI का जन्म ARES में हुआ था। TYPOGRAPHY - इसलिए हमने इंटरैक्टिव टेलीविज़न देखने के लिए अपने यूजर इंटरफेस को कॉल किया। इसे पहली बार CSTB-2018 में प्रदर्शित किया गया था।

पुनश्च

उन लोगों के लिए जिन्होंने 1 पिक्सेल से UI नहीं पाया। टिप।

उदाहरण