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 ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Ui — ແຜນທາງດ້ານຄລີນິກເທິງເຈ້ຍດ້ານ
- ElevenLabs — ບົດຂຽນຮູບພາບໃນໂທນສີຄຣີມອຸ່ນໆພ້ອມດ້ວຍຫົວຂໍ້ຂ່າວທີ່ລະອຽດອ່ອນ. ປື້ມບັນທຶກແບບ Bauhaus—ເຈ້ຍສີເປືອກໄຂ່, ໝຶກສີດຳ, ແລະສີມ່ວງ ແລະ ສີສົ້ມດຽວສຳລັບວາງສະແດງຜະລິດຕະພັນ.
- monopo saigon — ແສງສະຫວ່າງທີ່ເປັນຂອງແຫຼວ ແລະ ມີລວດລາຍຢູ່ເບື້ອງຫຼັງຄວາມງຽບສະຫງົບຂອງບັນນາທິການ — ຫ້ອງວາງສະແດງບັນນາທິການສີດຽວທີ່ລອຍຢູ່ເທິງແສງໄຟທີ່ລະລາຍ
- Awesomic — ຕາໜ່າງສັງກະສີບັນນາທິການທີ່ມີເຄື່ອງໝາຍວັກຕອນສີສົ້ມເຮັດໃຫ້ນຶກເຖິງເຈ້ຍປິວຕີ້
- Monad — ວາລະສານດ້ານວິຊາການກ່ຽວກັບເຈ້ຍ parchment ອຸ່ນ
- Dub — ແຜງຄວບຄຸມເຈ້ຍເຂົ້າດ້ານຂອງ Link
- Seline Analytics — ໂຕະວິເຄາະທີ່ງຽບສະຫງົບຢູ່ເທິງເຈ້ຍອຸ່ນໆ
- Ventriloc — ການສັງເກດການດ້ານບັນນາທິການຂອງຂໍ້ມູນໃນເຈ້ຍອຸ່ນ - ຖ່ານສີສົ້ມອັນດຽວທີ່ເນັ້ນໃຫ້ເຫັນຄວາມແມ່ນຍຳຂອງສີດຽວ
- Duolingo — ມາສຄອດຂອງຫ້ອງຮຽນທີ່ຫຼິ້ນໆຢູ່ເທິງເຈ້ຍສີຂາວ
- Stripe — ປື້ມບັນຊີທີ່ຂຽນດ້ວຍນໍ້າມຶກສີຄາມໃສ່ກະຈົກ
- Notion — ປື້ມບັນທຶກເຈ້ຍອຸ່ນໆໃນແສງແດດທ່ຽງວັນ
- Hyer Aviation — ມືດຄຶ້ມໃນຫ້ອງນັກບິນເທິງຜ້າໜັງ. ທ້ອງຟ້າຕອນເຊົ້າມືດໆພົບກັບໂລໂກ້ serif ຂະໜາດເທົ່າກັບລຳຕົວເຮືອບິນ, ແລະ ການເນັ້ນສີດິນເຜົາອຸ່ນໆພຽງອັນດຽວກໍ່ທຳລາຍຄວາມໂດດເດັ່ນຂອງສີດຽວ.