ຂໍ້ກໍານົດການອອກແບບວັດຖຸຈາກກູໂກແມ່ນຈຸດປະສົງໃນເວລາທີ່ Android Platform ເປັນວິທີການແນະນໍາຄວາມສອດຄ່ອງຂອງການອອກແບບໃນເວທີ.
01 of 06
ວິທີການສ້າງບັດອອກແບບວັດຖຸໃນ Adobe Experience Design CC
ເມື່ອຜູ້ອອກແບບໄດ້ເລີ່ມຕົ້ນສ້າງມັນແລະເຂົ້າໃຈແນວຄິດທີ່ຢູ່ເບື້ອງຫຼັງ, Material Design ໄດ້ກາຍເປັນຫນຶ່ງໃນປັດຍາທີ່ມີອິດທິພົນທີ່ສຸດໃນ ການອອກແບບເວັບແລະມືຖື . ທັງຫມົດທີ່ທ່ານຕ້ອງການເພື່ອເຂົ້າໄປເບິ່ງສິ່ງທີ່ພວກເຮົາກໍາລັງຊອກຫາແມ່ນເພື່ອເຮັດການຄົ້ນຫາການອອກແບບວັດຖຸໃນ Pinterest ແລະທ່ານຈະເຫັນຫລາຍຮ້ອຍຕົວຢ່າງແລະການທົດລອງກ່ຽວກັບອຸປະກອນ, ແທັບເລັດແລະເວັບໄຊທ໌ຕ່າງໆ.
ລັກສະນະທີ່ຫນ້າສົນໃຈຂອງການອອກແບບວັດຖຸແມ່ນການຄິດຂອງ Google ກ່ຽວກັບແນວໃດ app ຄວນຈະປາກົດແລະເຮັດວຽກໃນອຸປະກອນມືຖືແຕ່ແນວຄິດຖືກນໍາໃຊ້ກັບຫນ້າຈໍທີ່ມີຂະຫນາດໃດໃນເວທີໃດກໍ່ຕາມ. ໃນເວລາທີ່ກູໂກໄດ້ກ່າວໃນວັກທໍາອິດຂອງຂໍ້ກໍານົດວ່າ, "ພວກເຮົາໄດ້ທ້າທາຍຕົວເຮົາເອງເພື່ອສ້າງພາສາຕາສໍາລັບຜູ້ໃຊ້ຂອງພວກເຮົາ, ເຊິ່ງ synthesizes ຫຼັກການພື້ນເມືອງຂອງການອອກແບບທີ່ດີດ້ວຍຄວາມຄິດສ້າງສັນແລະຄວາມເປັນໄປໄດ້ຂອງເຕັກໂນໂລຢີແລະວິທະຍາສາດ. ນີ້ແມ່ນການອອກແບບອຸປະກອນ. spec ນີ້ແມ່ນເອກະສານທີ່ມີຊີວິດທີ່ຈະໄດ້ຮັບການປັບປຸງດັ່ງທີ່ພວກເຮົາສືບຕໍ່ພັດທະນານະໂຍບາຍແລະຂໍ້ສະເພາະຂອງການອອກແບບວັດຖຸ. "
ອຸປະກອນການເວົ້າກ່ຽວກັບ, ໃນຄໍາສັບທົ່ວໄປຫຼາຍ, ແມ່ນເອກະສານແລະລັກສະນະຂອງການອອກແບບວັດຖຸແມ່ນບັດ. ຄິດວ່າບັດດັດນີຢູ່ດ້ານຫນຶ່ງແລະທ່ານຢູ່ໃນເສັ້ນຂວາ. ບັດແມ່ນເອກະສານທີ່ມີຮູບພາບ, ວິດີໂອ, ການເຊື່ອມໂຍງຂໍ້ຄວາມແລະອື່ນໆແຕ່ບ່ອນທີ່ພວກມັນແຕກຕ່າງຈາກການອອກແບບທີ່ຕອບໂຕ້ຫຼາຍທີ່ສຸດແມ່ນພວກເຂົາຕ້ອງໄດ້ເນັ້ນໃສ່ຫົວຂໍ້ດຽວ. ບັດມີມຸມມົນ, ມີບ່ອນທີ່ມີເງົາອ່ອນໆສະແດງໃຫ້ເຫັນວ່າພວກເຂົາຢູ່ເທິງຫນ້າດິນແລະຖ້າພວກເຂົາທັງຫມົດຢູ່ໃນຍົນດຽວກັນພວກມັນເອີ້ນວ່າ "ການລວບລວມ".
ໃນນີ້ "ວິທີການ" ພວກເຮົາກໍາລັງຈະສ້າງບັດໂດຍອີງໃສ່ spec ໄດ້. ແທນທີ່ຈະສ້າງບັດດ້ວຍເຄື່ອງມືການສ້າງຮູບພາບແລະການແຕ້ມຮູບຕ່າງໆ, ເຮົາຈະມາຈາກທິດທາງທີ່ແຕກຕ່າງກັນ. ພວກເຮົາຈະນໍາໃຊ້ເຄື່ອງມືໃນການອອກແບບປະສົບການຂອງ Adobe ທີ່ປະຈຸບັນຢູ່ໃນສະແດງສາທາລະນະ Macintosh ເທົ່ານັ້ນແລະບໍ່ເສຍຄ່າ. ທ່ານສາມາດດາວໂຫລດໄດ້ທີ່ນີ້.
ໃຫ້ເລີ່ມຕົ້ນ.
02 of 06
ສ້າງ Artboard ແບບ Prototype ໃນ Adobe Experience Design CC
ບໍ່ມີວິທີທີ່ເຫັນໄດ້ຊັດເຈນທີ່ຈະສ້າງຫນ້າຈໍ Android ຈາກ Start Screen ໃນ Experience Design CC (XD). ສິ່ງທີ່ພວກເຮົາໃຊ້ໃນເວລາທີ່ພວກເຮົາເປີດ XD ແມ່ນເພື່ອເລືອກເອົາຕົວເລືອກ iPhone 6 ແລະໃນເວລາທີ່ຫນ້າຈໍເປີດ, ພວກເຮົາເລືອກ ເຄື່ອງມື Artboard ຢູ່ດ້ານລຸ່ມຂອງແຖບເຄື່ອງມືແລະເລືອກ Android Mobile ຈາກການເລືອກເທິງແຜງຄຸນສົມບັດດ້ານຂວາ. ຫຼັງຈາກນັ້ນ, ພວກເຮົາສະຫຼັບໄປຫາເຄື່ອງມືການຄັດເລືອກ, ໃຫ້ຄລິກໃສ່ຊື່ artboard iPhone ແລະລຶບ artboard. ບໍ່ມີອີກແລ້ວ.
ໃນຮຸ່ນ XD ປັດຈຸບັນ, ມີລູກສອນນ້ອຍໆຢູ່ຂ້າງ iPhone 6 ເຊິ່ງ, ເມື່ອກົດ, ເປີດເມນູແບບເລື່ອນລົງ. ຈາກທີ່ນັ້ນທ່ານເລືອກຮຸ່ນ Android Mobile ແລະ Androidboard ມືຖື Androidboard ທີ່ເລືອກທີ່ຈະເປີດໃນອິນເຕີເຟດ.
ເພື່ອໃຫ້ແນ່ໃຈວ່າພວກເຮົາມີພື້ນທີ່ຫນ້າຈໍທີ່ເຫມາະສົມສໍາລັບບັດ, ພວກເຮົາມັກໄປ Sketch 3 ແລະຄັດລອກແລະວາງແຖບສະຖານະ, ແຖບ Nav ແລະແຖບ App ຈາກ Template Design Design ສູ່ artboard. Sketch 3.2 ມີເອກະສານການອອກແບບວັດຖຸ ( File> New From Template> Design Material ) ແລະອີກປະການຫນຶ່ງທີ່ບໍ່ດີແມ່ນ Kyle Ledbetter ທີ່ທ່ານສາມາດໄດ້ຮັບທີ່ນີ້. ຖ້າທ່ານບໍ່ມີ Sketch, ທ່ານສາມາດຄັດລອກແລະວາງພວກມັນອອກຈາກກາຕູນ XD ທີ່ພົບໃນ File> Open UI Kit> Google Material . ນອກນັ້ນທ່ານຍັງສາມາດດາວໂຫລດພວກມັນຈາກ Google ເພື່ອນໍາໃຊ້ໃນ Photoshop, Illustrator, After Effects ແລະ Sketch.
03 of 06
ເພີ່ມບັດອອກແບບວັດຖຸເພື່ອ Adobe XD CC Artboard
ຫນຶ່ງໃນລັກສະນະທີ່ເປັນປະໂຫຍດທີ່ສຸດຂອງ XD ແມ່ນ ການລວມເອົາຊຸດ UI ສໍາລັບ Apple iOS, Google Material ແລະ Microsoft Windows. ໃນຫຼາຍດ້ານ, ພວກເຂົາເພີ່ມຄໍາສັບ "Rapid" ກັບຄໍາວ່າ "Prototyping ຢ່າງໄວວາ". ນອກຈາກນັ້ນ, ພວກເຂົາເຮັດໃຫ້ວຽກງານຂອງຜູ້ອອກແບບງ່າຍຂຶ້ນໃນອົງປະກອບ UI ທົ່ວໄປທີ່ບໍ່ຈໍາເປັນຕ້ອງໄດ້ຮັບການສ້າງຄືນໃຫມ່ໃນແບບການອອກແບບເຊັ່ນ Photoshop, Illustrator, Sketch.
ອົງປະກອບ UI ທີ່ພວກເຮົາຈໍາເປັນຕ້ອງເປັນບັດ. ເພື່ອເຂົ້າຫາມັນ, ພວກເຮົາໄດ້ເລືອກ File> Open UI Kit> Google Material ແລະຊຸດເປີດເປັນເອກະສານໃຫມ່. ອົງປະກອບທີ່ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ພົບຢູ່ໃນຫມວດບັດ.
ສິ່ງທີ່ພວກເຮົາຮັກກ່ຽວກັບການເຫຼົ່ານີ້ແມ່ນພວກເຂົາປະຕິບັດຕາມຂໍ້ກໍານົດການອອກແບບວັດສະດຸດັ່ງທີ່ໄດ້ລະບຸໄວ້ໃນຂໍ້ມູນລະດັບ Blocks ຂໍ້ມູນເຊັ່ນດຽວກັນກັບຮູບແບບຂໍ້ມູນແລະການວາງສະແດງຂໍ້ມູນ spacing ໄວ້ໃນ Spec Typography.
ແບບບັດທີ່ພວກເຮົາຕ້ອງການແມ່ນຫນຶ່ງໃນເບື້ອງຊ້າຍດ້ານລຸ່ມ. ພວກເຮົາພຽງແຕ່ marquee ມັນກັບຫນູຂອງພວກເຮົາແລະຄັດລອກມັນໄປ clipboard. ແຕ່ໂຊກບໍ່ດີ, XD ບໍ່ມີໂຕ້ຕອບແທັບສໍາລັບເອກະສານເປີດ. ສິ່ງທີ່ພວກເຮົາເຮັດແມ່ນຍ້າຍປ່ອງຢ້ຽມຂອງເອກະສານເປີດນ້ອຍໆເພື່ອເປີດເຜີຍໃຫ້ເຫັນວ່າພວກເຮົາກໍາລັງເຮັດວຽກ, ເລືອກມັນແລະວາງ. ວິທີການປ່ຽນແປງຢ່າງໄວວາລະຫວ່າງເອກະສານ XD ເປີດແມ່ນເພື່ອ ກົດ Command - ' .
04 of 06
ວິທີການແກ້ໄຂອົງປະກອບອອກແບບວັດສະດຸໃນ Adobe Experience Design CC
ໃນເວລາທີ່ບັດໃນ XD ມາຈາກຄລິບບອດບໍ່ໄດ້ເລີ່ມເຮັດວຽກກັບມັນ. ສິ່ງທໍາອິດທີ່ທ່ານຕ້ອງເຮັດ ຄືການກັກກາດບັດ ເພາະວ່າທ່ານຈໍາເປັນຕ້ອງເຂົ້າເຖິງບິດແລະຊິ້ນສ່ວນປະກອບບັດ. ເພື່ອເຮັດສິ່ງນີ້, ເລືອກເອົາບັດແລະ ຄັດເລືອກເອົາວັດຖຸ> ປະເພດຫຍໍ້ ຫຼື ກົດ Shift-Command-G.
ບັດຂອງທ່ານປະຈຸບັນປະກອບດ້ວຍສາມຊິ້ນ:
- ກ່ອງສີເທົາອ່ອນສໍາລັບຮູບພາບ.
- ກ່ອງສີເທົາຂະຫນາດກາງສໍາລັບຂໍ້ຄວາມ
- ປ່ອງກັບຄືນໄປບ່ອນນໍາໃຊ້ເປັນພື້ນຖານ.
ຂັ້ນຕອນທໍາອິດແມ່ນການລຶບກ່ອງສີຂີ້ເຖົ່າເບົາ. ຈຸດປະສົງດຽວຂອງມັນແມ່ນເຮັດເປັນບ່ອນວາງສະແດງສໍາລັບຮູບພາບທີ່ເຮັດໃຫ້ມັນ, ຖ້າທ່ານເລືອກ, ເລືອກ.
ປ່ອງທີ່ມີຂໍ້ຄວາມແມ່ນຕົວຈິງແລ້ວເປັນສີຂີ້ເຖົ່າຊ້ໍາທີ່ມີຄວາມລະອຽດ 50%. ກ່ອງນີ້ສາມາດຖືກນໍາໃຊ້ເປັນພື້ນຖານຂໍ້ຄວາມແລະທ່ານສາມາດປ່ຽນສີແລະຄວາມອຽງຂອງກ່ອງ.
ເຖິງແມ່ນວ່າມັນບໍ່ໄດ້ເຫັນໄດ້ຊັດເຈນ, ກ່ອງສີຂີ້ເຖົ່າເບື້ອງຕົ້ນດັ່ງຕໍ່ໄປນີ້ອຸປະກອນການອອກແບບ spec ໃນວ່າມຸມເທິງຂອງມັນຖືກມົນໂດຍ 2 pixels. ຮັກສານີ້ໃນໃຈຖ້າທ່ານກໍາລັງເພີ່ມຮູບພາບ. ມັນຍັງຈະຕ້ອງມີມຸມມົນທີ່ສາມາດຖືກເພີ່ມເຂົ້າໃນການນໍາໃຊ້ຮູບພາບຫຼືໃນ XD.
ເບິ່ງເປັນວິທີການນີ້ແມ່ນສະພາບທີ່ພັກຜ່ອນຂອງບັດມັນຍັງຕ້ອງການເງົາ. spec ຈະເຮັດໃຫ້ມັນຊັດເຈນມີຄວາມສູງຂື້ນຂອງບັດ 2 pixels. ເພື່ອເພີ່ມນີ້, ເລືອກຮູບຮ່າງພື້ນຖານສີດໍາແລະກໍານົດຄ່າ Y ແລະ B (Blur) ກັບ 2 ໃນກະດານຂໍ້ມູນ.
05 of 06
ວິທີການເພີ່ມຮູບພາບໃນບັດອອກແບບວັດຖຸໃນ Adobe XD CC
ຮູ້ວ່າບັດແມ່ນ 344 ພິກະເຊນກວ້າງແລະພື້ນທີ່ຮູບພາບແມ່ນ 150 pixels ສູງ ( ເຄິ່ງຫນຶ່ງຂອງຄວາມສູງຂອງກ່ອງສີເທົາ ) ພວກເຮົາໄດ້ເປີດຮູບພາບໃນ Photoshop, ຂະຫຍາຍຂະຫນາດມັນແລະເກັບຮັກສາມັນໂດຍໃຊ້ຕົວເລືອກ @ 2x ໃນກ່ອງໂຕ້ຕອບ Export Photos ຂອງ Photoshop. ກ່ອງ ຮູບພາບໄດ້ຖືກນໍາເຂົ້າເຂົ້າໄປໃນ Adobe XD.
ຫຼັງຈາກນັ້ນພວກເຮົາລາກກ່ອງສີຂີ້ເຖົ່າເບື້ອງເທິງຮູບພາບເທິງປ້າຍໂຄດແລະເລືອກ Object> ຫນ້າກາກທີ່ມີຮູບຮ່າງ . ຜົນໄດ້ຮັບແມ່ນຮູບພາບທີ່ເອົາມາຈາກມຸມຮູບວົງມົນ. ຫຼັງຈາກນັ້ນພວກເຮົາໄດ້ຍ້າຍຮູບພາບໄປຫາຕໍາແຫນ່ງສຸດທ້າຍຂອງມັນ.
ກັບຮູບພາບໃນສະຖານທີ່, ຫຼັງຈາກນັ້ນພວກເຮົາໄດ້ປ່ຽນສີພື້ນຫລັງຂອງປ່ອງສີຂີ້ເຖົ່າຂະຫນາດກາງ, ປ່ຽນແປງຂໍ້ຄວາມແລະສີຂອງຂໍ້ຄວາມເຊື່ອມໂຍງ.
06 of 06
ການນໍາໃຊ້ຄຸນສົມບັດ Adobe XD CC Grid
ດ້ວຍບັດແລ້ວສົມບູນແລ້ວມັນຈໍາເປັນຕ້ອງຖືກວາງໄວ້ຢ່າງຖືກຕ້ອງຕາມຂໍ້ກໍານົດຂອງການອອກແບບວັດສະດຸ. ນີ້ຫມາຍຄວາມວ່າມີ 8 pixels ຕໍ່ສອງດ້ານຂອງບັດແລະບັດຕ້ອງມີ 8 pixels ພາຍໃຕ້ແຖບ app. ເພື່ອເຮັດສິ່ງນີ້, ໃຫ້ຄລິກໃສ່ຊື່ artboard ແລະ, ໃນການ Properties Panel, ເລືອກ Grid. ຕາຂ່າຍໄຟຟ້າຈະປາກົດຂຶ້ນໃນລະດັບສິລະປະ.
ຂະຫນາດຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນແມ່ນ 8 pixels ເຊິ່ງເກີດຂື້ນເພື່ອເປັນຂະຫນາດຕາຂ່າຍໄຟຟ້າດຽວກັນສໍາລັບການອອກແບບວັດຖຸ. ຖ້າທ່ານຕ້ອງການຂະຫນາດທີ່ແຕກຕ່າງກັນ, ປ່ຽນຄ່າໃນພື້ນທີ່ຕາຂ່າຍໄຟຟ້າ. ຖ້າທ່ານຕ້ອງການປ່ຽນສີຂອງຕາຂ່າຍໄຟຟ້າ, ໃຫ້ຄລິກໃສ່ chip ສີແລະເລືອກສີຈາກ Color Picker ທີ່ໄດ້ຮັບຜົນ.
ກັບຕາຂ່າຍໄຟຟ້າທີ່ເບິ່ງເຫັນ, ໃຫ້ຄລິກໃສ່ບັດແລະຍ້າຍມັນເຂົ້າໄປໃນຕໍາແຫນ່ງສຸດທ້າຍຂອງມັນ.
ເພື່ອສໍາເລັດຮູບ, ພວກເຮົາໄດ້ຄັດເລືອກເອົາບັດ, ກົດປຸ່ມ Repeat Grid ແລະປ່ຽນແປ້ນອັດຕະໂນມັດລະຫວ່າງບັດກັບ 8 pixels.