అంతిమ UI డిజైన్ గైడ్

విషయము

• 01. మీ టైపోగ్రఫీని ఎంచుకోండి
• 02. కుడి పాలెట్ ఎంచుకోండి
• 03. శైలి లింకులు మరియు బటన్లు
• 04. మీ భాగాలను సృష్టించండి
• 05. డాక్యుమెంట్ మరియు సహకరించండి

యూజర్ ఇంటర్ఫేస్ డిజైన్ అంటే ఏమిటి? మంచి ప్రశ్న ఏమిటంటే, వినియోగదారు ఇంటర్‌ఫేస్ రూపకల్పనలో వాస్తవానికి ఏమి ఉంటుంది? సౌందర్యం? వినియోగం? సౌలభ్యాన్ని? వాటిని అన్ని? సరైన వినియోగదారు అనుభవాన్ని ప్రారంభించడానికి ఈ కారకాలన్నీ ఎలా ఏకం అవుతాయి మరియు ఇది మొదట రావాలి?

ప్రాప్యత ఎల్లప్పుడూ మొదటి స్థానంలో ఉండాలి, సరైన వినియోగానికి పునాదులు వేస్తుంది (అగ్ర వెబ్‌సైట్ బిల్డర్‌ను ఉపయోగించడం ఇక్కడ సహాయపడుతుంది). ఆపై, UI ప్రాప్యత మరియు ఉపయోగపడేది అయినప్పుడు, ఇది ఇప్పటికే సౌందర్యం పరంగా చాలా మంచిగా కనిపించాలి (UI డిజైన్ సాధనాలు ఇక్కడ సహాయపడతాయి). అప్పుడు, మీ డిజైన్ అన్ని స్థాయిలలో పనిచేస్తుందని నిర్ధారించుకోవడానికి, మీరు దీన్ని పూర్తిగా పరీక్షించాల్సిన అవసరం ఉంది, ఇది మా ఉత్తమ వినియోగదారు పరీక్ష సాధనాల ఎంపికతో మీరు చేయవచ్చు. చాలా డిజైన్ల యొక్క పునాది అంశాలను దగ్గరగా చూద్దాం మరియు దృశ్యమాన స్థిరత్వాన్ని నిర్ధారించడానికి ఏమి చేయవచ్చు.

01. మీ టైపోగ్రఫీని ఎంచుకోండి

గొప్ప టైపోగ్రఫీ (డిజైన్ యొక్క అనేక అంశాలు వంటివి) ప్రాప్యతకి దిమ్మతిరుగుతాయి. విజువల్ డిజైన్ ఖచ్చితంగా యూజర్ యొక్క మొత్తం అనుభవాన్ని జోడిస్తుంది, కానీ రోజు చివరిలో, వినియోగదారులు UI తో ఇంటరాక్ట్ అవుతారు, దానిని కళగా చూడరు. స్పష్టమైన అక్షరాలు స్పష్టతకు కారణమవుతాయి మరియు చదవగలిగే పదాలు వినియోగదారులు కంటెంట్‌ను సమర్ధవంతంగా జీర్ణించుకోవడానికి సహాయపడతాయి. ఏదైనా దృశ్య సౌందర్యం కంటే రెండూ చాలా ముఖ్యమైనవి.

అయినప్పటికీ, బాగా రూపొందించిన టైపోగ్రఫీ ఇప్పటికీ సౌందర్యంగా సంతృప్తికరంగా ఉంటుంది. బ్లాక్-ఆన్-వైట్ హెల్వెటికా (లేదా ఇలాంటి ఫాంట్) కొన్ని సాధారణ టైపోగ్రాఫిక్ మెరుగుదలల తర్వాత అందం యొక్క విషయం. మెరుగుదలల ద్వారా, ఫాంట్ పరిమాణం, పంక్తి ఎత్తు, అక్షరాల అంతరం మరియు మరెన్నో ట్వీకింగ్ చేయడం అంటే - ఫాంట్ లేదా టెక్స్ట్ యొక్క రంగు కాదు.

‘బ్యూటిఫుల్’ టైపోగ్రఫీ చదవలేనిప్పుడు అసహ్యంగా ఉంటుంది ఎందుకంటే నిరాశ ఎల్లప్పుడూ సౌందర్యాన్ని ట్రంప్ చేస్తుంది. గొప్ప డిజైన్ సమతుల్య మరియు శ్రావ్యంగా ఉంటుంది.

UI డిజైన్ యొక్క అనేక అంశాల మాదిరిగానే, ప్రాప్యత మరియు సౌందర్యాన్ని సమతుల్యం చేయడానికి చక్కటి ట్యూనింగ్ విజువల్స్ సవాలు కాదు. సవాలు మొత్తం రూపకల్పనలో స్థిరత్వాన్ని కొనసాగించడం. విభిన్న ప్రాముఖ్యత గల అంశాల మధ్య స్థిరత్వం స్పష్టమైన సోపానక్రమాన్ని ఏర్పరుస్తుంది, ఇది వినియోగదారులకు UI ని వేగంగా అర్థం చేసుకోవడానికి సహాయపడుతుంది మరియు కంటెంట్‌ను మరింత సమర్థవంతంగా జీర్ణం చేస్తుంది.

స్పష్టత మరియు చదవదగిన విషయానికి వస్తే, WCAG 2.0 వెబ్ కంటెంట్ ప్రాప్యత మార్గదర్శకాలచే నిర్వచించబడిన కనీస ఆమోదయోగ్యమైన ఫాంట్ పరిమాణం 18pt (లేదా 14pt బోల్డ్). ఉపయోగించడానికి ఉత్తమమైన ఫాంట్ పరిమాణం ఎక్కువగా ఫాంట్ మీద ఆధారపడి ఉంటుంది, అయితే దృశ్య సోపానక్రమం గురించి జాగ్రత్త వహించడం చాలా ముఖ్యం మరియు ఈ మూల పరిమాణం సారాంశాలు మరియు శీర్షికల నుండి ఎలా వేరు చేస్తుంది (అనగా h1>, h2>, h3>).

మీ UI డిజైన్ సాధనంతో (మేము ఇన్విజన్ స్టూడియోని ఉపయోగిస్తాము), వచన పొరల శ్రేణిని సృష్టించండి (టి) ఆపై కింది మూసతో పరస్పర సంబంధం కలిగి ఉండటానికి అన్ని పరిమాణాలను సర్దుబాటు చేయండి:

• h1>: 44 పిక్స్‌
• h2>: 33 పిక్స్‌
• h3>: 22 పిక్స్‌
• p>: 18 పిక్స్‌

ఇన్విజన్ స్టూడియోతో (మరియు అన్ని ఇతర UI డిజైన్ సాధనాలు), కుడి వైపున ఇన్స్పెక్టర్ ప్యానెల్ ఉపయోగించి శైలులను సర్దుబాటు చేయడం ద్వారా ఇది జరుగుతుంది.

తరువాత మీ ఫాంట్‌ని ఎన్నుకోండి, అయితే జాగ్రత్త వహించండి ఎందుకంటే కొన్ని ఫాంట్‌లతో మీరు గమనించేది 18px p> మరియు 22px h3> అన్నింటికీ భిన్నంగా కనిపించడం లేదు. మాకు రెండు ఎంపికలు ఉన్నాయి: ఫాంట్ పరిమాణాలను సర్దుబాటు చేయండి లేదా శీర్షికల కోసం వేరే ఫాంట్‌ను పరిగణించండి. మీ డిజైన్ టెక్స్ట్-హెవీగా ఉంటుందని మీరు if హించినట్లయితే తరువాతి వారితో వెళ్ళండి.

దీన్ని గుర్తుంచుకోండి:

• విజువల్ UI డిజైన్ తరచుగా గట్-ఫీలింగ్ విధానం
• ఏమీ నిర్ణయించబడలేదు; ప్రతిదీ మార్పుకు లోబడి ఉంటుంది

పంక్తి ఎత్తు

సరైన స్థాయి ఎత్తు చదవడానికి వచన పంక్తులు వాటి మధ్య తగినంత అంతరాన్ని కలిగి ఉన్నాయని ఆప్టిమల్ లైన్ ఎత్తు నిర్ధారిస్తుంది. ఇది ‘ప్రమాణం’ గా మరింతగా గుర్తించబడుతోంది; గూగుల్ యొక్క లైట్హౌస్ ఆడిట్ సాధనం దీన్ని మాన్యువల్ చెక్‌గా సూచిస్తుంది (లేదా టెక్స్ట్‌లో సబ్‌ప్టిమల్ లైన్ ఎత్తు ఫలితంగా చాలా దగ్గరగా ఉండే లింక్‌లు ఉంటే ఫ్లాగ్ కూడా).

మరోసారి, WCAG దీనితో మాకు సహాయపడుతుంది, ఆ లైన్ ఎత్తులు ఫాంట్ సైజులో 1.5x ఉండాలి అని ప్రకటించింది. కాబట్టి, మీ UI డిజైన్ సాధనంలో ‘లైన్’ (లేదా ఇలాంటిది) కింద, ఫాంట్ పరిమాణాన్ని - కనీసం - 1.5 ద్వారా గుణించండి. ఉదాహరణగా, బాడీ టెక్స్ట్ 18 పిక్స్ అయితే, లైన్ ఎత్తు 27 పిక్స్ (18 * 1.5 - మీరు మ్యాథ్స్ ఆపరేషన్‌ను నేరుగా ఇన్‌స్పెక్టర్‌లో కూడా అమలు చేయవచ్చు). మళ్ళీ, అయితే, జాగ్రత్త వహించండి - 1.6x మంచి ఫిట్ అనిపిస్తే, 1.6x ఉపయోగించండి. వేర్వేరు ఫాంట్‌లు వేర్వేరు ఫలితాలను ఇస్తాయని గుర్తుంచుకోండి.

మా రూపకల్పనలో నిజమైన డేటాను ఉపయోగించడం గురించి ఆలోచించడం చాలా తొందరగా ఉంది, అయితే, కనీసం, మేము ఇంకా కొంత వాస్తవిక డేటాను ఉపయోగించాలి (లోరెం ఇప్సమ్ కూడా). మా టైపోగ్రఫీ వాస్తవానికి ఎలా ఉంటుందో చూడటానికి మాకు సహాయపడటానికి ఇన్విజన్ స్టూడియోకి స్థానిక నిజమైన డేటా అనువర్తనం ఉంది.

పేరా అంతరం

పేరాగ్రాఫ్ అంతరం ఇన్విజన్ స్టూడియో ఇన్స్పెక్టర్ ఉపయోగించి మేము ప్రకటించగల శైలి కాదు. బదులుగా, మేము స్మార్ట్ గైడ్స్ (⌥) ఉపయోగించి పొరలను మాన్యువల్‌గా సమలేఖనం చేయాలి. పంక్తి ఎత్తు మాదిరిగానే, మేజిక్ గుణకం 2x (ఫాంట్ పరిమాణాన్ని రెట్టింపు). ఉదాహరణగా, ఫాంట్ పరిమాణం 18px అయితే, తదుపరి టెక్స్ట్ బ్లాక్‌లోకి వెళ్లేముందు కనీసం 36px స్థలం ఉండాలి. అక్షరాల అంతరం కనీసం 0.12 ఉండాలి.

అయినప్పటికీ, మేము భాగాలను సృష్టించడం ప్రారంభించే వరకు దీని గురించి ఆందోళన చెందాల్సిన అవసరం లేదు.

భాగస్వామ్య శైలులు

మీ UI డిజైన్ సాధనం దీనికి మద్దతు ఇస్తే (ఇన్విజన్ స్టూడియో ఇంకా లేదు), దృశ్యమాన అనుగుణ్యతను నిర్ధారించేటప్పుడు ఈ టైపోగ్రాఫిక్ శైలులను ‘షేర్డ్ స్టైల్స్’ గా మార్చడాన్ని పరిగణించండి. ఇది సాధారణంగా ఇన్స్పెక్టర్ ద్వారా సాధించబడుతుంది.

02. కుడి పాలెట్ ఎంచుకోండి

మీ డిజైన్ కోసం ఖచ్చితమైన రంగులను ఎంచుకోవడం సౌందర్యానికి మించినది: ఇది మీ సైట్ యొక్క మొత్తం సోపానక్రమానికి తెలియజేస్తుంది.

UI రూపకల్పన విషయానికి వస్తే, రంగు అనేది అలవాటుగా మనం ఆనందించే మొదటి విషయాలలో ఒకటి, కాని దృశ్య రూపకల్పనలో నేరుగా డైవింగ్ చేయడం చెడ్డ విషయం అని మేము బోధించాము. ఇది ఖచ్చితంగా నిజం, అయితే ఇది దృశ్యమానత విషయానికి వస్తే, రంగు ఇతర పాత్రలను పోషిస్తుంది కాబట్టి ఇది ఒక ప్రధాన ఆందోళనగా ఉండాలి.

UI రూపకల్పనలో రంగు చాలా ప్రభావవంతంగా ఉంటుంది, కానీ కొంతమంది వినియోగదారులు (చాలామంది, వాస్తవానికి) వివిధ రకాల దృశ్య వైకల్యాలతో బాధపడుతున్నందున, ఇది ఎల్లప్పుడూ నమ్మదగినది కాదు. చెప్పబడుతున్నది, ఇది తప్పనిసరిగా ఉపయోగించబడుతున్న నిర్దిష్ట రంగు గురించి కాదు, రంగు రకం. బ్రాండింగ్ విషయానికి వస్తే ఇది నిజం కాకపోవచ్చు, ఎందుకంటే ఈ విషయంలో రంగును భావోద్వేగ ప్రభావానికి ఉపయోగిస్తారు, అయితే, UI రూపకల్పనలో, రంగు ఉద్దేశం, అర్థం మరియు దృశ్య శ్రేణిని కమ్యూనికేట్ చేయడానికి కూడా ఉపయోగించబడుతుంది.

01. స్టార్క్
స్టార్క్ ప్లగ్ఇన్ స్కెచ్ మరియు అడోబ్ ఎక్స్‌డితో అనుకూలంగా ఉంటుంది మరియు రంగు విరుద్ధతను తనిఖీ చేయడానికి మరియు కాన్వాస్ నుండి నేరుగా రంగు అంధత్వాన్ని అనుకరించడానికి మీకు సహాయపడుతుంది. ఫిగ్మా మరియు ఇన్విజన్ స్టూడియోకి మద్దతు త్వరలో వస్తుంది.
02.రంగులు
రంగులు అనేది 90 రంగు కలయికల సమితి, ఇది WCAG 2.0 మార్గదర్శకాలను సంతృప్తి పరచడానికి తగిన రంగు విరుద్ధంగా ఉంటుంది - వాటిలో కొన్ని AAA ప్రమాణానికి అనుగుణంగా ఉంటాయి.
03. A11y ప్రాజెక్ట్
A11y ప్రాజెక్ట్ ప్రాప్యతకి సంబంధించిన అన్ని విషయాల కోసం ఒక భారీ కేంద్రంగా ఉంది. ఇది వనరులు, సాధనాలు, చిట్కాలు, ట్యుటోరియల్స్ కలిగి ఉంది మరియు ఇది స్టార్క్ ప్లగ్ఇన్ తయారీదారుచే సృష్టించబడింది మరియు ఇన్విజన్ నుండి నిధులను పొందుతుంది.

మూడు రకాల రంగు

రంగులు అర్థాన్ని కలిగి ఉంటాయి, కాబట్టి వాటిలో ఎక్కువ ఉండకపోవడం చాలా ముఖ్యం. చాలా అర్ధాలు వినియోగదారు అర్థం చేసుకోవలసిన మరియు గుర్తుంచుకోవలసిన మరిన్ని విషయాలకు కారణమవుతాయి - మన గురించి ఆందోళన చెందడానికి మరిన్ని రంగు కలయికలను చెప్పలేదు. సాధారణంగా, ఇది సిఫార్సు చేయబడిన ఫార్మాట్ అవుతుంది:

• కాల్-టు-యాక్షన్ కలర్ (ప్రధాన బ్రాండ్ రంగు కూడా)
• తటస్థ ముదురు రంగు (UI మూలకాలు లేదా ముదురు మోడ్‌కు మంచిది)
• పైవన్నిటికీ, కొద్దిగా తేలికైన మరియు ముదురు వైవిధ్యం

ఇది కింది వాటిని అనుమతిస్తుంది:

• డార్క్ మోడ్ సులభంగా సాధించబడుతుంది
• మా CTA రంగు ఇతర రంగులతో ఎప్పటికీ విభేదించదు
• ఏ సందర్భంలోనైనా మేము నొక్కిచెప్పగలము మరియు నొక్కిచెప్పగలము

మీ పాలెట్‌ను సెటప్ చేయండి

మీ ఎంపిక UI రూపకల్పన సాధనంతో, ప్రతి రంగుకు (‘బ్రాండ్’, ‘న్యూట్రల్ / లైట్’ మరియు ‘న్యూట్రల్ / డార్క్’ అని పేరు పెట్టబడిన) ఒక పెద్ద ఆర్ట్‌బోర్డ్ (A నొక్కండి) సృష్టించండి. అప్పుడు, ప్రతి ఆర్ట్‌బోర్డ్‌లో, రంగు యొక్క ముదురు మరియు తేలికపాటి వైవిధ్యాలను ప్రదర్శించే అదనపు చిన్న దీర్ఘచతురస్రాలను సృష్టించండి మరియు ఇతర రంగులు కూడా ఉంటాయి.

మేము కొద్దిగా తేలికైన మరియు ముదురు రంగును వరుసగా 10 శాతం అదనపు తెలుపు మరియు 10 శాతం అదనపు నలుపుగా పరిగణిస్తాము. మీరు పూర్తి చేసినప్పుడు, ప్రతి ఆర్ట్‌బోర్డ్‌లో టైపోగ్రాఫిక్ శైలుల కాపీని ప్రదర్శించండి. ఈ వచన పొరల రంగు తటస్థ కాంతిగా ఉండాలి, తటస్థ కాంతి ఆర్ట్‌బోర్డ్‌లో తప్ప అవి తటస్థ చీకటిగా ఉండాలి.

విరుద్ధంగా

తరువాత మేము సరైన రంగు కాంట్రాస్ట్ కోసం మా రంగులను తనిఖీ చేయాలి. దీన్ని చేయగల అనేక రకాల ఉపకరణాలు ఉన్నాయి, ఉదాహరణకు స్కెచ్ మరియు అడోబ్ ఎక్స్‌డి కోసం స్టార్క్ ప్లగ్ఇన్ లేదా మాకోస్ కోసం కాంట్రాస్ట్ - అయితే, కాంట్రాస్ట్ చెకర్ లేదా కలర్ కాంట్రాస్ట్ చెకర్ వంటి ఆన్‌లైన్ పరిష్కారం బాగానే ఉంటుంది.

ప్రతి కలయికకు రంగు విరుద్ధంగా తనిఖీ చేయండి మరియు తదనుగుణంగా రంగులను సర్దుబాటు చేయండి. ఏ రంగులను ఉపయోగించాలో మీకు తెలియకపోతే, కలర్ సేఫ్ సిఫార్సులను ఉపయోగించడానికి ప్రయత్నించండి.

03. శైలి లింకులు మరియు బటన్లు

పరిమాణం

టైపోగ్రఫీ మాదిరిగా బటన్లు మరియు లింక్‌లు కొన్ని వైవిధ్యాలను కలిగి ఉండాలి. అన్నింటికంటే, అన్ని చర్యలు సమాన స్థాయి ప్రాముఖ్యత కలిగి ఉండవు మరియు మేము ఇంతకుముందు చర్చించినట్లుగా, రంగు నమ్మదగని కమ్యూనికేషన్ పద్ధతి, కాబట్టి ఇది దృశ్య సోపానక్రమాన్ని ప్రభావితం చేసే ప్రధాన పద్ధతి కాదు. మేము పరిమాణంతో బొమ్మ కూడా అవసరం.

దృశ్య స్థోమత పరీక్ష అనేది ట్యాప్ లక్ష్యాలు క్లిక్ చేయదగినవిగా ఉన్నాయో లేదో తెలుసుకోవడానికి ఉపయోగించే వినియోగ పరీక్ష. డిజైన్‌ను స్టూడియో నుండి ఫ్రీహాండ్‌కు సమకాలీకరించండి (F), ఫలిత URL ను పరీక్షకులకు పంపండి మరియు వారు క్లిక్ చేయగలరని వారు విశ్వసించే అంశాలను సర్కిల్ చేయండి.

నాన్-ఇన్విజన్ స్టూడియో వినియోగదారులు ఫ్రీహ్యాండ్‌ను కూడా ఉపయోగించవచ్చు, కాని ఇన్విజన్ స్టూడియో వినియోగదారులు తమ డిజైన్లను ఇన్విజన్ స్టూడియో నుండి సజావుగా ఫ్రీహ్యాండ్‌లోకి ప్రవేశపెట్టవచ్చు, ఇది వినియోగదారుల నుండి దృశ్యమాన అభిప్రాయాన్ని పొందే వేగవంతమైన మరియు సమర్థవంతమైన మార్గం.

సాధారణంగా, బటన్ వచనాన్ని 18px (బాడీ టెక్స్ట్ మాదిరిగానే) గా ప్రకటించాలని మేము సిఫారసు చేస్తాము కాని బటన్లు వాటి పరిమాణంలో మూడు వైవిధ్యాలను కలిగి ఉంటాయి:

• సాధారణం: ఎత్తు 44px (గుండ్రని మూలలు: 5px)
• పెద్దది: ఎత్తు 54px (గుండ్రని మూలలు: 10px)
• చాలా పెద్దది: ఎత్తు 64px (గుండ్రని మూలలు: 15px)

రంగుపై ఆధారపడకుండా మరియు గూడు బటన్లకు కూడా కొన్ని బటన్లు చాలా ముఖ్యమైనవిగా కనిపించేలా చేయడానికి ఇది మాకు సహాయపడుతుంది (ఉదాహరణకు, కనిష్టంగా కనిపించే ఫారమ్ ఫీల్డ్ లోపల ఒక బటన్‌ను ఉపయోగించండి).

లోతు

ట్యాప్ లక్ష్యం బటన్ లేదా ఫారమ్ ఫీల్డ్ అనేదానితో సంబంధం లేకుండా, లోతు పెంచడానికి నీడలను ఉపయోగించాలి మరియు అందువల్ల ఇంటరాక్టివిటీని సూచిస్తుంది. బటన్లు మరియు ఫారమ్ ఫీల్డ్‌ల యొక్క అన్ని వేరియంట్‌లకు ఒకే నీడ శైలి మంచిది.

ఇంటరాక్టివిటీ

ప్రతి బటన్ రకానికి దాని హోవర్ స్థితిని సూచించడానికి వైవిధ్యం అవసరం. ఇది వినియోగదారుకు వారు ప్రయత్నించినది పూర్తిగా మంచిది అని స్పష్టం చేస్తుంది మరియు ఆలస్యం చేయకుండా వారు కొనసాగిస్తారని నిర్ధారిస్తుంది.

దృశ్యమాన అనుగుణ్యతను కాపాడుకోవడంలో ఇది చాలా క్లిష్టమైన అంశాలలో ఒకటి, ఎందుకంటే ఒక స్థితిని సృష్టించేటప్పుడు రంగు తరచుగా మారడానికి ఇష్టపడే శైలి. కృతజ్ఞతగా, ఈ స్థితి మార్పులు సాపేక్షంగా సూక్ష్మంగా ఉంటాయి, కాబట్టి రంగును దాని తేలికైన లేదా ముదురు వైవిధ్యంగా మార్చడం మంచిది - అవి వాటి కోసం. ఇది లింక్‌లకు కూడా వర్తిస్తుంది.

దీనికి వ్యతిరేకంగా నిర్ణయం తీసుకోవడం మనకు ఇప్పటికే ముఖ్యమైన అర్ధాన్ని కలిగి ఉన్న రంగును ఉపయోగించుకుంటుంది, ఫలితంగా వినియోగదారులు గందరగోళానికి గురవుతారు, లేదంటే మరొక రంగుతో రావాలని నిర్ణయించుకుంటారు. ద్వితీయ రంగును ఉపయోగించాలని నిర్ణయించుకోవడం పూర్తిగా మంచిది, అయితే ఇది UI మూలకాల కంటే విజువల్స్ మార్కెటింగ్ కోసం సేవ్ చేయాలి. తక్కువ ఎక్కువ (మరియు సులభం).

ప్రతి ఆర్ట్‌బోర్డ్ కోసం ఈ దశను పునరావృతం చేయడం గుర్తుంచుకోండి. బ్రాండ్ ఆర్ట్‌బోర్డ్‌లో బ్రాండెడ్ CTA బటన్లను చేర్చవద్దు - తరువాత కొన్ని కలయికలు పని చేయనప్పుడు ఏమి జరుగుతుందో మేము కవర్ చేస్తాము.

04. మీ భాగాలను సృష్టించండి

భాగాలు భారీ టైమ్ సేవర్ మరియు అన్ని UI డిజైన్ సాధనాలు ఈ లక్షణాన్ని అందిస్తాయి (ఉదా. స్కెచ్‌లో, వాటిని చిహ్నాలు అని పిలుస్తారు). స్టూడియోలో మనం కాంపోనెంట్‌ను తయారు చేయాల్సిన అన్ని లేయర్‌లను ఎంచుకుని using ఉపయోగించి భాగాలను సృష్టించవచ్చుకె సత్వరమార్గం.

భాగాలను ఉపయోగించడం

వైర్‌ఫ్రేమ్‌లు చాలా ఉపయోగకరంగా ఉంటాయి, అధిక-వినియోగం గల UI లను రూపొందించడానికి మాత్రమే కాకుండా, దీర్ఘకాలంలో మా UI కి ఏమి అవసరమో తెలుసుకోవడానికి కూడా. ఇది భవిష్యత్ ప్రూఫింగ్ వంటిది.

దీని అర్థం మనం చాలా భాగాలను రూపకల్పన చేయాల్సిన అవసరం ఉందని లేదా ఏదైనా సాధ్యమైన దృష్టాంతానికి సిద్ధంగా ఉండాలని కాదు, కానీ దీని అర్థం మనం ‘ఏమి ఉంటే?’ వైఖరిని ఉపయోగించాల్సిన అవసరం ఉంది.

ఉదాహరణకు, మా వైర్‌ఫ్రేమ్ 3x1 భాగం కోసం పిలిచినా, ఆ కంటెంట్ రాతితో అమర్చబడలేదని మాకు తెలిస్తే, కొంచెం ఆలోచించడం మమ్మల్ని ఆశ్చర్యానికి గురి చేస్తుంది: ’ఈ భాగాలు 4x1 గా ముగుస్తుంటే?’. నియమం యొక్క నియమం: ఇప్పటికే ఉన్న వినియోగదారు అవసరాలకు మాత్రమే రూపకల్పన కానీ పరిష్కారాలను సాపేక్షంగా సరళంగా చేయడానికి ప్రయత్నించండి. లేకపోతే, మేము చాలా గందరగోళంగా ఉన్న ‘డిజైన్ debt ణంతో’ తరువాత పంక్తికి దిగుతాము.

ఇప్పుడు మేము ఈ భాగాన్ని ఎడమ వైపున ఉన్న లైబ్రరీస్> డాక్యుమెంట్ నుండి కాన్వాస్‌పైకి లాగడం ద్వారా దాన్ని తిరిగి ఉపయోగించుకోవచ్చు, అయినప్పటికీ మీ UI సాధనాన్ని బట్టి ఈ వర్క్‌ఫ్లో తేడా ఉండవచ్చని గుర్తుంచుకోండి.

స్టైల్ గైడ్‌లను సృష్టించే ఈ పద్ధతి (చివరికి డిజైన్‌ను సృష్టించడం) మాడ్యులర్ / కార్డ్-ఆధారిత లేఅవుట్‌లతో బాగా పనిచేస్తుంది, అయినప్పటికీ శీర్షికలు, ఫుటర్లు మరియు నావిగేషన్‌లు వంటి ‘సాధారణ ప్రాంతాలు’ కూడా ఒక భాగం కోసం అద్భుతమైన అభ్యర్థులు.

మేము మా టైపోగ్రాఫిక్ శైలులు, రంగులు మరియు బటన్లతో చేసినట్లే, మా భాగాలను జాగ్రత్తగా నిర్వహించాలని గుర్తుంచుకోవాలి.

మా నియమాలను ఉపయోగించడం

బ్రాండ్ CTA బటన్లు స్పష్టంగా మిగతా వాటి మధ్య నిలబడవలసిన అవసరం ఉన్నందున, బ్రాండ్ రంగు పైన బ్రాండెడ్ CTA బటన్లను ఉపయోగించకూడదని మేము ఇంతకుముందు వ్యాఖ్యానించాము. బ్రాండెడ్ CTA బటన్‌ను ఉపయోగించగలిగేటప్పుడు బ్రాండెడ్ భాగాన్ని సృష్టించడం గురించి మనం ఎలా వెళ్తాము? అన్నింటికంటే, మేము తటస్థ చీకటి బటన్లను ఉపయోగిస్తుంటే, నావిగేషనల్ బటన్లు లేదా తక్కువ-ముఖ్యమైన బటన్ల కోసం ఉపయోగిద్దాం, అది ఒక ఎంపిక కాదు, సరియైనదా?

కుడి. కాబట్టి ఇది ఒక భాగాన్ని సృష్టించడానికి అనువైన అవకాశం - ప్రత్యేకంగా, శీర్షిక + టెక్స్ట్ + బటన్ కలయిక. బ్రాండెడ్ బటన్ వాడకాన్ని ప్రారంభించడానికి నేను తటస్థ కాంతి ‘కార్డ్’ బ్యాక్‌డ్రాప్‌ను ఎలా సృష్టించానో గమనించండి. అదేవిధంగా, తటస్థ కాంతి రూప క్షేత్రం (చారిత్రాత్మకంగా కాగితపు రూపాలకు పర్యాయపదంగా ఉన్న మానసిక నమూనా కారణంగా ఫారమ్ ఫీల్డ్‌లు సాధారణంగా తెల్లగా ఉంటాయి) తటస్థ కాంతి నేపథ్యంలో ఆశ్చర్యంగా అనిపించదు కాబట్టి అవి తటస్థ చీకటి నేపథ్యంలో మాత్రమే ఉపయోగించబడతాయి - ప్రత్యక్షంగా లేదా లోపల తటస్థ చీకటి భాగం. మా నియమాలను పాటిస్తూ, స్థిరత్వాన్ని కొనసాగిస్తూనే మేము మా డిజైన్‌ను సరళంగా చేస్తాము.

ఒత్తిడి పరీక్ష

ఆదర్శవంతంగా, మా రూపకల్పనలో దృ ness త్వాన్ని నిర్ధారించే వేగవంతమైన మరియు అత్యంత ప్రభావవంతమైన మార్గం దాన్ని పరీక్షించడం. ఒక నమూనాను పరీక్షకు పెట్టడం అంటే క్రూరంగా ఉండటం. మనకు X మొత్తంలో నావి ఐటెమ్‌లతో నావిగేషన్ ఉందని చెప్పండి, ఎందుకంటే ఇది అవసరం; వశ్యతను నిజంగా నిర్ధారించడానికి, మరిన్ని nav అంశాలను జోడించడం ద్వారా ఈ అవసరాలను మార్చడానికి ప్రయత్నించండి లేదా, పనిలో ఒక స్పేనర్‌ను నిజంగా విసిరేయడానికి, ఇతరులకన్నా ఎక్కువ దృశ్య శ్రేణితో ఒక nav అంశాన్ని జోడించడానికి కూడా ప్రయత్నించండి. మన పరిమాణం, టైపోగ్రఫీ మరియు రంగు నియమాలు ఇలాంటి వాటికి అనుమతిస్తాయా? లేదా సరైన వినియోగాన్ని అందించడానికి మనకు మరొక నియమం అవసరమా?

నియమాలను జోడించడం మరియు నియమాలను వంచడం మధ్య వ్యత్యాసం ఉందని గుర్తుంచుకోండి. ఎక్కువ అంచు కేసులు తక్కువ అనుగుణ్యత అని అర్ధం, కాబట్టి ఎక్కువ భాగం వినియోగం కోసం ఈ భాగాన్ని పునరాలోచించడం మంచిది.

05. డాక్యుమెంట్ మరియు సహకరించండి

మన డిజైన్ ఫైళ్ళను మనకు మరియు మా డిజైన్ ఫైల్ను ఉపయోగించగల ఇతర డిజైనర్లకు ఎలా ఉపయోగించగలం? మీరు కనుగొన్నట్లుగా, వాటిని నమ్మదగిన, భాగస్వామ్య క్లౌడ్ నిల్వలో భద్రంగా ఉంచడం చాలా ముఖ్యం.

రంగులు

మొదటి దశ ఏమిటంటే, మేము ఇప్పటికే పూర్తి చేయకపోతే అన్ని రంగులను ‘డాక్యుమెంట్ కలర్స్’ స్వాచ్‌లో సేవ్ చేయడం - ఇది మా డిజైన్‌లో వాటిని వర్తింపజేయాల్సిన అవసరం వచ్చినప్పుడు వాటిని యాక్సెస్ చేయడం సులభం చేస్తుంది.ఇది చేయుటకు, ఇన్స్పెక్టర్ నుండి కలర్ ఛూజర్ విడ్జెట్ తెరిచి, డ్రాప్డౌన్ నుండి ‘డాక్యుమెంట్ కలర్స్’ ఎంచుకుని, ఆపై స్వాచ్ కు రంగును జోడించడానికి + ఐకాన్ క్లిక్ చేయండి. చాలా UI సాధనాల్లో ఇది అదే విధంగా పనిచేస్తుంది.

భాగస్వామ్య గ్రంథాలయాలు

తరువాత, టైపోగ్రాఫిక్ శైలులు, రంగులు, బటన్లు, సాధారణ ప్రాంతాలు మరియు ప్రాథమిక భాగాలతో పూర్తి చేసిన మా పత్రాన్ని భాగస్వామ్య లైబ్రరీగా మార్చాలి.

తప్పనిసరిగా దీని అర్థం, ప్రతి మూలకం ఒక పొర మాత్రమే కలిగి ఉన్నప్పటికీ, ఒక భాగం కావాలి. ఎడమ చేతి గ్రంథాలయాల సైడ్‌బార్‌లోని + button బటన్‌ను క్లిక్ చేసి, ఆపై ఈ పత్రాన్ని క్రొత్త పత్రంలోకి దిగుమతి చేయండి. ఇది నిజం: మా పత్రం ఇప్పుడు లైబ్రరీ మరియు హామీ అనుగుణ్యతతో UI లను రూపొందించడానికి ఉపయోగించడానికి సిద్ధంగా ఉంది.

ఇన్విజన్ స్టూడియో కొంతవరకు పరిమితం చేయబడింది, ఇది ఇంకా ఇన్విజన్ యొక్క అధికారిక డిజైన్ సిస్టమ్ మేనేజర్ సాధనంతో సమకాలీకరించలేదు, అయితే ఇతర డిజైనర్లు కాలక్రమేణా ఉపయోగించడానికి మరియు నవీకరించడానికి డ్రాప్‌బాక్స్‌లోని లైబ్రరీని ఉంచడానికి ఇది చాలా సులభం. మార్పు చేసినప్పుడు (స్థానికంగా లేదా రిమోట్‌గా), లైబ్రరీని ఉపయోగించే ప్రతి స్టూడియో ఫైల్ (మళ్ళీ, స్థానికంగా లేదా రిమోట్‌గా) మీరు రంగులు మరియు భాగాలను నవీకరించాలనుకుంటున్నారా అని అడుగుతుంది. జట్ల మధ్య డిజైన్ లైబ్రరీలను ఈ విధంగా నిర్వహిస్తారు.

దృశ్యమానంగా ఉండే వినియోగదారు ఇంటర్‌ఫేస్‌ల రూపకల్పన విషయానికి వస్తే, ప్రతిదీ తిరిగి ఉపయోగించుకోండి. బటన్లను డిజైన్ చేయండి, ఆపై బటన్ భాగాలను సృష్టించడానికి బటన్లను ఉపయోగించండి, ఆపై ఉపయోగించండి
హెచ్చరికలు మరియు డైలాగ్‌లు వంటి ఇతర భాగాలను సృష్టించడానికి బటన్ భాగాలు.

అవసరం లేని భాగాలను సృష్టించవద్దు. గుర్తుంచుకోండి, లైబ్రరీని నిర్మించడం అనేది కొనసాగుతున్న, సహకార ప్రయత్నం. ఇది ఒకేసారి పూర్తి చేయవలసిన అవసరం లేదు, మీరు ఒంటరిగా పూర్తి చేసారు లేదా ఎప్పుడూ పూర్తి చేయరు. ఇది ఒక భాషను మాత్రమే తెలియజేయాలి.

స్కేల్ వద్ద డిజైన్

డిజైన్ విస్తరిస్తున్న కొద్దీ దాన్ని నిర్వహించడం కష్టమవుతుంది. ఇన్విజన్ యొక్క DSM స్టూడియోతో ఇంకా పని చేయనందున, దీన్ని సమర్థవంతంగా మరియు నిర్వహించడానికి మేము వివిధ సర్దుబాట్లు చేయాలనుకుంటున్నాము.

ఉదాహరణకు, వివిధ అంశాల ఉపయోగం-సందర్భాలను వివరించే సాధనంగా మా లైబ్రరీని ఉల్లేఖించడానికి టెక్స్ట్ లేయర్‌లను ఉపయోగించాలనుకోవచ్చు. టైపోగ్రాఫిక్ శైలుల కోసం, మేము టెక్స్ట్‌ను మరింత వివరణాత్మకంగా సవరించవచ్చు (ఉదా. "H1> / 1.3 / 44px"). ఇది చెప్పింది h1>s 44px ఉండాలి మరియు లైన్ ఎత్తు 1.3 ఉండాలి.

డిజైన్ హ్యాండ్ఆఫ్

డిజైన్ హ్యాండ్ఆఫ్ సాధనాలు డిజైన్‌లోని ప్రతి మూలకం ఉపయోగించే వివిధ శైలులను ప్రదర్శిస్తాయి, తద్వారా డెవలపర్లు అనువర్తనం లేదా వెబ్‌సైట్‌ను నిర్మించగలరు. ఈ సాధనాల్లో శైలుల యొక్క అవలోకనం మరియు ‘డాక్యుమెంట్ కలర్స్’ స్వాచ్ యొక్క కాపీ కూడా ఉన్నాయి. డెవలపర్లు ఈ శైలులను కోడ్‌గా కూడా కాపీ చేయవచ్చు, మీరు ఏదైనా వ్రాతపూర్వక డిజైన్ డాక్యుమెంటేషన్‌ను సృష్టించాలని నిర్ణయించుకుంటే మరియు మీరు భాగాల కోడ్ స్నిప్పెట్ ప్రాతినిధ్యాలను చేర్చాలనుకుంటే ఇది చాలా బాగుంది.

వెబ్‌సైట్‌ను ట్రబుల్షూటింగ్ మరియు నిర్వహించడం గురించి మీరు ఆందోళన చెందుతుంటే, మీకు సరైన వెబ్ హోస్టింగ్ సేవ లభించిందని నిర్ధారించుకోవడం సహాయపడుతుంది, కానీ మీ డిజైన్ సిస్టమ్ కోసం, ఇన్విజన్ యొక్క డిజైన్ హ్యాండ్ఆఫ్ సాధనం, తనిఖీ, ఉపయోగించాల్సిన విషయం. దీన్ని ఉపయోగించుకోవడానికి, మేము ఇన్విజన్ స్టూడియోలోని ‘పబ్లిష్ టు ఇన్విజన్’ బటన్ / ఐకాన్ క్లిక్ చేసి, ఫలిత URL ను తెరిచి, ఆపై తనిఖీ మోడ్‌కు మారడానికి నొక్కండి. ఇది నిజంగా సౌకర్యవంతంగా ఉంటుంది.

ఈ కంటెంట్ మొదట నెట్ మ్యాగజైన్‌లో కనిపించింది.