नोट
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप साइन इन करने या निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
इस Power Platform अच्छी तरह से निर्मित अनुभव अनुकूलन चेकलिस्ट अनुशंसा पर लागू होता है:
| एक्सओ:06 | सभी स्क्रीन आकारों और रिज़ॉल्यूशनों में प्रयोग करने योग्य और दृश्यमान रूप से आकर्षक लेआउट बनाए रखें। विभिन्न तरीकों से सामग्री को गतिशील रूप से प्रस्तुत करने के लिए अनुकूली तकनीकों का उपयोग करें। |
|---|
यह मार्गदर्शिका स्क्रीन लेआउट डिजाइन करने के लिए अनुशंसाओं का वर्णन करती है, जो नेविगेट करने में आसान हो और विभिन्न डिवाइसों पर आसानी से अनुकूलित हो सके। यह दृष्टिकोण यह सुनिश्चित करता है कि उपयोगकर्ताओं को एक सुसंगत और इष्टतम देखने का अनुभव मिले, चाहे वे किसी भी डिवाइस का उपयोग कर रहे हों।
परिभाषाएँ
| अनुबंध | परिभाषा |
|---|---|
| व्यूपोर्ट | डिजिटल इंटरफ़ेस का दृश्य भाग, जैसे वेब ब्राउज़र या मोबाइल ऐप, जहाँ सामग्री प्रदर्शित की जाती है। व्यूपोर्ट रेंज अक्सर स्क्रीन आयामों और रिज़ॉल्यूशन के आधार पर डिवाइस वर्गों (मोबाइल, टैबलेट और डेस्कटॉप) से जुड़ी होती हैं। |
| ब्रेकपॉइंट | विशिष्ट पिक्सेल मान जो व्यूपोर्ट श्रेणियों को परिभाषित करते हैं, जिनका उपयोग अनुकूली लेआउट व्यवहार निर्धारित करने के लिए किया जाता है। |
प्रमुख डिजाइन रणनीतियाँ
उत्तरदायी लेआउट विभिन्न विंडो आकारों में लचीला और कुशल उपयोगकर्ता अनुभव प्रदान करते हैं। वे विषय-वस्तु को मापकर, तत्वों को पुनः व्यवस्थित करके, तथा पाठ और छवियों को चुनिंदा रूप से प्रदर्शित करके अनुकूलन करते हैं। उत्तरदायी लेआउट उपयोगकर्ताओं की आवश्यकताओं को पूरा करते हैं, चाहे उनका स्क्रीन आकार कुछ भी हो।
एक सुसंगत ऐप फ़्रेम निर्धारित करें
अनुप्रयोग फ़्रेम में नियंत्रणों का एक सेट होता है जो प्रत्येक स्क्रीन पर लगातार उपलब्ध रहता है। इसमें तीन मुख्य उपघटक शामिल हैं: हेडर, नेविगेशन और सामग्री क्षेत्र। सरल ऐप्स में हेडर घटक का उपयोग करने की सुविधा होती है, जबकि अधिक परिष्कृत ऐप्स अक्सर एकाधिक पृष्ठों को सक्षम करने के लिए साइड नेविगेशन का उपयोग करते हैं। उपघटक अनुकूलन योग्य हैं। उदाहरण के लिए, आप अपने ऐप की आवश्यकताओं के अनुरूप हेडर में वैश्विक खोज शामिल कर सकते हैं या साइड नेविगेशन में आइटम समूहित कर सकते हैं।
ऐप फ़्रेम के तीन मुख्य उपघटक हैं:
हेडर एक मुख्य घटक है जिसे प्रत्येक आंतरिक अनुप्रयोग का हिस्सा बनने के लिए डिज़ाइन किया गया है। इसमें उप-घटक शामिल होते हैं जो उपयोगकर्ताओं को सिस्टम-व्यापी कार्यों तक पहुंच प्रदान करते हैं, उन्हें यूआई के प्रति उन्मुख करने में मदद करते हैं, तथा अनुभवों में एकरूपता प्रदान करते हैं। यह ऐप फ़्रेम के शीर्ष पर दिखाई देता है और ऐप के सभी पृष्ठों पर बना रहना चाहिए। यह वैकल्पिक रूप से वैश्विक कमांड होस्ट कर सकता है, जैसे खोज, सेटिंग्स, सूचनाएं, फीडबैक, प्रोफ़ाइल या सहायता। ऐप का नाम हमेशा प्रदर्शित होना चाहिए, और आदर्श रूप से होम या लैंडिंग पेज के लिए एक क्लिक करने योग्य लिंक के रूप में भी काम करना चाहिए। हेडर प्रतिक्रियाशील होना चाहिए, तथा 600 पिक्सल और उससे कम के व्यूपोर्ट्स में कमांड ओवरफ्लो नियंत्रण में चले जाने चाहिए। खोज इनपुट की चौड़ाई भी 1023 पिक्सेल और उससे कम पर प्रतिक्रियाशील है।
नेविगेशन नियंत्रणों की एक प्रणाली है जो उपयोगकर्ताओं को जानकारी खोजने और कार्य पूरा करने में मदद करने के लिए एक साथ काम करती है। यह उपयोगकर्ताओं को किसी एप्लिकेशन के एक सेक्शन से दूसरे सेक्शन में जाने में सहायता करता है। पदानुक्रमिक रूप से, यह किसी पृष्ठ या अनुभाग से जुड़ा नहीं होता, बल्कि अन्य सभी सामग्री से ऊपर मौजूद होता है। यह हमेशा मौजूद रहता है, और पृष्ठ सामग्री के लिए अतिरिक्त स्थान खाली करने के लिए इसे संकुचित अवस्था (जिसे रेल अवस्था भी कहा जाता है) तक छोटा किया जा सकता है। छोटे विंडो आकार में, इसे फ़्लाईआउट मेनू में छोटा किया जा सकता है। नेविगेशन के सबसे सामान्य रूपों में शीर्ष नेविगेशन और साइड नेविगेशन शामिल हैं। दोनों का एक साथ प्रयोग न करें।
सामग्री क्षेत्र में स्क्रीन का फोकस होता है। ब्राउज़र विंडो का आकार सामग्री फ़्रेम और मुख्य सामग्री क्षेत्र में उपलब्ध स्थान को प्रभावित करता है। यह फ्रेम ब्रेकपॉइंट और प्रत्येक घटक के संगत प्रतिक्रियाशील व्यवहार के आधार पर अनुकूलित होता है। अधिक जानकारी के लिए ब्रेकपॉइंट मैट्रिक्स बनाएँ देखें.
सामग्री क्षेत्र में वैकल्पिक रूप से कई उप-क्षेत्र शामिल हो सकते हैं जो सुसंगत तत्व प्लेसमेंट के लिए उपलब्ध हैं, जैसे कि पृष्ठ हेडर, इनलाइन साइड पैन, या पैनल जो सामग्री को ओवरले करते हैं।
रंग योजनाओं, टाइपोग्राफी और लेआउट संरचना के साथ एक सुसंगत डिजाइन भाषा का पालन करने से उपयोगकर्ताओं को बिना किसी भ्रम के विभिन्न तत्वों को शीघ्रता से पहचानने और उनके साथ बातचीत करने में मदद मिलती है। सभी आंतरिक व्यावसायिक अनुप्रयोगों में ऐप फ्रेम पैटर्न का जितना अधिक सुसंगत रूप से उपयोग किया जाता है, उपयोगकर्ता की स्मरण शक्ति या मानसिक मॉडल उतना ही मजबूत बनता है। उद्योग मानकों या सामान्य प्लेटफ़ॉर्म पैटर्न के साथ संरेखित करने से यह प्रभाव और भी बढ़ जाता है।
ऐप फ़्रेम निर्धारित होने के बाद, प्रत्येक स्क्रीन का लेआउट ऐप फ़्रेम के सामग्री क्षेत्र में रहता है।
सामग्री क्षेत्र का सोच-समझकर उपयोग करें
उपयोगकर्ता निर्बाध अनुभव चाहते हैं, जहां सूचना आसानी से उपलब्ध हो, पाठ को पढ़ना आसान हो, तथा उपयोगिता में बाधा डालने के बजाय सौंदर्यबोध बढ़े। प्रमुख जानकारी की प्रारंभिक दृश्यता को प्राथमिकता दें, सभी स्तंभों में पठनीयता सुनिश्चित करें, तथा सौंदर्यात्मक अपील के लिए डिजाइन तत्वों में सामंजस्य स्थापित करें।
सुनिश्चित करें कि स्क्रीन खोलते ही आवश्यक जानकारी बिना स्क्रॉल किए तुरंत दिखाई दे। नेविगेशन विकल्प, महत्वपूर्ण सामग्री और कार्रवाई योग्य वस्तुओं जैसी आवश्यक जानकारी को स्क्रीन के शीर्ष के पास प्रदर्शित करने को प्राथमिकता दें। पर्याप्त वस्तुओं को प्रदर्शित करने तथा प्रत्येक वस्तु के बारे में विस्तृत जानकारी प्रदान करने के बीच संतुलन बनाना एक निरंतर चुनौती है। इसके विपरीत, हालांकि प्रारंभिक दृश्य में सभी संभव जानकारी प्रदान करना आकर्षक हो सकता है, लेकिन बहुत अधिक जानकारी से उपयोगकर्ताओं पर बोझ बढ़ने और प्रमुख तत्वों का महत्व कम होने का खतरा रहता है। संक्षिप्त सारांश या पूर्वावलोकन का उपयोग करने पर विचार करें जो अधिक विस्तृत सामग्री की झलक प्रदान करते हैं, तथा उपयोगकर्ताओं को अधिक गहराई से जानने के लिए प्रेरित करते हैं। डैशबोर्ड को बड़ी मात्रा में डेटा को प्रदर्शित करने के उद्देश्य से अनुकूलित किया गया है।
सामग्री को तार्किक रूप से व्यवस्थित करने और स्थान को अधिकतम करने के लिए एकाधिक कॉलम, अनुभाग या समूह शामिल करें। कॉलम की चौड़ाई पर विशेष ध्यान दें, ताकि यह सुनिश्चित हो सके कि पाठ अत्यधिक दबाव के बिना पठनीय बना रहे। अत्यधिक संकीर्ण कॉलमों से बचें जो उपयोगकर्ताओं को लगातार क्षैतिज रूप से स्क्रॉल करने के लिए मजबूर करते हैं, जिससे बातचीत का प्रवाह बाधित होता है। इसके विपरीत, अत्यधिक चौड़े कॉलम पठनीयता में बाधा डाल सकते हैं, जिससे उपयोगकर्ताओं को लंबी दूरी तक लाइनों को ट्रैक करना पड़ता है। एक ऐसे संतुलन का प्रयास करें जो उपलब्ध स्थान का कुशल उपयोग करते हुए आराम से पढ़ने की सुविधा प्रदान करे।
दृश्यात्मक रूप से आकर्षक और संतुलित इंटरफ़ेस बनाने के लिए दृश्य तत्वों का आकार और स्थिति उचित रखें। कैप्शन को संगत दृश्यों या शीर्षकों के साथ संरेखित करें, तत्वों के बीच सुसंगत अंतर बनाए रखें, और उपयोगकर्ता की आवश्यकताओं के आधार पर पदानुक्रम का पालन करें। अनावश्यक अलंकरणों को काटें और सबसे महत्वपूर्ण तत्वों को विवेकपूर्ण ढंग से पिक्सेल आवंटित करें। सामग्री और नेविगेशन तत्वों को प्राथमिकता दें और उन पर जोर दें, विशेष रूप से नेविगेशन-गहन ऐप्स या होम पेजों पर, और अनावश्यक अलंकरण से बचें जो प्रयोज्यता को बाधित करते हैं।
तत्वों को सुसंगत रूप से व्यवस्थित करने के लिए एक अंतर्निहित ग्रिड उपयोगी हो सकता है। चुना गया ग्रिड व्यवहार ऐप में प्रत्येक स्क्रीन के सामग्री क्षेत्र में सुसंगत होना चाहिए और इसे घटक स्तर पर भी लागू किया जा सकता है, जैसे कार्ड या साइड पैन. वेब अनुप्रयोगों में प्रयुक्त ग्रिड लेआउट का सबसे सामान्य प्रकार कॉलम ग्रिड है। प्रत्युत्तरशील स्क्रीन को क्रियान्वित करने के लिए द्रव (या खिंचाव) ग्रिड व्यवहार की अनुशंसा की जाती है।
स्थापित लेआउट और समूहीकरण पैटर्न का उपयोग करें
उपयोगकर्ता इंटरफ़ेस के भीतर सामग्री और तत्वों को व्यवस्थित करने के लिए सामान्य रूप से मान्यता प्राप्त संरचनाओं और व्यवस्थाओं का उपयोग करें। इन लेआउट और पैटर्न को समय के साथ परिष्कृत किया गया है और प्रभावी सिद्ध किया गया है, जिससे वे उपयोगकर्ताओं के लिए परिचित और सहज हो गए हैं, साथ ही अनुकूली पैटर्न को लागू करना भी आसान हो गया है। एक बार जब मुख्य परिदृश्यों और तत्वों की पहचान हो जाती है, तो प्रत्येक को एक स्थापित लेआउट में मैप करें जो सर्वोत्तम इंटरैक्शन प्रदान करता है। कार्य पूरा करने के लिए महत्वपूर्ण सामग्री और सुविधाओं को प्राथमिकता दें। निर्णय लें कि कौन से तत्व स्क्रीन पर हमेशा दृश्यमान और सुलभ होने चाहिए तथा कौन से छिपाए जा सकते हैं या अन्य मेनू या क्रियाओं के माध्यम से उन तक पहुंचा जा सकता है।
निम्नलिखित सूची, यद्यपि संपूर्ण नहीं है, लेकिन व्यवसाय या उत्पादकता अनुप्रयोगों के लिए सामान्यतः प्रयुक्त स्थापित लेआउट का वर्णन करती है। सभी को मुख्य सामग्री क्षेत्र में रखा जा सकता है।
लैंडिंग/होम स्क्रीन
लैंडिंग या होम स्क्रीन किसी एप्लिकेशन में प्रवेश बिंदु के रूप में कार्य करती है, जो उपयोगकर्ताओं को ऐप की पेशकशों या सुविधाओं का अवलोकन प्रदान करती है। इसका उद्देश्य आम तौर पर आगंतुकों का ध्यान आकर्षित करना और विशिष्ट कार्रवाई करने के लिए प्रोत्साहित करना होता है, जैसे कि पहली बार कोई कार्य पूरा करना या आगे की सामग्री की खोज करना। इसमें अक्सर हीरो छवियां और साफ़ नेविगेशन विकल्प होते हैं।
यह उपयोगकर्ताओं का स्वागत करने, प्रमुख कार्यात्मकताओं, नेविगेशन विकल्पों या कॉल टू एक्शन तक त्वरित पहुंच प्रदान करने और ऐप के अनुभव के लिए टोन सेट करने के लिए आदर्श है। उपयोगकर्ताओं को प्रभावी ढंग से मार्गदर्शन करने के लिए स्पष्टता, सरलता और सहज नेविगेशन को प्राथमिकता दें।
डैशबोर्ड
डैशबोर्ड किसी एप्लिकेशन के भीतर एक केंद्रीकृत केंद्र होता है जो उपयोगकर्ताओं को प्रासंगिक डेटा या जानकारी का व्यापक अवलोकन प्रदान करता है। इसमें प्रायः अनुकूलन योग्य विजेट या मॉड्यूल शामिल होते हैं, जो उपयोगकर्ताओं को विशिष्ट मीट्रिक्स की निगरानी करने या क्रियाएं करने की अनुमति देते हैं।
डैशबोर्ड जटिल डेटासेट या बहुमुखी कार्यात्मकता वाले अनुप्रयोगों के लिए उपयुक्त होते हैं, जो उपयोगकर्ताओं को प्रगति पर नज़र रखने, प्रवृत्तियों का विश्लेषण करने और एक नज़र में सूचित निर्णय लेने में सक्षम बनाते हैं। वे विशेष रूप से एनालिटिक्स प्लेटफॉर्म, परियोजना प्रबंधन टूल और वित्तीय प्रबंधन ऐप्स में उपयोगी हैं।
प्रपत्र
फॉर्म एक संरचित लेआउट है जो उपयोगकर्ताओं से डेटा इनपुट की सुविधा प्रदान करता है, जिसमें आम तौर पर विभिन्न प्रकार की जानकारी जैसे पाठ, संख्याएं, तिथियां और चयन दर्ज करने के लिए फ़ील्ड शामिल होते हैं। उपयोगकर्ता इनपुट एकत्रित करने, लेनदेन को संसाधित करने और अनुप्रयोगों के भीतर बातचीत को सुविधाजनक बनाने के लिए फॉर्म आवश्यक हैं।
इन्हें आमतौर पर पंजीकरण प्रवाह, चेकआउट प्रक्रियाओं, डेटा प्रविष्टि कार्यों और उपयोगकर्ता इनपुट या फीडबैक की आवश्यकता वाले किसी भी परिदृश्य में नियोजित किया जाता है।
इकाई/प्रोफ़ाइल दृश्य
इकाई या प्रोफ़ाइल दृश्य किसी विशिष्ट इकाई, जैसे उपयोगकर्ता प्रोफ़ाइल, उत्पाद सूची या सामग्री आइटम के बारे में विस्तृत जानकारी प्रस्तुत करता है। इसमें आमतौर पर वर्णनात्मक पाठ, मल्टीमीडिया तत्व और प्रासंगिक क्रियाएं या अंतःक्रियाएं शामिल होती हैं।
वे किसी एप्लिकेशन के भीतर आइटमों के बारे में विस्तृत जानकारी प्रदर्शित करने के लिए उपयुक्त हैं। वे उपयोगकर्ताओं को गहन अंतर्दृष्टि प्रदान करते हैं, निर्णय लेने में सुविधा प्रदान करते हैं, तथा विशिष्ट संस्थाओं जैसे कि सोशल नेटवर्किंग ऐप्स में उपयोगकर्ता प्रोफाइल या ई-कॉमर्स प्लेटफार्मों में उत्पाद लिस्टिंग के साथ जुड़ाव का समर्थन करते हैं।
सूची पृष्ठ
एक सूची या तालिका एक संरचित प्रारूप में वस्तुओं या संस्थाओं का संग्रह प्रदर्शित करती है, जिसे अक्सर एक रैखिक या ग्रिड लेआउट में प्रस्तुत किया जाता है। इसमें आमतौर पर प्रत्येक आइटम का संक्षिप्त सारांश या पूर्वावलोकन शामिल होता है, साथ ही ब्राउज़िंग या फ़िल्टरिंग के लिए नेविगेशन नियंत्रण भी शामिल होता है।
सूची पृष्ठ बड़ी मात्रा में सामग्री या डेटा को सुपाच्य प्रारूप में प्रस्तुत करने के लिए प्रभावी होते हैं, जिससे उपयोगकर्ता कुशलतापूर्वक स्कैन, खोज और नेविगेट कर सकते हैं। यदि विशिष्ट पंक्तियों पर क्रियाएँ सक्षम हैं, तो प्रक्रिया स्पष्ट होनी चाहिए। सूची पृष्ठों का उपयोग सामान्यतः सामग्री प्रबंधन प्रणालियों, निर्देशिका सूचीकरण, खोज परिणामों और समाचार फ़ीड में किया जाता है।
लघु समीक्षा (विभाजित स्क्रीन)
मिनी-रिव्यू या स्प्लिट स्क्रीन इंटरफ़ेस को दो अलग-अलग खंडों में विभाजित करता है, जिसमें बाईं ओर एक सूची प्रदर्शित होती है और दाईं ओर एक आइटम दृश्य होता है। सूची में आमतौर पर आइटमों का संग्रह होता है, जबकि आइटम दृश्य सूची में चयनित आइटम के बारे में विस्तृत जानकारी प्रदान करता है।
यह लेआउट विशेष रूप से उन परिदृश्यों में प्रभावी है जहां उपयोगकर्ताओं को वस्तुओं की सूची को शीघ्रता से ब्राउज़ करने और प्रत्येक वस्तु के बारे में विस्तृत जानकारी एक साथ देखने की आवश्यकता होती है, जैसे कि बल्क ऑपरेशन करते समय। उत्पाद कैटलॉग, दस्तावेज़ प्रबंधन प्रणालियाँ, ईमेल या संचार क्लाइंट, और कार्य प्रबंधन उपकरण (उदाहरण के लिए, Azure Dev Ops क्वेरी व्यूअर) ऐसे परिदृश्य हैं जो आमतौर पर इस पैटर्न में फिट होते हैं।
विज़ार्ड
एक विज़ार्ड उपयोगकर्ताओं को एक जटिल प्रक्रिया को पूरा करने या एक विशिष्ट लक्ष्य को प्राप्त करने के लिए अनुक्रमिक चरणों या कार्यों की एक श्रृंखला के माध्यम से, आमतौर पर एक रैखिक तरीके से, मार्गदर्शन करता है। इसमें अक्सर प्रगति संकेतक, संकेत और सत्यापन जांच शामिल होती हैं। विज़ार्ड्स जटिल प्रक्रियाओं को सरल बनाने, संज्ञानात्मक अधिभार को कम करने और अपरिचित कार्यों या वर्कफ़्लो के माध्यम से उपयोगकर्ताओं को मार्गदर्शन करने के लिए फायदेमंद होते हैं। इनका उपयोग आमतौर पर ऑनबोर्डिंग प्रवाह, सेटअप प्रक्रियाओं, बहु-चरणीय प्रपत्रों और कार्य-आधारित इंटरैक्शन जैसे जटिल सेटिंग्स या लेनदेन को कॉन्फ़िगर करने में किया जाता है।
विशिष्ट आवश्यकताओं के अनुरूप मानक लेआउट को अनुकूलित और निर्मित करें। इस प्रक्रिया में तत्वों को जोड़ना या हटाना, तत्वों के आकार और स्थिति को समायोजित करना, तथा ब्रांड पहचान या दृश्य डिजाइन दिशानिर्देशों से मेल खाने के लिए स्टाइलिंग लागू करना शामिल हो सकता है। सामग्री और समग्र उपयोगकर्ता अनुभव के लिए सबसे प्रभावी व्यवस्था खोजने के लिए मानक लेआउट के विभिन्न विन्यासों और विविधताओं के साथ प्रयोग करें।
सभी डिवाइस के लिए लेआउट डिज़ाइन करें
लेआउट परिभाषित नियमों और सामग्री के जानबूझकर संगठन का परिणाम है। अपनी विषय-वस्तु को विचारशील संरचनाओं में लाना महत्वपूर्ण है, लेकिन इसे विभिन्न प्लेटफार्मों और स्क्रीन आकारों में स्पष्ट पदानुक्रम के साथ एक साथ प्रवाहित करने के लिए स्केलिंग तर्क की आवश्यकता होती है। व्यक्तिगत रूप से, अनुकूली और अनुक्रियाशील डिजाइन इस चुनौती का समाधान कर सकते हैं। कुछ मामलों में, अनुकूली और उत्तरदायी डिज़ाइन का मिश्रण सही विकल्प है।
उत्तरदायी डिज़ाइन केवल एक लेआउट का उपयोग करता है, जहां सामग्री तरल होती है और बदलते प्रारूप आकार के अनुकूल हो सकती है। यह डिज़ाइन तकनीक किसी दिए गए डिवाइस की विशेषताओं का निरीक्षण करने के लिए मीडिया क्वेरीज़ का उपयोग करती है और तदनुसार सामग्री प्रस्तुत करती है। उत्तरदायी डिज़ाइन आपको एक बार कोई सुविधा बनाने और उसे सभी स्क्रीन आकारों पर प्रभावी ढंग से कार्य करने में सक्षम बनाता है।
एक अनुकूली लेआउट पूरी तरह से उस प्रारूप के आधार पर बदलता है जिसमें इसे प्रस्तुत किया गया है। अनुकूली डिज़ाइन में कई निश्चित लेआउट आकार होते हैं और यह ब्राउज़र को उपलब्ध स्थान के आधार पर दिए गए लेआउट को लोड करने के लिए प्रेरित करता है। अनुकूली डिजाइन के साथ निर्मित वेबसाइटें, रिस्पॉन्सिव डिजाइन के समान, ब्रेकपॉइंट का पता लगाने के लिए मीडिया क्वेरी का उपयोग करती हैं। वे डिवाइस की क्षमताओं के आधार पर अतिरिक्त मार्कअप का भी उपयोग करते हैं। इस प्रक्रिया को "प्रगतिशील वृद्धि" के नाम से जाना जाता है।
स्थान बदलने
पृष्ठ तत्वों की स्थिति बदलें.
विंडो का आकार बढ़ने के साथ संरचना को अनुकूलित करके अपनी सामग्री को व्यवस्थित, पठनीय और संतुलित रखें। उदाहरण के लिए, मोबाइल व्यूपोर्ट पर लंबवत रूप से रखे गए तत्वों को बड़े व्यूपोर्ट पर क्षैतिज रूप से पुनः स्थापित किया जा सकता है। यह परिवर्तन स्वाभाविक बाएं से दाएं पढ़ने के क्रम का अनुसरण करता है, डिजाइन में संतुलन बनाता है, तथा पृष्ठ पर प्रमुख तत्वों पर दृश्य फोकस बनाए रखता है।
आकार बदलें
पृष्ठ तत्वों के आकार और मार्जिन को समायोजित करें.
विंडो के शीर्ष पर अधिक सामग्री प्रदर्शित करके समृद्ध उपयोगकर्ता अनुभव के लिए पृष्ठ तत्वों का आकार बदलें, जिससे ऊर्ध्वाधर स्क्रॉलिंग की आवश्यकता कम हो जाएगी। लेआउट में रिक्त स्थान और संतुलन जोड़ने के लिए पृष्ठ मार्जिन को समायोजित करें, जिससे सामग्री को सांस लेने की अनुमति मिलती है और डिजाइन की दृश्य अपील बढ़ जाती है। उदाहरण के लिए, एक हीरो घटक पृष्ठभूमि छवि को अधिक दिखाने के लिए विंडो की पूरी चौड़ाई तक फैल सकता है। छवि के नीचे की सामग्री का विस्तार किया जा सकता है, लेकिन लेआउट में विविधता लाने और दृश्य पदानुक्रम को परिभाषित करने में मदद करने के लिए अलग-अलग मार्जिन का उपयोग करें।
रीफ़्लो करें
पृष्ठ तत्वों के प्रवाह को अनुकूलित करें.
पृष्ठ तत्वों को समायोजित करें ताकि यह सुनिश्चित हो सके कि वे पूरी तरह से प्रदर्शित हों, सामग्री को पुनः व्यवस्थित करके विंडो आकार और अभिविन्यास को ध्यान में रखें। उदाहरण के लिए, एक छोटी विंडो में सामग्री के एक कॉलम को एक बड़ी विंडो में पुनः प्रवाहित करके पाठ के दो कॉलम प्रदर्शित किए जा सकते हैं। यह तकनीक "फोल्ड के ऊपर" अधिक सामग्री प्रदर्शित करने की अनुमति देती है।
छिपा हुया दिखाओ
विंडो आकार और उसके अभिविन्यास के लिए सामग्री को अनुकूलित करें.
विंडो आकार और उसके अभिविन्यास के लिए सामग्री को अनुकूलित करने हेतु पृष्ठ तत्वों को दिखाएँ या छिपाएँ। यह अनुक्रियात्मक तकनीक देखने के संदर्भ के अनुसार सूचना की मात्रा को समायोजित करती है। उदाहरण के लिए, छोटी स्क्रीन पर दिखाई देने वाली श्रेणियां सीमित मेटाडेटा, जैसे छवि, शीर्षक और लिंक प्रदर्शित कर सकती हैं, ताकि उपयोगकर्ता को ध्यान केंद्रित करने में मदद करने के लिए अन्य जानकारी दिखाई दे। बड़ी स्क्रीन पर, श्रेणियां अतिरिक्त मेटाडेटा जैसे व्यक्तित्व, दिनांक और संक्षिप्त विवरण प्रदर्शित कर सकती हैं, जबकि वे व्यूपोर्ट में भी फिट हो जाती हैं।
पुनःवास्तुकार
महत्वपूर्ण जानकारी और कार्यों पर ध्यान केंद्रित रखने के लिए पृष्ठ तत्वों और सामग्री को विभाजित या संक्षिप्त करें।
यह दृष्टिकोण आपके डिजाइन में "प्रगतिशील प्रकटीकरण" के अभ्यास का पालन करने के समान है, लेकिन विभिन्न विंडो आकारों और अभिविन्यासों के लिए। उदाहरण के लिए, विंडो को विस्तृत करने से विवरण के बगल में आइटमों की सूची प्रदर्शित की जा सकती है। सामग्री के बीच यह दृश्य लिंक उपयोगकर्ताओं को आसानी से किसी अन्य आइटम का चयन करने की अनुमति देता है। छोटी स्क्रीन पर मुख्य जानकारी प्रदर्शित करने पर ध्यान केंद्रित रहता है।
ब्रेकपॉइंट मैट्रिक्स बनाएं
ब्रेकपॉइंट मैट्रिक्स विभिन्न स्क्रीन आकारों और अभिविन्यासों में किसी अनुप्रयोग के डिज़ाइन के अनुक्रियात्मक या अनुकूली व्यवहार के ग्राफिकल चित्रण के रूप में कार्य करता है। यह आमतौर पर एक संरचित ग्रिड या लेआउट प्रस्तुत करता है जो विभिन्न ब्रेकपॉइंट पर डिज़ाइन की प्रतिक्रिया का विवरण देता है। प्रत्येक खंड एक विशिष्ट स्क्रीन चौड़ाई से मेल खाता है, जो डिजाइन की संरचना, लेआउट और कार्यक्षमता के बारे में जानकारी प्रदान करता है। ब्रेकपॉइंट मैट्रिक्स में स्क्रीन की चौड़ाई, व्यूपोर्ट ओरिएंटेशन, डिज़ाइन तत्व, लेआउट संरचना, सामग्री प्रस्तुति, नेविगेशन, मीडिया और इंटरैक्टिव घटकों के बारे में विचार शामिल होते हैं, ताकि यह दर्शाया जा सके कि किसी वेबसाइट या ऐप का डिज़ाइन विभिन्न स्क्रीन आकारों और ओरिएंटेशन पर कैसे प्रतिक्रिया करता है। यह दृष्टिकोण न केवल प्रत्येक स्क्रीन के डिजाइन को अंतिम रूप देने में मदद करता है, बल्कि जब प्रमुख घटक गुण परिवर्तनों को स्पष्ट रूप से ट्रैक किया जाता है और अच्छी तरह से संप्रेषित किया जाता है, तो कार्यान्वयन भी आसान हो जाता है।
Power Platform सुविधा
मॉडल-चालित ऐप फ़ॉर्म लेआउट का उपयोग करके कॉन्फ़िगर किया जाता है Power Apps Studio. फ़ॉर्म डिज़ाइनर निर्माताओं को ग्रिड संरचना में तत्व जोड़ने की अनुमति देता है, जो फ़ॉर्म पृष्ठों को स्वाभाविक रूप से उत्तरदायी बनाता है। एम्बेडेड कस्टम घटकों जैसे कस्टम पेज, एम्बेडेड कैनवास घटक, और Power Apps घटक फ्रेमवर्क कोड घटक को उनके कार्यान्वयन में उत्तरदायी व्यवहार को शामिल करने की आवश्यकता है। उदाहरण के लिए, कस्टम पृष्ठों को ठीक से काम करने के लिए शुद्ध कैनवास ऐप की तरह ही प्रतिक्रियाशील व्यवहार लागू करना होगा.
कैनवास ऐप्स को प्रत्येक घटक के लिए स्पष्ट कॉन्फ़िगरेशन की आवश्यकता होती है ताकि प्रतिक्रियाशील व्यवहार को कार्यान्वित किया जा सके, जिससे अनुभव पर अधिक नियंत्रण प्राप्त हो सके। स्क्रीन आकार ऐप परिभाषा में निर्धारित किए जाते हैं, जिसका संदर्भ स्थिति, व्यवहार, दृश्यता और अन्य प्रासंगिक गुणों को निर्धारित करने के लिए किया जा सकता है।