Apple (España)
ວິຫານທີ່ມີພື້ນທີ່ສີຂາວທີ່ເກືອບຈະບໍ່ໄດ້ຍິນຫົວຂໍ້ຂ່າວ. ຫ້ອງໂຖງກວ້າງໃຫຍ່ ແລະ ສົດໃສ ບ່ອນທີ່ຕົວອັກສອນຂະໜາດໃຫຍ່ 700 ຕົວຫ້ອຍຢູ່ໃນອາກາດ, ຖືກຜູກມັດໄວ້ດ້ວຍສີ pastel ແລະ ເສັ້ນສີຟ້າເສັ້ນດຽວ.
ພາສາໜ້າຜະລິດຕະພັນຂອງ Apple ແມ່ນການສຶກສາກ່ຽວກັບຄວາມເອື້ອເຟື້ອເຜື່ອແຜ່ຂອງຕົວພິມ: ຫົວຂໍ້ຂ່າວ SF Pro Display ຂະໜາດໃຫຍ່ທີ່ລອຍຢູ່ກັບພື້ນຫຼັງສີຂາວອ່ອນໆ, ລ້ອມຮອບດ້ວຍພື້ນທີ່ສີຂາວກວ້າງໃຫຍ່ທີ່ເຮັດໃຫ້ທຸກໆຄຳຮູ້ສຶກມີເຈດຕະນາ. ແຜ່ນສີແມ່ນເກືອບເປັນສີດຽວ - ຂໍ້ຄວາມໃນ #1d1d1f, ຜ້າໃບສະຫຼັບກັນລະຫວ່າງ #ffffff ແລະ #f5f5f7 - ມີການເນັ້ນສີຟ້າດຽວ (#0071e3) ສະຫງວນໄວ້ສະເພາະສຳລັບຊ່ວງເວລາທີ່ມີການໂຕ້ຕອບ. ສີມີຢູ່ໃນຮູບພາບຜະລິດຕະພັນເອງ (ໂທນສີ pastel), ບໍ່ເຄີຍເປັນອົງປະກອບ UI ຕົບແຕ່ງ. ອົງປະກອບແມ່ນບໍ່ມີກອບ: ບັດມົນທີ່ມີລັດສະໝີ 28px, ປຸ່ມຮູບຊົງເມັດເກືອບແຕະຂອບຂອງໜ້າ, ໂດຍບໍ່ມີກ່ອງຫຼືເງົາທີ່ເຫັນໄດ້. ຈັງຫວະຖືກສ້າງຂຶ້ນໂດຍການສະຫຼັບເສັ້ນສີຂາວແລະສີເທົາ, ບໍ່ແມ່ນຕົວແບ່ງຫຼືຂອບ.
ພາກສ່ວນຕ່າງໆກວມເອົາຄວາມກວ້າງເຕັມຂອງໜ້າ, ຍືດຈາກຂອບຫາຂອບດ້ວຍການເພີ່ມຂອບທີ່ກວ້າງ (ປະມານ 40-100 ດ້ານ). ຄວາມກວ້າງຂອງເນື້ອຫາສູງສຸດແມ່ນຢູ່ໃຈກາງພາຍໃນແຕ່ລະແຖບ. ອົງປະກອບຫຼັກແມ່ນການວາງຊ້ອນກັນຢູ່ໃຈກາງ: ປ້າຍຮູບຊົງຄິ້ວ, ຫົວຂໍ້ຂ່າວທີ່ຂະຫຍາຍໃຫຍ່ຂຶ້ນ, ປຸ່ມຮຽກຮ້ອງໃຫ້ປະຕິບັດອັນດຽວ, ແຖວລາຄາ, ແລະຈາກນັ້ນຮູບພາບຜະລິດຕະພັນທີ່ເຕັມຢູ່ດ້ານລຸ່ມຂອງວິວພອດ. ພາກສ່ວນຕ່າງໆປະຕິບັດຕາມຮູບແບບທີ່ຊ້ຳກັນ: ຫົວຂໍ້ຂ່າວທີ່ຈັດລຽງໄວ້ທາງຊ້າຍພາຍໃນແຖບ, ຕາມດ້ວຍຮູບແບບສອງຖັນທີ່ມີລາຍລະອຽດຜະລິດຕະພັນ (ຂໍ້ຄວາມຢູ່ເບື້ອງຊ້າຍ/ຮູບພາບຢູ່ເບື້ອງຂວາ ຫຼື ສະຫຼັບກັນ), ຕາຂ່າຍບັດສາມຖັນ, ຫຼື ການສະແດງຮູບພາບທີ່ຕັ້ງຢູ່ໃຈກາງ. ຈັງຫວະເນື້ອຫາຖືກຄວບຄຸມທັງໝົດໂດຍການສະຫຼັບພື້ນຫລັງສີຂາວ ແລະ ສາມສີທີ່ມີຊ່ອງຫວ່າງຕັ້ງ 100-100 ຊມ—ບໍ່ມີຕົວແບ່ງ, ບໍ່ມີບັດທີ່ມີອົງປະກອບ. ການນຳທາງທົ່ວໂລກແມ່ນແຖບຄົງທີ່ອັນດຽວ. ພາກສ່ວນສະເພາະຜະລິດຕະພັນໃຊ້ແຖບຄວາມກວ້າງເຕັມທີ່ມີການເພີ່ມຂອບທີ່ກວ້າງ, ບ່ອນທີ່ຂໍ້ຄວາມຢູ່ໃຈກາງໃນຖັນແຄບ (~560px) ທຽບກັບພື້ນທີ່ເບິ່ງເຫັນທີ່ກວ້າງກວ່າ.
ພາສາທາງສາຍຕາຂອງ Apple ສ່ວນໃຫຍ່ແມ່ນການຖ່າຍຮູບຜະລິດຕະພັນ: ຮູບໃກ້ຂອງຮາດແວທຽບກັບພື້ນຫຼັງສີຂາວບໍລິສຸດ ຫຼື ພື້ນຫຼັງສີ, ໂດຍບໍ່ມີສະພາບການດຳລົງຊີວິດ ຫຼື ສາກທີ່ຈັດໄວ້. ຮູບພາບຫຼັກສະແດງໃຫ້ເຫັນມືທີ່ຖື MacBook Neo ສີຂຽວ pastel - ອົງປະກອບຂອງມະນຸດແມ່ນສິ່ງທີສອງ, ສະແດງໃຫ້ເຫັນຂະໜາດ ແລະ ໂຄງສ້າງຫຼາຍກວ່າອາລົມ. ໃນພາກສ່ວນຜະລິດຕະພັນລຸ້ນຕ່າງໆ, ອຸປະກອນສອງອັນຖືກນຳສະເໜີຄຽງຄູ່ກັນທຽບກັບພື້ນຫຼັງທີ່ມີສີຕົບແຕ່ງທີ່ກົງກັນ (ສີບົວ, ສີຂຽວ, ສີເງິນ, ສີຟ້າ), ແຕ່ລະບັດມີພື້ນທີ່ສີຮາບພຽງໂດຍມີຜະລິດຕະພັນຢູ່ໃຈກາງ. ຮູບຖ່າຍລາຍລະອຽດໃຊ້ຮູບໃກ້ທີ່ສຸດ (ບານພັບແລັບທັອບ, ໂມດູນກ້ອງຖ່າຍຮູບ) ທຽບກັບພື້ນຫຼັງທີ່ເປັນກາງ. ບໍ່ມີຮູບແຕ້ມ, ບໍ່ມີຮູບພາບທີ່ບໍ່ມີຕົວຕົນ, ບໍ່ມີຮູບພາບຕົກແຕ່ງ - ຕົວຜະລິດຕະພັນເອງແມ່ນອົງປະກອບທາງສາຍຕາ. ຮູບສັນຍາລັກມີຢູ່ທົ່ວທຸກແຫ່ງ - ຮູບສັນຍາລັກເສັ້ນສີດຽວໃນແບບສັນຍາລັກ SF, ໜາ 1.5–2px, ຖ່າຍມາຈາກຊຸດໄອຄອນລະບົບ Apple. ການຖ່າຍຮູບແມ່ນເຮັດໃນລັກສະນະທີ່ສຳຄັນສະເໝີ: ແສງໄຟທີ່ເປັນເອກະພາບ, ບໍ່ມີເງົາທີ່ຫຼຸດຜະລິດຕະພັນໃຫ້ເປັນຮູບແບບກຣາບຟິກແທນທີ່ຈະເປັນວັດຖຸສາມມິຕິ.
ພາເລັດ
ຍີ່ຫໍ້
- Electric Blue
#0071e3— ປຸ່ມການກະທຳທີ່ມີສີເຕັມແມ່ນສີດຽວທີ່ຖືກເນັ້ນໃສ່ໃນ UI, ເຊິ່ງໃຊ້ໜ້ອຍສຳລັບການຮຽກຮ້ອງໃຫ້ມີການກະທຳ. - Link Blue
#0066cc— ລິ້ງຂໍ້ຄວາມໃນແຖວ, ລິ້ງທີ່ມີລູກສອນ ແລະ ເຄື່ອງໝາຍ chevron. - Citrus Gradient
#3b3b23— ທາງເລືອກອື່ນທີ່ກາຍເປັນລັກສະນະເດັ່ນຂອງຜະລິດຕະພັນແມ່ນພື້ນຖານສີເຂັ້ມທີ່ຈາງລົງເປັນຈຸດເດັ່ນສີເຫຼືອງຂຽວ.
ເປັນກາງ
- Primary Ink
#1d1d1f— ຫົວຂໍ້ຂ່າວ, ເນື້ອໃນ, ແລະ ປ້າຍປຸ່ມແມ່ນໂທນສີພື້ນໜ້າທີ່ໂດດເດັ່ນໃນທຸກດ້ານ; ພື້ນຫຼັງຂອງຮູບພາບຜະລິດຕະພັນຫຼັກປ່ຽນຈາກ #1d1d1f ທີ່ເປັນສີເຂັ້ມຢູ່ເທິງສຸດໄປເປັນສີຟ້າເຂັ້ມຢ່າງລຽບງ່າຍ. - Mid Gray
#707070— ຂໍ້ຄວາມສຳຮອງ, ສະຖານະການນຳທາງທີ່ບໍ່ໄດ້ໃຊ້ງານ, ປ້າຍກຳກັບ UI ທີ່ປິດສຽງ - Deep Gray
#474747— ຂໍ້ຄວາມນຳທາງ ແລະ ຮູບສັນຍາລັກແມ່ນຢູ່ໃນຕົວອັກສອນຂະໜາດກາງ. - Hairline
#d6d6d6— ຂອບເຂດບາງໆລະຫວ່າງພາກສ່ວນ ແລະ ອົງປະກອບ UI. - Canvas
#f5f5f7— ພື້ນຫຼັງພາກສ່ວນສະຫຼັບກັນ - ເສັ້ນສີເທົາທີ່ແຍກພື້ນທີ່ສີຂາວ. - Paper
#ffffff— ໜ້າດິນບັດ, ພື້ນຫຼັງໜ້າຫຼັກ, ຂໍ້ຄວາມປຸ່ມຢູ່ພື້ນຫຼັງສີເຂັ້ມ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 96px · 10 ຂັ້ນຕອນ
- SF Pro Display — ການທົດແທນ: Inter · ໂຄງຮ່າງ 600, 700 · ຫົວຂໍ້ Hero ແລະຫົວຂໍ້ຍ່ອຍສຳລັບການສະແດງ — ນ້ຳໜັກ 700 ທີ່ 80–96px ດ້ວຍໄລຍະຫ່າງຕົວອັກສອນລົບ -1.44px ສ້າງເປັນ "ຫົວຂໍ້ຂ່າວຂະໜາດໃຫຍ່ທີ່ລອຍຢູ່ໃນສີຂາວ" ທີ່ເປັນເອກະລັກຂອງ Apple. ສິ່ງທົດແທນ: Inter, system-ui
- SF Pro Display — ການທົດແທນ: Inter · ໂຄງຮ່າງ 600 · ຫົວຂໍ້ພາກສ່ວນ, ຫົວຂໍ້ບັດ, ຫົວຂໍ້ຍ່ອຍ - ຕົວອັກສອນ 600 ທີ່ມີໄລຍະຫ່າງຕົວອັກສອນບວກເລັກນ້ອຍໃຫ້ຄວາມຮູ້ສຶກອົບອຸ່ນ ແລະ ເປັນມິດໃນຂະໜາດກາງ, ບໍ່ຄືກັບຫົວຂໍ້ສັ້ນໆຂ້າງເທິງ.
- SF Pro Text — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 500, 600 · ສຳລັບເນື້ອໃນ, ການນຳທາງ, ວັກສະໜັບສະໜູນ, ແລະ ຄຳບັນຍາຍຂະໜາດນ້ອຍ, ຟອນທີ່ມີດັດຊະນີ 400 ທີ່ 17px ແມ່ນຟອນຫຼັກ. ໄລຍະຫ່າງຕົວອັກສອນລົບຊ່ວຍໃຫ້ຂໍ້ຄວາມຫຼັກມີຄວາມກະທັດຮັດຫຼາຍຂຶ້ນໃນໜ້າທີ່ມີຫຼາຍຂໍ້ມູນ.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໜາແໜ້ນ |
| ຂັ້ນຕອນພື້ນຖານ | 8-10px |
| ລັດສະໝີປຸ່ມ | 980px |
| ລັດສະໝີບັດ | 28px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 100-120px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Apple (España) ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Airbnb — ຝາຜະໜັງຫ້ອງວາງສະແດງສີຂາວທີ່ງຽບສະຫງົບພ້ອມດ້ວຍທີ່ໝາຍສີແດງປະກາລັງອັນດຽວ
- Peak Design — ຝາຜະໜັງຫ້ອງວາງສະແດງ, ມີໄຟສ່ອງສະຫວ່າງບາງສ່ວນ
- Ramp — ພະແນກການເງິນຂອງບັນນາທິການ, ໜ້າສີດຳ ແລະ ສີຂາວພ້ອມດ້ວຍປາກການີອອນອັນດຽວ. ໜ້າຜິວທີ່ເກືອບຈະເປັນສີດຽວຂອງສິ່ງພິມ, ບ່ອນທີ່ເສັ້ນສີຂຽວປູນຂາວສົດໃສພຽງເສັ້ນດຽວປ່ຽນທຸກໆການໂຕ້ຕອບໃຫ້ກາຍເປັນສັນຍານທາງການເງິນ.
- 099 SUPPLY — ກຳແພງຫ້ອງວາງສະແດງເຕັມໄປດ້ວຍວັດຖຸສີດຳ ແລະ ສີຂາວ
- Orderful — ຊຸດຄວບຄຸມການຂົນສົ່ງທາງອຸດສາຫະກຳ - ບັນຊີກວດສອບຂອງຜູ້ສົ່ງມອບການຂົນສົ່ງທີ່ພິມອອກມາ, ເຮັດດ້ວຍໝຶກສີດຳ ແລະ ສີແດງຜ່າຕັດ, ແຕ່ລະໜ້າມີຄວາມລະມັດລະວັງພຽງພໍທີ່ຈະໃຫ້ຜູ້ປະຕິບັດງານຄົນໜຶ່ງສາມາດຮ້ອງອອກມາບາງສິ່ງບາງຢ່າງທີ່ສຳຄັນໄດ້.
- Apple (España) — ຕູ້ວາງສະແດງຮູບພາບສີຂາວ
- teenage engineering — ລາຍການອຸດສາຫະກຳໃນໄຟສະຕູດິໂອ - ຜະລິດຕະພັນແມ່ນວັດຖຸທີ່ສຳຄັນພຽງຢ່າງດຽວໃນໜ້າ, ແລະທຸກຢ່າງອື່ນໆແມ່ນໄດ້ຖືກປຶກສາຫາລືກ່ຽວກັບມັນ
- Apple (España) — ປ່ອງຢ້ຽມຫ້ອງວາງສະແດງສິລະປະໃນໝອກຕອນເຊົ້າ
- Lightship — ຮູບຖ່າຍສາມມິຕິແບບໂຮງໜັງຂອງເສັ້ນທາງເປີດ. ຝາຫ້ອງວາງສະແດງສີຄີມອຸ່ນໆ ປະດັບປະດາດ້ວຍຮູບຖ່າຍພູມສັນຖານຂະໜາດໃຫຍ່ທີ່ຕິດຕັ້ງໃນໄລຍະໃກ້ໆ, ຕົວພິມສີດຳບາງໆເບິ່ງບໍ່ເຫັນໃນກອບ, ແລະ ມີສີສົ້ມສົດໃສພຽງອັນດຽວທີ່ທຳລາຍຮູບພາບສີດຽວຄືກັບກອງໄຟໃນທົ່ງຫຍ້າ.
- Custo — ຫ້ອງວາງສະແດງສີປືນໂລຫະທີ່ມີຕົວອັກສອນຂະໜາດດຽວ. ຫ້ອງວາງສະແດງໃນໂທນສີເທົາຂຽວອ່ອນໆ, ບ່ອນທີ່ວັດຖຸສີເຂັ້ມອັນດຽວ ແລະ ຕົວອັກສອນ 57px ສະແດງອອກມາໄດ້ຢ່າງຈະແຈ້ງ.
- Silencio — ຫ້ອງສີຂາວທີ່ມີສິ່ງປະດິດທີ່ລອຍຢູ່. ການວາງສະແດງຫ້ອງວາງສະແດງທີ່ເຮັດດ້ວຍເຈ້ຍອຸ່ນ, ບ່ອນທີ່ແຕ່ລະອົງປະກອບຢູ່ໃນຕຳແໜ່ງຂອງມັນຕໍ່ກັບພື້ນຫຼັງທີ່ມີປະລິມານລົບ, ແລະ ຄວາມງຽບແມ່ນການຕັດສິນໃຈອອກແບບໂດຍເຈດຕະນາ.
- ORYZO AI — ບົດຂຽນຮູບພາບກ່ຽວກັບຫ້ອງມືດ. ວັດຖຸໂດດດ່ຽວທີ່ລອຍຢູ່ໃນຄວາມມືດອັນອົບອຸ່ນ, ຕົວອັກສອນສີຄຣີມເປັນພຽງການຕົກແຕ່ງເທົ່ານັ້ນ.