01 of 09
ເຮັດແນວໃດເພື່ອໃຫ້ຕົວເອງເລີ່ມຕົ້ນດ້ວຍ UXPin
ໃນຂະນະທີ່ພວກເຮົາຍ້າຍໄປສູ່ດິນແດນຂອງການອອກແບບມືຖື, ການອອກແບບ app ແລະການອອກແບບທີ່ຕອບສະຫນອງໄດ້ມີຈຸດສຸມເພີ່ມຂຶ້ນກ່ຽວກັບ UX (ປະສົບການຂອງຜູ້ໃຊ້) ແລະ wireframing , prototyping interactivity ແລະ mockups. ມີໂຕນເຄື່ອງມືອອກມາມີຈຸດປະສົງຢູ່ທີ່ນີ້ແລະພວກເຂົາເຈົ້າດໍາເນີນການ gamut ອັນເຕັມທີ່ຈາກສະລັບສັບຊ້ອນ, behemoths laden ມີຄຸນສົມບັດ ladle ກັບ sparse ແລະເປົ່າທີ່ເປັນປະໂຫຍດ. ຫນຶ່ງໃນເຄື່ອງມືທີ່ຈັບຕາຂອງຂ້ອຍແມ່ນ UXPin ພຽງແຕ່ເນື່ອງຈາກວ່າມັນຖືກພັດທະນາໂດຍຜູ້ອອກແບບສໍາລັບນັກອອກແບບ.
ກ່ອນທີ່ພວກເຮົາຈະກ້າວໄປຂ້າງຫນ້າ ... caveat. ຖ້າທ່ານເປັນອົງການທີ່ຕ້ອງການເປັນເຈົ້າຂອງຊອບແວແລ້ວ UXPin ບໍ່ແມ່ນສໍາລັບທ່ານ. ທັງຫມົດຂອງວຽກເຮັດໃນ app ນີ້ແມ່ນເຮັດໃນເບົາເຊີແລະໂຄງການຕ່າງໆທີ່ທ່ານປະຫຍັດຈະຖືກບັນທຶກໄວ້ໃນບັນຊີຂອງທ່ານ.
ເພື່ອເລີ່ມຕົ້ນດ້ວຍ UXPin ທ່ານເປີດຕົວເບົາເຊີແລະໄປຫາ UXPin. ຈາກທີ່ນີ້ທ່ານສາມາດລົງທະບຽນສໍາລັບການທົດລອງຟຣີຫຼືຈັດແຈງສໍາລັບແຜນປະຈໍາເດືອນໂດຍອີງຕາມຄວາມຕ້ອງການຂອງທ່ານ. ຂະບວນການເຂົ້າສູ່ລະບົບແມ່ນງ່າຍດາຍແລະເມື່ອທ່ານຕັ້ງຊື່ຜູ້ໃຊ້ແລະລະຫັດຜ່ານຂອງທ່ານ, ທ່ານພ້ອມທີ່ຈະເລີ່ມຕົ້ນ.
02 of 09
ວິທີການເລີ່ມໂຄງການໃນ UXPin
ໃນເວລາທີ່ທ່ານເຂົ້າສູ່ລະບົບທ່ານມາຮອດ Dashboard ແລະ, ຈາກນີ້ທ່ານສາມາດຕັດສິນໃຈສ້າງ wireframe ໃຫມ່, ໂຄງການມືຖືໃຫມ່ຫຼືໂຄງການ Web Responsive Web Design. ນອກນັ້ນຍັງມີ plug-ins ສໍາລັບ UXPin ເຊິ່ງຈະຊ່ວຍໃຫ້ທ່ານນໍາເອົາໂຄງການ Photoshop ຫຼື Sketch ຂອງທ່ານ. ສໍາລັບວິທີນີ້ຂ້າພະເຈົ້າຈະສ້າງປ້າຍໂຄສະນາທີ່ມີຂໍ້ຄວາມບາງຢ່າງແລະເພີ່ມປຸ່ມອີເມວເພື່ອປ້າຍໂຄສະນາ. ເພື່ອເຮັດສໍາເລັດນີ້ຂ້ອຍໄດ້ເລືອກສ້າງ wireframe ໃຫມ່.
03 of 09
ວິທີການໃຊ້ UXPin Interface
ດ້ານການອອກແບບແມ່ນແຕກອອກເປັນສີ່ພື້ນທີ່. ໃນພື້ນທີ່ສີດໍາຢູ່ເບື້ອງຊ້າຍມືແມ່ນຊຸດເຄື່ອງມືທີ່ໃຫ້ທ່ານກັບຄືນໄປຫາ dashboard, ເປີດເອກະສານທີ່ທ່ານຈະໃຊ້, ເປີດເອກະສານ Smart Elements, ຄົ້ນຫາອົງປະກອບ, ເພີ່ມຂໍ້ຄວາມໃສ່ຫນ້າແລະເພີ່ມສະມາຊິກທີມ. ຢູ່ທາງລຸ່ມແມ່ນປຸ່ມທີ່ເປີດຕົວສອນສັ້ນໆ, ອີກອັນຫນຶ່ງທີ່ອະນຸຍາດໃຫ້ທ່ານເຂົ້າເຖິງບັນຊີຂອງທ່ານແລະອື່ນທີ່ສາມາດເຂົ້າເຖິງ FAQ, ໃຫ້ທ່ານຖາມຄໍາຖາມແລະຄໍາຕອບ.
ໃນເຂດພື້ນທີ່ສີຟ້າຕາມທາງເທິງແມ່ນຊຸດເຄື່ອງມືແລະຄຸນສົມບັດ. ປຸ່ມຊ້ໍາໃນເບື້ອງຂວາເຮັດໃຫ້ທ່ານເລັ່ງການອອກແບບຂອງທ່ານ, ດັດປັບການຕັ້ງຄ່າຂອງໂຄງການ, ແບ່ງປັນຫນ້າແລະເຮັດແບບຈໍາລອງໃນເບົາເຊີຂອງຫນ້າ.
ແຜງອົງປະກອບແມ່ນບ່ອນທີ່ທ່ານເອົາ bits ແລະຊິ້ນສໍາລັບການອອກແບບ Surface, ຊື່ໂຄງການຂອງທ່ານແລະເພີ່ມຫຼືເອົາຫນ້າ.
ຫ້ອງສະຫມຸດອົງປະກອບແມ່ນຄວາມແປກໃຈສໍາລັບຜູ້ອອກແບບ UX. ຕົວເລືອກນີ້ຈະຊ່ວຍໃຫ້ທ່ານເລືອກເອົາສະຖານທີ່ຕ່າງໆຈາກ iOS ກັບ Android Lolipop. ທ່ານຍັງສາມາດເຂົ້າເຖິງອົງປະກອບ Bootstrap ແລະ Foundation ພ້ອມກັບຮູບສັນຍາລັກ Font Awesome, ໄອຄອນ Gesture ສໍາລັບມືຖືແລະຊຸດຂອງ Social Widgets.
04 of 09
ວິທີການເພີ່ມເອກະສານເປັນຫນ້າ UXPin
ເພື່ອເລີ່ມຕົ້ນຂ້ອຍໄດ້ລາກອົງປະກອບກ່ອງໃສ່ພື້ນຜິວການອອກແບບແລະເມື່ອຂ້ອຍປ່ອຍຫນູ, ໂປ ແກມ Properties ເປີດ. ປຸ່ມຄຸນລັກສະນະຊ່ວຍໃຫ້ທ່ານຊື່ອົງປະກອບແລະກໍານົດຄ່າຄວາມສູງແລະຄ່າຕໍາແຫນ່ງຂອງອົງປະກອບ. ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມ padding ກັບອົງປະກອບ, ຮອບແຈແລະດັດປັບຄວາມໂປ່ງໃສຂອງມັນ. ກົດປຸ່ມສີພື້ນຫລັງເປີດຕົວເກັບສີ RGBA.
ນອກນັ້ນທ່ານຍັງສາມາດກໍາຫນົດຕົວອັກສອນ, ຂອບແລະຮູບແບບໃຫ້ກັບອົງປະກອບທີ່ເລືອກ. Bolt ຟ້າຜ່າຊ່ວຍໃຫ້ທ່ານມີຄວາມສາມາດເພີ່ມປະຕິສໍາພັນກັບອົງປະກອບທີ່ເລືອກ.
05 of 09
ວິທີການເພີ່ມແລະຮູບແບບຂໍ້ຄວາມໃນ UXPin
ເພື່ອເພີ່ມຂໍ້ຄວາມ, ດຶງອົງປະກອບຂອງບົດເລື່ອງໃນດ້ານການອອກແບບແລະໃສ່ຂໍ້ຄວາມຂອງທ່ານ. ກົດ ປຸ່ມ Property Property ເພື່ອເປີດຄຸນສົມບັດ Font ແລະຮູບແບບຂອງທ່ານ. ຖ້າທ່ານຕ້ອງການຂໍ້ຄວາມຂີ້ເຫຍື້ອ, ໃຫ້ເພີ່ມສ່ວນປະກອບຂອງບົດເລື່ອງແລະກົດປຸ່ມ GENERATE LOREM IPSUM ໃນຄຸນລັກສະນະຂອງ Font.
06 of 09
ວິທີການເພີ່ມຮູບພາບເພື່ອຫນ້າ UXPin
ມີສອງວິທີທີ່ຈະເຮັດສໍາເລັດຫນ້າວຽກນີ້. ທ່ານສາມາດໃຊ້ Image Tool ໃນແຖບເຄື່ອງມື, ເພີ່ມອົງປະກອບຮູບພາບຈາກຫໍສະຫມຸດຫຼືພຽງແຕ່ລາກແລະວາງພາບຈາກ desktop ຂອງທ່ານໃສ່ອົງປະກອບໃນພື້ນທີ່ການອອກແບບທີ່ສະແດງຂ້າງເທິງ.
07 of 09
ວິທີການເພີ່ມປຸ່ມເພື່ອຫນ້າ UXPin
ເຖິງແມ່ນວ່າມີອົງປະກອບປຸ່ມແຕ່ກົດ " ປຸ່ມ " ເຂົ້າໄປໃນເຂດ ຄົ້ນຫາ , ດັ່ງທີ່ສະແດງຢູ່ຂ້າງເທິງ, ເປີດປຸ່ມທັງຫມົດທີ່ພົບຢູ່ໃນທຸກຫ້ອງສະຫມຸດ. ລາກຫນຶ່ງທີ່ເຮັດວຽກສໍາລັບທ່ານໃນດ້ານການອອກແບບແລະໃຊ້ຄຸນສົມບັດເພື່ອປ່ຽນສີ, ຕົວອັກສອນ, ແລະແມ້ກະທັ້ງຂອບເຂດແດນ. ການປ່ຽນແປງຂໍ້ຄວາມພາຍໃນປຸ່ມ, ໃຫ້ຄລິກໃສ່ຂໍ້ຄວາມຄັ້ງທໍາອິດແລະໃສ່ຂໍ້ຄວາມໃຫມ່.
08 of 09
ວິທີການເພີ່ມການໂຕ້ຕອບກັບຫນ້າ UXPin
ນີ້ບໍ່ແມ່ນສັບສົນຍ້ອນວ່າມັນອາດຈະປາກົດຂຶ້ນມາຄັ້ງທໍາອິດ. ສໍາລັບຂໍ້ມູນອີເມວ, ຂ້າພະເຈົ້າໄດ້ເພີ່ມອົງປະກອບເຂົ້າ, ປັບຂະຫນາດມັນ, ເຂົ້າຂໍ້ຄວາມແລະກໍານົດຂໍ້ຄວາມ. ກັບອົງປະກອບ Input ທີ່ເລືອກແລ້ວ ໃຫ້ຄລິກໃສ່ປຸ່ມ Properties ແລະເມື່ອ ຄຸນສົມບັດ Element ປາກົດໃຫ້ກົດປຸ່ມ Visibility -eyeball - ໃນແຈຂວາເທິງຂອງແຜງ.
ເລືອກປຸ່ມແລະກົດ ປຸ່ມ Interactions - Lightning Bolt - ໃນຄຸນສົມບັດ. ເມື່ອຄະນະປະຕິບັດງານເປີດ, ເລືອກການໂຕ້ຕອບໃຫມ່. ເລືອກຄລິກຈາກການກົດປຸ່ມກົດບໍ່ລົງ. ໃນພື້ນທີ່ປະຕິບັດງານໃຫ້ເລືອກສະແດງ Element. ໃນປັດຈຸບັນທ່ານຈະຖືກຖາມວ່າອົງປະກອບທີ່ຈະສະແດງ. ກົດຄັ້ງດຽວໃນ gunsite ແລະຄລິກໃສ່ອົງປະກອບເຂົ້າ. ກັບອົງປະກອບທີ່ໄດ້ກໍານົດ, ໃນປັດຈຸບັນທ່ານສາມາດກໍານົດວ່າຈະມີຊີວິດຊີວາຫຼືບໍ່. ໃນກໍລະນີນີ້ຂ້າພະເຈົ້າໄດ້ຕັດສິນໃຈສະແດງກ່ອງຂໍ້ມູນໃສ່ດ້ວຍຄວາມສະດວກສະບາຍແລະມີມູນຄ່າໄລຍະເວລາຂອງຄ່າ 300 ມ.
ຂ້າພະເຈົ້າຍັງຕ້ອງການມີປຸ່ມຍ້າຍປະມານ 65 pixels ຕໍ່ຂວາເມື່ອມັນຖືກກົດ. ຂ້ອຍໄດ້ເລືອກປຸ່ມ, ເປີດກະດານການໂຕ້ຕອບແລະການ ໂຕ້ຕອບໃຫມ່ທີ່ ເລືອກ. ຂ້ອຍໃຊ້ການຕັ້ງຄ່າເຫຼົ່ານີ້:
- ຜົນກະທົບຕໍ່ : ກົດ
- ປະຕິບັດງານ: ຍ້າຍໂດຍ
- Move Direction : 65 px on the x axis
- Animation : Linear
- ໄລຍະເວລາ: 300 ມ
ເພື່ອເອົາການໂຕ້ຕອບເລືອກເອົາອົງປະກອບແລະເປີດເອກະສານປະຕິສໍາພັນ. ເລືອກການໂຕ້ຕອບໃນກະດານແລະຄິກຖັງຂະຫຍະເພື່ອລຶບມັນ.
09 of 09
ວິທີການທົດສອບຫນ້າຂອງທ່ານໃນ UXPin
ເນື່ອງຈາກຄວາມຈິງທີ່ທ່ານກໍາລັງເຮັດວຽກຢູ່ໃນຕົວທ່ອງເວັບ, ການທົດສອບແມ່ນງ່າຍດາຍທີ່ຕາຍແລ້ວ. ກົດປຸ່ມ Simulate Design . ຫນ້າຈະເປີດໃນເບົາເຊີແລະທ່ານສາມາດທົດສອບວິທີການ. ນອກນັ້ນຍັງມີແຜງເພີ່ມໃສ່ເບື້ອງຊ້າຍຂອງຫນ້າທີ່ອະນຸຍາດໃຫ້ຄໍາເຫັນ, ແຜນທີ່ເວັບໄຊທ໌ຖ້າມີຫລາຍຫນ້າ, ການທົດສອບການນໍາໃຊ້, ການແບ່ງປັນສົດ, ການດັດແກ້ແລະການກັບໄປທີ່ Dashboard.
ຢູ່ດ້ານລຸ່ມຂອງຫນ້ານີ້ແມ່ນກະດານຂະຫນາດນ້ອຍອື່ນທີ່ຊ່ວຍໃຫ້ທ່ານສະແດງໃຫ້ເຫັນອົງປະກອບແບບໂຕ້ຕອບ, ສະແດງຫຼືຊ່ອນຄວາມຄິດເຫັນແລະແບ່ງປັນເຊື່ອມຕໍ່ໂຄງການກັບຜູ້ອື່ນ.