विकेंद्रित एक्सचेंज (DEX) डिझाइनमधील सर्वोत्तम पद्धती

2018 मध्ये Uniswap च्या लाँचपासून, अनेक वेगवेगळ्या चेन्सवर शेकडो विकेंद्रित एक्सचेंज लाँच झाले आहेत. यापैकी अनेकांनी नवीन घटक सादर केले किंवा स्वतःचा ट्विस्ट जोडला, परंतु इंटरफेस सामान्यतः तसाच राहिला आहे.

याचे एक कारण जेकबचा नियम (opens in a new tab) आहे:

वापरकर्ते आपला बहुतेक वेळ इतर साइट्सवर घालवतात. याचा अर्थ असा की वापरकर्त्यांना तुमची साइट त्यांना आधीच माहीत असलेल्या इतर सर्व साइट्सप्रमाणेच काम करणे पसंत आहे.

Uniswap, Pancakeswap आणि Sushiswap सारख्या सुरुवातीच्या इनोव्हेटर्समुळे, DeFi वापरकर्त्यांना DEX कसा दिसतो याची एक सामूहिक कल्पना आहे. या कारणास्तव, "सर्वोत्तम पद्धत" सारखे काहीतरी आता उदयास येत आहे. आम्ही पाहतो की अधिकाधिक डिझाइन निर्णय साइट्सवर प्रमाणित केले जात आहेत. तुम्ही DEXes च्या उत्क्रांतीला थेट चाचणीचे एक मोठे उदाहरण म्हणून पाहू शकता. ज्या गोष्टींनी काम केले त्या राहिल्या, ज्यांनी नाही केले त्या बाहेर फेकल्या गेल्या. व्यक्तिमत्त्वासाठी अजूनही जागा आहे, परंतु काही विशिष्ट मानके आहेत ज्यांचे पालन DEX ने केले पाहिजे.

हा लेख खालील गोष्टींचा सारांश आहे:

• काय समाविष्ट करावे
• ते शक्य तितके वापरण्यायोग्य कसे बनवायचे
• डिझाइन सानुकूलित करण्याचे मुख्य मार्ग

सर्व उदाहरण वायरफ्रेम विशेषतः या लेखासाठी बनवले गेले होते, जरी ते सर्व वास्तविक प्रकल्पांवर आधारित असले तरी.

फिग्मा किट देखील तळाशी समाविष्ट आहे - ते वापरण्यास मोकळ्या मनाने आणि आपल्या स्वतःच्या वायरफ्रेम्सला गती द्या!

DEX ची मूलभूत रचना

UI मध्ये साधारणपणे तीन घटक असतात:

1. मुख्य फॉर्म
2. बटण
3. तपशील पॅनेल

फरक

या लेखात ही एक सामान्य थीम असेल, परंतु हे घटक आयोजित करण्याचे विविध मार्ग आहेत. "तपशील पॅनेल" असू शकते:

• बटणाच्या वर
• बटणाच्या खाली
• एकॉर्डियन पॅनेलमध्ये लपवलेले
• आणि/किंवा “पूर्वावलोकन” मोडलवर

एन.बी. एक “पूर्वावलोकन” मोडल पर्यायी आहे, परंतु तुम्ही मुख्य UI वर खूप कमी तपशील दाखवत असाल तर ते आवश्यक बनते.

मुख्य फॉर्मची रचना

हा तो बॉक्स आहे जिथे तुम्ही प्रत्यक्षात कोणते टोकन स्वॅप करायचे आहे ते निवडता. घटकामध्ये एका ओळीत इनपुट फील्ड आणि एक लहान बटण असते.

DEXes सामान्यतः एका ओळीच्या वर आणि एका ओळीच्या खाली अतिरिक्त तपशील प्रदर्शित करतात, जरी हे वेगळ्या प्रकारे कॉन्फिगर केले जाऊ शकते.

फरक

येथे दोन UI भिन्नता दर्शविल्या आहेत; एक कोणत्याही सीमांशिवाय, एक अतिशय खुले डिझाइन तयार करते आणि एक जिथे इनपुट ओळीला एक सीमा आहे, त्या घटकावर लक्ष केंद्रित करते.

ही मूलभूत रचना डिझाइनमध्ये माहितीचे चार मुख्य भाग दाखवण्याची परवानगी देते: प्रत्येक कोपऱ्यात एक. फक्त एक वरची/खालची ओळ असल्यास, फक्त दोन जागा आहेत.

DeFi च्या उत्क्रांती दरम्यान, येथे अनेक वेगवेगळ्या गोष्टी समाविष्ट केल्या गेल्या आहेत.

समाविष्ट करण्यासाठी मुख्य माहिती

• वॉलेटमधील शिल्लक
• कमाल बटण
• फियाट समतुल्य
• मिळणाऱ्या रकमेवर किंमतीचा प्रभाव

DeFi च्या सुरुवातीच्या दिवसांमध्ये, फियाट समतुल्य अनेकदा गहाळ होते. तुम्ही कोणत्याही प्रकारचा Web3 प्रकल्प तयार करत असाल, तर फियाट समतुल्य दर्शवणे आवश्यक आहे. वापरकर्ते अजूनही स्थानिक चलनांच्या बाबतीत विचार करतात, म्हणून वास्तविक जगाच्या मानसिक मॉडेल्सशी जुळण्यासाठी, हे समाविष्ट केले पाहिजे.

दुसऱ्या फील्डवर (जिथे तुम्ही स्वॅप करत असलेले टोकन निवडता) तुम्ही इनपुट रक्कम आणि अंदाजित आउटपुट रकमांमधील फरक मोजून फियाट चलन रकमेच्या पुढे किमतीचा परिणाम देखील समाविष्ट करू शकता. हा समाविष्ट करण्यासाठी एक उपयुक्त तपशील आहे.

टक्केवारी बटणे (उदा., 25%, 50%, 75%) एक उपयुक्त वैशिष्ट्य असू शकतात, परंतु ते अधिक जागा घेतात, अधिक कॉल टू अॅक्शन जोडतात आणि अधिक मानसिक भार टाकतात. टक्केवारी स्लाइडर्सचेही तसेच आहे. यापैकी काही UI निर्णय तुमच्या ब्रँड आणि तुमच्या वापरकर्ता प्रकारावर अवलंबून असतील.

अतिरिक्त तपशील मुख्य फॉर्मच्या खाली दर्शविले जाऊ शकतात. या प्रकारची माहिती बहुतेक प्रो वापरकर्त्यांसाठी असल्याने, हे करणे अर्थपूर्ण आहे:

• ते शक्य तितके कमी ठेवा, किंवा;
• ते एकॉर्डियन पॅनेलमध्ये लपवा

समाविष्ट करण्यासाठी अतिरिक्त माहिती

• टोकन किंमत
• स्लिपेज
• किमान प्राप्त
• अपेक्षित आउटपुट
• किंमतीचा प्रभाव
• गॅस खर्चाचा अंदाज
• इतर शुल्क
• ऑर्डर रूटिंग

वादग्रस्तपणे, यापैकी काही तपशील पर्यायी असू शकतात.

ऑर्डर रूटिंग मनोरंजक आहे, परंतु बहुतेक वापरकर्त्यांसाठी फारसा फरक पडत नाही.

काही इतर तपशील फक्त तीच गोष्ट वेगवेगळ्या प्रकारे पुन्हा सांगतात. उदाहरणार्थ, "किमान प्राप्त" आणि "स्लिपेज" हे एकाच नाण्याच्या दोन बाजू आहेत. तुमचे स्लिपेज 1% वर सेट असल्यास, तुम्हाला मिळणारी किमान अपेक्षित रक्कम = अपेक्षित आउटपुट - 1%. काही UI अपेक्षित रक्कम, किमान रक्कम आणि स्लिपेज दाखवतील... जे उपयुक्त आहे पण कदाचित अनावश्यक आहे.

बहुतेक वापरकर्ते तरीही डीफॉल्ट स्लिपेज ठेवतील.

"किंमत परिणाम" अनेकदा "to" फील्डमध्ये फियाट समतुल्यच्या पुढे कंसात दर्शविला जातो. हा जोडण्यासाठी एक उत्तम ux तपशील आहे, परंतु जर तो येथे दर्शविला असेल तर तो खाली पुन्हा दाखवण्याची खरोखर गरज आहे का? आणि मग पुन्हा पूर्वावलोकन स्क्रीनवर?

अनेक वापरकर्ते (विशेषतः जे कमी प्रमाणात स्वॅप करतात) या तपशीलांची पर्वा करणार नाहीत; ते फक्त एक संख्या टाकतील आणि स्वॅप दाबतील.

नेमके कोणते तपशील दाखवले जातील हे तुमच्या प्रेक्षक आणि तुम्हाला अॅपमध्ये कोणत्या प्रकारची भावना हवी आहे यावर अवलंबून असेल.

तुम्ही तपशील पॅनेलमध्ये स्लिपेज टॉलरन्स समाविष्ट केल्यास, तुम्ही ते थेट येथून संपादन करण्यायोग्य देखील बनवले पाहिजे. हे "एक्सेलेटर" चे एक चांगले उदाहरण आहे; एक सुबक UX युक्ती जी अॅपच्या सामान्य उपयोगितेवर परिणाम न करता अनुभवी वापरकर्त्यांच्या प्रवाहांना गती देऊ शकते.

एका स्क्रीनवरील केवळ एका विशिष्ट माहितीबद्दलच नव्हे, तर संपूर्ण प्रवाहाबद्दल काळजीपूर्वक विचार करणे ही एक चांगली कल्पना आहे: मुख्य फॉर्ममध्ये संख्या प्रविष्ट करणे → तपशील स्कॅन करणे → पूर्वावलोकन स्क्रीनवर क्लिक करणे (तुमच्याकडे पूर्वावलोकन स्क्रीन असल्यास). तपशील पॅनेल नेहमी दृश्यमान असावे की वापरकर्त्याला ते विस्तारित करण्यासाठी क्लिक करणे आवश्यक आहे? तुम्ही पूर्वावलोकन स्क्रीन जोडून घर्षण निर्माण करावे का? हे वापरकर्त्याला हळू करण्यास आणि त्यांच्या व्यापाराचा विचार करण्यास भाग पाडते, जे उपयुक्त असू शकते. पण त्यांना पुन्हा तीच सर्व माहिती बघायची आहे का? या क्षणी त्यांच्यासाठी सर्वात उपयुक्त काय आहे?

डिझाइन पर्याय

नमूद केल्याप्रमाणे, यापैकी बरेच काही तुमच्या वैयक्तिक शैलीवर अवलंबून असते तुमचा वापरकर्ता कोण आहे? तुमचा ब्रँड कोणता आहे? तुम्हाला प्रत्येक तपशील दाखवणारा “प्रो” इंटरफेस हवा आहे की तुम्हाला मिनिमलिस्ट व्हायचे आहे? जरी तुम्ही सर्व शक्य माहिती हवी असलेल्या प्रो वापरकर्त्यांना लक्ष्य करत असाल, तरीही तुम्हाला ॲलन कूपरचे शहाणपणाचे शब्द लक्षात ठेवले पाहिजेत:

तुमचा इंटरफेस कितीही सुंदर असो, कितीही छान असो, तो कमी असता तर बरे झाले असते.

रचना

• डावीकडे टोकन किंवा उजवीकडे टोकन
• 2 ओळी किंवा 3
• बटणाच्या वर किंवा खाली तपशील
• तपशील विस्तृत, लहान केलेले किंवा न दर्शवलेले

घटक शैली

• रिकामे
• बाह्यरेखित
• भरलेले

केवळ UX च्या दृष्टिकोनातून, UI शैली तुम्हाला वाटते त्यापेक्षा कमी महत्त्वाची आहे. दृष्य ट्रेंड चक्रात येतात आणि जातात, आणि बरीचशी पसंती व्यक्तिनिष्ठ असते.

याची अनुभूती घेण्याचा - आणि विविध भिन्न कॉन्फिगरेशनबद्दल विचार करण्याचा सर्वात सोपा मार्ग म्हणजे काही उदाहरणे पाहणे आणि नंतर स्वतः काही प्रयोग करणे.

समाविष्ट फिग्मा किटमध्ये रिकामे, बाह्यरेखित आणि भरलेले घटक आहेत.

हे सर्व एकत्र ठेवण्याचे वेगवेगळे मार्ग पाहण्यासाठी खालील उदाहरणे पहा:

पण टोकन कोणत्या बाजूला जावे?

मुख्य गोष्ट अशी आहे की यामुळे उपयोगितेवर फारसा फरक पडण्याची शक्यता नाही. तथापि, काही गोष्टी लक्षात ठेवण्यासारख्या आहेत, ज्या तुम्हाला एका किंवा दुसऱ्या मार्गावर प्रभावित करू शकतात.

वेळेनुसार फॅशनमध्ये बदल पाहणे थोडे मनोरंजक आहे. Uniswap ने सुरुवातीला टोकन डावीकडे ठेवले होते, परंतु नंतर ते उजवीकडे हलवले. Sushiswap ने देखील डिझाइन अपग्रेड दरम्यान हा बदल केला. सर्व नाही, पण बहुतेक प्रोटोकॉल्सने त्याचे अनुकरण केले आहे.

आर्थिक संकेतांनुसार पारंपारिकपणे चलन चिन्ह संख्येच्या आधी ठेवले जाते, उदा., $50, €50, £50, परंतु आपण 50 डॉलर्स, 50 युरो, 50 पाउंड असे म्हणतो.

सर्वसाधारण वापरकर्त्याला - विशेषतः जो डावीकडून उजवीकडे, वरपासून खालपर्यंत वाचतो - उजवीकडील टोकन अधिक नैसर्गिक वाटू शकते.

डावीकडे टोकन आणि उजवीकडे सर्व संख्या ठेवणे आनंददायक सममित दिसते, जे एक प्लस आहे, परंतु या लेआउटमध्ये आणखी एक तोटा आहे.

सान्निध्याचा नियम सांगतो की जवळ असलेल्या वस्तू संबंधित म्हणून समजल्या जातात. त्यानुसार, आम्हाला संबंधित वस्तू एकमेकांच्या शेजारी ठेवायच्या आहेत. टोकन शिल्लक थेट टोकनशी संबंधित आहे, आणि जेव्हा नवीन टोकन निवडले जाते तेव्हा ते बदलेल. म्हणून, टोकन शिल्लक टोकन निवड बटणाच्या पुढे असणे थोडे अधिक अर्थपूर्ण आहे. ते टोकनच्या खाली हलवले जाऊ शकते, परंतु ते लेआउटची सममिती मोडते.

शेवटी, दोन्ही पर्यायांसाठी प्लस आणि मायनस आहेत, परंतु उजवीकडील टोकनकडे कल कसा दिसतो हे मनोरंजक आहे.

बटणाचे वर्तन

Approve साठी वेगळे बटण ठेवू नका. Approve साठी वेगळा क्लिक देखील ठेवू नका. वापरकर्त्याला स्वॅप करायचे आहे, म्हणून बटणावर फक्त “स्वॅप” म्हणा आणि पहिली पायरी म्हणून मंजुरी सुरू करा. एक मोडल स्टेपरसह प्रगती दर्शवू शकतो, किंवा एक साधे “tx 1 of 2 - approving” सूचना.

संदर्भानुसार मदतीसाठी बटण

बटण अलर्ट म्हणून दुहेरी कर्तव्य करू शकते!

हे खरेतर Web3 बाहेर एक असामान्य डिझाइन पॅटर्न आहे, परंतु त्याच्या आत ते मानक बनले आहे. ही एक चांगली नवकल्पना आहे कारण ती जागा वाचवते आणि लक्ष केंद्रित ठेवते.

जर मुख्य क्रिया - SWAP - त्रुटीमुळे अनुपलब्ध असेल, तर कारण बटणासह स्पष्ट केले जाऊ शकते, उदा:

• नेटवर्क स्विच करा
• वॉलेट कनेक्ट करा
• विविध त्रुटी

बटण आवश्यक असलेल्या कृतीसाठी मॅप केले जाऊ शकते. उदाहरणार्थ, वापरकर्ता चुकीच्या नेटवर्कवर असल्यामुळे स्वॅप करू शकत नसल्यास, बटणावर "Ethereum वर स्विच करा" असे लिहिलेले असावे आणि जेव्हा वापरकर्ता बटणावर क्लिक करतो, तेव्हा ते नेटवर्क Ethereum वर स्विच झाले पाहिजे. यामुळे वापरकर्त्याचा प्रवाह लक्षणीयरीत्या वेगवान होतो.

या figma फाइलसह स्वतःचे तयार करा

अनेक प्रोटोकॉलच्या कठोर परिश्रमामुळे, DEX डिझाइनमध्ये खूप सुधारणा झाली आहे. आम्हाला माहित आहे की वापरकर्त्याला कोणती माहिती हवी आहे, ती कशी दाखवावी, आणि प्रवाह शक्य तितका सुरळीत कसा करावा. आशा आहे की हा लेख UX तत्त्वांचे एक ठोस विहंगावलोकन प्रदान करतो.

तुम्हाला प्रयोग करायचे असल्यास, कृपया फिग्मा वायरफ्रेम किट वापरण्यास मोकळ्या मनाने. हे शक्य तितके सोपे ठेवले आहे, परंतु विविध मार्गांनी मूलभूत रचना तयार करण्यासाठी पुरेशी लवचिकता आहे.

Figma वायरफ्रेम किट (opens in a new tab)

DeFi विकसित होत राहील, आणि सुधारणेसाठी नेहमीच जागा असते.

शुभेच्छा!