ການອອກແບບໄອຄອນແອັບ

ທັງລະບົບ ແລະ ແອັບແມ່ນປະຕິບັດຕາມ ຫຼັກການອອກແບບ Suru ທີ່ເລີ່ມຕົ້ນໂດຍ Canonical ແລະ Samuel Hewitt.

ປັດຊະຍາການອອກແບບ ແລະ ຄວາມໝາຍຂອງ Suru

• Suru ໝາຍເຖິງວັດທະນະທຳຍີ່ປຸ່ນ.

• ການອອກແບບຂອງ Suru ໄດ້ຮັບແຮງບັນດານໃຈຈາກໂອຣິກາມິ (ສິລະປະການພັບເຈ້ຍ).

• ເຈ້ຍສາມາດໃຊ້ໃນຮູບແບບສອງ ແລະ ສາມມິຕິໄດ້ ເພາະມັນມີຄວາມຢືດຢຸ່ນ ແລະ ຫຼາກຫຼາຍ.

Suru ນຳເອົາໂຄງສ້າງທີ່ຊັດເຈນແຕ່ເປັນທຳມະຊາດ ມາສູ່ອິນເຕີເຟດຂອງ Ubuntu Touch. ເສັ້ນທີ່ຄົມຊັດ ແລະ ລະດັບຄວາມໂປ່ງໃສທີ່ແຕກຕ່າງກັນ ເຮັດໃຫ້ເຫັນເຖິງຂອບ ແລະ ພື້ນຜິວຂອງເຈ້ຍ.

ເຄັດລັບການອອກແບບສຳລັບໄອຄອນແອັບ

ການອອກແບບທີ່ສື່ຄວາມໝາຍ

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

ຮູບຮ່າງທີ່ໂດດເດັ່ນ

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

ລາຍລະອຽດ

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

ສີ

ໃຫ້ໃຊ້ສີທີ່ໂດດເດັ່ນ, ເຮັດໃຫ້ໄອຄອນເດັ່ນຂຶ້ນເລັກນ້ອຍ ແລະ ໃຫ້ຮູບຮ່າງມີຄວາມຄົມຊັດ (contrast) ພຽງພໍທີ່ຈະເບິ່ງເຫັນໄດ້.

ການໄລ່ສີ (Gradients)

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

ອົງປະກອບ

ໄອຄອນ Suru ແມ່ນປະກອບດ້ວຍຮູບຮ່າງເລຂາຄະນິດທີ່ງ່າຍດາຍ. ພື້ນຫຼັງມັກຈະເປັນພື້ນຜິວທີ່ມີສີ ພ້ອມກັບຮູບສັນຍາລັກ (pictogram) ເຊິ່ງກໍ່ປະກອບດ້ວຍຮູບຮ່າງແປ, “ລອຍ” ຢູ່ເໜືອມັນ.

ເອັບເຟັກຮອຍພັບ

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

ຮອຍພັບຖືກແຕ້ມໂດຍການສ້າງຮູບຫຼາຍແຈສີຂາວ ຫຼື ສີດຳ ທີ່ມີຄວາມທຶບແສງ (opacity) ຕໍ່າຫຼາຍ (ປົກກະຕິແມ່ນລະຫວ່າງ 1%~10%) ມາທັບຊ້ອນກັນ.

ຕາຕະລາງ (Grids)

ການນຳໃຊ້ໂຄງຮ່າງແບບຕາຕະລາງ ຈະຊ່ວຍຮັບປະກັນຄວາມສອດຄ່ອງໃນທຸກໄອຄອນ ແລະ ຈະບັງຄັບໃຫ້ທ່ານຕ້ອງຈອງພື້ນທີ່ ສຳລັບພື້ນຫຼັງໄອຄອນ ເພື່ອໃຫ້ມີໄລຍະຫ່າງ (padding) ທີ່ສະເໝີກັນອ້ອມຮອບຮູບສັນຍາລັກ.

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

ຕາຕະລາງໜ່ວຍ

ການອອກແບບໂດຍຄຳນຶງເຖິງຕາຕະລາງພິກເຊວໂດຍລວມ ແມ່ນສຳຄັນຫຼາຍເພື່ອໃຫ້ໄດ້ໄອຄອນທີ່ຄົມຊັດ ແລະ ສະອາດ. ເນື່ອງຈາກໄອຄອນເດັສທັອບສ່ວນໃຫຍ່ມີຂະໜາດທີ່ເປັນຕົວຄູນຂອງສີ່ (16x16, 24x24, 32x32, 48x48, 256x256) ການນຳໃຊ້ຕາຕະລາງພິກເຊວທີ່ມີເສັ້ນທຸກໆ 4 ພິກເຊວ ແລະ ແຕ້ມຕາມຕາຕະລາງນັ້ນແມ່ນວິທີການທີ່ດີທີ່ສຸດ.

ເງົາ

ເລື້ອຍໆທີ່ໄອຄອນ Suru ຈະຖືກແຕ້ມດ້ວຍເງົາສອງຊຸດທີ່ແຕກຕ່າງກັນ, ຊຸດໜຶ່ງສຳລັບຮູບສັນຍາລັກເພື່ອສ້າງເອັບເຟັກເງົາຕົກກະທົບ, ແລະ ຊຸດທີສອງຢູ່ລຸ່ມຮູບຮ່າງໄອຄອນໂດຍລວມ.

ເອັບເຟັກເງົາຕົກກະທົບໃສ່ຮູບສັນຍາລັກກາງ ແມ່ນການລວມກັນຂອງສອງເງົາທີ່ມີຮູບຮ່າງຄືກັນກັບຮູບສັນຍາລັກ:

• ຮູບຮ່າງທີ່ເປັນ rgba(0,0,0,0.1) ທີ່ມີໄລຍະຫ່າງແນວຕັ້ງ 2 ພິກເຊວ ແລະ ຄວາມມົວ 1%

• ຮູບຮ່າງທີ່ເປັນ rgba(0,0,0,0.4) ທີ່ມີໄລຍະຫ່າງແນວຕັ້ງ 4 ພິກເຊວ ແລະ ຄວາມມົວ 10%

ຖ້າມີເອັບເຟັກຮອຍພັບ, ເງົາທີສອງຈະຖືກແຕ້ມໂດຍໃຊ້ການໄລ່ສີແບບເສັ້ນຊື່ (linear gradient) ທີ່ມີສາມຈຸດຢຸດ ເຊິ່ງຕຳແໜ່ງຂອງມັນຈະກົງກັບຕຳແໜ່ງຂອງຮອຍພັບພື້ນຫຼັງ.

ໄຮໄລ້ (Highlights)

ຮູບສັນຍາລັກຈະມີໄຮໄລ້ສີຂາວບາງໆ (1 ພິກເຊວ) ຕາມຂອບດ້ານເທິງຂອງພວກມັນ. ເພື່ອເຮັດສິ່ງນີ້, ໃຫ້ສ້າງສຳເນົາສີຂາວທຶບ 2 ອັນ ຂອງຮູບຮ່າງສັນຍາລັກຫຼັກ ແລະ ຍ້າຍສຳເນົາໜຶ່ງລົງລຸ່ມ 1 ພິກເຊວ ແລ້ວທຳການ 'difference' ທັງສອງ ສິ່ງທີ່ເຫຼືອແມ່ນ 'ຂອບ' ທີ່ທ່ານສາມາດຈັດລຽງໃສ່ດ້ານເທິງຂອງຮູບສັນຍາລັກໄດ້. ໃຫ້ເຮັດຊ້ຳຕາມຄວາມຕ້ອງການ.

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

ຕາຕະລາງ ແລະ ຊັບພະຍາກອນອື່ນໆ ສາມາດພົບໄດ້ໃນ ບ່ອນເກັບຊອບແວ GitLab ນີ້.