பரவலாக்கப்பட்ட பரிமாற்ற (DEX) வடிவமைப்பின் சிறந்த நடைமுறைகள்

2018 இல் Uniswap தொடங்கப்பட்டதிலிருந்து, டஜன் கணக்கான வெவ்வேறு சங்கிலிகளில் நூற்றுக்கணக்கான பரவலாக்கப்பட்ட பரிமாற்றங்கள் தொடங்கப்பட்டுள்ளன. இவற்றில் பல புதிய கூறுகளை அறிமுகப்படுத்தின அல்லது அவற்றின் சொந்த திருப்பங்களைச் சேர்த்தன, ஆனால் இடைமுகம் பொதுவாக அப்படியே உள்ளது.

இதற்கு ஒரு காரணம் Jakob’s Law (opens in a new tab):

பயனர்கள் தங்கள் பெரும்பாலான நேரத்தை பிற தளங்களில் செலவிடுகிறார்கள். அதாவது, பயனர்கள் ஏற்கனவே அறிந்த மற்ற எல்லா தளங்களையும் போலவே உங்கள் தளமும் செயல்பட வேண்டும் என்று விரும்புகிறார்கள்.

Uniswap, Pancakeswap மற்றும் Sushiswap போன்ற ஆரம்பகால கண்டுபிடிப்பாளர்களுக்கு நன்றி, DeFi பயனர்களுக்கு DEX எப்படி இருக்கும் என்பது பற்றிய ஒரு கூட்டு யோசனை உள்ளது. இந்த காரணத்திற்காக, "சிறந்த நடைமுறை" போன்ற ஒன்று இப்போது உருவாகி வருகிறது. தளங்கள் முழுவதும் மேலும் மேலும் வடிவமைப்பு முடிவுகள் தரப்படுத்தப்படுவதை நாங்கள் காண்கிறோம். DEXகளின் பரிணாமத்தை நேரலையில் சோதிப்பதற்கான ஒரு மாபெரும் உதாரணமாக நீங்கள் பார்க்கலாம். வேலை செய்த விஷயங்கள் தங்கியிருந்தன, வேலை செய்யாதவை தூக்கி எறியப்பட்டன. ஆளுமைக்கு இன்னும் இடமுள்ளது, ஆனால் ஒரு DEX இணங்க வேண்டிய சில தரநிலைகள் உள்ளன.

இந்தக் கட்டுரை பின்வருவனவற்றின் சுருக்கமாகும்:

• எதைச் சேர்க்க வேண்டும்
• அதை எவ்வாறு முடிந்தவரை பயன்படுத்தக்கூடியதாக மாற்றுவது
• வடிவமைப்பைத் தனிப்பயனாக்குவதற்கான முக்கிய வழிகள்

எடுத்துக்காட்டு வயர்ஃப்ரேம்கள் அனைத்தும் இந்தக் கட்டுரைக்காகவே உருவாக்கப்பட்டவை, இருப்பினும் அவை அனைத்தும் உண்மையான திட்டங்களை அடிப்படையாகக் கொண்டவை.

Figma கிட் கீழே சேர்க்கப்பட்டுள்ளது - தயங்காமல் அதைப் பயன்படுத்தி உங்கள் சொந்த வயர்ஃப்ரேம்களை விரைவுபடுத்துங்கள்!

DEX இன் அடிப்படை உடற்கூறியல்

UI பொதுவாக மூன்று கூறுகளைக் கொண்டுள்ளது:

1. முதன்மைப் படிவம்
2. பொத்தான்
3. விவரங்கள் பேனல்

மாறுபாடுகள்

இது இந்தக் கட்டுரையில் ஒரு பொதுவான கருப்பொருளாக இருக்கும், ஆனால் இந்தக் கூறுகளை ஒழுங்கமைக்க பல்வேறு வழிகள் உள்ளன. "விவரங்கள் பேனல்" பின்வருமாறு இருக்கலாம்:

• பொத்தானுக்கு மேலே
• பொத்தானுக்கு கீழே
• அக்கார்டியன் பேனலில் மறைக்கப்பட்டுள்ளது
• மற்றும்/அல்லது "முன்னோட்ட" மாடலில்

குறிப்பு: "முன்னோட்ட" மாடல் விருப்பத்திற்குரியது, ஆனால் பிரதான UI இல் மிகக் குறைவான விவரங்களை நீங்கள் காட்டினால், அது அவசியமாகிறது.

முதன்மைப் படிவத்தின் கட்டமைப்பு

நீங்கள் எந்த டோக்கனை மாற்ற விரும்புகிறீர்கள் என்பதை நீங்கள் உண்மையில் தேர்ந்தெடுக்கும் பெட்டி இதுவாகும். இந்தக் கூறு ஒரு உள்ளீட்டுப் புலம் மற்றும் ஒரு வரிசையில் ஒரு சிறிய பொத்தானைக் கொண்டுள்ளது.

DEXகள் பொதுவாக கூடுதல் விவரங்களை மேலே ஒரு வரிசையிலும் கீழே ஒரு வரிசையிலும் காண்பிக்கும், இருப்பினும் இதை வித்தியாசமாக உள்ளமைக்க முடியும்.

மாறுபாடுகள்

இரண்டு UI மாறுபாடுகள் இங்கே காட்டப்பட்டுள்ளன; ஒன்று எந்த எல்லைகளும் இல்லாமல், மிகவும் திறந்த வடிவமைப்பை உருவாக்குகிறது, மற்றொன்று உள்ளீட்டு வரிசையில் ஒரு எல்லையைக் கொண்டுள்ளது, இது இந்தக் கூறின் மீது கவனத்தை உருவாக்குகிறது.

இந்த அடிப்படை கட்டமைப்பு வடிவமைப்பில் நான்கு முக்கிய தகவல்களைக் காட்ட அனுமதிக்கிறது: ஒவ்வொரு மூலையிலும் ஒன்று. மேல்/கீழ் வரிசை ஒன்று மட்டுமே இருந்தால், இரண்டு இடங்கள் மட்டுமே இருக்கும்.

DeFi இன் பரிணாம வளர்ச்சியின் போது, பல்வேறு விஷயங்கள் இங்கே சேர்க்கப்பட்டுள்ளன.

சேர்க்க வேண்டிய முக்கிய தகவல்

• வாலட்டில் உள்ள இருப்பு
• அதிகபட்ச (Max) பொத்தான்
• ஃபியட் (Fiat) சமமான மதிப்பு
• "பெறப்பட்ட" தொகையில் விலை தாக்கம்

DeFi இன் ஆரம்ப நாட்களில், ஃபியட் சமமான மதிப்பு பெரும்பாலும் விடுபட்டது. நீங்கள் எந்த வகையான Web3 திட்டத்தை உருவாக்கினாலும், ஃபியட் சமமான மதிப்பைக் காட்டுவது அவசியம். பயனர்கள் இன்னும் உள்ளூர் நாணயங்களின் அடிப்படையில் சிந்திக்கிறார்கள், எனவே நிஜ உலக மன மாதிரிகளுடன் பொருந்துவதற்கு, இது சேர்க்கப்பட வேண்டும்.

இரண்டாவது புலத்தில் (நீங்கள் மாற்றும் டோக்கனைத் தேர்ந்தெடுக்கும் இடம்) உள்ளீட்டுத் தொகைக்கும் மதிப்பிடப்பட்ட வெளியீட்டுத் தொகைகளுக்கும் இடையிலான வித்தியாசத்தைக் கணக்கிடுவதன் மூலம், ஃபியட் நாணயத் தொகைக்கு அடுத்துள்ள விலை தாக்கத்தையும் நீங்கள் சேர்க்கலாம். இது சேர்க்க மிகவும் பயனுள்ள விவரமாகும்.

சதவீதப் பொத்தான்கள் (எ.கா., 25%, 50%, 75%) பயனுள்ள அம்சமாக இருக்கலாம், ஆனால் அவை அதிக இடத்தை எடுத்துக்கொள்கின்றன, அதிக அழைப்பு நடவடிக்கைகளைச் சேர்க்கின்றன மற்றும் அதிக மனச் சுமையைச் சேர்க்கின்றன. சதவீத ஸ்லைடர்களுக்கும் இதுவே பொருந்தும். இந்த UI முடிவுகளில் சில உங்கள் பிராண்ட் மற்றும் உங்கள் பயனர் வகையைப் பொறுத்தது.

கூடுதல் விவரங்களை முதன்மைப் படிவத்திற்குக் கீழே காட்டலாம். இந்த வகையான தகவல் பெரும்பாலும் சார்பு (pro) பயனர்களுக்கானது என்பதால், பின்வருவனவற்றில் ஒன்றைச் செய்வது அர்த்தமுள்ளதாக இருக்கும்:

• அதை முடிந்தவரை குறைவாக வைத்திருங்கள், அல்லது;
• அதை ஒரு அக்கார்டியன் பேனலில் மறைக்கவும்

சேர்க்க வேண்டிய கூடுதல் தகவல்

• டோக்கன் விலை
• சறுக்கல் (Slippage)
• பெறப்பட்ட குறைந்தபட்சம்
• எதிர்பார்க்கப்படும் வெளியீடு
• விலை தாக்கம்
• எரிவாயு (Gas) செலவு மதிப்பீடு
• பிற கட்டணங்கள்
• ஆர்டர் ரூட்டிங்

விவாதத்திற்குரிய வகையில், இந்த விவரங்களில் சில விருப்பத்திற்குரியதாக இருக்கலாம்.

ஆர்டர் ரூட்டிங் சுவாரஸ்யமானது, ஆனால் பெரும்பாலான பயனர்களுக்கு இது பெரிய வித்தியாசத்தை ஏற்படுத்தாது.

வேறு சில விவரங்கள் ஒரே விஷயத்தை வெவ்வேறு வழிகளில் கூறுவதாகும். எடுத்துக்காட்டாக "பெறப்பட்ட குறைந்தபட்சம்" மற்றும் "சறுக்கல்" ஆகியவை ஒரே நாணயத்தின் இரண்டு பக்கங்கள். நீங்கள் சறுக்கலை 1% ஆக அமைத்திருந்தால், நீங்கள் பெற எதிர்பார்க்கும் குறைந்தபட்சம் = எதிர்பார்க்கப்படும் வெளியீடு-1%. சில UIகள் எதிர்பார்க்கப்படும் தொகை, குறைந்தபட்ச தொகை மற்றும் சறுக்கல் ஆகியவற்றைக் காண்பிக்கும்... இது பயனுள்ளதாக இருக்கும் ஆனால் தேவையற்றதாக இருக்கலாம்.

பெரும்பாலான பயனர்கள் எப்படியும் இயல்புநிலை சறுக்கலை விட்டுவிடுவார்கள்.

"விலை தாக்கம்" பெரும்பாலும் "to" புலத்தில் ஃபியட் சமமான மதிப்பிற்கு அடுத்துள்ள அடைப்புக்குறிக்குள் காட்டப்படும். இது சேர்க்க ஒரு சிறந்த UX விவரம், ஆனால் அது இங்கே காட்டப்பட்டால், அது மீண்டும் கீழே காட்டப்பட வேண்டுமா? பின்னர் மீண்டும் ஒரு முன்னோட்டத் திரையில் காட்டப்பட வேண்டுமா?

பல பயனர்கள் (குறிப்பாக சிறிய தொகைகளை மாற்றுபவர்கள்) இந்த விவரங்களைப் பற்றி கவலைப்பட மாட்டார்கள்; அவர்கள் வெறுமனே ஒரு எண்ணை உள்ளிட்டு swap ஐ அழுத்துவார்கள்.

சரியாக என்ன விவரங்கள் காட்டப்படுகின்றன என்பது உங்கள் பார்வையாளர்கள் மற்றும் பயன்பாடு எப்படி உணர வேண்டும் என்பதைப் பொறுத்தது.

விவரங்கள் பேனலில் சறுக்கல் சகிப்புத்தன்மையை நீங்கள் சேர்த்தால், அதை இங்கிருந்தே நேரடியாகத் திருத்தக்கூடியதாக மாற்ற வேண்டும். இது ஒரு "முடுக்கி" (accelerator) க்கான சிறந்த எடுத்துக்காட்டு; பயன்பாட்டின் பொதுவான பயன்பாட்டினைப் பாதிக்காமல், அனுபவம் வாய்ந்த பயனர்களின் ஓட்டங்களை விரைவுபடுத்தக்கூடிய ஒரு நேர்த்தியான UX தந்திரம்.

ஒரு திரையில் உள்ள ஒரு குறிப்பிட்ட தகவலைப் பற்றி மட்டுமல்லாமல், முழு ஓட்டத்தைப் பற்றியும் கவனமாகச் சிந்திப்பது நல்லது: முதன்மைப் படிவத்தில் எண்களை உள்ளிடுதல் → விவரங்களை ஸ்கேன் செய்தல் → முன்னோட்டத் திரைக்குக் கிளிக் செய்தல் (உங்களிடம் முன்னோட்டத் திரை இருந்தால்). விவரங்கள் பேனல் எல்லா நேரங்களிலும் தெரிய வேண்டுமா அல்லது அதை விரிவுபடுத்த பயனர் அதைக் கிளிக் செய்ய வேண்டுமா? முன்னோட்டத் திரையைச் சேர்ப்பதன் மூலம் நீங்கள் உராய்வை உருவாக்க வேண்டுமா? இது பயனரை மெதுவாக்கவும் அவர்களின் வர்த்தகத்தைக் கருத்தில் கொள்ளவும் கட்டாயப்படுத்துகிறது, இது பயனுள்ளதாக இருக்கும். ஆனால் அவர்கள் அதே தகவலை மீண்டும் பார்க்க விரும்புகிறார்களா? இந்த கட்டத்தில் அவர்களுக்கு மிகவும் பயனுள்ளதாக இருப்பது எது?

வடிவமைப்பு விருப்பங்கள்

குறிப்பிட்டுள்ளபடி, இதில் பெரும்பாலானவை உங்கள் தனிப்பட்ட பாணியைப் பொறுத்தது உங்கள் பயனர் யார்? உங்கள் பிராண்ட் என்ன? ஒவ்வொரு விவரத்தையும் காட்டும் "ப்ரோ" இடைமுகம் உங்களுக்கு வேண்டுமா அல்லது நீங்கள் மிகக் குறைவாக இருக்க விரும்புகிறீர்களா? சாத்தியமான அனைத்து தகவல்களையும் விரும்பும் சார்பு பயனர்களை நீங்கள் இலக்காகக் கொண்டிருந்தாலும், ஆலன் கூப்பரின் புத்திசாலித்தனமான வார்த்தைகளை நீங்கள் இன்னும் நினைவில் கொள்ள வேண்டும்:

உங்கள் இடைமுகம் எவ்வளவு அழகாக இருந்தாலும், எவ்வளவு அருமையாக இருந்தாலும், அது குறைவாக இருந்தால் நன்றாக இருக்கும்.

கட்டமைப்பு

• இடதுபுறத்தில் டோக்கன்கள் அல்லது வலதுபுறத்தில் டோக்கன்கள்
• 2 வரிசைகள் அல்லது 3
• பொத்தானுக்கு மேலே அல்லது கீழே விவரங்கள்
• விவரங்கள் விரிவுபடுத்தப்பட்டுள்ளன, குறைக்கப்பட்டுள்ளன அல்லது காட்டப்படவில்லை

கூறு பாணி

• காலியானது
• கோடிட்டுக் காட்டப்பட்டுள்ளது
• நிரப்பப்பட்டுள்ளது

ஒரு தூய UX கண்ணோட்டத்தில், UI பாணி நீங்கள் நினைப்பதை விட குறைவான முக்கியத்துவம் வாய்ந்தது. காட்சிப் போக்குகள் சுழற்சிகளில் வந்து செல்கின்றன, மேலும் பல விருப்பத்தேர்வுகள் அகநிலை சார்ந்தவை.

இதற்கான உணர்வைப் பெறுவதற்கான எளிதான வழி - மற்றும் பல்வேறு உள்ளமைவுகளைப் பற்றி சிந்திக்க - சில எடுத்துக்காட்டுகளைப் பார்த்து, பின்னர் நீங்களே சில சோதனைகளைச் செய்வது.

சேர்க்கப்பட்ட Figma கிட்டில் காலியான, கோடிட்டுக் காட்டப்பட்ட மற்றும் நிரப்பப்பட்ட கூறுகள் உள்ளன.

இவை அனைத்தையும் நீங்கள் எவ்வாறு ஒன்றாக இணைக்கலாம் என்பதற்கான வெவ்வேறு வழிகளைக் காண கீழே உள்ள எடுத்துக்காட்டுகளைப் பாருங்கள்:

ஆனால் டோக்கன் எந்தப் பக்கத்தில் செல்ல வேண்டும்?

அடிப்படைக் குறிப்பு என்னவென்றால், இது பயன்பாட்டினைப் பொறுத்தவரை பெரிய வித்தியாசத்தை ஏற்படுத்தாது. இருப்பினும், மனதில் கொள்ள வேண்டிய சில விஷயங்கள் உள்ளன, அவை உங்களை ஒரு வழியில் அல்லது வேறு வழியில் திசைதிருப்பக்கூடும்.

காலப்போக்கில் ஃபேஷன் மாறுவதைப் பார்ப்பது சற்று சுவாரஸ்யமாக இருக்கிறது. Uniswap ஆரம்பத்தில் டோக்கனை இடதுபுறத்தில் வைத்திருந்தது, ஆனால் பின்னர் அதை வலதுபுறமாக மாற்றியது. Sushiswap ஒரு வடிவமைப்பு மேம்படுத்தலின் போதும் இந்த மாற்றத்தைச் செய்தது. பெரும்பாலான நெறிமுறைகள் இதைப் பின்பற்றியுள்ளன, ஆனால் அனைத்தும் அல்ல.

நிதி மரபு பாரம்பரியமாக நாணயக் குறியீட்டை எண்ணுக்கு முன் வைக்கிறது, எ.கா., $50, €50, £50, ஆனால் நாம் 50 டாலர்கள், 50 யூரோக்கள், 50 பவுண்டுகள் என்று சொல்கிறோம்.

பொதுவான பயனருக்கு - குறிப்பாக இடமிருந்து வலமாகவும், மேலிருந்து கீழாகவும் படிப்பவருக்கு - வலதுபுறத்தில் உள்ள டோக்கன் மிகவும் இயற்கையாகத் தோன்றும்.

டோக்கனை இடதுபுறத்திலும் அனைத்து எண்களையும் வலதுபுறத்திலும் வைப்பது மகிழ்ச்சியான சமச்சீராகத் தெரிகிறது, இது ஒரு பிளஸ் ஆகும், ஆனால் இந்த தளவமைப்பில் மற்றொரு குறைபாடு உள்ளது.

அருகாமையின் விதி (law of proximity) நெருக்கமாக இருக்கும் உருப்படிகள் தொடர்புடையதாகக் கருதப்படுகின்றன என்று கூறுகிறது. அதன்படி, தொடர்புடைய உருப்படிகளை ஒன்றன்பின் ஒன்றாக வைக்க விரும்புகிறோம். டோக்கன் இருப்பு நேரடியாக டோக்கனுடன் தொடர்புடையது, மேலும் புதிய டோக்கன் தேர்ந்தெடுக்கப்படும் போதெல்லாம் மாறும். எனவே டோக்கன் இருப்பு டோக்கன் தேர்ந்தெடுக்கும் பொத்தானுக்கு அடுத்ததாக இருப்பது சற்று அதிக அர்த்தமுள்ளதாக இருக்கும். அதை டோக்கனுக்கு அடியில் நகர்த்தலாம், ஆனால் அது தளவமைப்பின் சமச்சீர்மையை உடைக்கிறது.

இறுதியில், இரண்டு விருப்பங்களுக்கும் நன்மைகள் மற்றும் தீமைகள் உள்ளன, ஆனால் வலதுபுறத்தில் உள்ள டோக்கனை நோக்கி போக்கு எவ்வாறு தோன்றுகிறது என்பது சுவாரஸ்யமானது.

பொத்தான் நடத்தை

அங்கீகரிப்பதற்கு (Approve) தனிப் பொத்தானை வைத்திருக்க வேண்டாம். மேலும் அங்கீகரிப்பதற்கு தனி கிளிக்கை வைத்திருக்க வேண்டாம். பயனர் மாற்ற (Swap) விரும்புகிறார், எனவே பொத்தானில் "swap" என்று கூறி, முதல் படியாக ஒப்புதலைத் தொடங்கவும். ஒரு மாடல் ஒரு ஸ்டெப்பருடன் முன்னேற்றத்தைக் காட்டலாம் அல்லது எளிமையான "tx 1 of 2 - approving" அறிவிப்பைக் காட்டலாம்.

சூழ்நிலை உதவியாக பொத்தான்

பொத்தான் ஒரு எச்சரிக்கையாகவும் செயல்பட முடியும்!

இது உண்மையில் Web3 க்கு வெளியே மிகவும் அசாதாரணமான வடிவமைப்பு வடிவமாகும், ஆனால் அதற்குள் தரநிலையாகிவிட்டது. இது ஒரு நல்ல கண்டுபிடிப்பு, ஏனெனில் இது இடத்தை மிச்சப்படுத்துகிறது மற்றும் கவனத்தை ஒருமுகப்படுத்துகிறது.

ஒரு பிழை காரணமாக முக்கிய செயல் - SWAP - கிடைக்கவில்லை என்றால், அதற்கான காரணத்தை பொத்தானைக் கொண்டு விளக்கலாம், எ.கா.:

• நெட்வொர்க்கை மாற்றவும்
• வாலட்டை இணைக்கவும்
• பல்வேறு பிழைகள்

செய்ய வேண்டிய செயலுடன் பொத்தானை வரைபடமாக்கலாம். எடுத்துக்காட்டாக, பயனர் தவறான நெட்வொர்க்கில் இருப்பதால் மாற்ற முடியாவிட்டால், பொத்தான் "Ethereum க்கு மாறு" என்று கூற வேண்டும், மேலும் பயனர் பொத்தானைக் கிளிக் செய்யும் போது, அது நெட்வொர்க்கை Ethereum க்கு மாற்ற வேண்டும். இது பயனர் ஓட்டத்தை கணிசமாக துரிதப்படுத்துகிறது.

இந்த figma கோப்பைக் கொண்டு உங்களுடையதை உருவாக்குங்கள்

பல நெறிமுறைகளின் கடின உழைப்புக்கு நன்றி, DEX வடிவமைப்பு நிறைய மேம்பட்டுள்ளது. பயனருக்கு என்ன தகவல் தேவை, அதை எப்படி காட்ட வேண்டும், ஓட்டத்தை எப்படி முடிந்தவரை சீராக மாற்றுவது என்பது எங்களுக்குத் தெரியும். இந்தக் கட்டுரை UX கொள்கைகளின் உறுதியான கண்ணோட்டத்தை வழங்கும் என்று நம்புகிறோம்.

நீங்கள் பரிசோதனை செய்ய விரும்பினால், தயவுசெய்து Figma வயர்ஃப்ரேம் கிட்டைப் பயன்படுத்தவும். இது முடிந்தவரை எளிமையாக வைக்கப்பட்டுள்ளது, ஆனால் அடிப்படை கட்டமைப்பை பல்வேறு வழிகளில் உருவாக்க போதுமான நெகிழ்வுத்தன்மையைக் கொண்டுள்ளது.

Figma வயர்ஃப்ரேம் கிட் (opens in a new tab)

DeFi தொடர்ந்து உருவாகும், மேலும் மேம்படுத்துவதற்கு எப்போதும் இடமுண்டு.

நல்வாழ்த்துக்கள்!