వికేంద్రీకృత ఎక్స్ఛేంజ్ (DEX) రూపకల్పన ఉత్తమ విధానాలు
పేజీ చివరి అప్డేట్: 21 అక్టోబర్, 2025
2018లో Uniswap ప్రారంభమైనప్పటి నుండి, డజన్ల కొద్దీ వివిధ చైన్లలో వందలాది వికేంద్రీకృత ఎక్స్ఛేంజ్లు ప్రారంభించబడ్డాయి. వీటిలో చాలా వరకు కొత్త అంశాలను పరిచయం చేశాయి లేదా వాటి స్వంత శైలిని జోడించాయి, కానీ ఇంటర్ఫేస్ సాధారణంగా అలాగే ఉంది.
దీనికి ఒక కారణం జాకోబ్ నియమం (opens in a new tab):
వినియోగదారులు తమ సమయాన్ని ఎక్కువగా ఇతర సైట్లలో గడుపుతారు. అంటే, వినియోగదారులు వారికి ఇప్పటికే తెలిసిన అన్ని ఇతర సైట్ల వలె మీ సైట్ కూడా అదే విధంగా పనిచేయాలని ఇష్టపడతారు.
Uniswap, Pancakeswap మరియు Sushiswap వంటి ప్రారంభ ఆవిష్కర్తలకు ధన్యవాదాలు, ఒక DEX ఎలా ఉంటుందనే దానిపై DeFi వినియోగదారులకు సామూహిక ఆలోచన ఉంది. ఈ కారణంగా, “ఉత్తమ అభ్యాసం” వంటిది ఇప్పుడు ఆవిర్భవిస్తోంది. సైట్ల అంతటా మరిన్ని డిజైన్ నిర్ణయాలు ప్రామాణీకరించబడుతున్నట్లు మనం చూస్తున్నాము. మీరు DEXల పరిణామాన్ని ప్రత్యక్షంగా పరీక్షించడానికి ఒక భారీ ఉదాహరణగా చూడవచ్చు. పనిచేసినవి నిలిచిపోయాయి, పనిచేయనివి విసిరివేయబడ్డాయి. వ్యక్తిత్వానికి ఇంకా ఆస్కారం ఉంది, కానీ ఒక DEX కట్టుబడి ఉండవలసిన కొన్ని ప్రమాణాలు ఉన్నాయి.
ఈ వ్యాసం వీటి యొక్క సారాంశం:
- ఏమి చేర్చాలి
- దాన్ని వీలైనంత ఉపయోగకరంగా ఎలా తయారు చేయాలి
- డిజైన్ను అనుకూలీకరించడానికి ప్రధాన మార్గాలు
ఉదాహరణ వైర్ఫ్రేమ్లన్నీ ఈ వ్యాసం కోసమే ప్రత్యేకంగా తయారు చేయబడ్డాయి, అయితే అవన్నీ నిజమైన ప్రాజెక్ట్లపై ఆధారపడి ఉన్నాయి.
Figma కిట్ కూడా దిగువన చేర్చబడింది - దాన్ని ఉపయోగించడానికి సంకోచించకండి మరియు మీ స్వంత వైర్ఫ్రేమ్లను వేగవంతం చేసుకోండి!
ఒక DEX యొక్క ప్రాథమిక అనాటమీ
UIలో సాధారణంగా మూడు అంశాలు ఉంటాయి:
- ప్రధాన ఫారమ్
- బటన్
- వివరాల ప్యానెల్
వైవిధ్యాలు
ఈ వ్యాసంలో ఇది ఒక సాధారణ థీమ్ అవుతుంది, కానీ ఈ అంశాలను నిర్వహించడానికి అనేక విభిన్న మార్గాలు ఉన్నాయి. “వివరాల ప్యానెల్” ఇలా ఉండవచ్చు:
- బటన్ పైన
- బటన్ కింద
- అకార్డియన్ ప్యానెల్లో దాగి ఉంటుంది
- మరియు/లేదా “ప్రివ్యూ” మోడల్లో
ము.గ. ఒక “ప్రివ్యూ” మోడల్ ఐచ్ఛికం, కానీ మీరు ప్రధాన UIలో చాలా తక్కువ వివరాలను చూపిస్తుంటే, ఇది అవసరం అవుతుంది.
ప్రధాన ఫారమ్ నిర్మాణం
మీరు ఏ టోకెన్ను మార్చుకోవాలనుకుంటున్నారో వాస్తవంగా ఎంచుకునే పెట్టె ఇది. ఈ కాంపోనెంట్లో ఒక ఇన్పుట్ ఫీల్డ్ మరియు ఒక వరుసలో ఒక చిన్న బటన్ ఉంటాయి.
DEXలు సాధారణంగా అదనపు వివరాలను ఒక వరుస పైన మరియు ఒక వరుస కింద ప్రదర్శిస్తాయి, అయితే దీనిని విభిన్నంగా కాన్ఫిగర్ చేయవచ్చు.
వైవిధ్యాలు
ఇక్కడ రెండు UI వైవిధ్యాలు చూపబడ్డాయి; ఒకటి ఎటువంటి సరిహద్దులు లేకుండా, చాలా ఓపెన్ డిజైన్ను సృష్టిస్తుంది మరియు మరొకటి ఇన్పుట్ వరుసకు సరిహద్దు ఉంటుంది, ఆ అంశంపై దృష్టిని కేంద్రీకరిస్తుంది.
ఈ ప్రాథమిక నిర్మాణం డిజైన్లో నాలుగు కీలక సమాచార భాగాలను చూపించడానికి అనుమతిస్తుంది: ప్రతి మూలలో ఒకటి. ఒకే ఒక పై/కింది వరుస ఉంటే, అప్పుడు కేవలం రెండు స్థానాలు మాత్రమే ఉంటాయి.
DeFi పరిణామ క్రమంలో, ఇక్కడ చాలా విభిన్న విషయాలు చేర్చబడ్డాయి.
చేర్చవలసిన కీలక సమాచారం
- వాలెట్లో నిల్వ
- గరిష్ట బటన్
- ఫియట్ సమానమైనది
- “అందుకున్న” మొత్తంపై ధర ప్రభావం
DeFi ప్రారంభ రోజుల్లో, ఫియట్ సమానమైనది తరచుగా అందుబాటులో ఉండేది కాదు. మీరు ఎలాంటి Web3 ప్రాజెక్ట్ను నిర్మిస్తున్నా, ఫియట్ సమానమైనది చూపించడం చాలా అవసరం. వినియోగదారులు ఇప్పటికీ స్థానిక కరెన్సీల పరంగా ఆలోచిస్తారు, కాబట్టి వాస్తవ ప్రపంచ మానసిక నమూనాలకు సరిపోలడానికి దీన్ని చేర్చాలి.
రెండవ ఫీల్డ్లో (మీరు ఏ టోకెన్కు మారుస్తున్నారో ఎంచుకునేది), ఇన్పుట్ మొత్తం మరియు అంచనా వేసిన అవుట్పుట్ మొత్తాల మధ్య వ్యత్యాసాన్ని లెక్కించడం ద్వారా మీరు ఫియట్ కరెన్సీ మొత్తం పక్కన ధర ప్రభావాన్ని కూడా చేర్చవచ్చు. చేర్చడానికి ఇది చాలా ఉపయోగకరమైన వివరాలు.
శాతం బటన్లు (ఉదా., 25%, 50%, 75%) ఒక ఉపయోగకరమైన ఫీచర్ కావచ్చు, కానీ అవి ఎక్కువ స్థలాన్ని తీసుకుంటాయి, మరిన్ని కాల్ టు యాక్షన్లను జోడిస్తాయి మరియు మరింత మానసిక భారాన్ని జోడిస్తాయి. శాతం స్లయిడర్లతో కూడా అదే. ఈ UI నిర్ణయాలలో కొన్ని మీ బ్రాండ్ మరియు మీ వినియోగదారు రకంపై ఆధారపడి ఉంటాయి.
అదనపు వివరాలు ప్రధాన ఫారమ్ క్రింద చూపబడతాయి. ఈ రకమైన సమాచారం ఎక్కువగా ప్రో వినియోగదారుల కోసం కాబట్టి, ఇలా చేయడం అర్ధవంతంగా ఉంటుంది:
- వీలైనంత తక్కువగా ఉంచండి, లేదా;
- అకార్డియన్ ప్యానెల్లో దాచండి
చేర్చవలసిన అదనపు సమాచారం
- టోకెన్ ధర
- స్లిప్పేజ్
- అందుకున్న కనీస మొత్తం
- అంచనా వేసిన అవుట్పుట్
- ధర ప్రభావం
- గ్యాస్ ధర అంచనా
- ఇతర రుసుములు
- ఆర్డర్ రౌటింగ్
నిస్సందేహంగా, ఈ వివరాలలో కొన్ని ఐచ్ఛికం కావచ్చు.
ఆర్డర్ రౌటింగ్ ఆసక్తికరంగా ఉంటుంది, కానీ చాలా మంది వినియోగదారులకు పెద్ద తేడాను కలిగించదు.
కొన్ని ఇతర వివరాలు కేవలం అదే విషయాన్ని విభిన్న మార్గాల్లో తిరిగి చెబుతున్నాయి. ఉదాహరణకు “కనీసం అందుకున్నది” మరియు “స్లిప్పేజ్” అనేవి ఒకే నాణానికి రెండు వైపులా ఉంటాయి. మీరు 1% వద్ద స్లిప్పేజ్ను సెట్ చేస్తే, అప్పుడు మీరు అందుకుంటారని ఆశించే కనీస మొత్తం = అంచనా వేసిన అవుట్పుట్-1%. కొన్ని UIలు అంచనా వేసిన మొత్తం, కనీస మొత్తం మరియు స్లిప్పేజ్ను చూపిస్తాయి… ఇది ఉపయోగకరంగా ఉన్నప్పటికీ బహుశా అవసరానికి మించినది.
ఎలాగూ చాలా మంది వినియోగదారులు డిఫాల్ట్ స్లిప్పేజ్ను వదిలేస్తారు.
“ధర ప్రభావం” తరచుగా “to” ఫీల్డ్లోని ఫియట్ సమానమైన దాని పక్కన బ్రాకెట్లలో చూపబడుతుంది. ఇది జోడించడానికి ఒక గొప్ప ux వివరాలు, కానీ అది ఇక్కడ చూపబడితే, దాన్ని మళ్ళీ క్రింద చూపించాల్సిన అవసరం ఉందా? ఆపై మళ్ళీ ప్రివ్యూ స్క్రీన్పై?
చాలా మంది వినియోగదారులు (ముఖ్యంగా చిన్న మొత్తాలను మార్చుకునే వారు) ఈ వివరాల గురించి పట్టించుకోరు; వారు కేవలం ఒక సంఖ్యను నమోదు చేసి స్వాప్ను నొక్కుతారు.
ఖచ్చితంగా ఏ వివరాలు చూపించబడతాయనేది మీ ప్రేక్షకులపై మరియు మీరు యాప్కు ఎలాంటి అనుభూతిని ఇవ్వాలనుకుంటున్నారనే దానిపై ఆధారపడి ఉంటుంది.
మీరు వివరాల ప్యానెల్లో స్లిప్పేజ్ టాలరెన్స్ను చేర్చినట్లయితే, మీరు దాన్ని నేరుగా ఇక్కడి నుండే సవరించగలిగేలా చేయాలి. ఇది “యాక్సిలరేటర్”కి ఒక మంచి ఉదాహరణ; యాప్ యొక్క సాధారణ వినియోగాన్ని ప్రభావితం చేయకుండా అనుభవజ్ఞులైన వినియోగదారుల ప్రవాహాలను వేగవంతం చేసే ఒక చక్కని UX ట్రిక్.
ఒకే స్క్రీన్పై ఒక నిర్దిష్ట సమాచారం గురించి మాత్రమే కాకుండా, మొత్తం ప్రవాహం గురించి కూడా జాగ్రత్తగా ఆలోచించడం మంచిది: ప్రధాన ఫారమ్లో సంఖ్యలను నమోదు చేయడం → వివరాలను స్కాన్ చేయడం → ప్రివ్యూ స్క్రీన్కు క్లిక్ చేయడం (మీకు ప్రివ్యూ స్క్రీన్ ఉంటే). వివరాల ప్యానెల్ అన్ని సమయాల్లో కనిపించాలా, లేదా వినియోగదారు దాన్ని విస్తరించడానికి క్లిక్ చేయాలా? మీరు ప్రివ్యూ స్క్రీన్ను జోడించడం ద్వారా ఘర్షణను సృష్టించాలా? ఇది వినియోగదారుని నెమ్మదించేలా మరియు వారి ట్రేడ్ను పరిగణనలోకి తీసుకునేలా చేస్తుంది, ఇది ఉపయోగకరంగా ఉంటుంది. కానీ వారు అదే సమాచారాన్ని మళ్లీ చూడాలనుకుంటున్నారా? ఈ సమయంలో వారికి అత్యంత ఉపయోగకరమైనది ఏమిటి?
డిజైన్ ఎంపికలు
చెప్పినట్లుగా, ఇందులో చాలా వరకు మీ వ్యక్తిగత శైలిపై ఆధారపడి ఉంటుంది మీ వినియోగదారు ఎవరు? మీ బ్రాండ్ ఏమిటి? మీరు ప్రతి వివరాలను చూపే “ప్రో” ఇంటర్ఫేస్ కావాలనుకుంటున్నారా, లేదా మీరు మినిమలిస్ట్గా ఉండాలనుకుంటున్నారా? సాధ్యమైనంత మొత్తం సమాచారం కోరుకునే ప్రో వినియోగదారులను మీరు లక్ష్యంగా చేసుకున్నప్పటికీ, మీరు అలాన్ కూపర్ యొక్క తెలివైన మాటలను ఇప్పటికీ గుర్తుంచుకోవాలి:
మీ ఇంటర్ఫేస్ ఎంత అందంగా ఉన్నా, ఎంత కూల్గా ఉన్నా, అది తక్కువగా ఉంటే మంచిది.
నిర్మాణం
- ఎడమవైపు టోకెన్లు, లేదా కుడివైపు టోకెన్లు
- 2 వరుసలు లేదా 3
- బటన్ పైన లేదా కింద వివరాలు
- వివరాలు విస్తరించబడినవి, కనిష్టీకరించబడినవి, లేదా చూపబడనివి
కాంపోనెంట్ శైలి
- ఖాళీ
- అవుట్లైన్ చేయబడిన
- నింపబడిన
ఒక స్వచ్ఛమైన UX దృక్కోణం నుండి, UI శైలి మీరు అనుకున్నదానికంటే తక్కువగా ఉంటుంది. దృశ్య పోకడలు చక్రాలలో వస్తూ పోతూ ఉంటాయి మరియు చాలా ప్రాధాన్యత వ్యక్తిగతమైనది.
దీని గురించి ఒక అనుభూతిని పొందడానికి మరియు వివిధ విభిన్న కాన్ఫిగరేషన్ల గురించి ఆలోచించడానికి సులభమైన మార్గం, కొన్ని ఉదాహరణలను చూడటం, ఆపై మీరే కొన్ని ప్రయోగాలు చేయడం.
చేర్చబడిన Figma కిట్లో ఖాళీ, అవుట్లైన్ చేయబడిన మరియు నింపబడిన కాంపోనెంట్లు ఉన్నాయి.
మీరు వాటన్నింటినీ ఎలా కలిపి ఉంచవచ్చో వివిధ మార్గాలను చూడటానికి దిగువ ఉదాహరణలను చూడండి:
కానీ టోకెన్ ఏ వైపుకు వెళ్లాలి?
సారాంశం ఏమిటంటే, ఇది బహుశా వినియోగానికి పెద్ద తేడాను కలిగించదు. అయితే, గుర్తుంచుకోవలసిన కొన్ని విషయాలు ఉన్నాయి, ఇవి మిమ్మల్ని అటు లేదా ఇటు వైపు ప్రభావితం చేయవచ్చు.
కాలక్రమేణా ఫ్యాషన్ మారడాన్ని చూడటం కొద్దిగా ఆసక్తికరంగా ఉంది. మొదట Uniswap టోకెన్ను ఎడమవైపు ఉంచింది, కానీ అప్పటి నుండి దానిని కుడివైపుకు మార్చింది. ఒక డిజైన్ అప్గ్రేడ్ సమయంలో Sushiswap కూడా ఈ మార్పు చేసింది. చాలా ప్రోటోకాల్లు దీనిని అనుసరించాయి, కానీ అన్నీ కాదు.
సాంప్రదాయకంగా ఆర్థిక సంప్రదాయం ప్రకారం కరెన్సీ చిహ్నాన్ని సంఖ్యకు ముందు ఉంచుతారు, ఉదా., $50, €50, £50, కానీ మనం 50 డాలర్లు, 50 యూరోలు, 50 పౌండ్లు అని అంటాము.
సాధారణ వినియోగదారునికి - ముఖ్యంగా ఎడమ నుండి కుడికి, పై నుండి క్రిందికి చదివే వారికి - కుడివైపు ఉన్న టోకెన్ బహుశా మరింత సహజంగా అనిపిస్తుంది.
టోకెన్ను ఎడమవైపు మరియు అన్ని సంఖ్యలను కుడివైపు ఉంచడం ఆహ్లాదకరంగా సమరూపంగా కనిపిస్తుంది, ఇది ఒక ప్లస్, కానీ ఈ లేఅవుట్కు మరో ప్రతికూలత ఉంది.
సామీప్యత నియమం ప్రకారం, దగ్గరగా ఉన్న వస్తువులు సంబంధితమైనవిగా భావించబడతాయి. అందువల్ల, మనం సంబంధిత వస్తువులను ఒకదానికొకటి పక్కన ఉంచాలనుకుంటాము. టోకెన్ నిల్వ టోకెన్కే నేరుగా సంబంధం కలిగి ఉంటుంది మరియు కొత్త టోకెన్ ఎంచుకున్నప్పుడల్లా మారుతుంది. అందువల్ల, టోకెన్ నిల్వ టోకెన్ ఎంపిక బటన్ పక్కన ఉండటం కొంచెం ఎక్కువ అర్ధాన్నిస్తుంది. దీనిని టోకెన్ కిందకు తరలించవచ్చు, కానీ అది లేఅవుట్ యొక్క సమరూపతను విచ్ఛిన్నం చేస్తుంది.
చివరికి, రెండు ఎంపికలకు లాభాలు మరియు నష్టాలు ఉన్నాయి, కానీ ట్రెండ్ కుడివైపు టోకెన్ వైపు ఎలా కనిపిస్తుందో ఆసక్తికరంగా ఉంది.
బటన్ ప్రవర్తన
ఆమోదం కోసం ప్రత్యేక బటన్ను కలిగి ఉండకండి. అలాగే ఆమోదం కోసం ప్రత్యేక క్లిక్ను కలిగి ఉండకండి. వినియోగదారు స్వాప్ చేయాలనుకుంటున్నారు, కాబట్టి బటన్పై “స్వాప్” అని చెప్పి, మొదటి దశగా ఆమోదాన్ని ప్రారంభించండి. ఒక మోడల్ స్టెప్పర్తో పురోగతిని చూపగలదు, లేదా సాధారణ “tx 1 ఆఫ్ 2 - ఆమోదిస్తోంది” అనే నోటిఫికేషన్తో చూపగలదు.
సందర్భోచిత సహాయంగా బటన్
బటన్ ఒక హెచ్చరికగా కూడా పనిచేయగలదు!
ఇది వాస్తవానికి Web3 వెలుపల చాలా అసాధారణమైన డిజైన్ నమూనా, కానీ దానిలో ఇది ప్రామాణికంగా మారింది. ఇది ఒక మంచి ఆవిష్కరణ, ఎందుకంటే ఇది స్థలాన్ని ఆదా చేస్తుంది మరియు దృష్టిని కేంద్రీకరించి ఉంచుతుంది.
ఒక లోపం కారణంగా ప్రధాన చర్య - స్వాప్ - అందుబాటులో లేకపోతే, దాని కారణాన్ని బటన్తో వివరించవచ్చు, ఉదా.:
- నెట్వర్క్ను మార్చండి
- వాలెట్ను కనెక్ట్ చేయండి
- వివిధ లోపాలు
బటన్ను నిర్వహించాల్సిన చర్యకు కూడా మ్యాప్ చేయవచ్చు. ఉదాహరణకు, వినియోగదారు తప్పు నెట్వర్క్లో ఉన్నందున స్వాప్ చేయలేకపోతే, బటన్ “Ethereumకు మారండి” అని చెప్పాలి మరియు వినియోగదారు బటన్పై క్లిక్ చేసినప్పుడు, అది నెట్వర్క్ను Ethereumకు మార్చాలి. ఇది వినియోగదారు ప్రవాహాన్ని గణనీయంగా వేగవంతం చేస్తుంది.
ఈ figma ఫైల్తో మీ స్వంతంగా నిర్మించుకోండి
అనేక ప్రోటోకాల్ల కృషికి ధన్యవాదాలు, DEX డిజైన్ చాలా మెరుగుపడింది. వినియోగదారునికి ఏ సమాచారం అవసరమో, దాన్ని ఎలా చూపించాలో, మరియు ప్రవాహాన్ని వీలైనంత సున్నితంగా ఎలా చేయాలో మాకు తెలుసు. ఈ వ్యాసం UX సూత్రాల యొక్క పటిష్టమైన అవలోకనాన్ని అందిస్తుందని ఆశిస్తున్నాము.
మీరు ప్రయోగాలు చేయాలనుకుంటే, దయచేసి Figma వైర్ఫ్రేమ్ కిట్ను ఉపయోగించడానికి సంకోచించకండి. ఇది వీలైనంత సరళంగా ఉంచబడింది, కానీ ప్రాథమిక నిర్మాణాన్ని వివిధ మార్గాల్లో నిర్మించడానికి తగినంత సౌలభ్యాన్ని కలిగి ఉంది.
Figma వైర్ఫ్రేమ్ కిట్ (opens in a new tab)
DeFi పరిణామం చెందుతూనే ఉంటుంది మరియు మెరుగుదలకు ఎల్లప్పుడూ ఆస్కారం ఉంటుంది.
శుభం కలుగు గాక!