01 of 03
ການປັບປຸງໃຫມ່ Atomicio ຫຼ້າສຸດປະກອບມີ Containers Scrollable
ໃນສອງສາມເດືອນຜ່ານມາ ຂ້າພະເຈົ້າໄດ້ສະແດງໃຫ້ເຫັນວິທີ atomic.io ສາມາດນໍາໃຊ້ກັບ prototype motion . ຫນຶ່ງໃນຈຸດທີ່ສໍາຄັນທີ່ຂ້າພະເຈົ້າເຮັດຢູ່ໃນສິ້ນແມ່ນ "ສະແດງໃຫ້ເຫັນການເຄື່ອນໄຫວ" ແທນທີ່ຈະເຮັດໃຫ້ມັນຈິນຕະນາການຂອງລູກຄ້າຫຼືທີມງານແມ່ນສໍາຄັນ. ໃນຄວາມເປັນຈິງ, ນີ້ໄດ້ກາຍເປັນສິ່ງສໍາຄັນທີ່ປະເພດໃຫມ່ຂອງເຄື່ອງມື UX / UI ໃຫມ່ແມ່ນປາກົດຢູ່ໃນ scene. ພວກເຂົາປະກອບມີ - Apple Keynote, Adobe's Edge Animation, After Effects ແລະ UXPin , ເພື່ອຊື່ບາງຄົນ. ເດັກໃຫມ່ໃນບລັອກແມ່ນ Atomic.io ເຊິ່ງຢູ່ໃນເບຕ້າເປີດເມື່ອຂ້ອຍຂຽນກ່ຽວກັບຜະລິດຕະພັນທໍາອິດ.
ສິ່ງທີ່ຖືກຕ້ອງກ່ຽວກັບ beta ເປີດແມ່ນພວກເຂົາໃຫ້ຜູ້ຜະລິດຊອບແວໂອກາດທີ່ຈະເກັບກໍາຂໍ້ມູນກ່ຽວກັບຄຸນນະສົມບັດທີ່ກໍານົດໄວ້, ລວມທັງການລັກສະນະທີ່ຂາດຫາຍໄປ, ແລະຫຼັງຈາກນັ້ນໃຫ້ເຂົາເຈົ້າຕື່ມຄໍາຮ້ອງສະຫມັກແລະໃຫ້ພວກເຂົາທົດສອບກ່ອນການປ່ອຍສິນຄ້າ. ໃນກໍລະນີຂອງ atomic, ຫນຶ່ງໃນລັກສະນະທີ່ຂ້າພະເຈົ້າໄດ້ພາດໂອກາດນີ້ກໍ່ແມ່ນຄວາມສາມາດໃນການເລື່ອນພາບໃນຮູບແບບແນວຕັ້ງຫຼືແນວນອນ. ນີ້ອາດຈະປະກອບມີສິ່ງຕ່າງໆເຊັ່ນວ່າບັດ, ສະແດງພາບສະໄລ້ຫຼືສິ່ງປະຕິບັດທີ່ຜູ້ໃຊ້ຈະເລື່ອນຫຼືລາກພາຍໃນຂອບເຂດຂອງການໂຕ້ຕອບຂອງເວັບໄຊທ໌ຂອງ app ຫຼືເວັບໄຊທ໌.
ນີ້ຕ້ອງໄດ້ເປັນຫົວຂໍ້ທີ່ຜູ້ໃຊ້ຫຼາຍຄົນໄດ້ຖາມເພາະວ່າອຸປະກອນທີ່ເລື່ອນລົງໄດ້ຖືກນໍາສະເຫນີໃນ app ນີ້ໃນເດືອນນີ້, ແລະຂ້ອຍຕ້ອງຍອມຮັບວ່າການສ້າງເນື້ອຫາທີ່ເລື່ອນອອກໃນຮູບແບບຕົ້ນແບບນັ້ນແມ່ນງ່າຍດາຍທີ່ຈະເຮັດໃຫ້.
ນີ້ແມ່ນວິທີການ ...
02 of 03
ວິທີການສ້າງເນື້ອຫາເລື່ອນແນວຕັ້ງໃນອະຕອມ
ທ່ານຈໍາເປັນຕ້ອງລົງທະບຽນຄັ້ງທໍາອິດສໍາລັບການທົດລອງ 30 ວັນຟຣີ, ແລະໃນຕອນທ້າຍຂອງໄລຍະເວລານັ້ນ, ທ່ານຈະໄດ້ນໍາສະເຫນີສາມແຜນການລາຄາ.
ສິ່ງທໍາອິດທີ່ທ່ານຕ້ອງການຮູ້ແມ່ນວຽກງານທັງຫມົດທີ່ທ່ານຈະເຮັດແມ່ນຢູ່ໃນຕົວທ່ອງເວັບແລະແອັບຯແມ່ນແນໃສ່ຢ່າງເຂັ້ມງວດຢູ່ Google Chrome. ເມື່ອທ່ານເຂົ້າສູ່ລະບົບ, ທ່ານຈະຖືກນໍາໄປຫນ້າຫນ້າ ໂຄງການ . ເພື່ອເປີດແອັບຯ, ໃຫ້ຄລິກໃສ່ ປຸ່ມໂຄງການໃຫມ່ .
ໃນເວລາທີ່ການໂຕ້ຕອບປາກົດຂື້ນທ່ານຈະເຫັນມີຈໍານວນເຄື່ອງມືທີ່ຈໍາກັດ, ຄວາມສາມາດໃນການເພີ່ມຫນ້າແລະຂັ້ນຕອນໃນຫນ້າຕ່າງໆ, artboard ແລະ, ໃນດ້ານຂວາ, panel context properties.
ໃນຕົວຢ່າງນີ້, ຂ້າພະເຈົ້າໄດ້ເລີ່ມຕົ້ນດ້ວຍການຕັ້ງຄ່າ iPhone 5 ທີ່ເປັນ 320 x 568.I ຫຼັງຈາກນັ້ນເປີດໂຟນເດີທີ່ມີຮູບພາບຕ່າງໆທີ່ຈະເລື່ອນລົງແລະດຶງມັນລົງໃສ່ canvas. ພວກເຂົາເຈົ້າໄດ້ຖືກເພີ່ມໂດຍອັດຕະໂນມັດໃນໂຄງການແລະທ່ານສາມາດເບິ່ງວ່າພວກເຂົາຢູ່ໃນຂັ້ນຕອນສ່ວນບຸກຄົນຖ້າທ່ານ ກົດແຖບເລນ . ຂ້ອຍເລືອກເຄື່ອງມືລູກສອນ (ການເລືອກ), ເລືອກຮູບພາບແລະລາກລົງໃນຕໍາແຫນ່ງໃຫມ່ເພື່ອເພີ່ມຊ່ອງຫວ່າງລະຫວ່າງເຂົາເຈົ້າ. ຫຼັງຈາກນັ້ນຂ້າພະເຈົ້າໄດ້ຄັດເລືອກເອົາຮູບພາບທັງຫມົດແລະ ກົດປຸ່ມ Distributed Vertically ໃນແຖບເຄື່ອງມື. ນີ້ແມ່ນຊ່ອງຫວ່າງເທົ່ານັ້ນ.
ຂັ້ນຕອນຕໍ່ໄປແມ່ນເລືອກເອົາເນື້ອຫາທັງຫມົດທີ່ຈະເລື່ອນລົງແລະ ກົດປຸ່ມ Container ຫຼືເລືອກ Create Scroll Container ຈາກປຸ່ມ Group ກົດປຸ່ມ ລົງ. ເມື່ອຖາດດັ່ງກ່າວຖືກສ້າງຂື້ນ - ທ່ານຈະເຫັນມັນຢູ່ໃນແຜງ Layers - ໃຫ້ຄລິກໃສ່ບ່ອນເກັບມ້ຽນແລະດຶງຈັບດ້ານລຸ່ມຂຶ້ນໄປດ້ານລຸ່ມຂອງຖັນ . ກົດປຸ່ມ Preview ຢູ່ດ້ານລຸ່ມຂອງໂປແກຼມ Properties ແລະນີ້ຈະເປີດປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ໃຊ້ລໍ້ເລື່ອນຫນູຂອງທ່ານເພື່ອເລື່ອນເນື້ອຫາ. ເພື່ອກັບໄປຫາໂຄງການຂອງທ່ານ, ໃຫ້ຄລິກໃສ່ປຸ່ມດັດແກ້ ຢູ່ທາງລຸ່ມລຸ່ມຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ.
03 of 03
ວິທີການສ້າງເນື້ອຫາເລື່ອນ Horizontal ໃນອະຕອມ
ການເລື່ອນພາບຕາມແນວນອນແມ່ນງ່າຍດາຍທີ່ຈະເຮັດສໍາເລັດ.
ໃນກໍລະນີນີ້, dragged ຊຸດຂອງຮູບພາບກ່ຽວກັບການ Canvas ແລະ butted ພວກເຂົາຕໍ່ຕ້ານກັນແລະກັນ. ດ້ວຍຮູບພາບຕ່າງໆທີ່ເລືອກ, ຂ້ອຍຈຶ່ງກົດປຸ່ມ Align Top ເພື່ອໃຫ້ແນ່ໃຈວ່າທຸກຄົນມີຄວາມສອດຄ່ອງກັບກັນແລະກັນ.
ຫຼັງຈາກນັ້ນຂ້າພະເຈົ້າໄດ້ກົດປຸ່ມ Shift ແລະເລືອກເອົາແຕ່ລະ layer ໃນແຜງ Layers. ດ້ວຍພາບທີ່ເລືອກ, ຂ້ອຍ ກົດປຸ່ມ Container ແລະ , ໃນໂປແກມ Properties, ເລືອກ Horizontally in the Behaviors area.
ຫຼັງຈາກນັ້ນຂ້າພະເຈົ້າໄດ້ທົດສອບໂຄງການໃນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບໂດຍກົດປຸ່ມ Preview.
ເຖິງແມ່ນວ່າຂ້ອຍໄດ້ສະແດງວິທີການສ້າງສະເພາະຂອງການເລື່ອນແນວຕັ້ງແລະແນວນອນຂອງແຕ່ລະບຸກຄົນ, ທ່ານສາມາດນໍາເອົາບັນຈຸຢູ່ໃນບ່ອນທີ່ແຍກຕ່າງຫາກຂອງຫນ້າຈໍໄດ້. ຕົວຢ່າງເຊັ່ນຫນ້າເວັບສາມາດດຶງເນື້ອໃນຢູ່ໃນເມນູດ້ານຂ້າງແລະເນື້ອຫາທີ່ເລື່ອນພາບໃນແຖວສະໄລ້ໃນຫນ້າດຽວກັນ. ໃນຄວາມເປັນຈິງ, ຖາດທີ່ສາມາດມີການເລື່ອນພາບຕັ້ງແຕ່ແນວຕັ້ງແລະແນວນອນສໍາລັບລາຍການເຊັ່ນ: ຕົວເລືອກຮູບພາບທີ່ມີຮູບແບບອາຍແກັສຫຼືຮູບຮ່າງ.
ເພື່ອຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບຄຸນລັກສະນະນີ້ໃນ atomic.io ກວດສອບການອອກ:
- The Blog announcement
- tutorial ການຖອນບົດເລື່ອງ
- Masking using Containers
- ບັນຫາການແກ້ໄຂບັນຫາການກັ່ນຕອງ