இறுதி UI வடிவமைப்பு வழிகாட்டி

உள்ளடக்கம்

• 01. உங்கள் அச்சுக்கலை தேர்வு செய்யவும்
• 02. சரியான தட்டு எடுக்கவும்
• 03. உடை இணைப்புகள் மற்றும் பொத்தான்கள்
• 04. உங்கள் கூறுகளை உருவாக்கவும்
• 05. ஆவணப்படுத்தவும் ஒத்துழைக்கவும்

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

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

01. உங்கள் அச்சுக்கலை தேர்வு செய்யவும்

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

இருப்பினும், நன்கு வடிவமைக்கப்பட்ட அச்சுக்கலை இன்னும் அழகாக திருப்திகரமாக இருக்கும். பிளாக்-ஆன்-வைட் ஹெல்வெடிகா (அல்லது இதே போன்ற எழுத்துரு) ஒரு சில எளிய அச்சுக்கலை மேம்பாடுகளுக்குப் பிறகு அழகுக்கான ஒரு விஷயமாக இருக்கலாம். மேம்பாடுகளால், எழுத்துரு அளவு, வரி உயரம், எழுத்து இடைவெளி மற்றும் பலவற்றை முறுக்குவதை நாங்கள் குறிக்கிறோம் - எழுத்துரு அல்லது உரையின் நிறம் அல்ல.

‘அழகான’ அச்சுக்கலை உண்மையில் படிக்க முடியாதபோது அசிங்கமாக இருக்கிறது, ஏனெனில் விரக்தி எப்போதும் அழகியலைத் தூண்டுகிறது. சிறந்த வடிவமைப்பு சீரானது மற்றும் இணக்கமானது.

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

தெளிவு மற்றும் வாசிப்புத்தன்மைக்கு வரும்போது, ​​WCAG 2.0 வலை உள்ளடக்க அணுகல் வழிகாட்டுதல்களால் வரையறுக்கப்பட்ட குறைந்தபட்ச ஏற்றுக்கொள்ளக்கூடிய எழுத்துரு அளவு 18pt (அல்லது 14pt தைரியம்) ஆகும். பயன்படுத்த சிறந்த எழுத்துரு அளவு பெரும்பாலும் எழுத்துருவைப் பொறுத்தது, ஆனால் காட்சி வரிசைக்கு கவனமாக இருப்பது முக்கியம் மற்றும் இந்த அடிப்படை அளவு சுருக்கங்கள் மற்றும் தலைப்புகளிலிருந்து தன்னை எவ்வாறு வேறுபடுத்துகிறது (அதாவது h1>, h2>, h3>).

உங்கள் UI வடிவமைப்பு கருவி மூலம் (நாங்கள் இன்விஷன் ஸ்டுடியோவைப் பயன்படுத்துவோம்), தொடர்ச்சியான உரை அடுக்குகளை உருவாக்கவும் (டி) பின்னர் பின்வரும் வார்ப்புருவுடன் தொடர்புபடுத்த அனைத்து அளவுகளையும் சரிசெய்யவும்:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

இன்விஷன் ஸ்டுடியோவுடன் (மற்றும் பிற UI வடிவமைப்பு கருவிகள்), வலது புறத்தில் இன்ஸ்பெக்டர் பேனலைப் பயன்படுத்தி பாணிகளை சரிசெய்வதன் மூலம் இது செய்யப்படுகிறது.

அடுத்து உங்கள் எழுத்துருவைத் தேர்வுசெய்க, ஆனால் ஜாக்கிரதை, ஏனென்றால் சில எழுத்துருக்களுடன் நீங்கள் கவனிக்கக்கூடியது 18px p> மற்றும் 22px h3> எல்லாவற்றையும் வித்தியாசமாகக் காணவில்லை. எங்களுக்கு இரண்டு தேர்வுகள் உள்ளன: எழுத்துரு அளவுகளை மாற்றவும் அல்லது தலைப்புகளுக்கு வேறு எழுத்துருவைக் கவனியுங்கள். உங்கள் வடிவமைப்பு உரை-கனமாக இருக்கும் என்று நீங்கள் எதிர்பார்த்தால் பிந்தையவற்றுடன் செல்லுங்கள்.

அதை நினைவில் கொள்ளுங்கள்:

• விஷுவல் யுஐ வடிவமைப்பு பெரும்பாலும் குடல் உணர்வு அணுகுமுறையாகும்
• எதுவும் முடிவு செய்யப்படவில்லை; எல்லாம் மாற்றத்திற்கு உட்பட்டது

வரி உயரம்

உகந்த வரி உயரம் ஒழுக்கமான அளவிலான வாசிப்புத்தன்மையை அடைவதற்கு உரை வரிகளுக்கு இடையில் போதுமான இடைவெளி இருப்பதை உறுதி செய்கிறது. இது ஒரு ‘தரநிலை’ என்று மேலும் மேலும் அங்கீகரிக்கப்பட்டு வருகிறது; கூகிளின் லைட்ஹவுஸ் தணிக்கைக் கருவி அதை ஒரு கையேடு சரிபார்ப்பாகக் கூட பரிந்துரைக்கிறது (அல்லது உரையில் இணைப்புகள் இருந்தால், ஒரு துணை வரி உயரத்தின் விளைவாக மிக நெருக்கமாக இருக்கலாம்).

மீண்டும், WCAG இதை நமக்கு உதவுகிறது, அந்த வரி உயரங்கள் எழுத்துரு அளவு 1.5x ஆக இருக்க வேண்டும் என்று அறிவிக்கிறது. எனவே, உங்கள் UI வடிவமைப்பு கருவியில் ’வரி’ (அல்லது ஒத்த) கீழ், எழுத்துரு அளவை - குறைந்தது - 1.5 ஆல் பெருக்கவும். உதாரணமாக, உடல் உரை 18px ஆக இருந்தால், வரி உயரம் 27px ஆக இருக்கும் (18 * 1.5 - நீங்கள் கணித செயல்பாட்டை நேரடியாக இன்ஸ்பெக்டரில் இயக்கலாம்). மீண்டும், கவனமாக இருங்கள் - 1.6x ஒரு சிறந்த பொருத்தமாக உணர்ந்தால், 1.6x ஐப் பயன்படுத்தவும். வெவ்வேறு எழுத்துருக்கள் வெவ்வேறு முடிவுகளை வெளியிடும் என்பதை நினைவில் கொள்ளுங்கள்.

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

பத்தி இடைவெளி

பத்தி இடைவெளி என்பது இன்விஷன் ஸ்டுடியோ இன்ஸ்பெக்டரைப் பயன்படுத்தி அறிவிக்கக்கூடிய ஒரு பாணி அல்ல. அதற்கு பதிலாக, ஸ்மார்ட் வழிகாட்டிகளை (⌥) பயன்படுத்தி அடுக்குகளை கைமுறையாக சீரமைக்க வேண்டும். வரி உயரத்தைப் போலவே, மேஜிக் பெருக்கி 2x (எழுத்துரு அளவை விட இரட்டிப்பாகும்). உதாரணமாக, எழுத்துரு அளவு 18px ஆக இருந்தால், அடுத்த உரைத் தொகுதிக்குள் செல்வதற்கு முன் குறைந்தது 36px இடம் இருக்க வேண்டும். கடிதம் இடைவெளி குறைந்தது 0.12 ஆக இருக்க வேண்டும்.

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

பகிரப்பட்ட பாணிகள்

உங்கள் UI வடிவமைப்பு கருவி அதை ஆதரித்தால் (இன்விஷன் ஸ்டுடியோ இன்னும் இல்லை), இந்த அச்சுக்கலை பாணிகளை ‘பகிரப்பட்ட பாணிகளாக’ மாற்றுவதைக் கருத்தில் கொண்டு, காட்சி நிலைத்தன்மையை உறுதிசெய்து விரைவாக மீண்டும் பயன்படுத்தக்கூடியதாக மாற்றவும். இது வழக்கமாக இன்ஸ்பெக்டர் வழியாக செய்யப்படுகிறது.

02. சரியான தட்டு எடுக்கவும்

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

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

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

01. ஸ்டார்க்
ஸ்டார்க் சொருகி ஸ்கெட்ச் மற்றும் அடோப் எக்ஸ்டியுடன் இணக்கமானது மற்றும் வண்ண மாறுபாட்டை சரிபார்க்கவும், கேன்வாஸிலிருந்து நேரடியாக வண்ண குருட்டுத்தன்மையை உருவகப்படுத்தவும் உதவுகிறது. ஃபிக்மா மற்றும் இன்விஷன் ஸ்டுடியோவுக்கான ஆதரவு மிக விரைவில்.
02.வண்ணங்கள்
வண்ணங்கள் என்பது 90 வண்ண சேர்க்கைகளின் தொகுப்பாகும், அவை WCAG 2.0 வழிகாட்டுதல்களை பூர்த்தி செய்வதற்காக பொருத்தமான அளவு மாறுபாட்டைக் கொண்டுள்ளன - அவற்றில் சில AAA தரத்தை பூர்த்தி செய்ய கூட நிர்வகிக்கின்றன.
03. A11y திட்டம்
A11y திட்டம் அணுகல் தொடர்பான அனைத்து விஷயங்களுக்கும் ஒரு பெரிய மையமாகும். இது வளங்கள், கருவிகள், உதவிக்குறிப்புகள், பயிற்சிகள் ஆகியவற்றை உள்ளடக்கியது மற்றும் ஸ்டார்க் சொருகி தயாரிப்பாளரால் உருவாக்கப்பட்டது மற்றும் இன்விசனிலிருந்து நிதியுதவியைப் பெறுகிறது.

மூன்று வகையான வண்ணம்

வண்ணங்கள் பொருளைக் கொண்டுள்ளன, எனவே அவற்றில் அதிகமானவை இல்லாதது முக்கியம். பல அர்த்தங்கள் பயனர் புரிந்துகொள்ள வேண்டிய மற்றும் நினைவில் கொள்ள வேண்டிய பல விஷயங்களில் விளைகின்றன - நாம் கவலைப்பட அதிக வண்ண சேர்க்கைகளை குறிப்பிட தேவையில்லை. பொதுவாக, இது பரிந்துரைக்கப்பட்ட வடிவமாக இருக்கும்:

• அழைப்பு-க்கு-செயல் வண்ணம் (முக்கிய பிராண்ட் வண்ணமும்)
• நடுநிலை இருண்ட நிறம் (UI கூறுகள் அல்லது இருண்ட பயன்முறைக்கு சிறந்தது)
• மேலே உள்ள அனைத்திற்கும், சற்று இலகுவான மற்றும் இருண்ட மாறுபாடு

இது பின்வருவனவற்றை செயல்படுத்துகிறது:

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

உங்கள் தட்டு அமைக்கவும்

உங்கள் UI வடிவமைப்பு கருவி மூலம், ஒவ்வொரு வண்ணத்திற்கும் ஒரு பெரிய ஆர்ட்போர்டை உருவாக்கவும் (A ஐத் தட்டவும்) (‘பிராண்ட்’, ’நடுநிலை / ஒளி’ மற்றும் ‘நடுநிலை / இருண்ட’ என பெயரிடப்பட்டது). பின்னர், ஒவ்வொரு ஆர்ட்போர்டிலும், வண்ணத்தின் இருண்ட மற்றும் இலகுவான மாறுபாடுகளைக் காட்டும் கூடுதல் சிறிய செவ்வகங்களை உருவாக்கவும், மற்ற வண்ணங்களும் தங்களைத் தாங்களே உருவாக்குகின்றன.

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

மாறுபாடு

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

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

03. உடை இணைப்புகள் மற்றும் பொத்தான்கள்

அளவு

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

ஒரு காட்சி மலிவு சோதனை என்பது குழாய் இலக்குகள் கிளிக் செய்யக்கூடியதாகத் தோன்றுகிறதா என்பதைத் தீர்மானிக்கப் பயன்படும் பயன்பாட்டு சோதனை. வடிவமைப்பை ஸ்டுடியோவிலிருந்து ஃப்ரீஹேண்ட் வரை ஒத்திசைக்கவும் (F), இதன் விளைவாக வரும் URL ஐ சோதனையாளர்களுக்கு அனுப்பவும், கிளிக் செய்யக்கூடியது என்று அவர்கள் நம்பும் கூறுகளை வட்டமிடவும்.

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

பொதுவாக, பொத்தான் உரையை 18px (உடல் உரையைப் போலவே) என அறிவிக்க பரிந்துரைக்கிறோம், ஆனால் பொத்தான்கள் தங்களுக்கு மூன்று வேறுபாடுகள் உள்ளன:

• இயல்பானது: 44px உயரம் (வட்டமான மூலைகள்: 5px)
• பெரியது: 54px உயரம் (வட்டமான மூலைகள்: 10px)
• கூடுதல் பெரியது: 64px உயரம் (வட்டமான மூலைகள்: 15px)

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

ஆழம்

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

ஊடாடும் தன்மை

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

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

இதற்கு எதிராக முடிவெடுப்பது, ஏற்கனவே குறிப்பிடத்தக்க பொருளைக் கொண்ட ஒரு வண்ணத்தைப் பயன்படுத்துவதற்கு வழிவகுக்கும், இதன் விளைவாக பயனர்கள் குழப்பமடைவார்கள், இல்லையெனில் மற்றொரு நிறத்தைக் கொண்டு வர முடிவு செய்கிறார்கள். இரண்டாம் வண்ணத்தைப் பயன்படுத்த முடிவு செய்வது முற்றிலும் நல்லது, ஆனால் இது UI கூறுகளைக் காட்டிலும் சந்தைப்படுத்தல் காட்சிகளுக்கு சேமிக்கப்பட வேண்டும். குறைவானது அதிகம் (மற்றும் எளிதானது).

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

04. உங்கள் கூறுகளை உருவாக்கவும்

கூறுகள் ஒரு பெரிய நேர சேமிப்பாளர் மற்றும் அனைத்து UI வடிவமைப்பு கருவிகளும் இந்த அம்சத்தை வழங்குகின்றன (எ.கா. ஸ்கெட்சில், அவை சின்னங்கள் என்று அழைக்கப்படுகின்றன). ஸ்டுடியோவில் நாம் கூறுகளை உருவாக்க வேண்டிய அனைத்து அடுக்குகளையும் தேர்ந்தெடுத்து using ஐப் பயன்படுத்தி கூறுகளை உருவாக்கலாம்கே குறுக்குவழி.

கூறுகளைப் பயன்படுத்துதல்

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

இதன் பொருள் நாம் நிறைய கூறுகளை வடிவமைக்க வேண்டும் அல்லது சாத்தியமான எந்தவொரு சூழ்நிலையிலும் தயாராக இருக்க வேண்டும் என்று அர்த்தமல்ல, ஆனால் இதன் பொருள் நாம் ஒரு ‘என்ன என்றால்?’ அணுகுமுறையைப் பயன்படுத்த வேண்டும் என்பதாகும்.

எடுத்துக்காட்டாக, எங்கள் வயர்ஃப்ரேம் 3x1 கூறுக்கு அழைப்பு விடுத்தாலும், உள்ளடக்கம் கல்லில் அமைக்கப்படவில்லை என்பது எங்களுக்குத் தெரிந்தால், ஒரு சிறிய சிந்தனை நம்மை ஆச்சரியப்படுத்தக்கூடும்: ’இந்த கூறுகள் 4x1 ஆக முடிவடைந்தால் என்ன?’. கட்டைவிரல் விதிமுறை: ஏற்கனவே இருக்கும் பயனர் தேவைகளுக்கு மட்டுமே வடிவமைப்பு ஆனால் தீர்வுகளை ஒப்பீட்டளவில் நெகிழ்வானதாக மாற்ற முயற்சிக்கவும். இல்லையெனில், சில குழப்பமான ‘வடிவமைப்புக் கடனுடன்’ பின்னர் வரிக்கு வருவோம்.

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

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

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

எங்கள் விதிகளைப் பயன்படுத்துதல்

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

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

அழுத்த சோதனை

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

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

05. ஆவணப்படுத்தவும் ஒத்துழைக்கவும்

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

வண்ணங்கள்

முதல் படி, நாங்கள் ஏற்கனவே செய்யவில்லை எனில், வண்ணங்கள் அனைத்தையும் ‘ஆவண வண்ணங்கள்’ ஸ்வாட்சில் சேமிப்பது - இது எங்கள் வடிவமைப்பில் அவற்றைப் பயன்படுத்த வேண்டியிருக்கும் போது அவற்றை அணுகுவதை எளிதாக்கும்.இதைச் செய்ய, இன்ஸ்பெக்டரிடமிருந்து வண்ண தேர்வி விட்ஜெட்டைத் திறந்து, கீழ்தோன்றலில் இருந்து ‘ஆவண வண்ணங்கள்’ என்பதைத் தேர்ந்தெடுத்து, ஸ்வாட்சில் வண்ணத்தைச் சேர்க்க + ஐகானைக் கிளிக் செய்க. பெரும்பாலான UI கருவிகளில் இது ஒரே மாதிரியாக செயல்படுகிறது.

பகிரப்பட்ட நூலகங்கள்

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

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

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

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

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

அளவில் வடிவமைப்பு

ஒரு வடிவமைப்பு விரிவடையும் போது, ​​அதை நிர்வகிப்பது கடினமாகிறது. இன்விஷனின் டிஎஸ்எம் இன்னும் ஸ்டுடியோவுடன் வேலை செய்யவில்லை என்பதால், அதை திறமையாகவும் பராமரிக்கக்கூடியதாகவும் வைத்திருக்க பல்வேறு மாற்றங்களை நாங்கள் செய்ய விரும்பலாம்.

உதாரணமாக, பல்வேறு கூறுகளின் பயன்பாடு-நிகழ்வுகளை விளக்கும் வழிமுறையாக எங்கள் நூலகத்தை குறிக்க உரை அடுக்குகளைப் பயன்படுத்த விரும்பலாம். அச்சுக்கலை பாணிகளுக்கு, உரையை இன்னும் விளக்கமாக இருக்கும்படி திருத்தலாம் (எ.கா. "h1> / 1.3 / 44px"). இது கூறுகிறது h1>கள் 44px ஆக இருக்க வேண்டும் மற்றும் ஒரு வரி உயரம் 1.3 ஆக இருக்க வேண்டும்.

வடிவமைப்பு கையளிப்பு

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

ஒரு வலைத்தளத்தை சரிசெய்தல் மற்றும் நிர்வகிப்பது குறித்து நீங்கள் கவலைப்படுகிறீர்களானால், சரியான வலை ஹோஸ்டிங் சேவையை நீங்கள் பெற்றுள்ளீர்கள் என்பதை உறுதிப்படுத்துவது உதவும், ஆனால் உங்கள் வடிவமைப்பு அமைப்புக்கு, இன்விஷனின் வடிவமைப்பு கையொப்ப கருவி, ஆய்வு, பயன்படுத்த வேண்டியது. இதைப் பயன்படுத்த, இன்விஷன் ஸ்டுடியோவில் உள்ள ‘இன்விஷனுக்கு வெளியிடு’ பொத்தானை / ஐகானைக் கிளிக் செய்து, அதன் விளைவாக வரும் URL ஐத் திறந்து, பின்னர் ஆய்வு முறைக்கு மாற தட்டவும். இது மிகவும் வசதியானது.

இந்த உள்ளடக்கம் முதலில் நிகர இதழில் தோன்றியது.