அண்ட்ராய்டு பயன்பாட்டு UI ஐ எவ்வாறு வடிவமைப்பது?

. ஆனால் டெவலப்பர்கள் ஏன் இதைச் செய்ய முடியாது?



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

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



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



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



இந்த கட்டுரையில், உங்களுக்கு கிட்டத்தட்ட வடிவமைப்பு அனுபவம் இல்லாவிட்டாலும், நேர்த்தியான Android APP UI / UX ஐ உருவாக்குவதற்கான சில எளிய வழிகளைப் பார்ப்போம்.

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

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

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



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

  • பொருள் தீம் எடிட்டர் (மேகோஸ் + ஸ்கெட்ச்)
  • பொருள் வடிவமைப்பு வண்ண தட்டு செருகுநிரல் (ஃபோட்டோஷாப் / இல்லஸ்ட்ரேட்டர்)
  • பொருள் வடிவமைப்பு UI கிட் PSD (ஃபோட்டோஷாப்)
  • Android பொருள் வடிவமைப்பு UI கிட் ( ஸ்கெட்ச்)
  • பொருள் UI தீம் ஜெனரேட்டர்

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

வண்ண சாய்வு நீங்கள் நினைப்பதை விட எளிதானது

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

ஃபோட்டோஷாப் சாய்வு UI இல் 10 வினாடிகள்.

இது எவ்வளவு எளிது என்பதைக் காண்பிப்பதற்காக நான் உங்களை இதைக் கொண்டு செல்வேன்.

மொபைலுக்கான புதிய PS திட்டத்தை உருவாக்கவும் ( 1080 x 1920 px @ 72 ppi நன்றாக வேலை செய்கிறது)

UIGradients.com - முன் தயாரிக்கப்பட்ட சாய்வுகளின் பெரிய தொகுப்பு.

செல்லுங்கள் UIGradients.com நீங்கள் விரும்பும் ஒன்றைக் கண்டுபிடி.

UIGradients இலிருந்து வண்ண ஹெக்ஸ் மதிப்புகளை நகலெடுக்கவும்

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

ஃபோட்டோஷாப் சாய்வு தேர்வுக்குழு.

PS இல் உள்ள வெற்று லேயரில் வலது கிளிக் செய்து, கலத்தல் விருப்பங்கள்> சாய்வு மேலடுக்கிற்குச் செல்லவும்.

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

UIGradient இலிருந்து PS சாய்வு கருவியில் உள்ளீட்டு ஹெக்ஸ் மதிப்புகள்.

இப்போது UIGradient இலிருந்து வண்ண ஹெக்ஸ் மதிப்புகளை PS சாய்வு எடிட்டரில் ஒட்டவும்.

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

சரிபார்க்க மதிப்புள்ள பிற சாய்வு கருவிகள்:

JPG / PNG க்கு பதிலாக SVG களைப் பயன்படுத்தவும்

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

மேலும், எஸ்.வி.ஜி கள் வரை இருக்கலாம் PNG ஐ விட கோப்பு அளவு 60% முதல் 80% வரை சிறியது . இதன் பொருள் உங்கள் பயன்பாடு அல்லது மொபைல் வலைத்தளம் பயனருக்கு வேகமாக ஏற்றப்படும், மேலும் திரை தெளிவுத்திறனைப் பொருட்படுத்தாமல் நன்றாக இருக்கும்.

Theme.AppCompat.DayNight ஐப் பயன்படுத்தி இருண்ட பயன்முறையைச் சேர்க்கவும்

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

Appual இன் வழிகாட்டியைப் பார்க்கவும் “ உங்கள் Android பயன்பாட்டில் இருண்ட பயன்முறையை எவ்வாறு செயல்படுத்தலாம் ”.

வார்ப்புரு அல்லது மொபைல் யுஐ கிட் பயன்படுத்தவும்

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

Android UI வார்ப்புருக்கள் மற்றும் கருவிகளுக்கான சில சிறந்த ஆதாரங்கள்:

  • ஸ்பெக்கிபாய் - IOS மற்றும் Android க்கான 50 இலவச மொபைல் UI கருவிகள்
  • SketchAppSources - Android UI பயன்பாட்டு வளங்கள் ( ஸ்கெட்ச்)
  • Freebiesbug - PSD UI கருவிகள் ( ஃபோட்டோஷாப்)
குறிச்சொற்கள் Android வளர்ச்சி 4 நிமிடங்கள் படித்தேன்