वेब डिजाइनर वीडियो गेम से क्या सीख सकते हैं

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

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



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

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

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

बड़ी तस्वीर याद है

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

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

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



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



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


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

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

भागीदारी घुसपैठ नहीं होनी चाहिए

गेम डिज़ाइन के जादूगर जेसी स्केल कहते हैं: “खेल सफलता का अवसर प्रदान करते हैं, किसी की जिज्ञासा को पूरा करने का मौका; यह समस्याओं को हल करने और एक विकल्प बनाने का प्रयास करने का अवसर है। ” यहां तक ​​कि सबसे सांसारिक साइटों को सवाल पूछकर बहुत अधिक मज़ेदार बनाया जा सकता है: "खेल के कौन से तत्व लोगों को सबसे सुखद लगते हैं?"

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

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

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

चित्र डाउनलोड के साथ AJAX संदेश

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

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

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

कस्टम कर्सर

फैब 3 में, एक खिलाड़ी के चयनित स्थान को एक आवर्धक ग्लास आइकन के साथ चिह्नित किया गया है जो कस्टम कर्सर के रूप में कार्य करता है।

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

शायद सबसे ज्यादा पहचाने जाने योग्य कर्सर Google मैप्स पर "हथियाने वाला हाथ" है। लेकिन वेब एप्लिकेशन में उपयोगकर्ता कर्सर नए और सामान्य नहीं हैं। उनका उपयोग करने की क्षमता अधिकांश ब्राउज़रों में बनाई गई है।

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

प्रतीक, चिह्न, चिह्न

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

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

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



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

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

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

पूर्ण पृष्ठ हिंडोला

बुकमार्क की गई स्क्रीन जो धीरे-धीरे फीकी पड़ती हैं, जैसे ड्रैगन एज, ऑरिजिंस से इसका उपयोग लंबे समय से किया जा रहा है:

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

जैक्स वाइनयार्ड टैब के बिना एक समान लेआउट प्रकार का उपयोग करता है:

प्रत्येक हिंडोला स्क्रीन में टैब जोड़ें और आपकी साइट अगले स्तर पर जाएगी।
Magento इस विचार पर एक अलग नज़र प्रदान करता है:

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

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

स्लाइडिंग मेनू

हाल ही में जारी किए गए Fable 3 गेम का मेन्यू सिस्टम Fable 2 (ऊपर चित्र में) में उपयोग किए गए से बिल्कुल अलग है। लेकिन फैबल 2 में इतना अच्छा स्लाइडिंग मेनू है कि मुझे इसे सूची में शामिल करने की आवश्यकता थी।

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

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

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

पिवट स्क्रीन

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

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

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

प्रसंग मेनू

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

एक वेब डिजाइनर यहां से क्या प्राप्त कर सकता है:

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

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

रेडियल संदर्भ मेनू के एक अच्छे उदाहरण के रूप में, ट्यूनग्लू के म्यूजिकमैप पर एक नज़र डालें:

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

रेडियल मेनू केवल संदर्भ मेनू तक सीमित नहीं हैं। कार्रवाई के समय ड्रॉप-डाउन पैनल मेनू बस के रूप में प्रभावी हो सकते हैं, और उनके विकास के लिए कम समय और परीक्षण की आवश्यकता हो सकती है।

आपकी बारी है

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

क्या आप एक गैर-लाभकारी संगठन के लिए एक वेबसाइट बना रहे हैं जो धन उगाहने वाले अभियान की योजना बना रही है? दान का ट्रैक रखने के लिए एक ब्लैकबोर्ड का उपयोग करने पर विचार करें। आप अपने पाठकों के शीर्ष 10 को जानने के लिए भी उनका उपयोग कर सकते हैं, इस प्रकार उन्हें टिप्पणी करने के लिए प्रोत्साहन दे सकते हैं।

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