Ui
ແຜນທາງດ້ານຄລີນິກເທິງເຈ້ຍດ້ານ
shadcn/ui ເປັນກອງປະຊຸມສຳລັບການສ້າງລະບົບການອອກແບບສີດຽວ: ຜ້າໃບສີຂາວສະອາດ, ພື້ນຜິວສີເທົາອ່ອນໆອຸ່ນໆ, ແລະບັດລັດສະໝີຂະໜາດໃຫຍ່ທີ່ວາງໄວ້ເທິງຂອບທີ່ລະອຽດອ່ອນທີ່ສຸດ. ອິນເຕີເຟດເກືອບທັງໝົດແມ່ນບໍ່ມີສີ - ຕົວໜັງສືສີດຳ, ພື້ນຜິວສີຂາວ, ໂທນສີເທົາສຳຮອງ - ມີສີແດງດຽວທີ່ລົບກວນສະຫງວນໄວ້ສຳລັບສະຖານະຄວາມຜິດພາດ ແລະບໍ່ມີຫຍັງອີກ. ຮູບແບບຕົວອັກສອນແມ່ນອີງໃສ່ຄວາມເປັນກາງທາງເລຂາຄະນິດຂອງ Geist ດ້ວຍຄວາມສູງຂອງຕົວອັກສອນທີ່ເຄັ່ງຄັດໃນໜ້າຈໍ, ສ້າງຄວາມຮູ້ສຶກທີ່ສະຫງົບ, ຄ້າຍຄືລະຫັດທີ່ຮູ້ສຶກຄືກັບໂຄງສ້າງພື້ນຖານນັກພັດທະນາຫຼາຍກວ່າຜະລິດຕະພັນຜູ້ບໍລິໂພກ.
ຮູບພາບໜ້ອຍທີ່ສຸດ - ລະບົບປະກອບດ້ວຍເກືອບທັງໝົດຂອງອິນເຕີເຟດຜູ້ໃຊ້. ບໍ່ມີຮູບພາບຫຼັກ, ພາບປະກອບ, ຫຼື ຮູບພາບຕົກແຕ່ງ. ການສາທິດຜະລິດຕະພັນຖືກນຳສະເໜີເປັນແບບຈຳລອງອົງປະກອບ (ບັດ, ຊ່ອງປ້ອນຂໍ້ມູນ, ປຸ່ມ) ໃນຕາຂ່າຍໄຟຟ້າ, ເຊິ່ງເຮັດໜ້າທີ່ທັງເປັນເອກະສານ ແລະ ເນື້ອໃນທີ່ເບິ່ງເຫັນໄດ້. ຮູບສັນຍາລັກແມ່ນເສັ້ນເລຂາຄະນິດບາງໆ (ອາດຈະຢືມມາຈາກ Lucide) ໜາ 1.5–2px ໃນ #0a0a0a ຫຼື #737373, ໃຊ້ໜ້ອຍເປັນຕົວຊີ້ບອກທີ່ເປັນປະໂຫຍດ. ພາສາທີ່ເບິ່ງເຫັນໄດ້ແມ່ນອົງປະກອບ UI ເອງ - ໜ້າເວັບເຮັດໜ້າທີ່ເປັນຄູ່ມືແບບການດຳລົງຊີວິດ, ບ່ອນທີ່ທຸກໆອົງປະກອບທີ່ເບິ່ງເຫັນໄດ້ແມ່ນອົງປະກອບການອອກແບບທີ່ເບິ່ງເຫັນໄດ້.
ພາເລັດ
ເປັນກາງ
- Canvas
#f5f5f5— ພື້ນຫຼັງໜ້າ, ການຕື່ມພື້ນຜິວທີ່ມືດມົວ, ປຸ່ມເພີ່ມເຕີມ. - Paper
#ffffff— ໜ້າດິນບັດ, ພື້ນຫຼັງປັອບອັບ, ການຕື່ມປຸ່ມຫຼັກ - Surface Alt
#fafafa— ພື້ນຫຼັງແຖບດ້ານຂ້າງ, ຕົວເລືອກບັດທີ່ບໍ່ລົບກວນ, ສະຖານະຫວ່າງຂອງຊ່ອງປ້ອນຂໍ້ມູນ. - Ink
#0a0a0a— ຂໍ້ຄວາມຫຼັກ, ຫົວຂໍ້, ປ້າຍປຸ່ມ, ໂຄງຮ່າງໄອຄອນ. - Ink Soft
#171717— ຮູບພາບພື້ນຫຼັງປຸ່ມທີ່ມີການຕື່ມ, ຂໍ້ຄວາມເພີ່ມເຕີມໃນພື້ນຜິວສີອ່ອນ. - Mid Gray
#737373— ຂໍ້ຄວາມຫຼັກ, ຂໍ້ຄວາມຕົວຍຶດ, ປ້າຍຊື່ເສີມ, ແລະ ການຕື່ມຮູບສັນຍາລັກໃນເວລາທີ່ບໍ່ໄດ້ໃຊ້ງານ ລ້ວນແຕ່ຖືກປິດສຽງໄວ້.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 48px · 8 ຂັ້ນຕອນ
- Geist — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 500, 600 · ຂໍ້ຄວາມໃນອິນເຕີເຟດທັງໝົດ—ຂໍ້ຄວາມໃນສ່ວນຂໍ້ຄວາມທີ່ມີນ້ຳໜັກເສັ້ນ 14px/400, ຫົວຂໍ້ທີ່ມີນ້ຳໜັກເສັ້ນ 24–48px/600, ແລະປຸ່ມທີ່ມີນ້ຳໜັກເສັ້ນ 13–14px/500. ຮູບແບບຕົວອັກສອນເລຂາຄະນິດ ແລະນ້ຳໜັກເສັ້ນທີ່ເປັນເອກະພາບຂອງ Geist ສ້າງຄວາມຮູ້ສຶກທີ່ເປັນກາງສຳລັບເຄື່ອງມືນັກພັດທະນາ; ນ້ຳໜັກເສັ້ນ 600 ທີ່ມີໄລຍະຫ່າງຕົວອັກສອນ 48px ແລະໄລຍະຫ່າງຕົວອັກສອນ -0.05em ຮັບປະກັນຫົວຂໍ້ທີ່ຊັດເຈນ ແລະ ໝັ້ນໃຈ ເຊິ່ງເບິ່ງຄືວ່າຄິດຢ່າງລະອຽດແທນທີ່ຈະຖືກແກ້ໄຂ.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໜາແໜ້ນ |
| ຂັ້ນຕອນພື້ນຖານ | 8px |
| ລັດສະໝີປຸ່ມ | 18px |
| ລັດສະໝີບັດ | 24px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 48-80px |
| ຄວາມກວ້າງຂອງໜ້າ | 1280px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Ui ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Ventriloc — ການສັງເກດການດ້ານບັນນາທິການຂອງຂໍ້ມູນໃນເຈ້ຍອຸ່ນ - ຖ່ານສີສົ້ມອັນດຽວທີ່ເນັ້ນໃຫ້ເຫັນຄວາມແມ່ນຍຳຂອງສີດຽວ
- Geniestudio — ປື້ມບັນທຶກອ່ອນໆກາງເວັນ - ປະເພດທີ່ມີຂອບກວ້າງ ແລະ ມີປາກກາໜາພຽງເສັ້ນດຽວ
- xAI — ຫ້ອງທົດລອງຄຣີມອຸ່ນພ້ອມຢາເມັດສີດຳ
- Cal — ການນຳໃຊ້ສີດຽວ, ວິທີການຂອງມະນຸດ. ລະບົບທີ່ໃຫ້ຄວາມສຳຄັນກັບຄວາມຊັດເຈນ ແລະ ໜ້າທີ່ການໃຊ້ງານຜ່ານແຜ່ນສີດຳ-ຂາວທີ່ເຂັ້ມງວດ, ແຕ່ເຮັດໃຫ້ມັນອ່ອນລົງດ້ວຍຕົວອັກສອນທີ່ເປັນມິດ ແລະ ຮູບຮ່າງມົນ.
- Scale — ຫ້ອງທົດລອງຮູບພາບທີ່ມີຄຸນນະພາບສູງຄືກັບພິພິທະພັນປະສົມປະສານກັບໂຄງການດ້ານວິຊາການ
- Contractbook — ສັນຍາເຈ້ຍສີຄີມພາຍໃຕ້ທ້ອງຟ້າທີ່ເຂັ້ມຂຸ້ນ
- AutoSend — ສະຕູດິໂອຫີນທີ່ອົບອຸ່ນພ້ອມດ້ວຍໄຟສີມ່ວງດວງດຽວ — ບ່ອນທີ່ຫົວຂໍ້ຂ່າວ serif ແລະ ການຮຽກຮ້ອງໃຫ້ມີການປະຕິບັດສີຄາມສົດໃສຢູ່ຮ່ວມກັນໃນພື້ນທີ່ທີ່ງຽບສະຫງົບເກືອບເປັນສີຂາວ.
- Air — ຮູບປັ້ນ "ທ້ອງຟ້າທ່ຽງຄືນຜ່ານແກ້ວ"
- SpatialChat — ກຳມະຈອນສີມ່ວງຢູ່ເທິງເຈ້ຍ parchment ສີຂາວ
- Squarespace — ຄັງຮູບພາບສີດຽວແບບ Cinematic
- Giga — ຂອບຟ້າທ່ຽງຄືນເທິງຫີນອອບຊິເດຍນທີ່ມີນ້ຳຄ້າງ
- Supabase — ຕົວແກ້ໄຂລະຫັດໃນເວລາທ່ຽງຄືນທີ່ມີຈຸດສີຂຽວຟອສຟໍເຣສເຊັນ - ກຳມະຈອນສີດຽວເທິງທະເລຝຸ່ນຖ່ານຫີນ