धाराप्रवाह डिजाइन प्रणाली

From Vigyanwiki
धाराप्रवाह डिजाइन प्रणाली
Other namesTemplate:सादा सूची
Original author(s)माइक्रोसॉफ्ट
Developer(s)माइक्रोसॉफ्ट
Initial release2017; 8 years ago (2017)
Release(s)
Repository
More Information
Written inऑब्जेक्टिव-सी, सी++, सी#, टाइपस्क्रिप्ट, कोटलिन, स्विफ्ट, जावास्क्रिप्ट
Operating systemएंड्रॉयड, आईओएस, मैक ओएस, विंडोज़, वेब पृष्ठ परिर्वतक
Platformएआरएम, x86-64
Predecessor
TypeDesign language software
LicenseMIT License
Websitedeveloper.microsoft.com/fluentui
सहज से प्रेरित होमस्क्रीन,ऑफिस 365 तथा माइक्रोसॉफ्ट ऑफिस 2021 के विंडोज़ 11 संस्करणों में देखी गई।
सेगोए सहज डिज़ाइन प्रणाली में उपयोग किया जाने वाली लिपि है
Part of a series of articles on
Windows 11
Windows 11 logo.svg
Related

सहज डिजाइन प्रणाली (कोड नेम प्रोजेक्ट नियॉन),[5] माइक्रोसॉफ्ट सहज डिज़ाइन प्रणाली के रूप में आधिकारिक सामान्यतः अनावरण की गई[6] माइक्रोसॉफ्ट द्वारा 2017 में विकसित डिज़ाइन भाषा है। धाराप्रवाह डिजाइन मेट्रो (डिजाइन भाषा) (मेट्रो के रूप में लोकप्रिय) का सुधार है जिसमें सभी विंडोज 10 तथा विंडोज 11 उपकरणों के लिए डिज़ाइन की गई प्रक्रिया सामग्री के भीतर उपयोग किए जाने वाले डिज़ाइन तथा परस्पर क्रिया के लिए दिशानिर्देश सम्मलित हैं। प्रणाली पाँच प्रमुख भागों पर आधारित है: प्रकाश, गंभीरता, गति, सामग्री तथा स्तर।[7] डिजाइन भाषा में गति, गंभीरता तथा स्वच्छ प्रभावों का अधिक प्रमुख उपयोग सम्मलित है।[8] धाराप्रवाह में परिवर्तन एक दीर्घकालिक परियोजना है। अक्टूबर 2017 में जारी किए गए फॉल रचनाकारों अद्यतन के साथ-साथ इसके जारी किए गए एक्सबॉक्स प्रणाली प्रक्रिया सामग्री के अद्यतन के साथ डिज़ाइन के पहलू विंडोज 10 में दिखाई देने लगा।[9][10][11][12] यह पश्चात विंडोज 10 एक्स के संयोजन के साथ डिजाइन किए जाने का विवरण हुआ जिसमें,[13] विंडोज 11 के अतिरिक्त समान डिजाइन है।[14]

मेट्रो तथा एयरो की तुलना में सहज के प्रमुख सिद्धांत, या खंड (प्रकाश, गंभीरता, गति, सामग्री तथा स्तर), मेट्रो (डिजाइन भाषा) द्वारा परिभाषित समतल अवधारणा से दूर हैं, तथा मेट्रो द्वारा प्रस्तुत किए गए स्वच्छ रूप तथा संवेदना को संरक्षित करते हुए, सहज विंडोज के दृश्यों को नवीनीकृत करता है। एयरो डिजाइन दृष्टिकोण जिसे विंडोज विस्टा तथा विंडोज एयरो में प्रस्तुत किया गया था, जिसमें धुंधला स्वच्छ, लंबन सजीव स्वरूप, परछाई डालना, माउस सूचक या निवेश इशारा गति के बाद विशिष्टता प्रभाव, तथा अशुद्ध सामग्री मेट्रो एक बार अस्वीकृत कर दिया गया है।[citation needed]

एयरो
मेट्रो
प्रवाहमय

धाराप्रवाह के वर्तमान अनुप्रयोग

प्रकाश

प्रमुखता

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

6 नवंबर, 2017 को, माइक्रोसॉफ्ट नियोजित डेविड ने कहा है कि कार्यपट्‍टी पर प्रकट प्रमुखता लागू करने की योजना सम्मलित है- लेकिन जुलाई, 2019 में ऐसा नहीं हुआ है।[16] विनयूआई 2.6 के साथ, माइक्रोसॉफ्ट ने अपने वेब तथा गतिमान प्रसाद से मेल खाने के लिए प्रमुखता को प्रकट करना बंद कर दिया है, जो प्रमुखता को प्रकट नहीं करता है।[17]

फोकस

बॉर्डर के साथ केंद्र करने योग्य वस्तु केंद्र दृश्य के माध्यम से चमकते हैं।[18]

गंभीरता

गंभीरता का जोड़ Z-अक्ष का उपयोग करता है तथा समस्तरण के माध्यम से सामग्री विभेदीकरण की अनुमति देता है। गंभीरता को परछाई डालना तथा Z-गंभीरता समस्तरण के माध्यम से प्रस्तुत किया गया है।[19][20] यह 2019 में पुन: डिज़ाइन किए गए ऑफिस ऐप में विशेष रूप से स्पष्ट है।

गति

गति यूआई तत्वों के बीच संबंध स्थापित करता है तथा अनुभव में निरंतरता प्रदान करता है।[21]

सजीवता जोड़ें/हटाएं

किसी संग्रह से वस्तु डालने तथा निकालने के लिए सजीवता की सूची बनाएं।[22]

जुड़े सजीवता

सम्बद्ध सजीवता वस्तु संक्रमण हैं। सामग्री परिवर्तन के समय, एक तत्व पूरे ऐप में उड़ान भरता हुआ प्रतीत होता है।[23]

सामग्री संक्रमण

इसका उपयोग तब किया जाता है जब पृष्ठ पर सामग्री का सिर्फ एक भाग बदलेगा।[24]

अभ्यास

किसी ऐप में गंभीरता से मार्गनिर्देशन करते समय अभ्यास का उपयोग किया जाता है। उदाहरण के लिए, किसी वस्तु के चयन के बाद अधिक जानकारी प्रदर्शित करना।[25]

क्षीण

वस्तु लाने तथा उन्हें देखने से दूर करने के लिए क्षीण-इन तथा क्षीण-आउट करें।[26]

लंबन

लंबन वस्तुओं को भिन्न दरों पर ले जाता है। पृष्ठभूमि इसके ऊपर की सामग्री की तुलना में धीमी चलती है। उदाहरण के लिए, एक सूची पृष्ठभूमि छवि की तुलना में तेजी से सूचीपत्र करेगी, गति के अतिरिक्त गंभीरता प्रभाव उत्पन्न करेगी।[27]

प्रेस प्रतिक्रिया

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

सामग्री

एक्रिलिक

माइक्रोसॉफ्ट प्रोग्राम के लिए ऐक्रेलिक सामग्री के साथ नए प्रतिमा बनाए गए हैं, जिसकी शुरुआत क्रमशः 2018 तथा 2019 में माइक्रोसॉफ्ट ऑफिस ऐप्स तथा क्रोमियम (वेब ​​​​ब्राउज़र)-आधारित माइक्रोसॉफ्ट एज से हुई।[29][30] ऑफिस 365 वीडियो के लिए मीट द न्यू आइकॉन में अंतिम प्रतिमा के प्रारंभिक संस्करण देखे गए थे,[31] इससे पहले तथा अधिक देखे गए थे जब विंडोज 10एक्स का अनावरण किया गया था,[32] 12 दिसंबर, 2019 को आधिकारिक सामान्यतः प्रकट होने से पहले[33] मेल (विंडोज) तथा पंचांग (विंडोज़) से शुरुआत करते हुए ये प्रतिमा उन ऐप्स के माइक्रोसॉफ्ट संग्रह (डिजिटल) अद्यतन के जरिए दिखने लगे।[34][35] ऐक्रेलिक सामग्री मामूली शोर प्रभाव के साथ एक स्वच्छ, धुंधला प्रभाव उत्पन्न करती है। विभिन्न अपारदर्शिता का उपयोग करके एक दृश्य पदानुक्रम बनाया जा सकता है। उदाहरण के लिए, एक ऐप में, प्राथमिक सामग्री सतहें अधिकांशतः अपारदर्शी होती हैं (विजेट या सरल ऐप जैसे विंडोज परिकलन-यंत्र के अपवाद के साथ), एक द्वितीयक फलक में 80% पृष्ठभूमि ऐक्रेलिक हो सकती है, तथा तृतीयक फलक में 60% पृष्ठभूमि ऐक्रेलिक हो सकती है। पृष्ठभूमि ऐक्रेलिक सक्रिय ऐक्रेलिक सामग्री के पीछे सभी वस्तुओं को धुंधला कर देता है।

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

मीका

मीका विंडोज 11 में प्रस्तुत की गई एक नई अपारदर्शी सामग्री है जो उपयोगकर्ता के वॉलपेपर के रंग को ग्रहण करती है।[37] ऐक्रेलिक के विपरीत, जिसे क्षणिक सतहों (जैसे, संदर्भ मेनू) के लिए डिज़ाइन किया गया था, एमएमसी को लंबे समय तक चलने वाली प्राथमिक सतहों पर उपयोग के लिए डिज़ाइन किया गया है।

स्तर

विभिन्न रूप गुणक(डिजाइन), प्रदर्शन की बनावट तथा शून्य-आकार अंतरिक्ष से लेकर त्रि-आयामी स्थान तक एक्स स्तर तत्व अपने आवरण बनावट के अनुकूल होते हैं तथा कई आयामों में उपलब्ध होते हैं।[38][39] सचेत नियंत्रणों को स्तर के भीतर भी वर्गीकृत किया जाता है (उदाहरण के लिए स्क्रॉलबार तथा निवेश जो आह्वान के विभिन्न तरीकों के अनुकूल होते हैं।[40][41]

अनिर्धारित

  • स्थानिक ध्वनि[42]

यह भी देखें

कार्बन डिजाइन प्रणाली

संदर्भ

  1. ↑ Microsoft 365 Team (2020-03-12). "UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog". Microsoft 365 Developer Blog. Retrieved 2021-03-16.
  2. ↑ Lewkowicz, Jakub (2020-03-16). "Microsoft transforms UI Fabric to Fluent UI - SD Times". ST Times. Retrieved 2021-03-16.
  3. ↑ Office Dev (2015-08-15). "Introducing Office UI Fabric—your key to designing add-ins for Office - Microsoft 365 Blog". Microsoft 365 Blog. Retrieved 2021-03-16.
  4. ↑ Tung, Liam (2020-03-16). "Microsoft's big Fluent design push: Web developers get a new Office UI Fabric | ZDNet". ZDNet. Retrieved 2021-03-16.
  5. ↑ "धाराप्रवाह डिजाइन विंडोज और अधिक के लिए माइक्रोसॉफ्ट का नया आधुनिक यूआई है". The Verge. 2017-05-11. Retrieved 2017-05-11.
  6. ↑ "ट्विटर पर विंडोज डेवलपर". Twitter (in English). Retrieved 2017-05-11.
  7. ↑ "धाराप्रवाह डिजाइन भाषा". Microsoft. Retrieved 2017-05-12.
  8. ↑ "नया विंडोज लुक और फील, नियॉन, आधिकारिक तौर पर "माइक्रोसॉफ्ट फ्लुएंट डिजाइन सिस्टम" है". Ars Technica. 11 May 2017. Retrieved 11 May 2017.
  9. ↑ "Microsoft अपने फ़्लुएंट डिज़ाइन परिवर्तनों को Windows 10 में दिखाता है". The Verge. Retrieved 2017-10-29.
  10. ↑ "Microsoft का फ़्लुएंट डिज़ाइन सिस्टम विंडोज़ को अच्छा दिखने की धमकी देता है". Ars Technica (in English). Retrieved 2017-10-29.
  11. ↑ "एक प्रमुख नया Xbox One अपडेट डैशबोर्ड को फ़्लुएंट डिज़ाइन के साथ ओवरहाल करता है". The Verge. Retrieved 2017-10-29.
  12. ↑ "एक्सबॉक्स वन को आज एक तेज डैशबोर्ड सहित एक बड़ा अपडेट मिल रहा है". The Verge. Retrieved 2017-10-29.
  13. ↑ "डुअल स्क्रीन के लिए माइक्रोसॉफ्ट के नए विंडोज 10एक्स ऑपरेटिंग सिस्टम पर पहली नजर". The Verge. February 11, 2020. Retrieved April 19, 2020.
  14. ↑ "Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…"". Instagram. March 19, 2020. Archived from the original on 2021-12-25. Retrieved April 19, 2020.
  15. ↑ mijacobs. "Reveal highlight - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-22.
  16. ↑ "प्रारंभ मेनू में कोई धाराप्रवाह डिज़ाइन हाइलाइट नहीं दिखाता - फॉल क्रिएटर का अपडेट". answers.microsoft.com (in English). Retrieved 2017-12-26.
  17. ↑ "Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub (in English). Retrieved 2021-07-15.
  18. ↑ cphilippona (2020-09-24). "Reveal focus - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2018-03-30.
  19. ↑ Bowden, Zac (2017-05-19). "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved 2017-12-22.
  20. ↑ Joyce, Kevin (2017-05-20). "माइक्रोसॉफ्ट ने विंडोज 10 मिक्स्ड रियलिटी डिवाइसेज के लिए जेड-डेप्थ लेयरिंग का खुलासा किया". VRFocus (in English). Retrieved 2017-12-22.
  21. ↑ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-22.
  22. ↑ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2018-03-30.
  23. ↑ mijacobs (2020-09-24). "Connected animation - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-31.
  24. ↑ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2018-03-30.
  25. ↑ davidvkimball (2020-09-24). "WUP ऐप्स - UWP ऐप्स में पृष्ठ संक्रमण". docs.microsoft.com (in English). Retrieved 2019-11-27.
  26. ↑ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2018-03-30.
  27. ↑ mijacobs (2020-09-24). "How to use the ParallaxView control to add depth and movement to your app. - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-22.
  28. ↑ mijacobs (2020-09-24). "Pointer click animations in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-31.
  29. ↑ "कार्य की एक नई दुनिया अपनाने के लिए Office ऐप आइकन को फिर से डिज़ाइन करना". Medium. November 29, 2018. Retrieved April 19, 2020.
  30. ↑ "माइक्रोसॉफ्ट ने नए एज ब्राउजर लोगो का अनावरण किया जो अब इंटरनेट एक्सप्लोरर जैसा नहीं दिखता". The Verge. November 2, 2019. Retrieved April 19, 2020.
  31. ↑ "Meet the new icons for Office 365". YouTube. November 29, 2018. Retrieved April 19, 2020.
  32. ↑ "#MicrosoftEvent लाइव". YouTube. October 2, 2019. Retrieved April 19, 2020.
  33. ↑ "चिह्न बहुरूपदर्शक". Medium. December 12, 2019. Retrieved April 19, 2020.
  34. ↑ "Iconic Icons: Designing the World of Windows". Medium. February 20, 2020. Retrieved April 19, 2020.
  35. ↑ "माइक्रोसॉफ्ट ने रंगीन नए विंडोज 10 आइकॉन रोल आउट किए". The Verge. February 20, 2020. Retrieved April 19, 2020.
  36. ↑ mijacobs. "Acrylic material - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-22.
  37. ↑ "Windows 11 ऐप्स में प्रयुक्त सामग्री - Windows ऐप्स". docs.microsoft.com (in English). Retrieved 2021-07-05.{{cite web}}: CS1 maint: url-status (link)
  38. ↑ "धाराप्रवाह डिजाइन प्रणाली". fluent.microsoft.com (in English). Archived from the original on 2018-03-01. Retrieved 2018-02-18.
  39. ↑ Verma, Adarsh (2017-05-12). "What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?". Fossbytes (in English). Retrieved 2018-02-18.
  40. ↑ muhsinking. "Scroll viewer controls - UWP applications | Microsoft Docs". docs.microsoft.com (in English). Retrieved 2017-12-22.
  41. ↑ "Windows 10 के लिए Microsoft फ़्लुएंट डिज़ाइन सिस्टम 'वेव वन' में नया क्या है". Windows Central. 2017-06-29. Retrieved 2017-12-22.
  42. ↑ "स्थानिक ध्वनि डिजाइन". developer.microsoft.com (in English). Retrieved 2017-12-22.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=धाराप्रवाह_डिजाइन_प्रणाली&oldid=108683’