Apple
ຫ້ອງສີຂາວທີ່ມີສະວິດສີຟ້າອັນດຽວ
ການອອກແບບຂອງ Apple ແມ່ນແບບຢ່າງຂອງຄວາມຍັບຍັ້ງ: ຜ້າໃບເກືອບຂາວ, ພື້ນທີ່ສີຂາວກວ້າງຂວາງ, ແລະ ສຳນຽງສີຟ້າສົດໃສອັນດຽວທີ່ເຮັດໃຫ້ທຸກໆການກະທຳຮູ້ສຶກມີເຈດຕະນາ. ຈຸດສຸມຫຼັກແມ່ນຮູບແບບຕົວອັກສອນ - SF Pro, ມີໄລຍະຫ່າງຕົວອັກສອນລົບທີ່ຫຼຸດລົງຕາມຂະໜາດທີ່ເພີ່ມຂຶ້ນ, ເຮັດໃຫ້ຫົວຂໍ້ຂ່າວມີຄວາມຊັດເຈນທາງດ້ານສະຖາປັດຕະຍະກຳໂດຍບໍ່ໜັກເກີນໄປ. ຜະລິດຕະພັນແມ່ນການອອກແບບ: ຮູບພາບຜະລິດຕະພັນຂະໜາດໃຫຍ່ ແລະ ຮູບພາບວິຖີຊີວິດທີ່ໂດດເດັ່ນ, ໃນຂະນະທີ່ອົງປະກອບໂຄຣມຫຼຸດລົງເປັນກອບບາງໆ, ການນຳທາງທີ່ໂປ່ງໃສ, ແລະ ເສັ້ນທີ່ລະອຽດອ່ອນ. ພາກສ່ວນຕ່າງໆສະຫຼັບກັບພື້ນຫຼັງສີເທົາອ່ອນດ້ວຍບລັອກສີເຕັມສຳລັບເອກະສານໂຄສະນາ, ສ້າງຈັງຫວະຜ່ານການປ່ຽນແປງຂອງຂະໜາດແທນທີ່ຈະເປັນອົງປະກອບຕົກແຕ່ງ.
ຮູບແບບໜ້າເວັບແມ່ນໜ້າທີ່ມີຄວາມກວ້າງເຕັມທີ່ບໍ່ມີຄວາມກວ້າງສູງສຸດຂອງຕູ້ຄອນເທນເນີທີ່ກຳນົດໄວ້ - ພາກສ່ວນຕ່າງໆຂະຫຍາຍຈາກຂອບຫາຂອບ, ໂດຍມີບລັອກຂໍ້ຄວາມຢູ່ໃຈກາງປະມານ 980px. ການນຳທາງແມ່ນແຖບທົ່ວໂລກທີ່ຄົງທີ່ດຽວທີ່ມີໂຟນເດີຍ່ອຍເພີ່ມເຕີມສຳລັບແຕ່ລະຜະລິດຕະພັນທີ່ປາກົດຢູ່ໃນການເລື່ອນ. ຮູບແບບຫຼັກແມ່ນຢູ່ໃຈກາງສະເໝີ: ຊື່ຜະລິດຕະພັນຂະໜາດໃຫຍ່, ຄຳຂວັນແຖວດຽວ, ປຸ່ມເມັດສອງອັນ, ຈາກນັ້ນຮູບພາບຜະລິດຕະພັນທີ່ເຕີມເຕັມວິວພອດທີ່ເຫຼືອ. ພາກສ່ວນຕ່າງໆແມ່ນວາງຊ້ອນກັນໃນແນວຕັ້ງດ້ວຍຈັງຫວະແນວຕັ້ງທີ່ກວ້າງຂວາງ (64px+ ລະຫວ່າງພາກສ່ວນຕ່າງໆ), ສະຫຼັບ #f5f5f7 ແລະພື້ນຫຼັງສີ. ໜ້າລຸ່ມແມ່ນແຖວແນວນອນດຽວຂອງບັດບໍລິການທີ່ມີຄວາມກວ້າງເຕັມ (Apple TV+, Fitness+, Music, Arcade), ແຕ່ລະບລັອກຮູບພາບທີ່ມີຂໍ້ຄວາມຊ້ອນກັນ ແລະ ປຸ່ມເມັດ. ບໍ່ມີແຖບຂ້າງ, ບໍ່ມີຮູບແບບເນື້ອຫາຫຼາຍຖັນ, ບໍ່ມີອົງປະກອບທີ່ບໍ່ສົມມາດ - ທຸກຢ່າງແມ່ນຢູ່ໃຈກາງ, ວາງຊ້ອນກັນ, ແລະ ສົມມາດ.
ການຖ່າຍຮູບແມ່ນພາສາທາງສາຍຕາທີ່ໂດດເດັ່ນ. ຮູບພາບຜະລິດຕະພັນຖືກຖ່າຍດ້ວຍພື້ນຫຼັງສີຂາວບໍລິສຸດ ຫຼື ສີເທົາອ່ອນໆ, ໂດຍບໍ່ມີບໍລິບົດໃດໆ - ອຸປະກອນແມ່ນດາວ, ໂດດດ່ຽວ ແລະ ມີແສງສະຫວ່າງ. ຮູບພາບແບບຊີວິດການເປັນຢູ່ຖືກສະແດງຢູ່ໃນປ້າຍໂຄສະນາທີ່ມີຄວາມກວ້າງເຕັມ, ມັກຈະມີວັດຖຸທີ່ຖືກຕັດຢ່າງແໜ້ນໜາ. ການເລື່ອນສີ (ສີຟ້າ pastel, ສີບົວ, ສີຂຽວ) ເປັນພື້ນຫຼັງສຳລັບສ່ວນຜະລິດຕະພັນ, ບໍ່ແມ່ນການຕົກແຕ່ງ. ຮູບສັນຍາລັກແມ່ນ minimalist ແລະ ອີງໃສ່ເສັ້ນ, ໜາ 1-2px, ໃນລະດັບສີເທົາດຽວກັນກັບຕົວໜັງສື. ບໍ່ມີຮູບແຕ້ມ, ບໍ່ມີຮູບພາບທີ່ບໍ່ມີຕົວຕົນ, ບໍ່ມີຮູບແບບ 3D, ຍົກເວັ້ນຮູບພາບຜະລິດຕະພັນເອງ.
ພາເລັດ
ຍີ່ຫໍ້
- Apple Blue
#0071e3— ປຸ່ມການກະທຳທີ່ເຕັມໄປ, ສະຖານະທີ່ເລືອກ - ສີ chromatic ແບບໂຕ້ຕອບດຽວທີ່ໃຊ້ຢ່າງລະມັດລະວັງເພື່ອເຮັດໃຫ້ທຸກໆຮູບລັກສະນະມີຄວາມໝາຍ. - Link Blue
#0066cc— ຂອບການກະທຳທີ່ເນັ້ນໃຫ້ເຫັນ, ລິ້ງທີ່ຝັງຢູ່ - ສີທີ່ອີ່ມຕົວຫຼາຍກວ່າສີຟ້າຂອງ Apple ຖືກນໍາໃຊ້ບ່ອນທີ່ແທັບເລັດທີ່ເຕັມໄປຈະມີຄວາມໂດດເດັ່ນເກີນໄປ. - Signal Blue
#2997ff— ກອບຕົກແຕ່ງ, ໂຄງຮ່າງຮູບພາບ, ຂອບຮູບສັນຍາລັກ - ສີຟ້າອ່ອນທີ່ສຸດໃນລະບົບ, ໃຊ້ສຳລັບບັນຍາກາດຫຼາຍກວ່າການໂຕ້ຕອບຂອງຜູ້ໃຊ້.
ເປັນກາງ
- Carbon
#1d1d1f— ຂໍ້ຄວາມຫຼັກ, ຂອບຫົວຂໍ້, ເສັ້ນນຳທາງ, ຂອບບັດ - ສີໝຶກສ່ວນໃຫຍ່ເກືອບຈະເປັນສີດຳພ້ອມດ້ວຍກິ່ນອຸ່ນເລັກນ້ອຍ. - Frost
#f5f5f7— ຜ້າໃບໜ້າ, ພື້ນຫຼັງຂໍ້ຄວາມຫຼັກ, ແລະ ໜ້າດິນຂອງ footer ແມ່ນສີເທົາອ່ອນລາຍເຊັນຂອງ Apple, ເຊິ່ງເຢັນກວ່າສີຂາວບໍລິສຸດເລັກນ້ອຍ. - Ice
#f4f8fb— ການຕື່ມພື້ນຜິວທີ່ສະແດງອອກ, ສີທີ່ອ່ອນໂຍນ, ຂໍ້ຄວາມປຸ່ມເທິງພື້ນຫຼັງສີເຂັ້ມ - ສີຟ້າອ່ອນໆທີ່ເຮັດໃຫ້ພາກສ່ວນນັ້ນມີຊີວິດຊີວາໂດຍບໍ່ເຮັດໃຫ້ມັນໂດດເດັ່ນ. - Smoke
#333333— ຂໍ້ຄວາມສຳຮອງ, ການຕື່ມສີໃສ່ການນຳທາງ, ຂອບປຸ່ມ - ສີທີ່ເປັນກາງທີ່ມີຄວາມຫຼາກຫຼາຍສຳລັບຂອບ ແລະ ໄອຄອນທີ່ຕ້ອງການຄວາມເຂັ້ມຂຸ້ນຫຼາຍກວ່າສີເທົາປານກາງ. - Graphite
#474747— ຂໍ້ຄວາມນຳທາງ, ຂອບການນຳທາງ, ຂອບລິ້ງ - ຢູ່ໃນຕຳແໜ່ງກາງລະຫວ່າງຄາບອນ ແລະ ຄວັນໃນລຳດັບຊັ້ນຂອງອົງປະກອບ. - Ash
#707070— ຂໍ້ຄວາມສ່ວນລຸ່ມ, ຂອບລາຍຊື່, ຂອບການນຳທາງ, ຂໍ້ຄວາມສ່ວນຕົວທີ່ຖືກປິດສຽງ - ສີເທົາປານກາງສຳລັບເນື້ອຫາທີ່ຕ້ອງມີຢູ່ແຕ່ບໍ່ໂດດເດັ່ນ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 56px · 8 ຂັ້ນຕອນ
- SF Pro Display — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 600, 700 · ຫົວຂໍ້ຂ່າວ ແລະ ຂໍ້ຄວາມຂະໜາດໃຫຍ່—ຂະໜາດ 40px+ ໃຊ້ຮູບແບບການສະແດງຜົນສຳລັບຮູຮັບແສງທີ່ແຄບກວ່າ ແລະ ການຕິດຕາມທາງລົບທີ່ເຂັ້ມແຂງກວ່າ; 700 ແມ່ນສະຫງວນໄວ້ສຳລັບຮູບແບບການໂຄສະນາ, ແລະ 400 ແມ່ນສຳລັບຊື່ຜະລິດຕະພັນໃນເນື້ອຫາບັນນາທິການ.
- SF Pro Text — ການທົດແທນ: Inter · ໂຄງຮ່າງ 300, 400, 600 · ຂໍ້ຄວາມໃນໜ້າ, ການນຳທາງ, ປຸ່ມ, ຫົວຂໍ້ຍ່ອຍ — ຟອນທີ່ໃຊ້ງານໄດ້; 400 ສຳລັບຂໍ້ຄວາມໃນໜ້າ, 300 ສຳລັບຫົວຂໍ້ຍ່ອຍ ແລະ ປ້າຍຊື່ທີ່ມີຄຸນສົມບັດ, 600 ສຳລັບອົງປະກອບການນຳທາງ ແລະ ຂໍ້ຄວາມໃນປຸ່ມ; ໄລຍະຫ່າງລະຫວ່າງຕົວອັກສອນລົບຫຼຸດລົງຕາມສັດສ່ວນກັບຂະໜາດ (ຈາກ -0.022em ຫາ 12px ຫາ -0.01em ຫາ 44px).
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໂດຍສະເລ່ຍ |
| ຂັ້ນຕອນພື້ນຖານ | 12px |
| ລັດສະໝີປຸ່ມ | 980px |
| ລັດສະໝີບັດ | 8px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 64px |
| ຄວາມກວ້າງຂອງໜ້າ | 1440px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Apple ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Studio — ກຳແພງຫ້ອງວາງສະແດງທີ່ເຄື່ອນໄຫວ. ແຕ່ລະໜ້າຈໍສະແດງເຖິງພື້ນຜິວວາງສະແດງສີເທົາທີ່ງຽບສະຫງົບບ່ອນທີ່ວັດສະດຸຕົວອັກສອນ ແລະ ຜົນງານສ້າງສັນທີ່ຊ້ອນກັນແຂ່ງຂັນກັນເພື່ອດຶງດູດຄວາມສົນໃຈ.
- Mollie — ເຄົາເຕີ້ຜ້າແຄສເມຍ, ບັນຊີສີເຂັ້ມ. ໃຫ້ມີພື້ນທີ່ສີຂາວພຽງພໍສຳລັບການອອກແບບບັນນາທິການອ້ອມຮອບຕົວໜັງສືສີດຳ, ຈາກນັ້ນເສີມຈຸດທີ່ກ່ຽວຂ້ອງກັບຜະລິດຕະພັນດ້ວຍຄຣີມອຸ່ນ, ກາເຟສີນ້ຳຕານເອສເປຣສໂຊ, ແລະຮູບພາບທີ່ສຳຜັດໄດ້ຂອງວິທີການຈ່າຍເງິນຕົວຈິງ.
- Basis Theory — ເຄື່ອງຮັບເງິນໃນສະຕູດິໂອອອກແບບ. ເຈ້ຍເຕັກນິກສີຂາວ, ຊັ້ນທຸລະກຳທີ່ຊ້ອນກັນແບບໂປ່ງໃສ, ແລະ ອົງປະກອບຄວບຄຸມສີຟ້າອ່ອນອັນດຽວກຳນົດທິດທາງທີ່ເບິ່ງເຫັນໄດ້.
- CleanShot X — ສະຕູດິໂອທີ່ມີໜ້າຈໍຄອມພິວເຕີທີ່ມີໄຟສີຟ້າ. ສ້າງພື້ນທີ່ສີຂາວທີ່ສະຫງົບອ້ອມຮອບຕົວໜັງສືສີດຳທີ່ກະທັດຮັດ, ຈາກນັ້ນໃຫ້ຕົວຄວບຄຸມສີຟ້າທີ່ອຸດົມສົມບູນ ແລະ ຮູບພາບຜະລິດຕະພັນ Mac ທີ່ມີຊັ້ນຕ່າງໆເປັນຈຸດໃຈກາງ.
- Modern Treasury — ບັນຊີບັນຊີການຄັງເງິນໃນເຈ້ຍກຣາຟ. ສ້າງໜ້າເວັບທີ່ຄ້າຍຄືກັບແຜ່ນປະຕິບັດງານສີຂາວທີ່ງຽບສະຫງົບ, ບ່ອນທີ່ກະແສເງິນສົດຖືກສະແດງດ້ວຍເສັ້ນບາງໆ, ໂນດທີ່ມີປ້າຍຊື່, ແລະການຄວບຄຸມທີ່ຊັດເຈນ ແລະ ເຊື່ອງໄວ້.
- Basha-Franklin — ຕາຂ່າຍຫ້ອງວາງສະແດງຢູ່ໃຕ້ທ່ອນໄມ້ສີຂາວ. ໃຊ້ໂທນສີ #f4ede6 ທີ່ອົບອຸ່ນ, ໂຄງສ້າງສີດຳອ່ອນໆ, ແລະ ຖັນທີ່ບໍ່ສະເໝີກັນໂດຍອີງໃສ່ຮູບຖ່າຍທີ່ເບິ່ງຄືກັບຜົນງານສະຖາປັດຕະຍະກຳທີ່ພິມອອກມາ.
- Bajgart Office — ຝາຫ້ອງວາງສະແດງບັນນາທິການ. ໃຊ້ພື້ນທີ່ສີຂາວຂະໜາດໃຫຍ່ບ່ອນທີ່ຕົວອັກສອນ serif ອ່ອນໆ ແລະ ຊິ້ນສ່ວນຂອງຜົນງານມີນ້ຳໜັກທີ່ເບິ່ງເຫັນໄດ້ຫຼາຍກວ່າອົງປະກອບການໂຕ້ຕອບທີ່ຊຸບໂຄຣມ.
- Heptabase — ໂຕະທີ່ມີແສງແດດສ່ອງເຖິງ. ພື້ນຜິວທີ່ອົບອຸ່ນຄ້າຍຄືເຈ້ຍ, ຕົວຄວບຄຸມສີຖ່ານ, ແລະ ປ່ອງຢ້ຽມລອຍສຳລັບການຄົ້ນຄວ້າສ້າງຄວາມຮູ້ສຶກຂອງພື້ນທີ່ເຮັດວຽກທີ່ເປັນລະບຽບແທນທີ່ຈະເປັນແຜງຄວບຄຸມຊອບແວ.
- Bejamas — ຊຸດນອນ—ປູນຂາວເຂັ້ມຜ່ານແກ້ວສີດຳ. ສ້າງໜ້າບັນນາທິການທີ່ສະຫງົບ, ສີເທົາອ່ອນທີ່ຖືກລົບກວນດ້ວຍແຜງສີດຳທີ່ໜ້າສົນໃຈບ່ອນທີ່ເສັ້ນແສງສີຂຽວມົວຕັດກັນເທິງໜ້າດິນ.
- Baba — ບັນທຶກຄວາມເປັນຫ່ວງເປັນໄຍໃນແສງແດດສີແດງ. ສ້າງເສັ້ນເລົ່າເລື່ອງສີແດງກວ້າງອ້ອມຮອບພື້ນຜິວຂໍ້ມູນສີຂາວ, ສີບົວ ແລະ ສີຄຣີມ, ໂດຍໃຊ້ຮູບຖ່າຍຂອງຄົນເປັນຈຸດໃຈກາງທາງດ້ານອາລົມ.
- Grafana Labs — ຫ້ອງຄວບຄຸມຂອງສະຖານີສັນຍານ Sunrise. ພື້ນທີ່ເຮັດວຽກສີເທົາ-ຂາວທີ່ງຽບສະຫງົບປະສົມປະສານກັບການໄລ່ສີຂອບຟ້າທີ່ກວ້າງສີ່ສີ ແລະ ສັນຍານອິນເຕີເຟດສີຟ້າທີ່ຊັດເຈນ.
- Kagi — ຫ້ອງອ່ານແຍກຕ່າງຫາກ. ສ້າງພື້ນທີ່ສີຂາວເປີດອ້ອມຮອບຕົວໜັງສືແກຣໄຟຟ໌ທີ່ເຂັ້ມ, ໂດຍໃຊ້ສີມ່ວງອ່ອນໆ ແລະ ພື້ນຜິວສີ pastel ອົບອຸ່ນເພື່ອທຳລາຍຄວາມສະຫງົບ.