ഗൂഗിളിൽ നിന്നുള്ള മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷൻ തുടക്കത്തിൽ പ്ലാറ്റ്ഫോമിലെ രൂപകൽപ്പന സംബന്ധിച്ച സ്ഥിരത നിർദേശിക്കുന്നതിനുള്ള മാർഗമായി ആൻഡ്രോയ്ഡ് പ്ലാറ്റ്ഫോമിനെ ലക്ഷ്യം വച്ചായിരുന്നു.
06 ൽ 01
അഡോബി എക്സ്പീരിയൻസ് ഡിസൈൻ സിസിയിൽ ഒരു മെറ്റീരിയൽ ഡിസൈൻ കാർഡ് എങ്ങനെ സൃഷ്ടിക്കാം
ഡിസൈനർമാർ അതിലൂടെ സഞ്ചരിച്ചു തുടങ്ങി, പിന്നിൽ ചിന്തിക്കുന്നതിനെ മനസിലാക്കിയ മെറ്റീരിയൽ ഡിസൈൻ വെബിലും മൊബൈൽ ഡിസൈനിന്റിലും ഏറ്റവും സ്വാധീനശക്തിയുള്ള തത്വശാസ്ത്രങ്ങളിൽ ഒന്നാണ്. നിങ്ങൾക്ക് ലഭിക്കുന്നത് എന്താണെന്നറിയാൻ നിങ്ങൾ ചെയ്യേണ്ടത്, Pinterest ൽ ഒരു മെറ്റീരിയൽ ഡിസൈൻ തിരയൽ നടത്തണം, കൂടാതെ നൂറുകണക്കിന് ഉദാഹരണങ്ങൾ, ഉപകരണങ്ങൾ, ടാബ്ലറ്റുകൾ, വെബ്സൈറ്റുകൾ എന്നിവയിലെ പരീക്ഷണങ്ങളും നിങ്ങൾ കാണും.
മൊബൈൽ മെറ്റീരിയലുകളിൽ ആപ്ലിക്കേഷനുകൾ എങ്ങനെ പ്രത്യക്ഷപ്പെടണം, എങ്ങനെ പ്രവർത്തിക്കണമെന്നതിനെക്കുറിച്ച് Google- ന്റെ ചിന്തയാണ് മെറ്റീരിയൽ രൂപകൽപ്പനയുടെ ആകർഷണീയമായ വശം. എന്നാൽ ആശയങ്ങൾ ഏതെങ്കിലും പ്ലാറ്റ്ഫോമിൽ ഏതെങ്കിലും വലുപ്പത്തിൽ പ്രയോഗിക്കുന്നു. പ്രസ്താവനയുടെ ആദ്യ ഖണ്ഡികയിൽ ഗൂഗിൾ പ്രസ്താവിക്കുന്നത് പോലെ, "നല്ല രൂപകൽപ്പനയിലെ ക്ലാസിക് തത്ത്വങ്ങൾ സാങ്കേതികവിദ്യക്കും ശാസ്ത്രത്തിനും ഉള്ള നവീനതയും സാദ്ധ്യതയുമുള്ള സംവിധാനത്തെ സമന്വയിപ്പിക്കുന്ന ഞങ്ങളുടെ ഉപയോക്താക്കൾക്ക് ഒരു വിഷ്വൽ ഭാഷ സൃഷ്ടിക്കാൻ ഞങ്ങൾ സ്വയം വെല്ലുവിളിച്ചു. ഇത് മെറ്റീരിയൽ ഡിസൈൻ ആണ്. ഭൌതിക രൂപകൽപ്പനയുടെ പ്രത്യേകതകളും പ്രത്യേകതകളും ഞങ്ങൾ വികസിപ്പിച്ചുകൊണ്ടിരിക്കുന്നതിനാലാണ് ഇത് പുതുക്കിയിട്ടുള്ള ജീവനുള്ള രേഖ.
വളരെ സാധാരണമായി പറഞ്ഞ കാര്യങ്ങളെക്കുറിച്ച് സംസാരിച്ചു, പേപ്പർ ആണ് മെറ്റീരിയൽ ഡിസൈനിൻറെ മുഖമുദ്രയാണ് കാർഡ്. ഒരു ഉപരിതലത്തിൽ ഒരു ഇൻഡെക്സ് കാർഡ് ചിന്തിക്കുക, നിങ്ങൾ ശരിയായ പാതയിലാണ്. ഫോട്ടോ, വീഡിയോകൾ, ടെക്സ്റ്റ് ലിങ്കുകൾ എന്നിവയുൾപ്പെടെയുള്ള ഒരു ഘടകമാണ് ഒരു കാർഡ്, എന്നാൽ അവയിൽ കൂടുതൽ വ്യതിരിക്തമായ ഡിസൈനുകളിൽ നിന്ന് വ്യത്യാസപ്പെട്ടിരിക്കുന്നത് ഒരൊറ്റ വിഷയത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാനാണ് ഉദ്ദേശിക്കുന്നത്. കാർഡുകൾ കോണുകൾ വൃത്താകൃതിയിലാണ്, അവർ ഒരു ഉപരിതലത്തിനു മുകളിലുള്ള മങ്ങിയ നിഴൽ തണ്ടുകൾ ഉൾക്കൊള്ളുന്നു, ഒരേ വിമാനത്തിൽ അവ ഒരു "ശേഖരം" എന്ന് വിളിക്കുന്നു.
ഈ "എങ്ങിനെ" നമ്മൾ സ്പെക്കിനെ അടിസ്ഥാനമാക്കി ഒരു കാർഡ് ഉണ്ടാക്കാൻ പോവുകയാണ്. ഡിസൈൻ ഉപകരണങ്ങളും വൈവിധ്യവും ഉപയോഗിച്ച് കാർഡിനെ നിർമ്മിക്കുന്നതിനു പകരം വേറൊരു ദിശയിലേക്ക് നമ്മൾ വരാൻ പോകുന്നു. നിലവിൽ മക്കിന്റോഷ് മാത്രമുള്ള പൊതു പ്രിവ്യൂവിൽ ഉപയോഗിക്കുന്ന അഡ്രസ്സ് എക്സ്പീരിയൻസ് ഡിസൈനിൽ ടൂളുകൾ ഉപയോഗിക്കാൻ ഞങ്ങൾ പോകുന്നു. നിങ്ങൾക്കിത് ഇവിടെ ഡൌൺലോഡ് ചെയ്യാൻ കഴിയും.
നമുക്ക് തുടങ്ങാം.
06 of 02
അഡോബി എക്സ്പീരിയൻസ് ഡിസൈനിയിൽ പ്രോട്ടോടൈപ്പ് ആർട്ട്ബോർഡ് സൃഷ്ടിക്കുന്നു
എക്സ്പീരിയൻസ് ഡിസൈൻ സിസി (എക്സ്ഡി) യിൽ ആരംഭ സ്ക്രീനിൽ നിന്ന് ഒരു Android സ്ക്രീൻ സൃഷ്ടിക്കുന്നതിനുള്ള വ്യക്തമായ മാർഗമില്ല. ഞങ്ങൾ XD തുറക്കുമ്പോൾ നമ്മൾ എന്ത് ചെയ്യും, ഐഫോൺ 6 ഓപ്ഷൻ തിരഞ്ഞെടുത്ത്, ഇൻറർഫേസ് തുറക്കുമ്പോൾ, ടൂൾബാർ ചുവടെ ആർട്ട്ബോർഡ് ടൂൾ സെലക്ട് ചെയ്ത് പ്രോപ്പർട്ടീസ് പാനലിലെ തിരഞ്ഞെടുക്കലുകളിൽ നിന്നും ആൻഡ്രോയിഡ് മൊബൈൽ തിരഞ്ഞെടുക്കുക . തുടർന്ന് നമ്മൾ തിരഞ്ഞെടുക്കൽ ഉപകരണത്തിലേക്ക് മാറി, ഐഫോൺ ആർട്ട്ബോർഡിന്റെ പേരിൽ ഒരു തവണ ക്ലിക്കുചെയ്ത് ആർട്ട്ബോർഡ് ഇല്ലാതാക്കുക. കൂടുതലൊന്നുമില്ല.
XD- യുടെ നിലവിലെ പതിപ്പിൽ, ഐഫോൺ അരികിലായി ഒരു ചെറിയ അമ്പ് ഉണ്ട് 6 ഏത്, ക്ലിക്കുചെയ്താൽ, ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു തുറക്കുന്നു. അവിടെ നിന്ന് നിങ്ങൾ Android മൊബൈൽ പതിപ്പ് തിരഞ്ഞെടുത്ത് തിരഞ്ഞെടുത്ത മൊബൈൽ മൊബൈൽ ആർട്ട്ബോർഡ് തുറക്കുന്നു.
കാർഡിനായി നമുക്ക് ശരിയായ സ്ക്രീൻ സ്പേസ് ഉണ്ടെന്ന് ഉറപ്പുവരുത്തുന്നതിനായി, ഞങ്ങൾ സാധാരണയായി Sketch 3 ലേക്ക് പോകുകയും മെറ്റീരിയൽ ഡിസൈൻ ടെംപ്ലേറ്റിൽ നിന്നും ആർട്ട്ബോർഡിലേക്ക് ഒരു സ്റ്റാറ്റസ് ബാർ, നാവ് ബാർ, അപ്ലിക്കേഷൻ ബാ എന്നിവ പകർത്തുകയും ഒട്ടിക്കുകയും ചെയ്യുക. സ്കെച്ച് 3.2 ൽ ഒരു മെറ്റീരിയൽ ഡിസൈൻ ടെംപ്ലേറ്റ് അടങ്ങിയിരിക്കുന്നു ( ഫയൽ> ന്യൂ ടെംപ്ലേറ്റ്> മെറ്റീരിയൽ ഡിസൈൻ ). മറ്റൊരു നല്ല ഫ്രീ ആണ് കെയ്ൽ ലെഡ്ബെറ്ററിൽ നിന്നാണ്. നിങ്ങൾക്ക് സ്കെച്ച് ഇല്ലെങ്കിൽ, ഫയൽ> ഓപ്പൺ UI കിറ്റ്> ഗൂഗിൾ മെറ്റീരിയലിൽ കണ്ടെത്തിയ XD സ്റ്റിക്കറുകളിൽ നിന്ന് അവയെ പകർത്തി ഒട്ടിക്കാൻ നിങ്ങൾക്ക് കഴിയും. ഫോട്ടോഷോപ്പ്, ഇല്ലസ്ട്രേറ്റര്, ഇഫക്റ്റുകൾ, സ്കെച്ച് എന്നിവയ്ക്കായി അവ ഉപയോഗിക്കുന്നത് Google- ൽ നിന്ന് നിങ്ങൾക്ക് ഡൗൺലോഡുചെയ്യാം.
06-ൽ 03
ഒരു മെറ്റീരിയൽ ഡിസൈൻ കാർഡ് ഒരു Adobe XD CC ആർട്ട്ബോർഡിലേക്ക് ചേർക്കുന്നു
ആപ്പിളിന്റെ ഐഒഎസ്, ഗൂഗിൾ മെറ്റീരിയൽ, മൈക്രോസോഫ്റ്റ് വിൻഡോസ് എന്നിവയ്ക്കുള്ള യുഐ കിറ്റുകൾ ഉൾപ്പെടുത്തുന്നതാണ് എക്സ്ഡി ഏറ്റവും ഉപയോഗപ്രദമായ സവിശേഷതകളിൽ ഒന്ന് . പല തരത്തിലും അവർ "റാപ്പിഡ്" എന്ന വാക്ക് "റാപ്പിഡ് പ്രോട്ടോട്ടിപ്പിങ്ങ്" എന്ന വാക്കിലേക്ക് ചേർക്കുന്നു.അതുപോലെ തന്നെ അവർ സാധാരണ UI ഘടകങ്ങളിൽ ഡിസൈനർമാരുടെ ജോലി എളുപ്പത്തിൽ ഫോട്ടോഷോപ്പ്, ഇല്ലസ്ട്രേറ്റർ അല്ലെങ്കിൽ ഡിസൈൻ ആപ്ലിക്കേഷനിൽ വീണ്ടും സൃഷ്ടിക്കാൻ പാടില്ല. സ്കെച്ച്.
ഞങ്ങൾക്ക് ആവശ്യമുള്ള യുഐ മൂലകം ഒരു കാർഡ് ആയിരുന്നു. അതിലേക്ക് ലഭിക്കാൻ ഞങ്ങൾ ഫയൽ> ഓപ്പൺ UI കിറ്റ്> ഗൂഗിൾ മെറ്റീരിയലും കിറ്റ് ഒരു പുതിയ ഡോക്യുമെന്റായി തുറന്നു. കാർഡുകൾ വിഭാഗത്തിൽ ഞങ്ങൾക്ക് ആവശ്യമായ മൂലകം കണ്ടെത്തി.
ഇതിനെ പറ്റി ഞങ്ങൾ ഇഷ്ടപ്പെടുന്ന കാര്യങ്ങൾ അവർ കണ്ടന്റ് ബ്ലോക്ക് ഫംക്ഷനിൽ അവതരിപ്പിച്ച മെറ്റീരിയൽ ഡിസൈൻ സ്പെസിഫിക്കേഷനോടുമൊപ്പം ടൈപ്പോഗ്രഫിക് സ്പെസിഫിക്കിൽ അവതരിപ്പിച്ച ടെക്സ്റ്റ് ഫോർമാറ്റിംഗും സ്പെയ്സിംഗ് സ്പെസിഫിക്കുകളും അനുസരിച്ചാണ്.
നമ്മൾ ആഗ്രഹിച്ച കാർഡ് ശൈലി താഴെയുള്ള ഇടത് വശത്താണ്. ഞങ്ങളുടെ മൌസുപയോഗിച്ച് നമുക്ക് അത് പകർത്തി ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തി. നിർഭാഗ്യവശാൽ, ഓപ്പൺ ഡോക്യുമെൻറുകൾക്ക് ഒരു ടാബേർഡ് ഇന്റർഫേസിൽ XD അടങ്ങിയിട്ടില്ല. നമ്മൾ പ്രവർത്തിച്ചുകൊണ്ടിരിക്കുന്ന തുറന്ന ഡോക്യുമെന്റ് വിൻഡോയെ കുറച്ചുകൂടി പുറത്തെടുക്കുകയാണ്, അത് തിരഞ്ഞെടുത്ത് ഒട്ടിക്കുക. ഓപ്പൺ XD ഡോക്യുമെന്റുകൾക്കിടയിൽ വേഗത്തിൽ മാറുന്നതിനുള്ള മറ്റൊരു മാർഗം കമാൻഡ്- 'അമർത്തുക എന്നതാണ്.
06 in 06
Adobe Experience Design CC- ൽ മെറ്റീരിയൽ ഡിസൈൻ എലമെന്റ് എഡിറ്റുചെയ്യുന്നത് എങ്ങനെ
XD- യിൽ കാർഡ് ക്ലിപ്പ്ബോർഡിൽ നിന്ന് എത്തുമ്പോൾ അതിനൊപ്പം പ്രവർത്തിക്കില്ല. നിങ്ങൾ ആദ്യം ചെയ്യേണ്ടത് കാർഡിനെ അൺഗ്രൂപ്പ് ചെയ്യുകയാണ്. കാരണം നിങ്ങൾക്ക് ബിറ്റ്, കാർഡുകൾ രചിക്കുന്നതിനുള്ള ആക്സസ് ആവശ്യമാണ്. ഇത് ചെയ്യുന്നതിന്, കാർഡ് തിരഞ്ഞെടുത്ത് Object> Ungroup തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ Shift-Command-G അമർത്തുക.
നിങ്ങളുടെ കാർഡിൽ ഇപ്പോൾ മൂന്ന് കഷണങ്ങൾ അടങ്ങിയിരിക്കുന്നു:
- ഇമേജിനുള്ള ലൈറ്റ് ചാര ബോക്സ്.
- വാചകത്തിന് ഇടത്തരം ചാര ബോക്സ്
- പശ്ചാത്തലമായി ഉപയോഗിക്കുന്ന ബാക്ക് ബോക്സ്.
പ്രകാശ ഗ്രേ ബോക്സ് ഇല്ലാതാക്കുക എന്നതാണ് ആദ്യപടി. നിങ്ങൾ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, ഓപ്ഷണൽ ആണെങ്കിൽ ഇമേജ് ഒരു സ്ഥാനസൂചിക ആയി പ്രവർത്തിക്കുക എന്നതാണ് അതിന്റെ ഏക ഉദ്ദേശ്യം.
ടെക്സ്റ്റിനുള്ള ബോക്സ് യഥാർത്ഥത്തിൽ 50% അതാര്യതയുള്ള ഒരു ഇരുണ്ട ചാരമാണ്. ഈ ബോക്സ് ടെക്സ്റ്റ് പശ്ചാത്തലമായി ഉപയോഗിക്കാം, നിങ്ങൾക്ക് കളർ, ബോക്സ് ഒപാസിറ്റി എന്നിവ മാറ്റാം.
അത് ഉടനെ ദൃശ്യമല്ലെങ്കിലും, ഇളം ചാര ബോക്സ് മെറ്റീരിയൽ ഡിസൈൻ സ്പെക്സിന്റെ പിൻഭാഗത്ത് അതിന്റെ മുകളിലുളള കോണുകൾ 2 പിക്സലുകളായിരിക്കും. നിങ്ങൾ ഒരു ചിത്രം ചേർക്കുമ്പോൾ ഇത് മനസ്സിൽ സൂക്ഷിക്കുക. ഒരു ഇമേജിംഗ് ആപ്ലിക്കേഷനോ XD- യിലോ കൂട്ടിച്ചേർത്ത വൃത്താകൃതിയിലുള്ള കോണറുകളും ഇത് ആവശ്യമായി വരും.
ഇത് കാർഡിന്റെ വിശ്രമ നില എങ്ങനെയെന്നത് നോക്കി നിഴൽ ആവശ്യമുണ്ട്. 2 പിക്സലുകളുടെ കാർഡ് വിശ്രമിക്കുന്ന എലിസബത്ത് അത് വ്യക്തമാക്കും. ഇത് ചേർക്കാൻ, ബ്ലാക്ക് ബാക്ക്ഗ്രൌണ്ട് ആകാരം സെറ്റ് ചെയ്ത് Y, B (ബ്ലർ) മൂല്ല്യങ്ങൾ 2 ആയി സെറ്റ് ചെയ്യുക.
06 of 05
അഡോബ് XD CC- യിൽ മെറ്റീരിയൽ ഡിസൈൻ കാർഡിലേക്ക് ഒരു ഇമേജ് ചേർക്കുന്നത് എങ്ങനെ
നമ്മൾ 344 പിക്സൽ വിസ്താരവും, ഇമേജ് ഏരിയ 150 പിക്സൽ ഉയരവും ( ലൈറ്റ് ഗ്രേ ബോക്സിൻറെ പകുതി ഉയരം ) ഞങ്ങൾ ഫോട്ടോഷോപ്പിൽ ചിത്രം തുറന്നു, വലിപ്പത്തിലേക്ക് മാറ്റി, ഫോട്ടോഷോപ്പിന്റെ കയറ്റുമതിയിൽ @ 2x ഓപ്ഷൻ ഉപയോഗിച്ച് ഇത് സംരക്ഷിച്ചു. ഡയലോഗ് പെട്ടി. ചിത്രം Adobe XD- യിലേക്ക് ഇംപോർട്ട് ചെയ്തു.
പിറ്റോർബോർഡിൽ ഇമേജിനുള്ളിൽ ഞങ്ങൾ ചാരനിറത്തിലുള്ള ചാര ബോക്സ് വലിച്ചിട്ട് ഒബ്ജക്റ്റ്> മാസ്ക് ആകൃതി തിരഞ്ഞെടുത്തു . ഫലം രൂപം വൃത്താകൃതിയിലുള്ള കോണുകൾ എടുക്കൽ ചിത്രം ആയിരുന്നു. അപ്പോൾ ഞങ്ങൾ ചിത്രം അതിന്റെ അവസാന സ്ഥാനത്തേക്ക് നീക്കി.
ചിത്രത്തിൽ നമ്മൾ, ഇടത്തരം ചാര ബോക്സിൻറെ പശ്ചാത്തല വർണ്ണം മാറ്റി, ടെക്സ്റ്റും ലിങ്ക് വാചകത്തിന്റെ നിറവും മാറ്റി.
06 06
Adobe XD CC ഗ്രിഡ് ഫീച്ചർ ഉപയോഗിക്കൽ
കാർഡ് പൂർത്തിയായി ഇപ്പോൾ അതു മെറ്റീരിയൽ ഡിസൈൻ സ്പെക്ക് പ്രകാരം ശരിയായി സ്ഥാപിക്കുക ആവശ്യമാണ്. കാർഡിൻറെ ഇരുവശങ്ങളിലുമായി 8 പിക്സലുകൾ ഉണ്ടെന്നാണ് ഇതിനർത്ഥം, കാർഡിലെ ആപ്ലിക്കേഷൻ ബാറിന് 8 പിക്സലുകൾ വേണം. ഇതിനായി, ആർട്ട്ബോർഡ് നാമത്തിൽ ഒരിക്കൽ ക്ലിക്ക് ചെയ്ത്, പ്രോപ്പർട്ടീസ് പാനലിൽ, ഗ്രിഡ് തിരഞ്ഞെടുക്കുക. ആർട്ട്ബോർഡിന് മുകളിൽ ഗ്രിഡ് ദൃശ്യമാകുന്നു.
മെറ്റീരിയൽ ഡിസൈനിന് സമാനമായ ഗ്രിഡ് സൈസ് ആയിരിയ്ക്കുമ്പോൾ സ്വതവേയുള്ള ഗ്രിഡ് വ്യാപ്തി 8 പിക്സൽ ആണ്. നിങ്ങൾക്ക് മറ്റൊരു വ്യാപ്തി വേണമെങ്കിൽ, ഗ്രിഡ് ഏരിയയിലെ മൂല്യം മാറ്റുക. ഗ്രിഡിന്റെ നിറം മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, വർണ്ണ ചിപ്പ് ക്ലിക്കുചെയ്ത് ഫലമായ കളർ പിക്കറിൽ നിന്ന് ഒരു നിറം തെരഞ്ഞെടുക്കുക.
ഗ്രിഡ് ദൃശ്യമാകുമ്പോൾ, കാർഡിൽ ക്ലിക്കുചെയ്ത് അതിന്റെ അവസാന സ്ഥാനത്തേക്ക് നീക്കുക.
പൂർത്തിയാക്കാൻ, ഞങ്ങൾ കാർഡ് തിരഞ്ഞെടുത്തു, ആവർത്തിച്ച് ഗ്രിഡ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് കാർഡുകളുടെ ഇടയിലുള്ള സ്പേസിംഗ് 8 പിക്സൽ ആയി മാറ്റുകയും ചെയ്തു.