09 ലെ 01
എങ്ങനെ UXPin ഉപയോഗിച്ച് ആരംഭിക്കുക
മൊബൈൽ ഡിസൈനിന്റെ മണ്ഡലത്തിലേയ്ക്ക് മാറുന്നതോടെ, അപ്ലിക്കേഷൻ ഡിസൈനും പ്രതികരിക്കാൻ ഡിസൈനും UX (ഉപയോക്തൃ അനുഭവം), wireframing , ഇൻട്രാക്റ്റീവ് പ്രോട്ടോട്ടിപിങ്, മോക്ക്അപ്പ് എന്നിവയിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചിരിക്കുന്നു. ഈ ലക്ഷ്യം ലക്ഷ്യമിട്ട ഒരു ടൺ ഉപകരണങ്ങളുണ്ട്. സങ്കീർണ്ണമായ, തികച്ചും സങ്കീർണ്ണമായ, അലങ്കാര വസ്തുക്കളിൽ നിന്നുണ്ടാകുന്ന രസാവഹരമാണ് ഇത്. ഡിസൈനർമാർക്ക് ഡിസൈനർമാർ വികസിപ്പിച്ചതുകൊണ്ട്, UXPin എന്നത് കണ്ണ് പിടിച്ചിരുന്ന ഉപകരണങ്ങളിലൊന്നാണ്.
ഞങ്ങൾ മുന്നോട്ടുപോകുന്നതിനു മുമ്പ് ... ഒരു മുന്നറിയിപ്പ്. നിങ്ങളുടേത് സോഫ്റ്റ്വെയർ സ്വന്തമാക്കാൻ ആഗ്രഹിക്കുന്ന ഒരു സ്ഥാപനമാണെങ്കിൽ UXPin നിങ്ങൾക്ക് വേണ്ടിയല്ല. ഈ ആപ്ലിക്കേഷനിൽ ചെയ്ത എല്ലാ പ്രവർത്തനങ്ങളും ബ്രൗസറിൽ ചെയ്തു, സംരക്ഷിക്കുന്ന പ്രൊജക്റ്റുകൾ നിങ്ങളുടെ അക്കൗണ്ടിൽ സംരക്ഷിക്കപ്പെടും.
UXPin- ൽ ആരംഭിക്കുന്നതിന് UXPin- ലേക്ക് ഒരു ബ്രൌസറും തലയും നിങ്ങൾ തുറക്കുന്നു. ഇവിടെ നിന്ന് നിങ്ങൾക്ക് ഒരു സൗജന്യ ട്രയലിനായി സൈൻ അപ്പ് ചെയ്യാം അല്ലെങ്കിൽ നിങ്ങൾക്ക് പ്രതീക്ഷിച്ച അടിസ്ഥാനത്തിൽ ഒരു പ്രതിമാസ പ്ലാനിൽ ക്രമീകരിക്കാം. സൈൻ അപ്പ് പ്രക്രിയ വളരെ എളുപ്പമാണ്, നിങ്ങൾ നിങ്ങളുടെ ഉപയോക്തൃനാമവും പാസ്വേഡും സജ്ജീകരിച്ചാൽ, ആരംഭിക്കാൻ നിങ്ങൾ തയ്യാറാണ്.
02 ൽ 09
UXPin- ൽ ഒരു പ്രോജക്ട് ആരംഭിക്കുന്നത് എങ്ങനെ
നിങ്ങൾ ലോഗിൻ ചെയ്യുമ്പോൾ നിങ്ങൾ ഡാഷ്ബോർഡിൽ എത്തുന്നു, ഇവിടെ നിന്ന് നിങ്ങൾക്ക് പുതിയ വയർഫ്രെയിം, ഒരു പുതിയ മൊബൈൽ പ്രോജക്റ്റ് അല്ലെങ്കിൽ ഒരു ആരേയും വെബ് ഡിസൈൻ പ്രോജക്റ്റ് സൃഷ്ടിക്കാൻ തീരുമാനിക്കാം. നിങ്ങളുടെ ഫോട്ടോഷോപ്പ് അല്ലെങ്കിൽ സ്കെച്ച് പ്രോജക്ടുകളിൽ കൊണ്ടുവരാൻ അനുവദിക്കുന്ന UXPin- നായുള്ള പ്ലഗ്-ഇന്നുകളും ഉണ്ട്. ഇതിനായി ഞാൻ എങ്ങനെയാണ് ഒരു ബാനർ നിർമ്മിക്കുന്നത്, ബാനറിൽ ഒരു ഇ-മെയിൽ ബട്ടൺ ചേർക്കാം. ഇത് നിർവഹിക്കാൻ ഞാൻ ഒരു പുതിയ വയർഫ്രെയിം സൃഷ്ടിക്കുക.
09 ലെ 03
UXPin ഇന്റർഫേസ് എങ്ങനെയാണ് ഉപയോഗിക്കേണ്ടത്
ഡിസൈൻ ഉപരിതലത്തെ നാലു മേഖലകളായി വേർതിരിച്ചിരിക്കുന്നു. ഇടതുവശത്തുള്ള കറുത്ത ഏരിയയിൽ നിങ്ങൾ ഡാഷ്ബോർഡിലേക്ക് മടങ്ങാൻ അനുവദിക്കുകയും, നിങ്ങൾ ഉപയോഗിക്കുന്ന മൂലകങ്ങൾ തുറക്കുകയും സ്പ്രെഡ് എലമെന്റ്സ് പാനൽ തുറക്കുകയും, ഘടകങ്ങൾക്കായി തിരയുകയും പേജിലേക്ക് കുറിപ്പുകൾ ചേർക്കുകയും ടീം അംഗങ്ങളെ ചേർക്കുകയും ചെയ്യുക. താഴെ ഒരു ചെറിയ ട്യൂട്ടോറിയൽ തുറക്കുന്ന ഒരു ബട്ടൺ, നിങ്ങളുടെ അക്കൗണ്ട് ആക്സസ്സുചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന മറ്റൊന്നും, പതിവ് ചോദ്യങ്ങൾ ആക്സസ് ചെയ്യുന്ന മറ്റൊന്ന്, നിങ്ങൾ ചോദ്യങ്ങൾ ചോദിക്കാനും ഫീഡ്ബാക്ക് നൽകാനും അനുവദിക്കുന്നു.
മുകളിൽ നീല പ്രദേശത്ത് ടൂളുകളും സവിശേഷതകളും ഒരു പരമ്പര ആകുന്നു. വലതുവശത്തുള്ള ഇരുണ്ട ബട്ടണുകൾ നിങ്ങളുടെ ഡിസൈൻ പുനർനിർമ്മിക്കാൻ അനുവദിക്കുന്നു, പ്രോജക്റ്റ് ക്രമീകരണങ്ങൾ ക്രമീകരിക്കുക, പേജ് പങ്കിടുകയും പേജിന്റെ ഇൻ-ബ്രൌസർ സിമുലേഷനും ചെയ്യുക.
ഡിസൈൻ ഉപരിതലത്തിനായുള്ള ബിറ്റുകളും കഷണങ്ങളും നിങ്ങൾ എവിടെ നിന്നും എടുക്കുന്നു എന്റർമെൻസ് പാനൽ ആണ്, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ പേര് ചേർക്കുക അല്ലെങ്കിൽ പേജുകൾ ചേർക്കുക അല്ലെങ്കിൽ നീക്കം ചെയ്യുക.
UX ഡിസൈനർമാർക്ക് ഒരു ആശ്ചര്യകരമായ ആഴ്ച്ചകൾ ലൈബ്രറിയാണ്. ഐഒഎസ് മുതൽ ആൻഡ്രോയിഡ് Lolipop വരെയുള്ള അപ്ഗ്രേഡ് 30 ലൈബ്രറികളിൽ നിന്നും നിങ്ങൾക്ക് ഈ പോപ് ഡൌൺലോഡ് ചെയ്യാം. ഫോണ്ട് മിഴിവ് ഐക്കണുകൾ, മൊബൈലിനുള്ള ആംഗ്യ ഐക്കണുകൾ, സോഷ്യൽ വിഡ്ജുകളുടെ ശേഖരം എന്നിവയ്ക്കൊപ്പം നിങ്ങൾക്ക് പൂരിപ്പിച്ചും ഫൗണ്ടേഷനുമൊക്കെ ആക്സസ് ഉണ്ട്.
09 ലെ 09
ഒരു UXPin പേജിൽ ഒരു എലമെന്റ് എങ്ങനെ ചേർക്കാം
ആരംഭിക്കാൻ ഞാൻ ബോക്സ് ഘടകം ഡിസൈൻ ഉപരിതലത്തിലേക്ക് വലിച്ചിഴച്ചു, ഞാൻ മൗസ് റിലീസ് ചെയ്യുമ്പോൾ, പ്രോപ്പർട്ടികളുടെ പാനൽ തുറക്കുന്നു. ഗുണഗണങ്ങളുടെ പേരു് മൂലമുള്ള പേരുകൾ ബട്ടൺ അമർത്തിയാൽ എന്റൈറ്റിന്റെ വീതിയും ഉയരവും ഉറപ്പാക്കുക. നിങ്ങൾക്ക് മൂലകത്തിലേക്ക് പാഡിംഗ് ചേർക്കാം, കോണുകൾ ഓഫ് ചെയ്ത് അതിന്റെ അതാര്യത ക്രമീകരിക്കുക. പശ്ചാത്തല നിറം ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് ഒരു RGBA വർണ്ണ പിക്കർ തുറക്കുന്നു.
തെരഞ്ഞെടുത്ത മൂലകത്തിലേക്ക് നിങ്ങൾക്ക് ഫോണ്ട്, ബോർഡർ, പാറ്റേൺ എന്നിവയും നൽകാം. ഒരു നിശ്ചിത മൂലകത്തിലേക്ക് ഇന്ററാക്റ്റിവിറ്റി ചേർക്കുവാനുള്ള കഴിവിനെ Lightning Bolt നിങ്ങൾക്ക് നൽകുന്നു.
09 05
UXPin- ൽ ടെക്സ്റ്റ് എങ്ങനെ ഫോർമാറ്റ് ചെയ്യാം
വാചകം ചേർക്കാൻ, രൂപഘടന ഉപരിതലത്തിലേക്ക് വാചക ഘടകത്തെ വലിച്ചിട്ട് വാചകം നൽകുക. ഫോണ്ട് പ്രോപ്പർട്ടികൾ തുറക്കുന്നതിനും വാചകം ഫോർമാറ്റ് ചെയ്യുന്നതിനും വാചകം പ്രോപ്പർട്ടി ബട്ടൺ ക്ലിക്കുചെയ്യുക. നിങ്ങൾക്ക് ഒരു ഡാമിയുടെ ഒരു ബ്ലോക്ക് വേണമെങ്കിൽ, ഒരു ടെക്സ്റ്റ് എലമെന്റ് ചേർത്ത് ഫോണ്ട് പ്രോപ്പർട്ടികൾ ലെ GENERATE LOREM IPSUM ബട്ടൺ ക്ലിക്ക് ചെയ്യുക.
09 ൽ 06
ഒരു UXPin പേജിൽ ഒരു ഇമേജ് ചേർക്കുന്നത് എങ്ങനെ
ഈ ടാസ്ക് നിർവ്വഹിക്കുന്നതിന് ഏതാനും മാർഗങ്ങളുണ്ട്. നിങ്ങൾക്ക് ടൂൾബാറിൽ ഇമേജ് ടൂൾ ഉപയോഗിക്കാം, ലൈബ്രറിയിൽ ഇമേജ് എലമെന്റോ ചേർക്കുകയോ മുകളിൽ കാണിച്ചിരിക്കുന്നത് പോലെ ഡിസൈൻ ഉപരിതലത്തിൽ നിങ്ങളുടെ ഡെസ്ക്ടോപ്പിൽ നിന്ന് ഒരു ഇമേജ് നിങ്ങളുടെ ഇമേജിൽ നിന്ന് വലിച്ചിടുകയോ ചെയ്യാം.
09 of 09
ഒരു UXPin പേജിൽ ഒരു ബട്ടൺ എങ്ങനെ ചേർക്കാം
ഒരു ബട്ടൺ എലമെൻറ് നിലവിലുണ്ടെങ്കിലും, തിരച്ചിൽ മേഖലയിലേക്ക് " ബട്ടൺ " എന്ന് പ്രവേശിച്ചാൽ മുകളിൽ കാണുന്നതുപോലെ എല്ലാ ലൈബ്രറികളിലും കാണുന്ന എല്ലാ ബട്ടണുകളും തുറക്കുന്നു. ഡിസൈൻ ഉപരിതലത്തിലേക്ക് നിങ്ങൾക്കായി പ്രവർത്തിച്ച്, വർണങ്ങൾ, ഫോണ്ട്, ബോർഡർ റേഡിയസ് എന്നിവ മാറ്റാൻ ഉള്ള Properties ഉപയോഗിക്കുക. ബട്ടണിനുള്ള ടെക്സ്റ്റ് മാറ്റാൻ, ടെക്സ്റ്റിൽ ഒരിക്കൽ ക്ലിക്കുചെയ്ത് പുതിയ ടെക്സ്റ്റ് എന്റർ ചെയ്യുക.
09 ൽ 08
ഒരു UXPin പേജിലേക്ക് ഇന്ററാക്റ്റിവിറ്റി ചേർക്കുന്നത് എങ്ങനെ
ആദ്യം പ്രത്യക്ഷപ്പെട്ടേക്കാവുന്നതുപോലെ ഇത് സങ്കീർണ്ണമല്ല. ഇമെയിൽ ഇൻപുട്ടിനായി ഞാൻ ഒരു ഇൻപുട്ട് ഘടകം ചേർത്തു, അത് വലിപ്പം മാറ്റുകയും ടെക്സ്റ്റ് നൽകുകയും ടെക്സ്റ്റ് ഫോർമാറ്റ് ചെയ്യുകയും ചെയ്തു. ഇൻപുട്ട് എലമെൻറ് തിരഞ്ഞെടുത്തു് Properties Properties എന്ന ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക. Element Properties പ്രത്യക്ഷപ്പെടുന്ന പാനലിൻറെ മുകളിൽ വലത് കോണിലുള്ള Eyeball Eye-Eye കാണും.
പ്രോപ്പർട്ടികളിൽ ബട്ടൺ തിരഞ്ഞെടുത്ത് ഇടപെടൽ ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക. ആശയവിനിമയ പാനൽ തുറക്കുമ്പോൾ പുതിയ ആശയവിനിമയം തിരഞ്ഞെടുക്കുക. ട്രിഗ്ഗർ പോപ്പ് ഡൗണിൽ നിന്നും തിരഞ്ഞെടുക്കുക. ആക്ഷൻ ഏരിയയിൽ ഷോ എലമെന്റ് തിരഞ്ഞെടുക്കുക. എലിമെന്റ് കാണിക്കണമെന്ന് ഇപ്പോൾ നിങ്ങളോട് ചോദിക്കും. Gunsite ൽ ക്ലിക്ക് ചെയ്ത് Input ഘടകം ക്ലിക്ക് ചെയ്യുക. കണ്ടുപിടിച്ച മൂലകത്തിൽ, ഇപ്പോൾ എലമെന്റിനെ ആസൂത്രണം ചെയ്യണോ വേണ്ടയോ എന്ന് നിർണ്ണയിക്കാവുന്നതാണ്. ഈ സാഹചര്യത്തിൽ ഇൻപുട്ട് ബോക്സിൽ ഒരു എളുപ്പം കൊണ്ടുവരാൻ ഞാൻ തീരുമാനിച്ചു, 300ms ന്റെ സ്ഥിര ദൈർഘ്യ മൂല്യത്തോടുകൂടി ഞാൻ പോയി.
അത് ക്ലിക്കുചെയ്യുമ്പോൾ ബട്ടൺ നീങ്ങുമ്പോൾ 65 പിക്സൽ വലതുഭാഗത്തേക്ക് നീങ്ങാൻ ആഗ്രഹിക്കുന്നു. ഞാൻ ബട്ടൺ തിരഞ്ഞെടുത്തു, ആശയവിനിമയ പാനൽ തുറന്ന് പുതിയ ആശയവിനിമയം തിരഞ്ഞെടുത്തു. ഞാൻ ഈ ക്രമീകരണങ്ങൾ ഉപയോഗിച്ചു:
- ട്രിഗർ : ക്ലിക്ക് ചെയ്യുക
- പ്രവർത്തനം: നീക്കുക
- ദിശ നീക്കുക : x അക്ഷത്തിൽ 65 px
- ആനിമേഷൻ : ലീനിയർ
- ദൈർഘ്യം: 300 ms
ഒരു സമ്പർക്കം നീക്കം ചെയ്യുന്നതിനായി ഘടകങ്ങൾ തെരഞ്ഞെടുക്കുക. പാനലിലെ ഇന്ററാക്ഷൻ തിരഞ്ഞെടുത്ത് അത് ഇല്ലാതാക്കാൻ ട്രാഷ് കാൻഡിൽ ക്ലിക്കുചെയ്യുക.
09 ലെ 09
UXPin ൽ നിങ്ങളുടെ പേജ് എങ്ങനെ പരീക്ഷിക്കാം
നിങ്ങൾ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നുവെന്നതിനാലാണ് പരീക്ഷണം മരിച്ചത്. സിമെലേറ്റ് ഡിസൈൻ ബട്ടൺ ക്ലിക്ക് ചെയ്യുക. ബ്രൗസറിൽ പേജ് തുറക്കും, നിങ്ങൾക്ക് വഴിയിൽ പരീക്ഷിക്കാം. ഒന്നിലധികം പേജുകൾ, ഉപയോഗക്ഷമതാ പരീക്ഷണം, ലൈവ് ഷെയറിംഗ്, എഡിറ്റിംഗ്, ഡാഷ്ബോർഡിലേക്ക് മടങ്ങുക എന്നിങ്ങനെയുള്ള അഭിപ്രായങ്ങൾക്കായി സൈറ്റിന്റെ ഒരു ഇടതുവശത്ത് ഒരു പാനൽ ഉണ്ടായിരിക്കും.
പേജിന്റെ താഴെയായി നിങ്ങൾ സംവേദനാത്മക ഘടകങ്ങൾ കാണിക്കുന്നതിനും, കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും മറ്റുള്ളവരുമായി പ്രൊജക്ട് ലിങ്ക് പങ്കിടുന്നതിനും അനുവദിക്കുന്ന മറ്റൊരു ചെറിയ പാനൽ ആണ്.