ເຄື່ອງມືອອກແບບ ກຳ ລັງ ໝົດ ໄປ. ນີ້ແມ່ນວິທີທີ່ພວກເຮົາສາມາດແກ້ໄຂພວກມັນ.

ບໍ່ຄ່ອຍຈະຕໍ່ມື້ໄປບ່ອນທີ່ຂ້ອຍບໍ່ໄດ້ໃຊ້ເວລາຢ່າງ ໜ້ອຍ ຄິດກ່ຽວກັບເຄື່ອງມືການອອກແບບ. ສອງສາມປີກ່ອນ, ຂ້າພະເຈົ້າໄດ້ສ້າງເຄື່ອງມືອອກແບບທີ່ໄດ້ມາຈາກ Marvel. ນັ້ນແມ່ນເວລາສອງປີທີ່ຜ່ານມາແຕ່ວ່າຕັ້ງແຕ່ນັ້ນມາພູມສັນຖານບໍ່ໄດ້ປ່ຽນແປງຫຍັງຫຼາຍ, ທັງບໍ່ມີຄວາມຕັ້ງໃຈໃນການປັບປຸງມັນ.

ເມື່ອບໍ່ດົນມານີ້, ຂ້າພະເຈົ້າໄດ້ tweeted ກ່ຽວກັບເຄື່ອງມືອອກແບບ - ສິ່ງທີ່ເປັນທີ່ຮູ້ຈັກທີ່ຈະເກີດຂື້ນເລື້ອຍໆ.

ຂ້ອຍບໍ່ແມ່ນຄົນດຽວທີ່ຈະເວົ້າໃນໃຈຂອງຂ້ອຍໃນມື້ນັ້ນ, ຄົນອື່ນໆກໍ່ຄິດເຊັ່ນກັນ.

ວັນທີ 28 ກໍລະກົດ 2017 ບໍ່ແມ່ນມື້ທີ່ດີ ສຳ ລັບເຄື່ອງມືອອກແບບ.

ມີຄວາມເຂົ້າໃຈທີ່ດີຫຼາຍຢ່າງທີ່ຖືກຝັງໄວ້ໃນກະທູ້ Twitter ເຫຼົ່ານີ້ແຕ່ດົນແລ້ວ, ຂ້ອຍຢາກໃຊ້ເວລາໃນການເຈາະເລິກເຂົ້າໄປໃນສິ່ງທີ່ຂ້ອຍຄິດວ່າມັນແຕກແຍກພື້ນຖານກ່ຽວກັບຮູບແບບເຄື່ອງມືອອກແບບໃນປະຈຸບັນ, ເຊັ່ນກັນ ເປັນ ຄຳ ແນະ ນຳ ໃນທິດທາງທີ່ຂ້ອຍຄິດວ່າພວກເຮົາຄວນຈະເປັນຫົວ ໜ້າ.

ພວກເຮົາທຸກຄົນພຽງແຕ່ແຕ້ມຮູບ. ມັນເປັນບ້າ.

ເກືອບທັງ ໝົດ ເຄື່ອງມືອອກແບບທີ່ນິຍົມສົ່ງອອກໄປຍັງຮູບພາບ. ນີ້ແມ່ນບັນຫາຍ້ອນຫຼາຍເຫດຜົນ:

  1. ທ່ານບໍ່ສາມາດພົວພັນກັບຮູບພາບໄດ້. ເຄື່ອງມືປະທ້ວງສ້າງຄວາມເຂັ້ມແຂງໃຫ້ພວກເຮົາເພີ່ມການຫັນປ່ຽນຫນ້າຈໍແລະການໂຕ້ຕອບງ່າຍໆກັບຮູບພາບ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຍ້ອນວ່າຜະລິດຕະພັນຂອງພວກເຮົາສືບຕໍ່ຮຽກຮ້ອງໃຫ້ມີການຫັນປ່ຽນ ໜ້າ ຈໍແລະການໂຕ້ຕອບແບບຈຸລະພາກທີ່ກ້າວ ໜ້າ, ຮູບພາບບໍ່ສາມາດຕິດຕໍ່ໄດ້.
  2. ຮູບພາບແມ່ນບໍ່ມີນໍ້າ. ການສື່ສານການຕັດສິນໃຈອອກແບບທີ່ຕອບສະ ໜອງ ຜ່ານຮູບພາບໂດຍປົກກະຕິແມ່ນວຽກທີ່ຫຍຸ້ງຍາກ.
  3. ຮູບພາບຕ່າງໆບໍ່ແມ່ນຂອງລັດ. ເພື່ອສື່ສານບັນດາລັດຕ່າງໆ ສຳ ລັບ UI ຢ່າງມີປະສິດທິຜົນ, ຮູບພາບຫຼາຍຄັ້ງແມ່ນມີຄວາມ ຈຳ ເປັນ.
  4. ຮູບພາບ Bitmap ແມ່ນຄວາມລະອຽດຂຶ້ນກັບ. ດ້ວຍການມາເຖິງຂອງອຸປະກອນ retina, ບາງຄັ້ງພາບສາມາດຕອບສະ ໜອງ ບໍ່ດີ.
  5. ໄຟລ໌ຮູບພາບມີແນວໂນ້ມທີ່ຈະຫນັກແລະມັກຈະມີຄວາມຫຍຸ້ງຍາກໃນການເກັບຮັກສາ, ຈັດການຫລືແບ່ງປັນ.

ຕາບໃດທີ່ເຄື່ອງມືອອກແບບສືບຕໍ່ສົ່ງອອກຮູບພາບ, ພວກມັນຈະບໍ່ສາມາດຜະລິດຕົວແທນທີ່ຖືກຕ້ອງຂອງຜະລິດຕະພັນຂອງພວກເຮົາໄປເລີຍ. ການຂາດຄວາມຖືກຕ້ອງນີ້ຂັດຂວາງການສື່ສານລະຫວ່າງນັກອອກແບບແລະນັກພັດທະນາ. ຕາບໃດທີ່ນັກອອກແບບຍັງສືບຕໍ່ ນຳ ໃຊ້ສື່ກາງທີ່ບໍ່ພຽງພໍເພື່ອສື່ສານວຽກງານຂອງເຂົາເຈົ້າ, ວຽກນັ້ນຈະຖືກເປີດໃຫ້ໃຊ້ໃນການຕີຄວາມ ໝາຍ ທີ່ບໍ່ຖືກຕ້ອງ.

ນີ້ແມ່ນຈຸດ ສຳ ຄັນທີ່ສຸດເພາະວ່າ, ໃນຫຼັກຂອງພວກເຂົາ, ເກືອບທັງ ໝົດ ເຄື່ອງມືອອກແບບປ່ຽນຮູບຊົງ vector ເປັນຮູບພາບ. Photoshop, Illustrator, Marvel, Adobe XD, Sketch ແລະ Figma ແມ່ນອັນດຽວກັນໃນເລື່ອງນີ້. ແຕ່ຮູບພາບບາງສ່ວນສາມາດສື່ສານຄວາມຕັ້ງໃຈອອກແບບໄດ້ບາງສ່ວນເທົ່ານັ້ນ. ຍ້ອນວ່າຜະລິດຕະພັນຂອງພວກເຮົາສືບຕໍ່ຮັບຮອງເອົາແລະສະ ໜັບ ສະ ໜູນ ການໂຕ້ຕອບທີ່ສັບສົນ, ການປ້ອນຂໍ້ມູນສຽງ, ການປ້ອນຂໍ້ມູນທາງວິດີໂອ, ຄວາມເປັນຈິງທີ່ເພີ່ມຂື້ນ, ຄວາມເປັນຈິງຂອງ virtual, ຄວາມອ່ອນໄຫວຂອງອຸນຫະພູມແລະອື່ນໆ, ຄຸນຄ່າຂອງເຄື່ອງມືເຫຼົ່ານີ້ສະ ໜອງ ຈະຫຼຸດລົງຢ່າງໄວວາ. ການອອກແບບຮູບພາບແມ່ນຈຸດສິ້ນສຸດ.

ເຄື່ອງມືອອກແບບຂອງພວກເຮົາຄວນ ໝູນ ໃຊ້ຜະລິດຕະພັນຕົວຈິງ, ບໍ່ແມ່ນຮູບຂອງມັນ.

ຜະລິດຕະພັນຂອງພວກເຮົາແມ່ນໂຕ້ຕອບກັນ. ເຄື່ອງມືຂອງພວກເຮົາແມ່ນຄົງທີ່.

ຂ້າພະເຈົ້າໄດ້ກ່າວເຖິງຈຸດນີ້ໃນຈຸດທີ່ຜ່ານມາຂອງຂ້າພະເຈົ້າແຕ່ວ່າມັນເປັນສິ່ງທີ່ ສຳ ຄັນທີ່ສຸດດັ່ງນັ້ນຂ້າພະເຈົ້າຄິດວ່າຂ້າພະເຈົ້າຈະອະທິບາຍ ໜ້ອຍ ໜຶ່ງ.

ຄິດເຖິງ ຈຳ ນວນປະຕິ ສຳ ພັນທີ່ງ່າຍດາຍເຊິ່ງເປັນສິ່ງທີ່ ທຳ ມະດາໃນເກືອບທຸກຜະລິດຕະພັນຂອງພວກເຮົາແຕ່ຍັງບໍ່ສາມາດສື່ສານຜ່ານເຄື່ອງມືອອກແບບຂອງພວກເຮົາໄດ້. ນີ້ແມ່ນບັນຊີລາຍຊື່ສັ້ນໆທີ່ຢູ່ເທິງສຸດຂອງຫົວຂອງຂ້ອຍ:

  • ການກົດປຸ່ມ
  • ສຸມໃສ່ການປ້ອນຂໍ້ມູນ
  • ການກວດສອບຫ້ອງກວດກາ
  • ເນື້ອຫາຢູ່ໃນແຖບ
  • ພື້ນທີ່ເລື່ອນພາບ
  • ດັດສະນີແທັບ ສຳ ລັບລັດທີ່ສຸມໃສ່
  • ຄີບອດ

ໃຫ້ແນ່ໃຈວ່າ, ບາງລັກສະນະເຫຼົ່ານີ້ສາມາດຖືກຫລອກລວງດ້ວຍວິສະວະ ກຳ ທີ່ຫລອກລວງແຕ່ວ່າສິ່ງ ໜຶ່ງ ທີ່ຕ້ອງສົງໄສ, ແມ່ນຫຍັງຢູ່ໂລກແມ່ນຈຸດ? ເປັນຫຍັງນັກອອກແບບບໍ່ສາມາດອອກແບບສິນຄ້າຕົວຈິງ?! ໃນທີ່ສຸດ, ການເຍາະເຍີ້ຍທັງ ໝົດ ແມ່ນໃຊ້ໄດ້, ແຕ່ນັກອອກແບບໃຊ້ເວລາຫຼາຍເດືອນເພື່ອໃຫ້ເຂົາເຈົ້າສົມບູນແບບ. ເວລານັ້ນຈະດີກວ່າການໃຊ້ຈ່າຍຜະລິດຕະພັນຕົວຈິງ.

ຂ້າພະເຈົ້າຈະບໍ່ໄປໄກເກີນໄປວ່າ "ຄວນອອກແບບລະຫັດ" ຂຸມກະຕ່າຍແຕ່ຂ້ອຍບໍ່ໄດ້ແນະ ນຳ ໃຫ້ພວກເຮົາຂຽນລະຫັດ. ຂ້ອຍພຽງແຕ່ເວົ້າວ່າບໍ່ມີເຫດຜົນທີ່ດີທີ່ເຄື່ອງມືອອກແບບຂອງພວກເຮົາບໍ່ສາມາດສະ ໜັບ ສະ ໜູນ ການ ໝູນ ໃຊ້ຜະລິດຕະພັນສົດຂອງພວກເຮົາໂດຍກົງ.

Framer ເຮັດວຽກທີ່ດີກ່ວາຫຼາຍທີ່ສຸດໃນພະແນກນີ້, ສະຫນັບສະຫນູນການພົວພັນທີ່ກ້າວຫນ້າແລະລະອຽດ. ສ່ວນທີ່ເຫຼືອຂອງຊອງແມ່ນຢູ່ໄກຫຼາຍ.

ເຄື່ອງມືຂອງພວກເຮົາຄວນສະ ໜັບ ສະ ໜູນ ແບບແຜນຜັງເວັບໄຊຕ໌

ຈົນກ່ວາປະມານຫນຶ່ງປີກ່ອນຫນ້ານີ້, ວິທີດຽວທີ່ຈະສ້າງແຜນຜັງໃນເວັບແມ່ນການ ນຳ ໃຊ້ຈໍສະແດງຜົນ: ຕາຕະລາງແລະຄຸນລັກສະນະ CSS ແບບແນວຕັ້ງ. ຕອນນີ້ພວກເຮົາມີ Flexbox ແລະໄວໆນີ້ພວກເຮົາຈະມີ CSS ຕາຂ່າຍໄຟຟ້າ. ເຄື່ອງຈັກຈັດແບບທັງສາມຢ່າງນີ້ເຮັດວຽກທີ່ຄ້າຍຄືກັນ, ນຳ ໃຊ້ກະແສຂອງ DOM. ເກືອບທຸກເວັບໄຊທ໌້ຖືກສ້າງຂຶ້ນໂດຍໃຊ້ ໜຶ່ງ ໃນສາມລະບົບການຈັດຮູບແບບນີ້.

ດັ່ງນັ້ນ, ມັນມີຄວາມ ໝາຍ ວ່າເຄື່ອງມືອອກແບບຂອງພວກເຮົາສະ ໜັບ ສະ ໜູນ ຮູບແບບການຈັດແບບດຽວກັນ. ຖືກຕ້ອງບໍ?

ດີ, ເກືອບທັງ ໝົດ ເຄື່ອງມືອອກແບບບໍ່ສົນໃຈລະບົບການຈັດວາງເຫຼົ່ານີ້, ແທນທີ່ຈະເລືອກທີ່ຈະຕັ້ງແຕ່ລະຊັ້ນຢ່າງແທ້ຈິງພາຍໃນກະດານ artboard ຂອງມັນ. ສິ່ງນີ້ເປີດຄວາມສະຫລາດລະຫວ່າງວິທີການເຮັດວຽກຂອງເວັບແລະເຄື່ອງມືການອອກແບບຂອງພວກເຮົາເຮັດວຽກ, ແນະ ນຳ ຫຼາຍປະເດັນ:

  • ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບກາຍເປັນເລື່ອງຍາກຫຼາຍເພາະວ່າແຕ່ລະຊັ້ນຕ້ອງໄດ້ຮັບການຈັດແຈງຄືນດ້ວຍຕົນເອງ ສຳ ລັບທຸກໆຈຸດແຕກຕ່າງ. ອີກທາງເລືອກ ໜຶ່ງ, ລະບົບການຈັດວາງແບບ ຈຳ ກັດສາມາດ ນຳ ສະ ເໜີ ໄດ້ແຕ່ວ່າມັນເພີ່ມຄວາມສັບສົນ, ເຮັດໃຫ້ເສັ້ນໂຄ້ງການຮຽນຮູ້ເລິກຂື້ນແລະສຸດທ້າຍຈະປ້ອງກັນນັກພັດທະນາບໍ່ສາມາດໂອນຮູບແບບອອກສູ່ເວັບໂດຍກົງ.
  • ເນື່ອງຈາກແຕ່ລະຊັ້ນແມ່ນຢູ່ນອກກະແສຂອງເອກະສານ, ການ ໝູນ ໃຊ້ເນື້ອຫາກາຍເປັນເລື່ອງຫຼອກລວງ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການເພີ່ມລາຍການເຂົ້າໃນບັນຊີ, ທ່ານຕ້ອງໄດ້ດັດແປງລາຍການອື່ນໆໃນລາຍການນັ້ນດ້ວຍຕົນເອງ. ແນ່ນອນວ່າ ໜ້າ ທີ່ເຮັດເລື້ມຄືນແລະຄຸນລັກສະນະທີ່ແປກ ໃໝ່ ອື່ນໆສາມາດແນະ ນຳ ເພື່ອຜ່ອນຄາຍອາການເຈັບແຕ່ອີກຄັ້ງ, ສິ່ງນີ້ແນະ ນຳ ເພີ່ມຄວາມສັບສົນແລະສັບສົນບາງສິ່ງບາງຢ່າງທີ່ DOM ໃຫ້ພວກເຮົາໂດຍບໍ່ເສຍຄ່າ.
  • ການຈັດຕໍາ ແໜ່ງ ຢ່າງແທ້ຈິງເຮັດໃຫ້ມີຈຸດພິກັດແລະຂະ ໜາດ ຂອງ pixels ລວງຄົງທີ່. ນີ້ແມ່ນສາຍພັນທີ່ບໍ່ສາມາດຕ້ານທານໄດ້ແລະອີກເທື່ອ ໜຶ່ງ, ແມ່ນການເດີນທາງທີ່ໃຫຍ່ຫຼວງຈາກວິທີການເຮັດວຽກຂອງເວັບ. ເວບໄຊທ໌ຖືກສ້າງຂື້ນໃນ ໜ່ວຍ ນ້ ຳ ເຊັ່ນ em, rem, vh, vw ແລະ%. ເຄື່ອງມືຂອງພວກເຮົາຄວນສະ ໜັບ ສະ ໜູນ ໜ່ວຍ ງານເຫຼົ່ານີ້ໂດຍຄ່າເລີ່ມຕົ້ນ.

ເຄື່ອງມືອອກແບບບໍ່ ຈຳ ເປັນຕ້ອງຄ້າຍຄືກັນຫລືສະທ້ອນກັບເວັບແລະສິ່ງຂອງທີ່ບໍ່ຕ້ອງການ - ພວກມັນຄວນຈະເປັນເວັບ.

ເຄື່ອງມື monolithic ບໍ່ແມ່ນວິທີການ

ການອອກແບບທີ່ດີເກີດຂື້ນເປັນໄລຍະ. ລະບົບການອອກແບບທີ່ມີໂຄງສ້າງທີ່ດີມີສອງຊັ້ນທີ່ແຕກຕ່າງກັນ:

  1. ຮູບແບບ palette ການລວບລວມສີ, ເງົາ, ພື້ນທີ່, ຂອບເຂດຊາຍແດນ, ປະເພດ, ຂະ ໜາດ ຕົວອັກສອນ, ພາບເຄື່ອນໄຫວແລະຮູບແບບອື່ນໆທີ່ປະກອບເປັນຕົວຕົນຂອງແບຂອງທ່ານ. ໃນປະຈຸບັນ, ເຄື່ອງມືອອກແບບສ່ວນໃຫຍ່ພຽງແຕ່ຮອງຮັບແຜ່ນສີ. ຈົນກ່ວາພວກເຂົາສະ ໜັບ ສະ ໜູນ ຄຸນລັກສະນະຮູບແບບອື່ນໆ, ມັນຈະເປັນການອອກແຮງທີ່ສຸດໃນການອອກແບບຢ່າງເປັນລະບົບ.
  2. ຊັບສິນລວມມີອົງປະກອບຕ່າງໆເຊັ່ນ: ໄອຄອນ, ພາບປະກອບແລະຮູບພາບ. ມີບາງບັນນາທິການຮູບພາບທີ່ມີປະກົດການຢູ່ນອກນັ້ນແລະເຄື່ອງມື vector ຂອງ Figma ແມ່ນດີເລີດແຕ່ເມື່ອເວົ້າເຖິງການສະ ໜັບ ສະ ໜູນ ຂອງ SVG, ເຄື່ອງມືອອກແບບຂອງພວກເຮົາປ່ອຍໃຫ້ຫຼາຍທີ່ຕ້ອງການ.
  3. ສ່ວນປະກອບຂອງຫໍສະ ໝຸດ ສ່ວນປະກອບແມ່ນການລວບລວມຮູບແບບແລະຊັບສິນເຊິ່ງເຮັດໃຫ້ຂໍ້ມູນເປັນສ່ວນປະກອບດຽວໃນຫຼາຍໆຮູບແບບທີ່ແຕກຕ່າງກັນ. ຕົວຢ່າງປະກອບມີປຸ່ມ, ວັດສະດຸປ້ອນ, ປ້າຍຊື່ແລະອື່ນໆດັ່ງທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມາແລ້ວ, Figma ແລະ Sketch ບໍ່ດົນມານີ້ໄດ້ແຍກບົດຮຽນນີ້ອອກຈາກກະແສການແຕ້ມຮູບຕົ້ນຕໍ - ມັນເປັນ ໜ້າ ສົງສານພວກມັນເປັນພຽງແຕ່ຮູບພາບຂອງສ່ວນປະກອບແລະບໍ່ແມ່ນສ່ວນປະກອບຕົວຈິງ.
  4. ໂມດູນໂມດູນ / ສ່ວນປະກອບແມ່ນການລວບລວມສ່ວນປະກອບທີ່ສົ່ງຂໍ້ມູນໄປຫາຊິ້ນສ່ວນຂອງ UI ໃນຫລາຍໆລັດ. ຕົວຢ່າງອາດຈະປະກອບມີແທັບຫົວ, ເມນູແທັບ, ແບບເຂົ້າສູ່ລະບົບ, ຕາຕະລາງແລະອື່ນໆເນື່ອງຈາກໂມດູນແມ່ນພຽງແຕ່ສ່ວນປະກອບທີ່ສັບສົນເທົ່ານັ້ນ, ຂ້າພະເຈົ້າເດົາວ່າ Figma ແລະ Sketch ສາມາດຈັດການກັບມັນໄດ້ເຊັ່ນກັນ. ເຖິງແມ່ນວ່າມັນອາດຈະມີຜົນດີບາງຢ່າງໃນການແຍກສອງຢ່າງ.
  5. ໜ້າ ຈໍ ໜ້າ ຈໍແມ່ນການລວບລວມເອົາໂມດູນ, ສ່ວນປະກອບແລະຂໍ້ມູນເພື່ອປະກອບເປັນ UI ທີ່ສົມບູນເຊິ່ງຜູ້ໃຊ້ສາມາດພົວພັນກັບ.

ເຄື່ອງມືອອກແບບສ່ວນຫຼາຍໃຫ້ຄຸນລັກສະນະຕ່າງໆທີ່ສະ ໜັບ ສະ ໜູນ ແຕ່ລະໄລຍະການອອກແບບດັ່ງກ່າວໃນລະດັບໃດ ໜຶ່ງ. ບັນຫາແມ່ນວ່າທຸກຂັ້ນຕອນແມ່ນປະສົມເຂົ້າກັນ. ເກືອບທຸກເຄື່ອງມືອອກແບບສະ ເໜີ ພຽງແຕ່ ໜຶ່ງ ຮູບແບບ - ຮູບແບບແຕ້ມ. ທ່ານສ້າງຊຸດຂອງ artboards ແລະພຽງແຕ່ເລີ່ມຕົ້ນແຕ້ມຮູບ. ພຽງແຕ່ມີເຄື່ອງມື ໃໝ່ໆ ເຊັ່ນ Sketch ແລະ Figma ທີ່ບໍ່ມີຕົວຕົນສ່ວນປະກອບ / ສັນຍາລັກທີ່ຢູ່ຫ່າງຈາກຮູບແບບການແຕ້ມຮູບຕົ້ນຕໍ - ເຊິ່ງມັນແປກເພາະວ່າໃນການພັດທະນາດ້ານ ໜ້າ, ສ່ວນປະກອບຕ່າງໆໄດ້ຖືກດຶງດູດມາເປັນເວລາຫຼາຍປີແລ້ວ.

ໃນຂະນະທີ່ອອກແບບກະດານຮູບແບບ, ຂ້ອຍບໍ່ ຈຳ ເປັນຕ້ອງເຫັນຮູບແຕ້ມຫລືເຄື່ອງມືວີກ. ຂ້ອຍຕ້ອງການເບິ່ງເຄື່ອງມື ສຳ ລັບການເລືອກສີທີ່ກົມກຽວ. ຂ້ອຍຕ້ອງການການຕັ້ງຄ່າ ສຳ ລັບສິ່ງຕ່າງໆເຊັ່ນ: ຂະ ໜາດ 8dp spacing ຫຼືການເລືອກເກັດປະເພດ.

ການອອກແບບໄອຄອນຮຽກຮ້ອງໃຫ້ມີຮູບແບບການຄິດທີ່ແຕກຕ່າງກັນຢ່າງສິ້ນເຊີງໃນການອອກແບບກະແສຜູ້ໃຊ້. ບັນນາທິການ SVG ທີ່ງ່າຍດາຍເຊິ່ງຊ່ວຍໃຫ້ຂ້ອຍແຕ້ມຮູບສີ່ຫລ່ຽມ SVG, ວົງ, ເສັ້ນແລະເສັ້ນທາງ, ຫຼັງຈາກນັ້ນສົ່ງອອກລະຫັດ SVG ທີ່ດີທີ່ສຸດຈະ ເໝາະ ສົມ.

ໃນຂະນະທີ່ອອກແບບສ່ວນປະກອບ, ຂ້ອຍບໍ່ຄວນຄິດກ່ຽວກັບຮູບແບບຂອງແຕ່ລະຄົນອີກຕໍ່ໄປ - ຂ້ອຍຄວນຈະເລືອກຮູບແບບຈາກຮູບແບບທີ່ຖືກ ກຳ ນົດໄວ້. ຂ້າພະເຈົ້າບໍ່ພຽງແຕ່ສາມາດເລີ່ມຕົ້ນການປັບແຕ່ງຮູບແບບ ສຳ ລັບສ່ວນປະກອບ ໜຶ່ງ ເທົ່ານັ້ນເພາະວ່າມັນຈະແນະ ນຳ ຄວາມບໍ່ສອດຄ່ອງ, ເຮັດໃຫ້ລະບົບການອອກແບບຂອງຂ້ອຍມີປະສິດຕິພາບດີ. ເມື່ອຮຽບຮ້ອຍແລ້ວກໍ່ຄວນຈະແກ້ໄຂໄດ້ທີ່ແຫຼ່ງຂໍ້ມູນ.

ເຊັ່ນດຽວກັນ, ໃນຂະນະທີ່ປະກອບໂມດູນ, ຂ້ອຍຄວນ ສຳ ຜັດກັບຫໍສະມຸດສ່ວນປະກອບທີ່ໄດ້ ກຳ ນົດໄວ້ກ່ອນເທົ່ານັ້ນ. ບໍ່ຄວນມີຄຸນສົມບັດແບບໃນແຖບຂ້າງ. ບໍ່ມີເຄື່ອງມື vector. ພຽງແຕ່ຫ້ອງສະມຸດຂອງສ່ວນປະກອບທີ່ໃຊ້ ໃໝ່ ໄດ້ເຊິ່ງຂ້ອຍສາມາດລາກແລະວາງເພື່ອປະກອບໂມດູນ.

ສິ່ງດຽວກັນ ສຳ ລັບການປະກອບ ໜ້າ ຈໍ. ໃນຈຸດນີ້, ພວກເຮົາພຽງແຕ່ ນຳ ໃຊ້ສ່ວນປະກອບແລະໂມດູນເພື່ອສ້າງ UI. ພວກເຮົາບໍ່ໄດ້ຄິດກ່ຽວກັບຮູບແບບຫລືຮູບຊົງຫຼືຄວາມພະຍາຍາມສ້າງສັນອື່ນໆ. ພວກເຮົາສຸມໃສ່ຕົ້ນຕໍໃນການອອກແບບເນື້ອຫາແລະກະແສຂອງຜູ້ໃຊ້.

ແຕ່ລະຂັ້ນຕອນຂອງການອອກແບບເຫຼົ່ານີ້ສາມາດເກີດຂື້ນໃນເຄື່ອງມືແຍກຕ່າງຫາກທັງ ໝົດ ຫຼືພຽງແຕ່ຮູບແບບທີ່ແຕກຕ່າງກັນພາຍໃນເຄື່ອງມືດຽວກັນ. ຂ້ອຍບໍ່ຄິດວ່າມັນ ສຳ ຄັນຫຼາຍ. ສິ່ງ ໜຶ່ງ ແມ່ນແນ່ນອນເຖິງແມ່ນວ່າ, ເຄື່ອງມືອອກແບບປະຈຸບັນສ່ວນຫຼາຍບໍ່ຮູ້ເຖິງຂັ້ນຕອນດັ່ງກ່າວ.

ເຄື່ອງມືຂອງພວກເຮົາຄວນຊຸກຍູ້ການອອກແບບທີ່ດີ

ຜູ້ອອກແບບມີຄວາມຫລູຫລາທີ່ຫາຍາກຂອງການສາມາດເພີ່ມຮູບແບບທີ່ບໍ່ມີຕົວຕົນ ຈຳ ນວນ ໜຶ່ງ ເຂົ້າໃນໂຄງການໂດຍບໍ່ມີຜົນສະທ້ອນທີ່ ໜ້າ ສັງເກດເຫັນ. ຕ້ອງການຂະ ໜາດ ໂຕອັກສອນທີ່ໃຫຍ່ກວ່າເລັກ ໜ້ອຍ ບໍ? ພຽງແຕ່ ຕຳ ມັນຂື້ນ. ບໍ່ແມ່ນເລື່ອງໃຫຍ່. ຕ້ອງການສີທີ່ອ່ອນກວ່າເລັກນ້ອຍບໍ? ພຽງແຕ່ເລັ່ງມັນ. ມັນເຢັນ. ທ່ານຍັງສາມາດສ້າງ artboards ຫຼາຍຮູບແບບໃນໂຄງການດຽວກັນ, ແຕ່ລະເຄື່ອງໃຊ້ຄຸນຄ່າທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ ສຳ ລັບຮູບແບບທີ່ຄ້າຍຄືກັນແລະມັນອາດຈະບໍ່ສັງເກດເຫັນ.

ເຄື່ອງມືອອກແບບຂອງທ່ານບໍ່ເຄີຍບອກທ່ານວ່າທ່ານບໍ່ສາມາດເຮັດຫຍັງໄດ້. ມັນຈະບໍ່ດຶງດູດໃຈທ່ານໂດຍການໃຊ້ສີສັນຂອງຍີ່ຫໍ້. ມັນບໍ່ເຄີຍຈະປ້ອງກັນທ່ານຈາກການໃຊ້ຄ່າຫວ່າງທີ່ບໍ່ມີຢູ່ໃນລະດັບຄວາມກວ້າງຂອງທ່ານ. ມັນບໍ່ເຄີຍເຕືອນທ່ານວ່າ 20% ຂອງປະຊາກອນບໍ່ສາມາດເຫັນຂໍ້ຄວາມທີ່ມີສີຂີ້ເຖົ່າອ່ອນໆທີ່ທ່ານໄດ້ອອກແບບມາ.

ແລະເປັນຫຍັງບໍ່…? ເພາະວ່າເຄື່ອງມືການອອກແບບບໍ່ສົນໃຈ.

ເຄື່ອງມືການອອກແບບມີລັກສະນະວິທີການທີ່ມີວິໄສທັດ ສຳ ລັບຄວາມຄິດສ້າງສັນທີ່ບໍ່ມີຂອບເຂດເຊິ່ງພວກເຂົາໄດ້ເບິ່ງເຫັນຄວາມ ໝາຍ ຂອງການອອກແບບທີ່ມີຄວາມ ໝາຍ, ອອກແບບລວມ, ອອກແບບເປັນລະບົບ.

ເວົ້າງ່າຍໆ, ເຄື່ອງມືອອກແບບຊ່ວຍໃຫ້ພວກເຮົາສາມາດເຮັດຫຍັງກໍ່ໄດ້ໃນນະລົກທີ່ພວກເຮົາຕ້ອງການ. ໃນບາງລະດັບ, ລະດັບຄວາມຄິດສ້າງສັນທີ່ບໍ່ມີຂອບເຂດນີ້ແມ່ນມີປະໂຫຍດ, ໂດຍສະເພາະໃນໄລຍະອຸດົມການ. ໃນຖານະເປັນຜູ້ອອກແບບ UI, ສ່ວນໃຫຍ່ຂອງການເຮັດວຽກຂອງພວກເຮົາບໍ່ໄດ້ຮຽກຮ້ອງໃຫ້ມີຄວາມຄິດສ້າງສັນຫຼາຍ. ກົງກັນຂ້າມ, ຂະບວນການເຮັດວຽກຂອງພວກເຮົາຮຽກຮ້ອງໃຫ້ ນຳ ໃຊ້ຄືນ ໃໝ່, ການຄ້າງຫ້ອງ, ຄວາມຄຸ້ນເຄີຍແລະມາດຕະຖານ; ຕ້ອງການໃຫ້ເຄື່ອງມືຂອງພວກເຮົາເຮັດພຽງ ໜ້ອຍ ດຽວເພື່ອໃຫ້ຄວາມພໍໃຈ.

ເສລີພາບທີ່ບໍ່ ຈຳ ກັດນີ້ແມ່ນຜິດກັບຄວາມເປັນຈິງຂອງການພັດທະນາເວບໄຊທ໌. ເນື່ອງຈາກນັກພັດທະນາ ກຳ ລັງເຮັດວຽກກັບຜະລິດຕະພັນຕົວຈິງ, ພວກເຂົາທັງ ໝົດ ຕ້ອງເຮັດວຽກດ້ວຍລະຫັດດຽວກັນ. ນັກພັດທະນາບໍ່ສາມາດເພີ່ມຂະ ໜາດ ຕົວອັກສອນທີ່ໂດດດ່ຽວຫຼືຄ່າສີແບບສຸ່ມໃສ່ codebase. ປະການ ທຳ ອິດ, ເສັ້ນລ້ອນ (ຂໍ້ຄວາມເຕືອນທີ່ເຕືອນກ່ຽວກັບລະຫັດທີ່ຂຽນບໍ່ດີ) ອາດຈະເລີ່ມຮ້ອງໂດຍທັນທີ. ຖ້າບໍ່, ຫຼັງຈາກນັ້ນຝີມືຫັດຖະ ກຳ ທີ່ມີສີສັນຂອງພວກເຂົາອາດຈະຖືກຈັບໃນລະຫວ່າງການກວດສອບລະຫັດ. ຖ້າຫາກວ່າມັນໄດ້ຮັບການຄຸ້ມຄອງຢ່າງໃດກໍ່ຕາມເພື່ອເລື່ອນຜ່ານຮອຍແຕກ, ຜົນກະທົບການປະຕິບັດທີ່ສັງເກດເຫັນໃນທີ່ສຸດກໍ່ຈະມີສຽງເຕືອນ.

ໜຶ່ງ ໃນບັນຫາທີ່ລົບກວນທີ່ຂ້ອຍເຫັນໃນທີມງານຜະລິດຕະພັນແມ່ນການເຊື່ອມຕໍ່ກັນລະຫວ່າງທີມອອກແບບແລະທີມພັດທະນາ. ນັກພັດທະນາໄດ້ເຮັດວຽກກັບແນວທາງແລະຂໍ້ ຈຳ ກັດທີ່ເຂັ້ມງວດມາເປັນເວລາຫລາຍປີແລ້ວ. ເວັ້ນເສຍແຕ່ວ່າເຄື່ອງມືອອກແບບຂອງພວກເຮົາຈະຮັບເອົາຂໍ້ ຈຳ ກັດເຫຼົ່ານີ້, ຊ່ອງຫວ່າງຈະບໍ່ແຄບລົງ.

ພວກເຮົາຄວນໄດ້ຮັບການອອກແບບດ້ວຍຂໍ້ມູນສົດ

ຂໍ້ມູນທີ່ມີຊີວິດໄດ້ຖືກລວມເຂົ້າໃນບາງລະດັບໂດຍຫລາຍໆເຄື່ອງມື, ເຊິ່ງເປັນສິ່ງທີ່ດີທີ່ຈະເຫັນ. Adobe XD ມີຄຸນລັກສະນະບາງຢ່າງທີ່ ເໝາະ ສົມ ສຳ ລັບການສ້າງຂໍ້ມູນປອມເຊິ່ງຄ້າຍຄືກັບຂໍ້ມູນສົດໆປົກກະຕິ. ຫັດຖະ ກຳ Invision ຍັງໃຫ້ຄຸນລັກສະນະຂໍ້ມູນສົດໆ ສຳ ລັບ Sketch.

ຂໍ້ມູນທີ່ມີຊີວິດບໍ່ຄວນຢຸດຢູ່ກັບຂໍ້ຄວາມ, ເຖິງແມ່ນວ່າ. ອົງປະກອບອື່ນໆເຊັ່ນ: ຮູບພາບແລະວິດີໂອສາມາດມີຜົນກະທົບອັນໃຫຍ່ຫຼວງຕໍ່ປະສົບການຂອງຜູ້ໃຊ້ໂດຍການເພີ່ມເວລາໂຫຼດຫຼາຍຂື້ນ. ຖ້າທ່ານ ກຳ ລັງເຮັດວຽກຢູ່ໃນເວບໄຊທ໌, ເຄື່ອງມື dev browser ຊ່ວຍໃຫ້ທ່ານສາມາດເຊື່ອມຕໍ່ການເຊື່ອມຕໍ່ເພື່ອຄ້າຍຄືກັບຄວາມໄວອິນເຕີເນັດທີ່ຫຼາກຫຼາຍ. ຈາກນັ້ນ, ທ່ານສາມາດເບິ່ງດ້ວຍມືກ່ອນວ່າເນື້ອຫາ ໃໝ່ ຂອງເນື້ອຫາອາດຈະສົ່ງຜົນກະທົບຕໍ່ປະສົບການຂອງຜູ້ໃຊ້ໄດ້ແນວໃດ.

ເຄື່ອງມືອອກແບບຂອງພວກເຮົາສາມາດໃຫ້ພວກເຮົາຫລູຫລາເຫລົ່ານີ້ບໍ?

ໃນ ຄຳ ວ່າ: ບໍ່.

ພວກເຮົາໃກ້ຊິດກັບການອອກແບບຜະລິດຕະພັນຕົວຈິງ, ວຽກງານການອອກແບບຂອງພວກເຮົາກໍ່ມີປະໂຫຍດແລະມີຜົນກະທົບຫຼາຍຂື້ນ.

ເວັບເປີດ. ເຄື່ອງມືຂອງພວກເຮົາຄວນຈະເປັນເຊັ່ນກັນ.

ໜຶ່ງ ໃນສິ່ງທີ່ສວຍງາມແທ້ໆຂອງເວັບແມ່ນການເຂົ້າເຖິງເປີດກວ້າງຂອງມັນ. ເວັບໄຊທ໌້ສາມາດເບິ່ງໄດ້ໃນຕົວທ່ອງເວັບຂອງເວັບໄຊທ໌ໃດກໍ່ຕາມກ່ຽວກັບອຸປະກອນໃດກໍ່ຕາມ.

ມັນປຽບທຽບກັບເຄື່ອງມືອອກແບບແນວໃດ? ດີ, ສອງສາມມື້ຜ່ານມາ, ອ້າຍ David ຂອງຂ້ອຍໄດ້ຂໍໃຫ້ຂ້ອຍກວດສອບການອອກແບບກ່ຽວກັບແອັບ app ທີ່ລາວ ກຳ ລັງສ້າງຢູ່. ລາວໄດ້ສົ່ງເອກະສານ Sketch ໃຫ້ຂ້ອຍ. ເມື່ອຂ້ອຍເປີດມັນ, ສິ່ງນີ້ໄດ້ເກີດຂື້ນ…

ເຄື່ອງມືອອກແບບສ່ວນຫຼາຍແມ່ນສວນທີ່ມີ ກຳ ແພງ. ຖ້າເພື່ອນຮ່ວມງານຄົນ ໜຶ່ງ ກຳ ລັງເຮັດວຽກໃນ Photoshop, ເພື່ອນຮ່ວມງານຄົນອື່ນບໍ່ສາມາດເປີດໂຄງການນັ້ນໃນ Sketch. ມັນບໍ່ພຽງພໍທີ່ຈະໃຫ້ທີມງານຂອງທ່ານທັງ ໝົດ ໃຊ້ເຄື່ອງມືດຽວກັນ - ພວກເຂົາກໍ່ຕ້ອງໄດ້ໃຊ້ເຄື່ອງມືນັ້ນແບບດຽວກັນ.

Marvel ແລະ Figma ເຮັດວຽກທີ່ດີຢູ່ທີ່ນີ້, ສະ ເໜີ ແຜນການຟຣີແລະລັກສະນະການຮ່ວມມືແບບ ໃໝ່ໆ.

ສະນັ້ນ, ເຄື່ອງມືອອກແບບໃນອະນາຄົດແມ່ນຫຍັງ?

ຄວາມຄິດສ້າງສັນໃນການອອກແບບເຄື່ອງມືການອອກແບບແມ່ນມີຄຸນຄ່າທີ່ສຸດແລະມີບໍ່ດົນມານີ້. ທີ່ເຄື່ອງມືອອກແບບ Airbnb, Jon Gold ແລະ Benjamin Wilkins ໄດ້ເຮັດວຽກກ່ຽວກັບ React-Sketchapp ເຊິ່ງໃຊ້ເວລາສ່ວນປະກອບຂອງ React ແລະປ່ອຍໃຫ້ພາຍໃນ Sketch. Jon ແລະ Ben ຍັງໄດ້ເຮັດວຽກກ່ຽວກັບເຄື່ອງມື ໃໝ່ ທີ່ສ້າງຄວາມຄິດສ້າງສັນເຊິ່ງໃຊ້ເວລາແຕ້ມຮູບຜ້າເຊັດໂຕແລະເຮັດໃຫ້ມັນກາຍເປັນສ່ວນປະກອບຂອງ React.

Adam Morse, Brent Jackson ແລະ John Otander ກຳ ລັງເຮັດວຽກກ່ຽວກັບຊຸດເຄື່ອງມືທີ່ Compositor ເຊິ່ງໂດຍພື້ນຖານແລ້ວຈະແກ້ໄຂທຸກໆບັນຫາໃນບົດຄວາມນີ້ແລະບາງທີອາດມີທົ່ວໂລກ.

ຂ້ອຍ ກຳ ລັງເຮັດວຽກກ່ຽວກັບ Modulz, ເຄື່ອງມືອອກແບບ ໃໝ່ ແລະລະບົບອອກແບບແບບເປີດເຜີຍເຊິ່ງຍັງມີຈຸດປະສົງເພື່ອແກ້ໄຂບັນຫາທີ່ຂ້ອຍໄດ້ກ່າວມາໃນບົດຂຽນນີ້. ຖ້າທ່ານສົນໃຈ, ຕິດຕາມໃນ Twitter ເພື່ອອັບເດດ.

ໃນຂະນະທີ່ຄວາມຄິດສ້າງສັນໃນການສ້າງເຄື່ອງມືແມ່ນມີຄວາມ ສຳ ຄັນ, ສິ່ງທ້າທາຍທີ່ແທ້ຈິງແມ່ນການສຶກສາ. ຊຸມຊົນອອກແບບແມ່ນບໍ່ທັນພ້ອມ ສຳ ລັບເຄື່ອງມືອອກແບບທີ່ເປັນລະບົບ. ຜູ້ອອກແບບຫຼາຍຄົນບໍ່ຄ່ອຍສົນໃຈກັບລະບົບການກໍ່ສ້າງ. ສຳ ລັບບາງຄົນ, JPG ແມ່ນເປົ້າ ໝາຍ ສຸດທ້າຍ - Dribbble ມັກ.

ພວກເຮົາ ຈຳ ເປັນຕ້ອງກະຕຸ້ນວັດທະນາ ທຳ ຂອງຄວາມຮັບຜິດຊອບ. ນັກພັດທະນາມີວັດທະນະ ທຳ ທີ່ມີຄວາມຮັບຜິດຊອບມາຫຼາຍປີແລ້ວ. ພວກເຂົາມີເຄື່ອງມືເພື່ອຮັກສາລະຫັດຂອງພວກເຂົາ. ຖ້ານັກພັດທະນາຊ້ ຳ ພັດເຂົ້າໃຈ ຄຳ ແນະ ນຳ ຂອງລະຫັດທີ່ເຂັ້ມງວດ, ທ່ານສາມາດແນ່ໃຈວ່າບັນຫາຈະຖືກແກ້ໄຂ.

ໃນຂະນະດຽວກັນ, ນັກອອກແບບມັກຈະຮວບຮວມເອົາພູຕ່າງໆຂອງຊັ້ນຕ່າງໆໃນຄວາມບໍ່ເປັນລະບຽບຮຽບຮ້ອຍໂດຍບໍ່ໄດ້ເອົາໃຈໃສ່ກັບການຕັ້ງຊື່, ການຈັດກຸ່ມແລະການຈັດ ລຳ ດັບ. ມັນຫຼາຍແຕ່ລະຄົນຂອງຕົນເອງ. ນັບຕັ້ງແຕ່ຜົນຜະລິດ (ຮູບພາບ raster) ບໍ່ໄດ້ຮັບຜົນກະທົບຈາກການປ້ອນຂໍ້ມູນ (ຊັ້ນ vector), ບໍ່ມີພາລະອັນໃດທີ່ຈະຖືກຈັດໃສ່ໃຫ້ກັບນັກອອກແບບ. ຜູ້ອອກແບບມັກຈະແກ້ຕົວການຂາດອົງການຈັດຕັ້ງນີ້ໂດຍການຮັກສາສິລະປະໃນການອອກແບບ, ການແຕ້ມຮູບຕົນເອງວ່າເປັນຄົນມະຫັດສະຈັນທີ່ ຈຳ ເປັນຕ້ອງປະໄວ້ໃນອຸປະກອນຂອງຕົນເອງເພື່ອປະຕິບັດ.

ພວກເຮົາຍັງຕ້ອງໄດ້ສ້າງແຮງບັນດານໃຈໃຫ້ແກ່ວັດທະນະ ທຳ ໃນການລວມຕົວ. ພວກເຮົາຄວນຂັດຂວາງການກະ ທຳ ທີ່ບໍ່ຖືກຕ້ອງເຊັ່ນ: ສີແສງສະຫວ່າງທີ່ເຮັດໃຫ້ຂໍ້ຄວາມຍາກທີ່ຈະອ່ານ ສຳ ລັບຫຼາຍໆຄົນ, ຫຼືຮູບແບບທີ່ມີຄຸນນະພາບສູງທີ່ເຮັດໃຫ້ເວບໄຊທ໌ຊ້າລົງ, ຫຼືອົງປະກອບ UI ແບບບໍ່ມີຕົວຕົນເຊິ່ງເຮັດໃຫ້ສິ່ງທີ່ເຂົ້າໃຈຍາກ ສຳ ລັບຄົນຕາບອດສີ. ໃນປະຈຸບັນ, ການກະ ທຳ ແບບຜິດໆແບບນີ້ໄດ້ຮັບການຍ້ອງຍໍໃນ ໝູ່ ຊຸມຊົນອອກແບບ. ຖ້າພວກເຮົາຍິນດີຕ້ອນຮັບເຄື່ອງມືການອອກແບບທີ່ສະຫຼາດ, ພວກເຮົາຕ້ອງຫັນປ່ຽນວັດທະນະ ທຳ ນີ້.

ຖ້າເຄື່ອງມືອອກແບບທີ່ເປັນລະບົບແມ່ນເພື່ອເອົາຊະນະໃຈຂອງພວກເຮົາ, ມັນຕ້ອງໄດ້ສຶກສາກ່ອນ.