16 ເຄື່ອງມືອອກແບບແລະອອກແບບທີ່ດີທີ່ສຸດຂອງ Google ໃນປີ 2020

ກະວີ: Louise Ward
ວັນທີຂອງການສ້າງ: 10 ກຸມພາ 2021
ວັນທີປັບປຸງ: 18 ເດືອນພຶດສະພາ 2024
Anonim
16 ເຄື່ອງມືອອກແບບແລະອອກແບບທີ່ດີທີ່ສຸດຂອງ Google ໃນປີ 2020 - Creative
16 ເຄື່ອງມືອອກແບບແລະອອກແບບທີ່ດີທີ່ສຸດຂອງ Google ໃນປີ 2020 - Creative

ເນື້ອຫາ

ການເຮັດວຽກຢູ່ໃນເວັບມັກຈະ ໝາຍ ຄວາມວ່າທ່ານຈະເຮັດວຽກກັບ Google ໃນຮູບຮ່າງຫລືຮູບແບບໃດ ໜຶ່ງ. ແລະເບິ່ງວ່າ Google Chrome ແມ່ນຖະຫນົນຫົນທາງກ່ອນການແຂ່ງຂັນ, ນັກອອກແບບແລະນັກພັດທະນາຕ້ອງຄິດກ່ຽວກັບວ່າໂຄງການຂອງພວກເຂົາຈະເຮັດວຽກກັບ browser ໄດ້ແນວໃດ. ມັນຈະເບິ່ງແນວໃດ? ມັນສະ ໜັບ ສະ ໜູນ ເຕັກໂນໂລຢີຫຍັງ, ມັນປອດໄພແລະມັນຈະປະຕິບັດແນວໃດ?

ໂຊກດີ, Chrome ໃຫ້ເຄື່ອງມືເພື່ອຮັບປະກັນວ່າເວບໄຊທ໌ຫລືແອັບ app ໃດຈະດີທີ່ສຸດ. DevTools ຊ່ວຍໃຫ້ຜູ້ອອກແບບແລະນັກພັດທະນາໄດ້ຮັບຄວາມເຂົ້າໃຈໃນເວບໄຊທ໌: ທ່ານສາມາດ ໝູນ ໃຊ້ DOM, ກວດເບິ່ງ CSS, ທົດລອງກ່ຽວກັບການອອກແບບດ້ວຍການແກ້ໄຂສົດ, ແກ້ໄຂ JavaScript ແລະກວດສອບປະສິດທິພາບ. (ເບິ່ງເພີ່ມເຕີມກ່ຽວກັບວິທີການ ນຳ ໃຊ້ເຄື່ອງມືເວັບໄຊຕ໌ເຫຼົ່ານີ້ຂອງ Google, ແລະຖ້າທ່ານ ກຳ ລັງເລີ່ມຕົ້ນຈາກຂັ້ນຕົ້ນ, ເບິ່ງລາຍຊື່ຜູ້ສ້າງເວັບຊັ້ນ ນຳ ຂອງພວກເຮົາເຊັ່ນກັນ).

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


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

01. ຫໍໄຟ

ການປະຕິບັດງານແມ່ນປັດໃຈ ສຳ ຄັນຂອງຜົນ ສຳ ເລັດຂອງເວບໄຊທ໌ແລະຫໍໄຟແມ່ນເຄື່ອງມືຂອງ Google ໃນການປັບປຸງຄຸນນະພາບຂອງ ໜ້າ ເວບຕ່າງໆ (ການໃຫ້ບໍລິການເວັບໂຮດຕິ້ງທີ່ຖືກຕ້ອງກໍ່ຈະຊ່ວຍໄດ້ເຊັ່ນກັນ). ສະນັ້ນທ່ານໃຊ້ Lighthouse ແລະມັນສາມາດເຮັດຫຍັງໄດ້? ໃນຮູບແບບທີ່ລຽບງ່າຍທີ່ສຸດ, ທ່ານສາມາດ ດຳ ເນີນງານ Lighthouse ຈາກແທັບ Audits ແລະເລືອກຈາກຕົວເລືອກຕ່າງໆລວມທັງ desktop ຫຼື mobile, ນອກ ເໜືອ ຈາກກ່ອງ ໝາຍ ຕິກ ສຳ ລັບການປະຕິບັດງານ, ການເຂົ້າເຖິງແລະ SEO, ເພື່ອສ້າງບົດລາຍງານສຸດທ້າຍໂດຍມີການປັບປຸງທີ່ແນະ ນຳ.

02. ໂພລິເມີ

Polymer ແມ່ນເປັນທີ່ຮູ້ຈັກກັນດີ ສຳ ລັບການເຮັດວຽກກັບສ່ວນປະກອບເວັບແຕ່ດຽວນີ້ໂຄງການໄດ້ຂະຫຍາຍອຸປະກອນເສີມເພື່ອຮັບເອົາຫ້ອງສະມຸດ, ເຄື່ອງມືແລະມາດຕະຖານຕ່າງໆ. ມີຫຍັງແດ່ທີ່ລວມຢູ່? LitElement ແມ່ນບັນນາທິການທີ່ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການ ກຳ ນົດສ່ວນປະກອບເວັບ, ໃນຂະນະທີ່ lit-html ແມ່ນຫ້ອງສະ ໝຸດ ແບບ HTML ທີ່ຊ່ວຍໃຫ້ຜູ້ໃຊ້ສາມາດຂຽນແບບ HTML ແບບຕໍ່ໄປໃນ JS. ຍິ່ງໄປກວ່ານັ້ນ, ທ່ານຍັງຈະໄດ້ພົບກັບຊຸດ PWA Starter, ຫ້ອງສະຫມຸດ Polymer ເດີມແລະຊຸດຂອງສ່ວນປະກອບຕ່າງໆຂອງເວັບ.


03. APIs Explorer

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

04. ກະແສໄຟຟ້າ

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

05. Google GitHub

ດັ່ງທີ່ຄົນສ່ວນໃຫຍ່ຈະຮູ້, GitHub ແມ່ນເວທີການໂຮດຕິ້ງ / ບ່ອນເກັບຂໍ້ມູນທີ່ຈະເກັບແລະແບ່ງປັນລະຫັດແລະເອກະສານ. ແລະຢ່າງມີຄວາມສຸກ Google ມີຈຸດຂອງຕົວເອງຢູ່ໃນເວທີທີ່ມີຫລາຍກວ່າ 260 ບ່ອນເກັບມ້ຽນທີ່ຕ້ອງຜ່ານ. ໃຊ້ຕົວກອງເພື່ອຕັດເວລາຄົ້ນຫາຂອງທ່ານແລະໃກ້ກັບບ່ອນເກັບມ້ຽນທີ່ທ່ານຕ້ອງການຫລິ້ນກັບຫລືປະກອບສ່ວນເຂົ້າ.


06. ພາສາຝີມື

ສ້າງໃນ Node, Puppeteer ສະ ເໜີ API ທີ່ມີລະດັບສູງເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດເຂົ້າເຖິງ Chrome ທີ່ບໍ່ມີຫົວ - Chrome ຢ່າງມີປະສິດຕິຜົນໂດຍບໍ່ຕ້ອງໃຊ້ UI ເຊິ່ງນັກພັດທະນາສາມາດຄວບຄຸມຜ່ານເສັ້ນ ຄຳ ສັ່ງ. ດັ່ງນັ້ນທ່ານສາມາດເຮັດຫຍັງກັບ Puppeteer? ມີສອງສາມທາງເລືອກ ສຳ ລັບການສ້າງພາບ ໜ້າ ຈໍແລະ PDF ຂອງ ໜ້າ ຕ່າງໆ, ການຍື່ນແບບຟອມແບບອັດຕະໂນມັດແລະສ້າງສະພາບແວດລ້ອມການທົດສອບແບບອັດຕະໂນມັດ.

07. ກ່ອງເຮັດວຽກ

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

08. Codelabs

ຕ້ອງການ ຄຳ ແນະ ນຳ ທີ່ເປັນປະໂຫຍດ ສຳ ລັບຜະລິດຕະພັນຂອງ Google? Codelabs ໃຫ້“ ຄູ່ມືແນະ ນຳ, ການສອນ, ປະສົບການໃນການຂຽນລະຫັດ”. ເວັບໄຊທ໌້ຖືກແຍກອອກເປັນຫລາຍປະເພດແລະເຫດການ, ເຮັດໃຫ້ມັນງ່າຍແລະໄວໃນການຊອກຫາສິ່ງທີ່ທ່ານຕ້ອງການ. ມັນປະກອບມີການວິເຄາະ, Android, ຜູ້ຊ່ວຍ, ຄວາມເປັນຈິງເພີ່ມຂື້ນ, Flutter, G Suite, ຄົ້ນຫາ, TensorFlow ແລະຄວາມເປັນຈິງແລ້ວ virtual. ເລືອກຕົວເລືອກແລະເອົາລະຫັດແລະທິດທາງທີ່ທ່ານຕ້ອງການສ້າງໂປແກຼມນ້ອຍໆ.

09. ເຄື່ອງມືສີ

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

10. Design Sprints

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

11. ບຸກຄົນ + ປື້ມຄູ່ມື AI

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

12. Google Assistant

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

13. PageSpeed ​​Insights

PageSpeed ​​Insights ວິເຄາະເນື້ອຫາຂອງເວັບແລະຫຼັງຈາກນັ້ນໃຫ້ ຄຳ ແນະ ນຳ ກ່ຽວກັບວິທີເຮັດໃຫ້ມັນໂຫຼດໄດ້ໄວຂື້ນ. ພຽງແຕ່ເພີ່ມ URL, ກົດປຸ່ມ Analyte ແລະລໍຖ້າໃຫ້ເວດມົນ. ກວດເບິ່ງ Docs ເພື່ອໃຫ້ມີຄວາມເຂົ້າໃຈທີ່ດີຂື້ນກ່ຽວກັບວິທີການທີ່ PageSpeed ​​API ເຮັດວຽກແລະວິທີເລີ່ມໃຊ້ມັນ.

14. AMP ໃນ Google

AMP ແມ່ນເຄື່ອງມືຂອງ Google ໃນການສ້າງ ໜ້າ ມືຖືທີ່ໂຫລດໄວທີ່ສຸດ (ຫວັງວ່າ) ຈະໄດ້ຮັບອັນດັບ ໜຶ່ງ ໃນອັນດັບຂອງການຄົ້ນຫາ. ຮຽນຮູ້ວິທີການສ້າງເວັບໄຊທ໌ທີ່ໃຊ້ໄດ້ໄວ, ເໝາະ ສົມກັບຜູ້ໃຊ້, ລວມ AMP ໃນທົ່ວຜະລິດຕະພັນຂອງ Google, ໃຊ້ Google AMP Cache ເພື່ອເຮັດໃຫ້ ໜ້າ ເວັບຂອງ AMP ໄດ້ໄວຂຶ້ນແລະສ້າງລາຍໄດ້ຈາກ ໜ້າ AMP ກັບຜະລິດຕະພັນອື່ນໆຂອງ Google.

15. Google DevTools

ຜູ້ອອກແບບແລະນັກພັດທະນາທຸກຄົນຮູ້ (ຫລືຢ່າງ ໜ້ອຍ ຄວນຮູ້) ວ່າ Chrome ມາພ້ອມກັບຊຸດເຄື່ອງມືທີ່ຖືກສ້າງຂື້ນໃນ browser. DevTools ຂອງ Chrome ແມ່ນ ເໝາະ ສຳ ລັບການກວດສອບອົງປະກອບຕ່າງໆທີ່ສ້າງ ໜ້າ ເວັບ, ກວດສອບ CSS, ດັດແກ້ ໜ້າ ເວັບຕ່າງໆແລະອື່ນໆ.

ແທັບ Elements ແມ່ນການແນະ ນຳ ກ່ຽວກັບ DevTools. ມັນສະແດງລະຫັດ HTML ທີ່ສ້າງ ໜ້າ ເວັບທີ່ຖືກເລືອກໄວ້. ໄດ້ຮັບຄວາມເຂົ້າໃຈກ່ຽວກັບຄຸນສົມບັດຂອງແຕ່ລະ div ຫຼື tag ຈາກ ໜ້າ ທີ່ເລືອກແລະເລີ່ມຕົ້ນແກ້ໄຂສົດ. ນີ້ແມ່ນດີເລີດ ສຳ ລັບການທົດລອງອອກແບບ. ກວດເບິ່ງຮູບແບບ - ບໍ່ວ່າທ່ານຈະໃຊ້ Flexbox ຫຼື Grid - ແລະເບິ່ງທີ່ຕົວອັກສອນທີ່ກ່ຽວຂ້ອງກັບຕົວຢ່າງແລະກວດເບິ່ງພາບເຄື່ອນໄຫວຕ່າງໆ.

ຢູ່ບ່ອນອື່ນ, ທ່ານສາມາດເບິ່ງແລະປ່ຽນ CSS. ແທັບ Styles ທີ່ຢູ່ເທິງແຜງ Elements ຈະ ກຳ ນົດກົດລະບຽບ CSS ທີ່ຖືກ ນຳ ໃຊ້ກັບອົງປະກອບທີ່ຖືກເລືອກໄວ້ໃນ DOM Tree. ເປີດແລະປິດຄຸນສົມບັດ (ຫລືເພີ່ມຄ່າ ໃໝ່) ເພື່ອທົດລອງອອກແບບ. ນີ້ແມ່ນເຄື່ອງມືທີ່ດີເລີດໃນການຮັບປະກັນວ່າທຸກຢ່າງເຮັດວຽກຕາມທີ່ຄາດຫວັງກ່ອນທີ່ຈະ ນຳ ໃຊ້ການປ່ຽນແປງໃດໆໃນການອອກແບບສົດໆ.

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

ເຊັ່ນດຽວກັນກັບທຸກໆໂປແກຼມທ່ອງເວັບທີ່ດີ, Chrome ກຳ ລັງມີການພັດທະນາຢ່າງຕໍ່ເນື່ອງແລະແຕ່ລະລຸ້ນລຸ້ນ ໃໝ່ ນຳ ຄຸນລັກສະນະ ໃໝ່ ມາໃຫ້. ຄົ້ນຫາສິ່ງທີ່ ກຳ ລັງເກີດຂື້ນໃນແພລະຕະຟອມສະຖານະຂອງ Chrome

16. ການອອກແບບວັດສະດຸ

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

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

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

ແລະນັກພັດທະນາກໍ່ບໍ່ໄດ້ຖືກລືມ, ໂດຍມີລາຍລະອຽດແລະການສອນກ່ຽວກັບວິທີການສ້າງ ສຳ ລັບເວທີທີ່ແຕກຕ່າງກັນ - Android, iOS, Web ແລະ Flutter. ແລະສຸດທ້າຍ, ມີ ໜ້າ ໜຶ່ງ ທີ່ອຸທິດໃຫ້ກັບເຈົ້າຂອງຊັບພະຍາກອນຕ່າງໆເພື່ອຊ່ວຍເຮັດໃຫ້ການອອກແບບທີ່ທ່ານເລືອກເກີດຂື້ນ.

ບົດຂຽນນີ້ປະກົດຢູ່ໃນວາລະສານສຸດທິ. ຊື້ລຸ້ນ 326.

ຫນ້າສົນໃຈຢູ່ໃນເວັບໄຊທ໌້
ການຖະແຫຼງຂ່າວຄືນ ໃໝ່ ຂອງມະຫາວິທະຍາໄລ Harvard
ຍິ່ງໄປກວ່ານັ້ນ

ການຖະແຫຼງຂ່າວຄືນ ໃໝ່ ຂອງມະຫາວິທະຍາໄລ Harvard

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

ສະຖານທີ່ ສຳ ຄັນຂອງລອນດອນໄດ້ຖືກປັບປຸງ ໃໝ່ ເປັນສິລະປະເຈ້ຍ 3D

ດ້ວຍການຄົບຮອບ 150 ປີຂອງ London Underground, ການແຂ່ງຂັນກິລາໂອລິມປິກແລະເຈົ້າຍິງ Jubilee, ບັນດານັກອອກແບບໄດ້ເປັນບ້າ ສຳ ລັບການສ້າງທີ່ລອນດອນໃນ 12 ເດືອນທີ່ຜ່ານມາ.ເບິ່ງປື້ມຄູ່ມືຂອງນັກອອກແບບຂອງພວກເຮົາທີ່ລອນດອນ...
ການອອກແບບແອັບ app ມືຖື: ຄູ່ມືເລີ່ມຕົ້ນຂອງຜູ້ເລີ່ມຕົ້ນ
ຍິ່ງໄປກວ່ານັ້ນ

ການອອກແບບແອັບ app ມືຖື: ຄູ່ມືເລີ່ມຕົ້ນຂອງຜູ້ເລີ່ມຕົ້ນ

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