UI ທີ່ເບິ່ງເປັນມືອາຊີບ: ຫ້າກົດ ບໍ່ຕ້ອງມີພອນສະຫວັນ

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

1. ໄລຍະຫ່າງໃຫ້ຢູ່ໃນມາດຕາສ່ວນ ຢ່າໃຊ້ຄວາມຮູ້ສຶກ

ເລືອກມາດຕາສ່ວນ — 4, 8, 12, 16, 24, 32, 48 — ແລ້ວໃຊ້ແຕ່ຕົວເລກເຫຼົ່ານີ້ເທົ່ານັ້ນ. ຄ່າ padding 13px ທີ່ທ່ານຄ່ອຍໆຂະຫຍັບໃສ່ ຄືເຫດຜົນທີ່ layout ຮູ້ສຶກຜິດເລັກນ້ອຍ ໂດຍທີ່ບອກບໍ່ຖືກວ່າຜິດຫຍັງ. Tailwind ໃຫ້ມາດຕາສ່ວນນີ້ຟຣີ; ວິໄນຢູ່ທີ່ການບໍ່ອອກນອກມັນ.

2. ຂະໜາດຕົວອັກສອນສອງແບບ ພຽງພໍສຳລັບວຽກສ່ວນໃຫຍ່

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

<!-- Hierarchy from weight and space, not from ever-larger text -->
<h2 class="text-xl font-black uppercase tracking-tight">Projects</h2>
<p class="mt-3 text-slate-500 leading-relaxed">
  Nine systems, built for real users on slow connections.
</p>

3. ສີເນັ້ນສີດຽວ ແລະ ໃຊ້ຢ່າງມີຄວາມໝາຍ

ໃຊ້ສີເທົາສຳລັບໂຄງສ້າງ ແລະ ໃຊ້ໜຶ່ງສີສຳລັບສິ່ງທີ່ຢາກໃຫ້ຜູ້ໃຊ້ກົດ. ທັນທີທີ່ມີສີເນັ້ນທີສອງ ທັງສອງສີກໍໝົດຄວາມໝາຍ. ຖ້າເນັ້ນທຸກຢ່າງ ກໍເທົ່າກັບບໍ່ໄດ້ເນັ້ນຫຍັງເລີຍ.

4. ການຈັດແນວ ສຳຄັນກວ່າການຕົກແຕ່ງ

ບໍ່ມີຫຍັງເຮັດໃຫ້ໜ້າຈໍເບິ່ງຄືມືສະໝັກຫຼິ້ນໄດ້ໄວເທົ່າ ຂອບທີ່ 'ເກືອບ' ຊື່ກັນ. ກ່ອນຈະໃສ່ gradient ຫຼື ເງົາ ໃຫ້ຈັດທຸກຢ່າງລົງໃນຕາຕະລາງ ແລ້ວກວດຂອບຊ້າຍ. ດີໄຊນ໌ທີ່ 'ຂີ້ຮ້າຍ' ສ່ວນຫຼາຍ ບໍ່ໄດ້ຂີ້ຮ້າຍ — ມັນພຽງແຕ່ວາງບໍ່ຊື່ກັນ.

5. ອອກແບບສະຖານະຫວ່າງເປົ່າ, ກຳລັງໂຫຼດ ແລະ ຜິດພາດ

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