கூகிள் மேடையில் டிசைன் விவரக்குறிப்பு, மேடையில் வடிவமைப்பின் நிலைத்தன்மையைக் குறிப்பிடுவதற்கான ஒரு வழிமுறையாக Android தளத்தை முதலில் நோக்கமாகக் கொண்டிருந்தது.
06 இன் 01
எப்படி அடோப் எக்ஸ்பீரியன்ஸ் டிசைன் சிசி ஒரு மெட்டீரியல் டிசைன் கார்டை உருவாக்குவது
ஒருமுறை வடிவமைப்பாளர்கள் அதை மூடிமறைக்க ஆரம்பித்தார்கள் மற்றும் பின்னால் சிந்தனை புரிந்துகொள்ள ஆரம்பித்தார்கள், மெட்டீரியல் டிசைன் வலை மற்றும் மொபைல் வடிவமைப்புகளில் மிகவும் செல்வாக்குமிக்க காட்சி தத்துவங்களில் ஒன்றாக அமைந்துள்ளது. Pinterest இல் ஒரு மெட்டீரியல் டிசைன் தேடலை செய்ய நீங்கள் என்ன செய்ய வேண்டும் என்பதை நீங்கள் செய்ய வேண்டியது அவசியம். நீங்கள் சாதனங்கள், மாத்திரைகள் மற்றும் வலைத்தளங்களில் நூற்றுக்கணக்கான எடுத்துக்காட்டுகள் மற்றும் பரிசோதனைகள் பார்ப்பீர்கள்.
மெட்டீரியல் டிசைன் இன் கண்கவர் அம்சம், மொபைல் சாதனங்கள் எவ்வாறு தோன்றும் மற்றும் வேலை செய்ய வேண்டும் என்பதைப் பற்றி கூகிள் சிந்தனை உள்ளது, ஆனால் கருத்துக்கள் ஏதேனும் மேடையில் எந்த அளவிற்கும் எந்தவொரு திரைக்கும் பொருந்தும். கூகுள் குறிப்பிடுதலின் தொடக்கப் பத்தியில் கூறிவருகிறது, "நல்ல வடிவமைப்பின் சிறந்த கோட்பாடுகளை தொழில்நுட்பம் மற்றும் விஞ்ஞானத்திற்கான கண்டுபிடிப்பு மற்றும் சாத்தியக்கூறுகளுடன் ஒருங்கிணைக்கும் எங்கள் பயனர்களுக்கு ஒரு காட்சி மொழி உருவாக்க நாங்கள் சவால் செய்தோம். இது பொருள் வடிவமைப்பு. இச்செயல் என்பது ஒரு நாடு ஆவணம் ஆகும், அது நாங்கள் பொருள் வடிவமைப்பு மற்றும் சிறப்பு வடிவமைப்பின் சிறப்புகளைத் தொடர்ந்து மேம்படுத்தும்போது புதுப்பிக்கப்படும். "
பொருள் பற்றி பேசினார், மிகவும் பொதுவான வகையில், காகித மற்றும் பொருள் வடிவமைப்பு ஒரு முத்திரை அட்டை. ஒரு மேற்பரப்பில் குறியீட்டு அட்டையைப் பற்றி யோசித்து, சரியான பாதையில் இருக்கின்றீர்கள். ஒரு அட்டை என்பது புகைப்படங்கள், வீடியோக்கள், உரை இணைப்புகள் மற்றும் பலவற்றில் உள்ள ஒரு உறுப்பு ஆகும், ஆனால் அவை மிகவும் ஊடாடும் வடிவமைப்புகளிலிருந்து வேறுபடுகின்றன, அவை ஒரே விஷயத்தில் கவனம் செலுத்துவதாகும். அட்டைகள் மூலைகளில் வட்டமிட்டிருக்கின்றன, அவை மேற்பரப்பிற்கு மேலே உள்ளதைக் குறிக்கும் மந்தமான நிழல்களைக் கொண்டுள்ளன, அவை ஒரே விமானத்தில் இருந்தால் அவை "சேகரிப்பு" எனக் குறிப்பிடப்படுகின்றன.
இந்த "எப்படி" நாம் ஸ்பெக் அடிப்படையில் ஒரு அட்டை உருவாக்க போகிறோம். பலவித இமேஜிங் மற்றும் வரைதல் கருவிகளுடன் அட்டைகளை உருவாக்குவதற்குப் பதிலாக, வேறு திசையில் இருந்து நாம் அதைப் பெற போகிறோம். தற்போது மேகிண்டோஷ் மட்டும் பொது முன்னோட்டத்தில் இருக்கும் அடோப்பின் அனுபவ வடிவமைப்புகளில் கருவிகளைப் பயன்படுத்தப் போகிறோம் மற்றும் இலவசம். நீங்கள் இங்கே பதிவிறக்கம் செய்யலாம்.
தொடங்குவோம்.
06 இன் 06
அடோப் எக்ஸ்பீரியன்ஸ் டிசைன் சிசியில் ப்ரோட்டோடைப் ஆர்ட் போர்டு உருவாக்குதல்
அனுபவம் டிசைன் சிசி (எக்ஸ்டி) இல் தொடக்க திரையில் இருந்து ஒரு Android திரையை உருவாக்க தெளிவான வழி இல்லை. XD ஐ திறக்கும் போது நாம் என்ன செய்யப் போகிறோம், ஐபோன் 6 விருப்பத்தை தேர்ந்தெடுத்து, இடைமுகத்தை திறக்கும் போது , Toolbar கருவிக்கு கருவிப்பட்டியின் கீழே உள்ள பட்டனைத் தேர்ந்தெடுத்து, அண்ட்ராய்டு மொபைலை வலதுபுறம் உள்ள குழுக்களின் தேர்வுகளில் தேர்ந்தெடுக்கவும். பின்னர் நாம் தேர்வு கருவிக்கு மாறுகிறோம், ஐபோன் ஆர்ட்ட்போர்டின் பெயரில் ஒரு முறை கிளிக் செய்து கலைப்பதிவை நீக்கவும். இனி இல்லை.
XD இன் தற்போதைய பதிப்பில், ஐபோன் 6 க்கு அருகில் சிறிய அம்புக்குறி உள்ளது, இது சொடுக்கும் போது மெனுவை திறக்கும். அங்கு இருந்து நீங்கள் Android மொபைல் பதிப்பு தேர்வு மற்றும் தேர்வு செய்யப்பட்டுள்ளது Android மொபைல் கலைஞர் இடைமுகம் திறக்கும்.
கார்டில் திறந்த திரை இடத்தைத் திறந்து வைத்திருப்பதை உறுதி செய்வதற்காக, நாங்கள் வழக்கமாக ஸ்கெட்ச் 3 க்கு சென்று, ஸ்டேட் பார், நாவ் பார் மற்றும் ஆப் பட்டி மெட்டீரியல் டிசைன் டெம்பிளேட்டிலிருந்து ஆர்ட் போர்டில் நகலெடுத்து ஒட்டவும். ஸ்கெட்ச் 3.2 இல் மெட்டீரியல் டிசைன் டெம்ப்லெட் ( Template> New from Design> Material Design ) மற்றும் இன்னொரு சிறந்த இலவசம் Kyle Ledbetter இலிருந்து நீங்கள் பெறக்கூடியது. ஸ்கெட்ச் உங்களிடம் இல்லையெனில், நீங்கள் கோப்பு> திறந்த UI கிட்> கூகிள் பொருள் உள்ள XD ஸ்டிக்கர்களை நகலெடுத்து ஒட்டலாம். ஃபோட்டோஷாப், இல்லஸ்ட்ரேட்டரை, விளைவுகள் மற்றும் ஸ்கெட்ச் ஆகியவற்றைப் பயன்படுத்துவதற்கு Google இலிருந்து அவற்றைப் பதிவிறக்கலாம்.
06 இன் 03
அடோப் எக்ஸ்டி சி.சி.ஆர்டோர்டுக்கு ஒரு மெட்டீரியல் டிசைன் கார்டை சேர்த்தல்
XD இன் மிகவும் பயனுள்ள அம்சங்களில் ஒன்று ஆப்பிள் iOS, கூகிள் பொருள் மற்றும் மைக்ரோசாஃப்ட் விண்டோஸிற்கான UI உபகரணங்களை சேர்ப்பதாகும். பல விதங்களில், "ரேபிட்" என்ற வார்த்தையை "ரேபிட் புரோட்டோப்பிப்பிங்" என்ற வார்த்தையில் சேர்க்கிறார்கள், அதேபோல் வடிவமைப்பாளரின் வேலை எளிமையானது, அந்த பொதுவான UI மூலகங்கள் எளிதில் ஃபோட்டோஷாப், இல்லஸ்ட்ரேட்டரை அல்லது வடிவமைப்பு வடிவமைப்பு பயன்பாட்டில் மீண்டும் உருவாக்கப்பட வேண்டியதில்லை. ஸ்கெட்ச்.
நாம் தேவையான UI உறுப்பு ஒரு அட்டை இருந்தது. அதை பெற நாம் கோப்பு> திறந்த UI கிட்> கூகிள் பொருள் மற்றும் கிட் ஒரு புதிய ஆவணம் திறக்கப்பட்டது தேர்வு. நாங்கள் தேவைப்படும் உறுப்பு அட்டைகள் வகைகளில் காணப்பட்டது.
இவற்றைப் பற்றி நாம் என்ன விரும்புகிறோமோ அவை உள்ளடக்கம் பிளாக்ஸ் கண்ணாடியிலும், அச்சுக்கலை ஸ்பெக்ஸில் எழுதப்பட்ட உரை வடிவமைப்பு மற்றும் இடைவெளி கண்ணாடியிலும் வடிவமைக்கப்பட்ட மெட்டீரியல் டிசைன் ஸ்பீசிப்ட்டை கடைபிடிக்கின்றன.
நாங்கள் விரும்பிய கார்டு பாணி கீழே இடது பக்கத்தில் இருந்தது. நாங்கள் அதை எங்கள் சுட்டி மூலம் மாற்றி அதை கிளிப்போர்டுக்கு நகலெடுத்தோம். துரதிர்ஷ்டவசமாக, திறந்த ஆவணங்களுக்கான ஒரு தாவலாக்கப்பட்ட இடைமுகத்தை XD கொண்டிருக்கவில்லை. நாம் என்ன செய்கிறோம் என்பதைத் தெரிந்துகொள்வதற்கு திறந்த ஆவணம் சாளரத்தை சிறிது கீழே நகர்த்துவோம், அதைத் தேர்ந்தெடுத்து ஒட்டுக. திறந்த XD ஆவணங்களுக்கு இடையே மாறுவதற்கு மற்றொரு வழி கட்டளை- 'அழுத்தவும் .
06 இன் 06
Adobe Experience Design CC இல் ஒரு மெட்டீரியல் டிசைன் அங்கம் திருத்த எப்படி
கிளிப்போர்டில் இருந்து XD இல் உள்ள அட்டை, அதிலிருந்து வேலை செய்யத் தொடங்குவதில்லை. நீங்கள் செய்ய வேண்டியது முதல் காரியம் குழுவாக குழுவாக இருக்க வேண்டும், ஏனெனில் பிட் மற்றும் துண்டுகளை உருவாக்கும் துண்டுகளை நீங்கள் அணுக வேண்டும். இதனை செய்ய, கார்டைத் தேர்ந்தெடுத்து பொருள்> Ungroup அல்லது Shift-Command-G ஐ அழுத்தவும்.
உங்கள் அட்டை இப்போது மூன்று துண்டுகளாக அமைக்கப்பட்டிருக்கிறது:
- படத்தை ஒளி சாம்பல் பெட்டி.
- உரைக்கு நடுத்தர சாம்பல் பெட்டி
- பின்புலப் பெட்டியில் பின்னொட்டுப் பயன்படுத்தப்பட்டது.
முதல் படி ஒளி சாம்பல் பெட்டியை நீக்க வேண்டும். அதன் ஒரே நோக்கம் நீங்கள் தேர்ந்தெடுத்தால், விருப்பமாக இருந்தால், படத்தை உருவாக்குவதற்கான ஒரு ஒதுக்கிடமாக செயல்பட வேண்டும்.
உரை பெட்டியில் உண்மையில் ஒரு அடர் சாம்பல் உள்ளது 50% ஒளிபுகா. இந்த பெட்டியை உரை பின்னணி பயன்படுத்த முடியும் மற்றும் நீங்கள் நிறம் மற்றும் பெட்டியின் opacity மாற்ற முடியும்.
அது உடனடியாக தெரியவில்லை என்றாலும், ஒளி சாம்பல் பெட்டி அதன் மேல் மூலைகளிலும் 2 பிக்சல்கள் மூலம் சுற்றியுள்ள மெட்டீரியல் டிசைன் ஸ்பெக்கை பின்பற்றுகிறது. நீங்கள் ஒரு படத்தைச் சேர்த்தால் மனதில் கொள்ளுங்கள். இது ஒரு இமேஜிங் பயன்பாடு அல்லது XD சேர்க்க முடியும் வட்டமான மூலைகளிலும் வேண்டும்.
இந்த அட்டையின் ஓய்வு நிலை எப்படி இருக்கும் என்பதைக் காணும் போது அது ஒரு நிழல் தேவை. ஸ்பெக் 2 பிக்சல்களின் அட்டையின் ஒரு ஓய்வு எங்கு உள்ளது என்பது தெளிவுபடுத்துகிறது. இதைச் சேர்க்க , கருப்பு பின்னணி வடிவத்தைத் தேர்ந்தெடுத்து, Y மற்றும் B (மங்கலான) மதிப்புகளை 2 இல் பண்புகள் குழுவை அமைக்கவும்.
06 இன் 05
Adobe XD CC இல் மெட்டீரியல் டிசைன் கார்டில் ஒரு படத்தை எவ்வாறு சேர்ப்பது?
கார்டு தெரிந்து 344 பிக்ஸல் அகலமும் படத்தின் பகுதி 150 பிக்சல்கள் உயர்வும் ( ஒளி சாம்பல் பெட்டியின் அரை உயரம் ) நாம் ஃபோட்டோஷாப் படத்தைத் திறந்து, அளவுக்கு அதை சரிசெய்து, ஃபோட்டோஷாப் ஏற்றுமதிக்கு @ 2x விருப்பத்தை பயன்படுத்தி அதை சேமித்தோம் உரையாடலாக பெட்டி. படம் Adobe XD இல் இறக்குமதி செய்யப்பட்டது.
பின்னர் நாங்கள் ஒட்டுப்பொறியின் மீது ஒளி சாம்பல் பெட்டியை இழுத்து, ஆப்ஜெக்ட்> முகமூடி வடிவத்தைத் தேர்ந்தெடுத்தோம். இதன் விளைவாக உருவத்தின் வட்டமான மூலைகளிலிருந்து எடுக்கப்பட்ட படமாகும். நாம் அந்த படத்தை அதன் இறுதி நிலைக்கு நகர்த்தினோம்.
இடத்தில் படத்தை கொண்டு, நாம் பின்னர் நடுத்தர சாம்பல் பெட்டியின் பின்னணி வண்ணம் மாற்றப்பட்டது, உரை மற்றும் உரை உரை நிறம் மாற்றப்பட்டது.
06 06
அடோப் XD சிசி கிரிட் அம்சத்தைப் பயன்படுத்துதல்
கார்டு முடிந்தவுடன் இப்போது பொருள் வடிவமைப்பு ஸ்பெக் படி ஒழுங்காக வைக்க வேண்டும். இதன் பொருள் அட்டைகளின் இருபுறத்திலும் 8 பிக்சல்கள் உள்ளன, மற்றும் அட்டை 8 பிக்சல்கள் பயன்பாட்டு பட்டியில் இருக்க வேண்டும். இதனை செய்ய, கலைப் பெயரில் ஒரு முறை சொடுக்கி, பண்புகள் பேனலில், கட்டம் தேர்ந்தெடுக்கவும். கலைக்கூடத்தில் இந்த கட்டம் தோன்றுகிறது.
இயல்புநிலை கட்டம் அளவு 8 பிக்சல்கள் ஆகும், இது மெட்டீரியல் டிசைனுக்கான அதே கட்டமாக இருக்கும். நீங்கள் வேறொரு அளவு தேவைப்பட்டால், Grid பகுதியில் உள்ள மதிப்பை மாற்றவும். நீங்கள் கட்டத்தின் நிறத்தை மாற்ற விரும்பினால், நிற சிப் என்பதைக் கிளிக் செய்து விளைவான வண்ணத் தேர்விலிருந்து ஒரு வண்ணத்தைத் தேர்வுசெய்யவும்.
கட்டம் தெரியும், அட்டை மீது கிளிக் செய்து, அதன் இறுதி நிலைக்கு நகர்த்தவும்.
முடிக்க, நாங்கள் கார்டைத் தேர்ந்தெடுத்து, மீண்டும் க்ரிட் பொத்தானை சொடுக்கி, கார்டுகளுக்கு இடையில் 8 பிக்சல்களுக்கு இடையில் இடைவெளியை மாற்றினோம்.