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