Material Theming ແມ່ນຫຍັງ ?
Google ໄດ້ເປີດໂຕ “Material Design 2” ທີ່ມາໃນຊື່ຂອງ “Material Theming” ໃນງານ Google I/O 2018 ໃນເດືອນມິຖຸນາ 2018 ທີ່ຜ່ານມາ.
ກ່ອນທີ່ຈະເຂົ້າເລື່ອງຂອງ “Material Thiming” ຈະຂໍເວົ້າກ່າວກ່ຽວກັບທີ່ມາ/ຄວາມເປັນມາຂອງມັນທີ່ອາດຈະເຮັດໃຫ້ເຈົ້າເຂົ້າໃຈຫຼາຍຂຶ້ນ ^_^
ເຊິ່ງໃນປີ 2014 ທີ່ຜ່ານມາ Google ໄດ້ພັດທະນາ “Flat Design” ຫຼື ທີ່ເຮົາຮູ້ຈັກກັນໃນຊື່ຂອງ “Material Design” ເຊິ່ງເປັນ “ພາສາຂອງການອອກແບບ ຫຼື Visual Language ”ທີ່ໄດ້ລວມເອົາຫຼັກການອອກແບບທີ່ດີໄວ້ນໍາກັນ ໂດຍໃຊ້ເປັນແນວທາງໃນການອອກແບບຊຸດດຽວ ທີ່ສາມາດນໍາໄປໃຊ້ໄດ້ກັບທຸກອຸປະກອນ.
ເຊິ່ງມັນໄດ້ຖືກນໍາເອົາໄປພັດທະນາເທິງໂປຣແກຣມຕ່າງໆຂອງ Google, ລວມທັງໄດ້ນໍາເອົາໄປພັດທະນາເທິງອຸປະກອນຕ່າງໆທີ່ໃຊ້ລະບົບ Android.
ເຊິ່ງ “Material Design” ແມ່ນໄດ້ຮັບການຕອບຮັບຈາກນັກພັດທະນາເປັນຢ່າງດີ, ຕໍ່ມາກໍ່ໄດ້ມີການນໍາໃຊ້ “Material Design” ເຂົ້າໃນການພັດທະນາ Mobile Application ຕ່າງໆຫຼາຍຂຶ້ນ.
ຈາກນັ້ນ Google ກໍ່ໄດ້ພັດທະນາ Design ແບບໃໝ່ທີ່ມາໃນຊື່ຂອງ “Material Theming” ທີ່ໄດ້ເປີດໂຕໃນງານ Google I/O 2018 ໃນເດືອນມິຖຸນາ 2018 ທີ່ຜ່ານມາ, ເຊິ່ງໄດ້ຖືກພັດທະນາ ຫຼື ປັບປຸງມາຈາກ “Material Design” ນັ້ນເອງ.
ພໍຈະເຂົ້າໃຈຄ່າວໆລະເນາະ ກ່ຽວກັບ “Material Design” *_^
“Material Theming” ແມ່ນພາສາຂອງການອອກແບບ ຫຼື Visual Language ເຊິ່ງຈະເປັນໂຕທີ່ມາປັບແຕ່ງ Material Design ເພື່ອຍົກລະດັບ Application ຫຼື ຜະລິດຕະພັນ(Brand) ຂອງເຮົາໃຫ້ມີປະສິດທິພາບຫຼາຍຂຶ້ນ
ເອະ… ! ຫຼາຍຄົນອາດຈະສົງໃສວ່າ ຍົກລະດັບ Application ຫຼື ຜະລິດຕະພັນ(Brand) ແບບໃດວະ ?
- ເຊິ່ງມັນຈະມາປັບໃນສ່ວນຂອງການອອກແບບໜ້າຕາຂອງແອັບຯ ເຮັດໃຫ້ແອັບຯ ຫຼື ຜະລິດຕະພັນນັ້ນໆ ເດັ່ນຂຶ້ນ ແລະ ມີເອກກະລັກທີ່ເດັ່ນຂຶ້ນ
ອໍ້… ແຕ່ກໍ່ອາດຈະຍັງງົງຢູ່ດີ ຫະຫະ+ (ລອງພະຍາຍາມເຂົ້າໃຈມັນເບິ່ງເນາະ…ສູ້ໆ ^_^ )
ເຊິ່ງວ່າ “Material Theming” ຈະມີຄວາມນຸ່ມນວນຫຼາຍຂຶ້ນ ເຮັດໃຫ້ເຮົາສາມາດເລືອກສີ, ເລືອກຮູບແບບຂອງຕົວອັກສອນໄດ້ຕາມຕ້ອງການ, ລວມເຖິງການຈັດວາງປຸ່ມກົດຕ່າງໆໃນໜ້າແອັບຯໄດ້ ໂດຍບໍ່ມີຕໍາແໜ່ງທີ່ແນ່ນອນ (ປຸ່ມກົດທີ່ຢູ່ດ້ານລຸ່ມຂວາ) ສາມາດວາງໄວ້ຕໍາແໜ່ງອື່ນກໍ່ໄດ້ ແລະ ຍັງສາມາດປັບຮູບແບບຂອງປຸ່ມກົດໄດ້ອີກ.
ນອກນີ້ “Material theming” ກໍ່ຍັງສາມາດເພີ່ມລາຍໆຕ່າງໆເຂົ້າໄປເພື່ອຄວາມງາມ ແລະ ຍັງມີຮູບແບບຂອງ Layout ຫຼາຍຂຶ້ນ
ບໍ່ວ່າຈະເປັນສ່ວນຂອງຮູບແບບຕົວອັກສອນ ກໍ່ສາມາດເລືອກໃຊ້ໄດ້ຫຼາຍຮູບແບບ ແລະ ຍັງໄດ້ເພີ່ມໃນສ່ວນຂອງ icon ທີ່ມີໃຫ້ເລືອກໃຊ້ທຸກຮູບແບບເລີຍ
ແລະ ນີ້ກໍ່ເປັນຜະລິດຕະພັນ Gmail ຂອງ Google ທີ່ໄດ້ນໍາໃຊ້ “Material Theming” ມາພັດທະນາ ເຊິ່ງເຮົາຈະສັງເກດເຫັນວ່າປຸ່ມກົດຕ່າງໆໄດ້ມີການປັບໃໝ່, ໄດ້ມີການໃຊ້ພື້ນທີ່ວ່າງສິຂາວຫຼາຍຂຶ້ນ ແລະ ຍັງໄດ້ປັບ Highlight Tab ເປັນໃນຮູບແບບຂອງມຸມໂຄ້ງອີກດ້ວຍ
ໃນສ່ວນຂອງ icon ກໍ່ໄດ້ເຮັດໃຫ້ມີສີສັນທີ່ຫຼາຍ (ເຊິ່ງກ່ອນໜ້າທີ່ອາດຈະເຄີຍເຫັນ icon ທີ່ມີສີສັນແບບນີ້ຢູ່ກັບອຸປະກອນບາງລຸ້ນແລ້ວ)
ນອກນີ້ Google ກໍ່ໄດ້ເລີ່ມປັບປ່ຽນຮູບແບບຕົວອັກສອນໃຫ້ເປັນ “Product sans” ທັງໝົດ
ນອກຈາກທີ່ Google ໄດ້ປັບຮູບແບບການ Design ແບບໃໝ່ແລ້ວ, Google ກໍ່ຍັງໄດ້ເພີ່ມ “Material Components” ທີ່ເປັນຊຸດ Components UI ແບບພ້ອມໃຊ້ງານມາໃຫ້ນັກພັດທະນາອີກດ້ວຍ
ທີ່ຮອງຮັບການໃຊ້ງານໄດ້ທັງ Android, iOS, Web ແລະ Flutter ອີກດ້ວຍ
ສາມາດເຂົ້າເບິ່ງລາຍລະອຽດເຕັມໄດ້ທີ່ : https://material.io/develop/
ນອກຈາກນີ້ Google ກໍ່ໄດ້ພັດທະນາ Theme Editor ມາໃຫ້ບັນດານັກອອກແບບໄດ້ໃຊ້ງານອີກດ້ວຍ (ເຊິ່ງມັນເປັນ Plugin ທີ່ໃຊ້ກັບແອັບຯ Sketch)
// ເຊິ່ງ Theme Editor ຈະສາມາດໃຊ້ໄດ້ກັບເຄື່ອງ macOS High Sierra (10.13) ຫຼື ເວີຊັ້ນລ່າສຸດ
ປລ. ສໍາລັບຜູ້ທີ່ໃຊ້ Window OS ແມ່ນຍັງບໍ່ສາມາດນໍາໃຊ້ Plugin ນີ້ໄດ້
ດາວໂຫຼດ Material theme Plugin ໄດ້ທີ່ : https://material.io/tools/theme-editor/
ໃນສ່ວນຂອງ Choose colors
- ເຮົາສາມາດເລືອກປ່ຽນສີຂອງອົງປະກອບຕ່າງໆແບບອັດຕະໂນມັດໄດ້ໂດຍສາມາດເລືອກປ່ຽນສີຫຼັກ, ສີພື້ນ, ສີຕົວອັກສອນ ແລະ ສີຂອງ icon ໄດ້
- ກວດສອບຄວາມແຕກຕ່າງຂອງສີ
- ສາມາດເລືອກສີຈາກ Material Color Palette
- ເລືອກໃຊ້ໂທນສີທີ່ຖືກສ້າງໂດຍອັດຕະໂນມັດ ມີໃຫ້ເລືອກຫຼາຍກວ່າ 10 ຄ່າສີ
- ປ່ຽນສີຂອງສັນຍາລັກໂດຍການເລືອກປ່ຽນທັງໝົດ
ໃນສ່ວນຂອງ Set shape
- ສາມາດເລືອກຮູບຮ່າງຂອງວັດຖຸ
- ເລືອກປັບມຸມໂຄ້ງ, ມຸມຕັດຕາມຮູບແບບທີ່ເຮົາຕ້ອງການ
- ສາມາດປັບປ່ຽນສັນຍາລັກ ແລະ ຮູບຮ່າງຂອງວັດຖຸໄດ້ທັງໝົດ
ໃນສ່ວນຂອງ Add type
- ສາມາດເພີ່ມຮູບແບບຕົວອັກສອນ 3ຮູບແບບ
- ສາມາດປັບຂະໜາດຕົວອັກສອນ ແລະ ປ່ຽນຮູບແບບຂອງຕົວອັກສອນຕາມແບບທີ່ເຮົາຕ້ອງການໄດ້ແບບອັດຕະໂນມັດ
- ສາມາດເຂົ້າໃຊ້ Google fonts, ຢ່າງເຊັ່ນ : Roboto, Raleway, Alegreya, Rubik ແລະ ອື່ນໆອີກ
ໃນສ່ວນຂອງ icons
- ເພີ່ມລູກຫຼີ້ນໃຫ້ກັບຜະລິດຕະພັນຂອງເຮົາໂດຍໃຊ້ icons ທີ່ຫຼາກຫຼາຍຮູບແບບ
- ສາມາດເລືອກ icons ໃນແບບ : Filled, Shapes, Rounded, outlines ແລະ ແບບ Two tone icon themes
ດາວໂຫຼດ Material theme Plugin ໄດ້ທີ່ : https://material.io/tools/theme-editor/
ສະຫຼຸບ : “Material Theming” ຈະເຂົ້າມາຊ່ວຍໃຫ້ນັກອອກແບບ (Designers) ແລະ ນັກພັດທະນາ (Developers) ສາມາດເຮັດວຽກຮ່ວມກັນສະດວກຂຶ້ນ, ເຊິ່ງຈະເຮັດໃຫ້ນັກພັດທະນາສາມາດນໍາເປັນເອົາຮູບແບບການ Design (UI)ຂອງນັກອອກແບບໄປພັດທະນາຕໍ່ໄດ້ງ່າຍ ແລະ ໄວຂຶ້ນ.
ສຶກສາຂໍ້ມູນເພີ່ມຕື່ມທີ່ : https://material.io/
ຂອບໃຈ :
- Material.io
- Google Design
