
Shop
ກຸ່ມດາວການຄ້າທີ່ລອຍຢູ່ເທິງຫິນອ່ອນສີຂາວ
ຮ້ານຄ້າອອນໄລນ໌ດຳເນີນການໃນຮູບແບບ "ຜ້າໃບສີຂາວ", ໂດຍຜະລິດຕະພັນສະແດງເປັນບັດຮູບພາບຂະໜາດໃຫຍ່, ໂຄ້ງໜາແທນທີ່ຈະເປັນຕາຂ່າຍຂອງຮູບຫຍໍ້. ອິນເຕີເຟດທັງໝົດແມ່ນລຽບງ່າຍຢ່າງບໍ່ໜ້າເຊື່ອ: ມີລັດສະໝີ 20-28px ຕະຫຼອດ, ປຸ່ມຄວບຄຸມຮູບຊົງເມັດ, ແລະຕົວເຄື່ອງ GT Standard ຂະໜາດກະທັດຮັດ 16px ພ້ອມດ້ວຍການຕິດຕາມລົບທີ່ແໜ້ນໜາເຊິ່ງເຮັດໃຫ້ຂໍ້ຄວາມຄົມຊັດແລະໜາ. ການເນັ້ນສີທີ່ໜາພຽງຢ່າງດຽວຂອງລະບົບແມ່ນສີມ່ວງສົດໃສ (#5433eb), ເຊິ່ງປາກົດຢູ່ໃນໂລໂກ້, ຊ່ອງຜົນການຄົ້ນຫາວົງມົນ, ແລະເປັນເງົາທີ່ມີສີອ່ອນໆໃນປຸ່ມດຽວກັນ. ສ່ວນທີ່ເຫຼືອຂອງແຜ່ນສີແມ່ນສີກາງທີ່ອົບອຸ່ນ: ພື້ນຜິວສີຂາວ, ຜ້າໃບສີເທົາເຢັນອ່ອນໆ, ຂອບທີ່ລະອຽດອ່ອນ, ແລະຕົວໜັງສືເກືອບສີດຳ. ຄວາມໜາແໜ້ນຍັງຄົງກະທັດຮັດດ້ວຍຮ່ອງລະບາຍ 12px, ແຕ່ລາຍ hero ແລະ ໝວດໝູ່ມີສຽງດັງຍ້ອນຈັງຫວະແນວຕັ້ງທີ່ກວ້າງໃຫຍ່ຂອງ 64-80px, ເຮັດໃຫ້ປະສົບການການຄ້າຮູ້ສຶກຄືກັບການຊອກຫາຫຼາຍກວ່າລາຍການສິນຄ້າ.
ຄວາມກວ້າງສູງສຸດແມ່ນ 1200px, ຢູ່ໃຈກາງຂອງແຜ່ນ #f2f4f5 ໂປ່ງໃສ, ມີແຖບດ້ານຂ້າງກວ້າງ 64px ຢູ່ເບື້ອງຊ້າຍທີ່ມີໄອຄອນການນຳທາງເທົ່ານັ້ນ. ອົງປະກອບຫຼັກແມ່ນແຖບຄວາມກວ້າງເຕັມ, ມີບັດຜະລິດຕະພັນຕັ້ງຢູ່ຂ້າງເທິງໂລໂກ້ "ຮ້ານຄ້າ" ສີມ່ວງທີ່ຢູ່ໃຈກາງ, ແລະແຖບຄົ້ນຫາຮູບຊົງເມັດຢາຢູ່ທາງລຸ່ມມັນໂດຍກົງ. ເມັດຢາໝວດໝູ່ຖືກຈັດລຽງຢູ່ໃນແຖວດຽວທີ່ຢູ່ໃຈກາງຢູ່ລຸ່ມແຖບຄົ້ນຫາ. ພາກສ່ວນເນື້ອຫາ (ແມ່ຍິງ, ຜູ້ຊາຍ, ຄວາມງາມ, ເຮືອນ, ເດັກນ້ອຍ ແລະ ເດັກນ້ອຍ) ຕິດຕາມເປັນແຖບທີ່ກຳນົດໄວ້, ແຕ່ລະແຖບປະກອບດ້ວຍຕາຂ່າຍ 4 ຖັນທີ່ມີຮູບພາບຜະລິດຕະພັນ ຫຼື ອົງປະກອບ "ອົງປະກອບຫຼັກ ແລະ ຕາຂ່າຍ" 2 ຖັນ. ຈັງຫວະແນວຕັ້ງແມ່ນກວ້າງ: 64–80px ລະຫວ່າງພາກສ່ວນຫຼັກ. ສ່ວນລຸ່ມສຸດແມ່ນແຖບສີດຳຢູ່ທາງລຸ່ມຂອງໜ້າທີ່ມີກຸ່ມລິ້ງຮູບຊົງຖັນ. ລູກສອນແບບໝຸນຢູ່ເບື້ອງຂວາຂອງແຜງຜະລິດຕະພັນແນວນອນຊີ້ບອກເນື້ອຫາທີ່ສາມາດເລື່ອນໄດ້ໂດຍບໍ່ມີຈຸດແບ່ງໜ້າ.
ການຖ່າຍຮູບແມ່ນອົງປະກອບທາງສາຍຕາທີ່ໂດດເດັ່ນ: ຮູບພາບຜະລິດຕະພັນເຕັມຈໍທີ່ມີພື້ນຫຼັງສີຂາວ, ອັດຕາສ່ວນຕັດ 1:1, ແລະຮູບພາບວິຖີຊີວິດທີ່ມີໂທນສີເອທິໂອເປຍທີ່ອົບອຸ່ນ (ສີເບຈ, ສີດິນເຜົາ, ສີເຊດ, ສີງາຊ້າງ). ຮູບພາບຜະລິດຕະພັນມີສີຂອງຕົນເອງ - ອິນເຕີເຟດຜູ້ໃຊ້ຍັງຄົງບໍ່ມີສີ, ຊ່ວຍໃຫ້ສີຂອງຜະລິດຕະພັນສາມາດໃຫ້ຄວາມຫຼາກຫຼາຍທາງສາຍຕາ. ໂລໂກ້ຍີ່ຫໍ້ປະກົດເປັນຂໍ້ຄວາມຊ້ອນກັນໃນຮູບພາບຫຼັກສີເຂັ້ມ ຫຼື ສີອ່ອນ, ແທນທີ່ຈະເປັນໄອຄອນສ່ວນບຸກຄົນ. ໃນອົງປະກອບຫຼັກ, ບັດຜະລິດຕະພັນຖືກວາງໄວ້ເປັນກຸ່ມຮູບດາວທີ່ລອຍຢູ່, ຊ້ອນກັນເລັກນ້ອຍຢູ່ເທິງເຄື່ອງໝາຍຄຳສັບ. ໄອຄອນແມ່ນແບບມິນິມາລິສ ແລະ ສີດຽວ (ເສັ້ນສີດຳ), ຍົກເວັ້ນໄອຄອນໝວດໝູ່, ເຊິ່ງໃຊ້ສີຍີ່ຫໍ້ດຽວ. ບໍ່ມີຮູບແຕ້ມ, ເອັບເຟັກ 3D, ຫຼື ການເລື່ອນສີໃນຮູບພາບຜະລິດຕະພັນ.
ພາເລັດ
ຍີ່ຫໍ້
- Shop Violet
#5433eb— ປຸ່ມສົ່ງ, ເຄື່ອງໝາຍຂໍ້ຄວາມຈຸດໆ, ແລະ ໂລໂກ້ຍີ່ຫໍ້ ແມ່ນສິ່ງດຽວທີ່ເນັ້ນໃຫ້ເຫັນເຖິງການກະທຳ ແລະ ຄວາມເປັນສ່ວນຕົວໃນພື້ນຫຼັງສີຂາວ. - Violet Wash
#c0b5f3— ຮາໂລໂປ່ງໃສຢູ່ທາງຫຼັງປຸ່ມສົ່ງສີມ່ວງທີ່ຮັກສາແສງຂອງມັນໄວ້ໂດຍບໍ່ປ່ຽນສີ.
ເປັນກາງ
- Canvas Mist
#f2f4f5— ພື້ນຫຼັງໜ້າ ແລະ ການຮັກສາພື້ນຜິວເພີ່ມເຕີມຢູ່ເບື້ອງຫຼັງບັດທີ່ຍົກຂຶ້ນ. - Pure White
#ffffff— ພື້ນຜິວຫຼັກສຳລັບບັດ, ຊ່ອງປ້ອນຂໍ້ມູນ, ປ້າຍລອຍ ແລະ ປຸ່ມຮູບຊົງຢາເມັດ. - Ink Black
#000000— ຂໍ້ຄວາມຫຼັກ, ຫົວຂໍ້, ໄອຄອນ, ສັນຍາລັກການນຳທາງ ແລະ ບັດຜະລິດຕະພັນໃນໂໝດມືດ. - Faint Border
#ebebeb— ເສັ້ນແບ່ງບາງໆໃນບັດ, ໂຄງຮ່າງຊ່ອງປ້ອນຂໍ້ມູນ, ແລະ ກອບປຸ່ມຮູບຊົງເມັດ. - Muted Gray
#787574— ຂໍ້ຄວາມສຳຮອງ, ປ້າຍກຳກັບນຳທາງ, ໂຄງຮ່າງໄອຄອນເມື່ອບໍ່ໄດ້ໃຊ້ງານ - Cool Stone
#cccccc— ຕົວຍຶດຕຳແໜ່ງ, ສະຖານະປິດໃຊ້ງານ ແລະ ພື້ນຫຼັງໄອຄອນທີ່ບໍ່ເຄື່ອນໄຫວ
ຮູບແບບຕົວອັກສອນ
ຈາກ 11 ຫາ 16px · 4 ຂັ້ນຕອນ
- GT Standard — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400 · ຟອນຕ໌ຫຼັກໃນທຸກຂະໜາດ—ສຳລັບທັງຂໍ້ຄວາມໃນສ່ວນຂໍ້ຄວາມ ແລະ ຫົວຂໍ້. GTStandard-MRegular ທີ່ 16px/-0.031em ແມ່ນຟອນຕ໌ຫຼັກສຳລັບຂໍ້ຄວາມໃນສ່ວນຂໍ້ຄວາມ, ປຸ່ມ ແລະ ປ້າຍຊື່. GTStandard-Memibold ທີ່ 20px/-0.05em ຖືກໃຊ້ສຳລັບຫົວຂໍ້ຂະໜາດໃຫຍ່ຫຼາຍອັນ; GTStandard-MMedium ທີ່ 11–12px ຖືກໃຊ້ສຳລັບຄຳບັນຍາຍຂະໜາດນ້ອຍ. ຟອນຕ໌ແຕ່ລະຕົວແປຈະຖືກສະແດງດ້ວຍນ້ຳໜັກທາງແສງ 400—ລຳດັບຊັ້ນຂອງຟອນຕ໌ແມ່ນບັນລຸໄດ້ຜ່ານການເລື່ອນສີທີ່ລະອຽດອ່ອນ ແລະ ໄລຍະຫ່າງຕົວອັກສອນລົບທີ່ໜາແໜ້ນ, ແທນທີ່ຈະເປັນຄວາມແຕກຕ່າງທີ່ໜາແໜ້ນ. ນີ້ແມ່ນແບບລາຍເຊັນ: Shop ບໍ່ໄດ້ຮ້ອງດ້ວຍຟອນຕ໌ທີ່ໜາແໜ້ນ, ແຕ່ແທນທີ່ຈະສ້າງຮູບຮ່າງຂອງຂໍ້ຄວາມຜ່ານໄລຍະຫ່າງຕົວອັກສອນ.
- Shopify Sans — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 700 · ສະຫງວນໄວ້ສຳລັບຂໍ້ຄວາມລະດັບລະບົບ ເຊັ່ນ: ປ້າຍໂຄສະນາໂຫຼດແອັບ ແລະ ຂໍ້ຄວາມຍິນຍອມໃຫ້ໃຊ້ຄຸກກີ.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໂດຍສະເລ່ຍ |
| ຂັ້ນຕອນພື້ນຖານ | 12px |
| ລັດສະໝີປຸ່ມ | 9999px |
| ລັດສະໝີບັດ | 28px |
| ເງົາ | ເງົາອ່ອນໆ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 64px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Shop ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Cursor — ໂຮງງານເຮັດເຈ້ຍໜັງທີ່ອົບອຸ່ນ, ມີໄຟສ່ອງສະຫວ່າງຈາກຖ່ານທີ່ກຳລັງລຸກໄໝ້
- Slush — ຈັກກະວານທີ່ມີສະຕິກເກີ້ເປົ່າລົມໃສ່ເຈ້ຍສີ pastel
- MindMarket — ປຶ້ມເທບນິຍາຍທີ່ອົບອຸ່ນໃສ່ເຈ້ຍສີຄີມ - ຜ້າໃບບັນນາທິການທີ່ເປັນມິດບ່ອນທີ່ຫົວຂໍ້ຂ່າວຂະໜາດໃຫຍ່ ແລະ ຕົວລະຄອນເຈ້ຍຕັດອອກຢູ່ຮ່ວມກັນເທິງໜ້າດິນທີ່ຊຸ່ມດ້ວຍແສງແດດ ແລະ ອ່ອນນຸ້ມຄືກັບສະຕິກເກີ.
- Airbnb — ຝາຜະໜັງຫ້ອງວາງສະແດງສີຂາວທີ່ງຽບສະຫງົບພ້ອມດ້ວຍທີ່ໝາຍສີແດງປະກາລັງອັນດຽວ
- Superr — ປື້ມບັນທຶກໂຮງຮຽນທີ່ອົບອຸ່ນໃນແສງແດດອ່ອນໆຕອນບ່າຍ. ໜ້າເຈ້ຍສີຄຣີມ, ປາກກາສີສົ້ມທີ່ບໍ່ມີຝາປິດ, ແລະ ສະຕິກເກີຊື່ທີ່ວາງຊ້ອນກັນລໍຖ້າໃຫ້ລອກອອກ.
- Apple (España) — ຫ້ອງວາງສະແດງຂອງພິພິທະພັນ, ໃນຕອນກາງເວັນອ່ອນໆ, ເປັນພື້ນທີ່ສີຂາວດຽວທີ່ໜ້າສົນໃຈ ແລະ ບໍ່ມີນ້ຳໜັກ, ໂດຍແຕ່ລະງານວາງສະແດງໄດ້ຮັບແສງສະຫວ່າງຈາກໄຟສະປອດໄລ້ຕໍ່ກັບຝາທີ່ມີສີອ່ອນໆ.
- Lamborghini — ສີດຳຢູ່ຫ້ອງວາງສະແດງ, ພາຍໃຕ້ໄຟສະປອດໄລ້ - ລົດສີເຫຼືອງຄັນໜຶ່ງ
- Amplemarket — ບ່ອນເຮັດວຽກທີ່ມີແສງແດດສ່ອງລົງໄປທົ່ວດ້ວຍເຈ້ຍສີ
- Getharvest — ໂຕະເຮັດວຽກໃນຊົ່ວໂມງທອງຄຳ - ຜ້າໃບສີຄີມອຸ່ນໆ, ໂປສກາດສີຂາວແຂວນຢູ່ເທິງຜ້າໃບ, ແລະແປວໄຟສີສົ້ມສົດໃສອັນດຽວ
- Agence Foudre — ໜ້າປົກຂອງວາລະສານມີສີບົວອ່ອນໆທີ່ເຕືອນໃຫ້ນຶກເຖິງລິບສະຕິກ.
- Drive Capital — ໂປສເຕີການເດີນທາງທາງຖະໜົນແບບ Retro ເທິງເຈ້ຍອຸ່ນ
- Apple (España) — ຕູ້ວາງສະແດງຮູບພາບສີຂາວ