Properties

ໃນບົດນີ້ຈະເປັນການກຳນົດຄຸນສົມບັດໃຫ້ກັບໂປຣແກຣມທີ່ຈະສ້າງ ຫຼື ອອກແບບ ເພື່ອໃຫ້ສອດຄ່ອງກັບແນວທາງການອອກແບບ ໂປຣແກຣມໃຫ້ມີປະສິດທິພາບ ຕາມການພັດທະນາລະບົບໃນລະດັບສາກົນ ຕົວຢ່າງເຊັ່ນ ການອອກແບບປຸ່ມ, ການອອກແບບໂຄງສ້າງ, ການອອກແບບໂຄດ ເຊິ່ງຈະມີບົດນີ້ເຮົາຈະໄດ້ລົງເລິກໃນການອອກແບບໜ້າຕາຂອງໂປຣແກຣມ ຫຼື View ເປັນຫຼັກ ຫຼື ເອີ້ນກັນງ່າຍກໍ່ຄືການອອກແບບ UX ນັ້ນເອງ

ໃນໜ້າເວບ ຫຼື ໃນໜ້າຕ່າງຂອງໂປຣແກຣມເຮົາຈະແບ່ງອົງປະກອບອອກມາໄດ້ດັ່ງນີ້

Identity ແມ່ນອົງປະກອບທີ່ນ້ອຍທີ່ສຸດເຊັ່ນ ສີ, ຂໍ້ຄວາມ, ຮູບພາບ, ໄອຄ່ອນ, ກ່ອງ
Element ແມ່ນການນຳເອົາ indentity ມາລວມເຂົ້າກັນ
Component ແມ່ນການນຳເອົາກ່ອງ ແລະ ຂໍ້ຄວາມມາລວມເຂົ້າກັນ
Composition ແມ່ນການນຳເອົາ Component ຫຼາຍອັນມາລວມກັນໃຫ້ກາຍເປັນ Contents
Layout ແມ່ນການນຳເອົາ Composition ມາລຽງກັນ
Page ແມ່ນໜ້າລວມທັງຂອງໂປຣແກຣມ

Identity & Element

Component Composition

Layout Page

ລາຍການໃນການອອກແບບ UX

ການກຳນົດສີ
ການນຳນົດຂະໜາດ
ການກຳນົດຂໍ້ຄວາມແຈ້ງເຕືອນ

ການກຳນົດສີ

ການອອກແບບສີເຮົາຈະຕ້ອງກຳນົດສີທັງໝົດຂອງ UI ຕາມຫຼັກການອອກແບບເຮົາຈະແບ່ງພາກສ່ວນຂອງສີຂອງເປັນແຕ່ລະອັດຕາສ່ວນດັ່ງນີ້

ກົດການໃຊ້ສີແບບ 60 30 10 ໃນງານ GUI Design

ກົດການໃຊ້ແບບ 60 30 10 ເປັນກົດພື້ນຖານສໍາລັບນັກອອກແບບສະຖາປັດຕະຍາກໍາພາຍໃນ (Interior Design) ເພື່ອການໃຊ້ອັດຕາສ່ວນສີກັບສ່ວນປະກອບຕ່າງໆຢ່າງລົງຕົວ ຊຶ່ງທີ່ມາຄືເກີດຈາກຈິດວິທະຍາການຮັບຮູ້ຂອງມະນຸດທີ່ມັກຈະເບິ່ງຫຍັງເປັນກຸ່ມເປັນກ້ອນຈາກພາບໃຫຍ່ ແລະ ຈະຄ່ອຍໆພິຈາລະນາລາຍລະອຽດລົງໄປຊຶ່ງການໃຊ້ອັດຕາສ່ວນສີແບບນີ້ຈະເຮັດໃຫ້ມະນຸດຄ່ອຍໆຊຶມຊັບການເຂົ້າເຖິງຂອງງານອອກແບບໄດ້ ແຕ່ຖາມວ່າຈຳເປັນທຸກເທື່ອຫຼືບໍ່ທີ່ຕ້ອງໃຊ້ກົດ ຫຼື ສັດສ່ວນແບບນີ້ສະເໝີໄປ ທັງນີ້ກໍຂຶ້ນຢູ່ກັບ ຊີ້ນຫາ (Content) ຂອງໜ້າ Interface ນັ້ນໆວ່າຕ້ອງການສື່ສານຫຍັງ ແລະ

60 (Background) ຄືສີທີ່ໃຊ້ໃນອັດຕາສ່ວນຫລາຍທີ່ສຸດ ສ່ວນໃຫຍ່ຈະໃຊ້ເປັນສີໃນ Grayscale ຊຶ່ງເປັນສີກາງສາມາດໃຊ້ໄດ້ກັບສີອື່ນໆ ເພື່ອສົ່ງເສີມໃຫ້ສີທີ່ອັດຕາສ່ວນນ້ອຍມີຄວາມສຳຄັນ ແລະ ເກີດຄວາມແຕກຕ່າງຫລາຍຂຶ້ນ

30 (Primary Color) ຄືສີທີ່ໃຊ້ອັນດັບຮອງລົງມາ ແລະ ຈະໃຊ້ກັບ Element ທີ່ໃຊ້ໃນການສື່ຄວາມໝາຍ ເຊັ່ນ Icon, Bar, Navigation ສ່ວນໃຫຍ່ຈະເປັນສີ Theme ຫຼັກໆໃນ Graphic User Interface

10 (Secondary Color) ຫຼື Accent Color ຈະໃຊ້ກັບ Element ທີ່ຕ້ອງການໃຫ້ເກີດການ Interaction ຫຼື Call to Action ໂດຍຈະໃຊ້ສີນີ້ເພື່ອສ້າງຄວາມແຕກຕ່າງຢ່າງເດັ່ນແຈ້ງ ນັ້ນເອງ

ສີທີ່ຄວານກຳນົດ

Color ສີ (primary, secondary, and primary color variants)
Surfaces ພື້ນຜິວ (backgrounds and components)
States ສະຖານະ (such as error states)
Content ເນື້ອໃນ (typography and iconography)

2. ການນຳນົດຂະໜາດ

ແມ່ນເຮົາຈະກຳນົດຂະໜາດຂອງ Buttons ເປັນຫຼັກ ເຊັ່ນປຸ່ມ ບັນທຶກ, ຍົກເລີກ, ລົບ, ແກ້ໄຂ

3. ການກຳນົດຂໍ້ຄວາມແຈ້ງເຕືອນ

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

ການກຳນົດຄຸນສົມບັດ

ຫຼັງຈາກທີ່ເຮົາໄດ້ກຳນົດ UX ແລະ UI ສຳລັບການອອກແບບແລ້ວ ຕໍ່ໄປເຮົາຈະນຳເອົາຄ່າທີ່ກຳນົດໄວ້ ມາໃຊ້ໃນການອອກແບບໜ້າຕ່າງໂປຣແກຣມ

ຂັ້ນຕອນການເອີ້ນໃຊ້ Properties

ເລືອກ Component
ຄິກຂາວ > properties

ຕົວຢ່າງ: ການກຳນົດ Properties

ຫຼັກການອອກແບບທີ່ດີ

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