அடோப் எக்ஸ்பீரியன்ஸ் டிசைன் டிரிக்ஸ், டிப்ஸ் அண்ட் டெக்னிக்ஸ்

07 இல் 01

அடோப் எக்ஸ்பீரியன்ஸ் டிசைன் டிரிக்ஸ், டிப்ஸ் அண்ட் டெக்னிக்ஸ்

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

ஆனால் முதலில், நீங்கள் புரோட்டோடைப்பிங் மென்பொருளால் என்ன செய்ய வேண்டும் என்று யோசித்து இருக்கலாம். இந்த இடத்தில் முக்கிய வீரர்கள் மத்தியில் Proto.io, கொள்கை, UXPin, Atomic.io , அனுபவம் வடிவமைப்பு மற்றும் InVision. ஸ்கெட்ச் 3, ஃபோட்டோஷாப் மற்றும் இல்லஸ்ட்ரேட்டரைப் போன்ற நிலையான வடிவமைப்புகளை உருவாக்கும் பயன்பாடுகளில் இருந்து அல்லாமல், இந்த வரைகலை ஆசிரியர்கள் இன்றைய மொபைல் மற்றும் வலை வடிவமைப்பு இடங்களில் பொதுவான செயல்திறன், இயக்கம் மற்றும் பிற அம்சங்களை அறிமுகப்படுத்துகின்றனர்.

மொபைலின் எழுச்சி மற்றும் தவிர்க்கமுடியாத, லேசர் போன்ற பயனர் கவனம், ஒரு வடிவமைப்பாளர் ஒரு சில ஓவியங்கள் வரை கிளப்பவும், ஒரு சில காம்ப்ஸ் ஒன்றாக இழுக்க பின்னர் திட்டம் வெளியிட அல்லது ஒரு வலை சர்வரில் அதை பதிவேற்ற அது இனி போதுமானது. UI / UX பணிநிலை அடிப்படையில் விஷயங்களை மாற்றியுள்ளது. செயல்முறை ஒவ்வொரு படியிலும், பயனர் அடையாளம் இருந்து, ஓவியங்கள், wireframes, mockups, மற்றும் prototyping இப்போது விரிவான பயனர் சோதனை உட்பட்டவை.

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

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

என்று கூறினார், அனுபவம் வடிவமைப்பு சில வேடிக்கை நாம்.

07 இல் 02

அடோப் எக்ஸ்பீரியன்ஸ் டிசைனில் எளிய வட்டம் மூலம் இலக்கை உருவாக்கவும்

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

1. எலிபஸ் கருவியைத் தேர்ந்தெடுத்து, விருப்பம் / Alt-Shift விசைகளை அழுத்தினால், ஒரு வட்டத்தை வரையவும்.
2. வட்டம் தேர்ந்தெடுக்கப்பட்டால், நிரப்பு நிறத்தை FF0000 மற்றும் பார்டர் ஆகியவற்றில் பண்புகளில் "எதுவுமில்லை" என்று அமைக்கவும்.
3. நங்கூரம் புள்ளிகளைக் காண்பிக்க வட்டத்தை இரண்டு முறை கிளிக் செய்யவும். கீழ் நங்கூரம் கீழே இழுக்கவும்.
4. தேர்ந்தெடுக்கப்பட்ட நங்கூரம் புள்ளியை இருமுறை சொடுக்கி, வளைவுகள் கோடுகளுடன் மாற்றப்படும்.
5. ஒரு வெள்ளை நிரப்பு மற்றும் ஸ்டோக் கொண்ட மற்றொரு சிறிய வட்டத்தை வரையவும். அதை நிலைக்கு நகர்த்தி முள் மற்றும் வட்டத்தை தேர்ந்தெடுக்கவும். பண்புகள் மேல் உள்ள சீரற்ற பலகத்தில், கிடைமட்ட மையம் பொத்தானை கிளிக் செய்து பின் உருவாக்கப்படுகிறது.

07 இல் 03

அடோப் எக்ஸ்பீரியன்ஸ் டிசைனில் பின்னணி மங்கலான உருவாக்கவும்

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

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

• மங்கலான தொகை: வடிவம் கீழே படத்தின் தெளிவின்மை சரிசெய்கிறது. அதிகபட்ச மதிப்பு +50 ஆகும்.
• பிரகாசம்: படத்தில் சிறப்பம்சங்களும் நிழல்களும் சரி. குறைந்தபட்ச மதிப்பு -50 மற்றும் அதிகபட்சம் +50 ஆகும்.
• தன்மை: வடிவத்தின் வெளிப்படைத்தன்மை மற்றும் வடிவத்தின் வெளிப்பாட்டின் வெளிப்பாட்டை பாதிக்கிறது. மதிப்புகள் 0% முதல் 100% வரை இருக்கும்.

நீங்கள் உண்மையில் "விஷயங்களை மாற்ற" விரும்பினால், வடிவத்தின் நிறத்தை மாற்றவும் மற்றும் படத்தின் "தோற்றத்தை" மாற்றுவதற்கு தன்மை மதிப்புடன் விளையாடவும்.

07 இல் 04

அடோப் எக்ஸ்பீரியன்ஸ் டிசைனில் ஒரு குற்றத்தை உருவாக்குங்கள்

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

1. XD இல் உங்கள் ஆர்ட்ட்போர்டை உருவாக்கவும், ஒரு படத்தை சேர்க்கவும், பொருத்தமான UI கிட் - கோப்பு> ஓபன் UI கிட் ... - கலைப்பகுதியில் ஒரு இடைமுகத்தின் கூறுகளை நகலெடுத்து ஒட்டவும். மேலே படத்தில் புகைப்படம் நிலை பட்டை மற்றும் பயன்பாட்டை பார் பார்க்க கடினமாக உள்ளது.
2. செவ்வக கருவியைத் தேர்ந்தெடுத்து ஒரு செவ்வகத்தை வரையவும். Properties Panel இல் தெரிவுசெய்து தேர்வு செய்யவும். கருப்பு மற்றும் வெள்ளை சாய்வு நிறங்கள் அமைக்க. ஒரு மதிப்பு அமைக்க - தன்மை - 60% மற்றும் வெள்ளை ஒரு மதிப்பு 0%.
3. தேர்ந்தெடுக்கப்பட்ட செவ்வகத்தின் மூலம், பொருள்> அமைவு> பின்தளத்தில் அனுப்பு என்பதைத் தேர்ந்தெடுக்கவும். முகப்பில் உள்ள உறுப்புகள் இப்போது படத்தில் காணப்படுகின்றன.

07 இல் 05

அடோப் எக்ஸ்பீரியன்ஸ் டிசைனில் ஒரு பட Avatar உருவாக்கவும்

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

1. படத்தில் ஒரு படத்தையும் வட்டத்தையும் அல்லது வேறு வடிவத்தையும் தொடங்குங்கள். வட்டத்தை எந்த வண்ணத்துடன் நிரப்பலாம். நீங்கள் செய்ய வேண்டியது என்னவென்றால் ஒரு பக்கவாட்டு நிறத்தை சேர்க்க வேண்டும். நீங்கள் விளைவுகளை உருவாக்கும்போது அது மறைந்து விடும், அதனால் கவலைப்படுவீர்கள். வட்டத்தைத் தூக்க வேண்டும் என்றால், அதை கிளிப்போர்டுக்கு நகலெடுக்கவும்.
2. படத்தை வட்டத்தில் நகர்த்தவும், படத்தையும் வட்டத்தையும் தேர்ந்தெடுக்கவும். பாட் பொருள்களை தேர்ந்தெடுத்தால், பொருள்> மாஸ்க் என்ற வடிவத்தைத் தேர்ந்தெடுக்கவும் . நீங்கள் சுட்டியை வெளியிடும்போது, ​​Avatar உருவாக்கப்பட்டது. அங்கு இருந்து நீங்கள் அதை அளவை மாற்ற முடியும்.
3. நீங்கள் ஸ்ட்ரோக்கைச் சேர்க்க வேண்டும் என்றால், உங்கள் கிளிப் போர்டில் உட்கார்ந்திருக்கும் வட்டத்தை ஆரொர்ட்டில் ஒட்டவும். பிரதியொன்றைப் பூர்த்தி செய்து, ஒரு பக்கவாட்டு நிறம் மற்றும் அகலத்தைச் சேர்ப்பதுடன் நகல் எடுக்கவும். அவற்றை வரிசைப்படுத்த, இரு பொருள்களையும் தேர்ந்தெடுத்து, மையங்களின் சீரமைப்பில் பொத்தான்களைக் கிளிக் செய்து Properties Panel மேல் உள்ள விருப்பங்கள்.
4. முகமூடிக்குள் படத்தை நகர்த்த விரும்பினால், முகமூடியை இரட்டை சொடுக்கவும். இது படத்தையும் மாஸ்க் வடிவத்தையும் காண்பிக்கும். படத்தை சொடுக்கி அதை நிலைக்கு இழுக்கவும். நீங்கள் சுட்டி வெளியிட போது, ​​படத்தை மாஸ்க் உள்ளே அதன் புதிய நிலையில் இருக்கும்.

07 இல் 06

அடோப் எக்ஸ்பீரியன்ஸ் டிசைன் ஆர்ட்ட்போர்டுகளுடன் விளையாடவும்

அனுபவம் வடிவமைப்பு கலைக்கூடங்கள் நீங்கள் உள்ளடக்கத்தை வைக்க மட்டும் இல்லை. அவர்கள், கூட, கையாள முடியும். இங்கே நீங்கள் செய்யக்கூடிய சில விஷயங்கள்:

1. ஒரு கலைக்கூடத்தின் நிலப்பரப்பு மற்றும் வரைபட பதிப்புகள் உங்களுக்கு தேவைப்பட்டால், கலைக்கூடத்தை நகல் செய்யவும், தேர்ந்தெடுத்த நகருடன், பண்புகள் பேனலில் உள்ள இயற்கை பொத்தானைக் கிளிக் செய்யவும். கலைப்பலகை நிலப்பரப்பு நோக்குநிலைக்கு மாறும். ஆர்ட்டர்போர்டில் உள்ளடக்கம் இருந்தால், ஆர்ட்ட்போர்டின் பெயரைக் கிளிக் செய்து, ஆரெர்போர்டு பண்புகள் பண்புகள் பேனலில் தோன்றும்.
2. Artboard க்கு தனிப்பயன் வண்ணத்தைச் சேர்க்க, மற்றும் அந்தப் படத்திற்கான திட்டம், Artboard ஐ தேர்ந்தெடுத்து Properties Panel இன் Appearance பிரிவில் Fill Color Chip ஐ சொடுக்கவும். வண்ணத்திற்கான ஹெக்டேடைசிமால் மதிப்பை உள்ளிட்டு, + குறியை சொடுக்கவும். நிறம் தனிப்பயன் வண்ணமாக சேர்க்கப்படும். வேறு வண்ணத்தை விண்ணப்பிக்க, ஒரு பொருளைத் தேர்ந்தெடுத்து, வண்ணத்தை பயன்படுத்துவதற்கு தனிப்பயன் வண்ண சிப்பில் கிளிக் செய்யவும்.
3. Artboards செங்குத்தாக உருளலாம். இதைச் செய்ய, கலைக்கூடத்தை தேர்ந்தெடுத்து, அதன் பண்புகளை பேனல்களில் மாற்றவும் அல்லது ஆர்ட்ஃபர்ட் கீழே தரையிலிருந்து இழுக்கவும். பண்புகள் குழுவில் உள்ள உருளக்கூடிய பகுதியில், பாப் டவுன் மெனுவிலிருந்து செங்குத்துத் தேர்வு மற்றும் திரைக்கு காட்சியளிப்பு உயரம் உள்ளிடவும். நீட்டப்பட்ட நீல கோடு நீங்கள் பார்வைக்கு கீழே உள்ளதைக் காட்டுகிறது. அதை சோதிக்க, Play என்ற பொத்தானைக் கிளிக் செய்து விட்டுச் செல். ஸ்க்ரோலிங் அணைக்க, ஸ்க்ரோலிங் பாப் டத்தில் எதுவும் தேர்ந்தெடுக்கப்படவில்லை.

07 இல் 07

அடோப் எக்ஸ்பீரியன்ஸ் டிசைனில் ஒரு மொபைல் UI கிட்டைத் திருத்தவும்

அனுபவம் டிசைன் iOS, Android மற்றும் Windows UI இன் அபிவிருத்திக்கு UI கிட் உள்ளது. முதலில் நீங்கள் அவற்றைத் திறக்கும்போது, ​​அவர்கள் மிகவும் நன்றாக அமைக்கப்பட்டிருக்கலாம் என நினைக்கலாம். முற்றிலும் இல்லை அந்த கருவிகளில் பிட்கள் மற்றும் துண்டுகள் ஒவ்வொரு முழுமையாக திருத்தும்படி உள்ளது. ஒரு Android wireframe ஐ உருவாக்குவதன் மூலம் கண்டுபிடிக்கலாம்.

1. நீங்கள் Artboard கருவியைத் தேர்ந்தெடுத்து, அண்ட்ராய்டு மொபைலை Properties Panel இன் Google பிரிவில் தேர்ந்தெடுப்பதன் மூலம் தொடங்குங்கள்.
2. கோப்பு> திறந்த UI கிட்> கூகிள் பொருள் தேர்ந்தெடு . இது பொருள் வடிவமைப்பு UI கிட் திறக்கிறது. உருப்பெருக்க கண்ணாடி மற்றும் மார்கியூ டி திரை அவர் திரை வழிகாட்டிகள் கலைக்கலை தேர்ந்தெடுக்கவும் . நான் இந்த ஒரு தொடக்கம் விரும்புகிறேன் ஏனெனில் அது இடைமுகம் உறுப்புகள் சரியான திரை வேலை வாய்ப்பு வழிகாட்டிகள் கொடுக்கிறது. நீங்கள் ப்ளூ பார்கள் ஒன்றைக் கிளிக் செய்தால், அது பூட்டப்பட்டிருப்பதைப் பார்ப்பீர்கள். அதை திறக்க அவர்கள் ஒவ்வொரு இணைக்கப்பட்ட பூட்டு கிளிக் செய்யவும் . கலைஞரை மார்க்யூக்கு தேர்வு செய்து கிளிப்போர்டுக்கு தேர்வு செய்யவும். உங்கள் ஆவணத்திற்கு திரும்புக மற்றும் உங்கள் கலைப்பக்கத்தில் திரையை ஒட்டவும்.
3. பயன்பாட்டின் பட்டையில் ஒருமுறை கலைக்கூடத்தின் மேல் கிளிக் செய்யவும். நீங்கள் அதை எப்படி தேர்ந்தெடுக்கலாம் என்பதை கவனிக்கவும். பொருள் தேர்வு> ஏற்பாடு> முன்னணி கொண்டு. உங்கள் தேர்வு இப்போது ஸ்கிரீன் வழிகாட்டிகளுக்கு மேல் உள்ளது. திரையில் உள்ள உறுப்புகள் ஒவ்வொன்றும் திருத்தப்பட முடியும் என்று நீங்கள் சொல்ல வேண்டும்.
4. மேலே உள்ள நிலை பட்டியை சொடுக்கி, Properties Panels s மற்றும் Fill Color இல் 455A64 க்கு இரட்டை கிளிக் செய்யவும் . பயன்பாட்டு பட்டியைக் கிளிக் செய்து, அதன் நிரப்பு 607D8B ஐ அமைக்கவும். யூ.ஐ. கிட்டில் ஒவ்வொரு உறுப்புக்கும் திட்டத்தின் வண்ண விவரக்குறிப்புகள் பூர்த்தி செய்யப்படலாம் என்று இது கூற வேண்டும்.
5. சின்னங்களைப் பற்றி என்ன? தங்கள் நிறத்தை மாற்றுவது எப்படி. அதை தேர்ந்தெடுக்க இதயத்தை சொடுக்கவும் . நீங்கள் பண்புகள் குழுவைப் பார்த்தால், நீங்கள் தேர்வைத் திருத்த முடியாது எனக் கருதுவீர்கள். இல்லை. இதயத்தை மற்றொரு முறை கிளிக் செய்யவும் . பண்புகள் திறந்திருக்கும் மற்றும் நீங்கள் நிரப்பு நிறத்தை FF0000 க்கு மாற்றியமைக்கிறீர்கள். மீதமுள்ள சின்னங்கள் மற்றும் உரைக்கு இரட்டை இரட்டை சொடுக்கியை மீண்டும் செய்யவும்.