Notion
ປື້ມບັນທຶກເຈ້ຍອຸ່ນໆໃນແສງແດດທ່ຽງວັນ
ອິນເຕີເຟດຂອງ Notion ເບິ່ງຄືກັບປື້ມບັນທຶກເຈ້ຍທີ່ໜ້າຮັກໃນຕອນກາງເວັນ: ຜ້າໃບທີ່ອົບອຸ່ນ, ມີສີຄຣີມ (#f6f5f4) ທີ່ຮູ້ສຶກສຳຜັດໄດ້ແທນທີ່ຈະເປັນແບບປອດເຊື້ອ, ຕົວພິມ sans-serif ທີ່ກວ້າງຂວາງເຮັດໃຫ້ຂໍ້ຄວາມມີນ້ຳໜັກໃຫ້ກັບຜະລິດຕະພັນ, ແລະສີທີ່ໃຊ້ເປັນເຄື່ອງໝາຍວັກຕອນທີ່ບາງໆ - "ຢາເມັດ" ສີ peach ເນັ້ນຄຳກິລິຍາ, ສີຟ້າດຽວເນັ້ນການກະທຳຫຼັກ, ແລະສີທີ່ຫມູນວຽນ (ສີປະກາລັງ, ສີອຳພັນ, ທ້ອງຟ້າ, ທ່ຽງຄືນ) ໃສ່ສີພື້ນຫຼັງບັດຄືກັບສະຕິກເກີ. ບັດຖືກຈັດລຽງຢູ່ເທິງຜ້າໃບທີ່ມີຂອບແລະມຸມບາງໆ - ບໍ່ມີເງົາ, ບໍ່ມີໂຄຣມ - ຄືກັບສ່ວນທີ່ມີເສັ້ນຂອງປື້ມບັນທຶກ Moleskine. ພາບເຄື່ອນໄຫວແມ່ນມ່ວນຊື່ນແລະມີຊີວິດຊີວາ, ມີການຫັນປ່ຽນທີ່ລຽບງ່າຍທີ່ 200ms ແລະພາບເຄື່ອນໄຫວຕົວລະຄອນທີ່ສົດໃສທີ່ເຮັດໃຫ້ອິນເຕີເຟດມີຊີວິດຊີວາໂດຍບໍ່ຕ້ອງຕົກແຕ່ງ.
ຢູ່ໃຈກາງ, ຄວາມກວ້າງສູງສຸດຖືກຈຳກັດຢູ່ທີ່ປະມານ 1440px. ອົງປະກອບຫຼັກແມ່ນການວາງຊ້ອນກັນຢູ່ໃຈກາງ: ແຖວສັນຍາລັກ → ຫົວຂໍ້ຂ່າວສອງແຖວຂະໜາດໃຫຍ່ທີ່ມີເມັດສີຝັງຢູ່ → ຫົວຂໍ້ຍ່ອຍ → ແຖວທີ່ມີປຸ່ມຮຽກຮ້ອງໃຫ້ປະຕິບັດສອງປຸ່ມ → ຮູບແບບຈຳລອງ UI ຜະລິດຕະພັນຂະໜາດໃຫຍ່. ຢູ່ດ້ານລຸ່ມຂອງອົງປະກອບຫຼັກ, ພາກສ່ວນຕ່າງໆສະຫຼັບກັນລະຫວ່າງຕາຂ່າຍບັດສີຂາວ ແລະ ແຜງສີເຕັມ. ກຳແພງໂລໂກ້ແມ່ນຕາຂ່າຍແຖວດຽວຢູ່ໃຈກາງຂອງໂລໂກ້ຄູ່ຮ່ວມງານໃນລະດັບສີເທົາ. ບລັອກຄຸນສົມບັດໃຊ້ຮູບແບບສອງຖັນ (ຂໍ້ຄວາມຢູ່ເບື້ອງຊ້າຍ, ແຜງສີຢູ່ເບື້ອງຂວາ), ສະຫຼັບກັນຈາກຊ້າຍຫາຂວາລະຫວ່າງພາກສ່ວນຕ່າງໆ. ພາກສ່ວນ "ຖາມຜູ້ຊ່ວຍຂອງທ່ານຕາມຄວາມຕ້ອງການ" ໃຊ້ຕາຂ່າຍບັດ 2x2, ບ່ອນທີ່ບັດດ້ານເທິງໃຊ້ຄວາມກວ້າງເຕັມ, ແລະແຖວລຸ່ມຖືກແບ່ງອອກເປັນສອງຖັນເທົ່າກັນ. ຮ່ອງລະຫວ່າງພາກສ່ວນຕ່າງໆແມ່ນກວ້າງ (~80px), ສ້າງຈັງຫວະແນວຕັ້ງທີ່ສະຫງົບ. ການນຳທາງແມ່ນແຖບດ້ານເທິງສູງ 64px ຄົງທີ່ມີອົງປະກອບການນຳທາງຢູ່ໃຈກາງ ແລະ ປຸ່ມການກະທຳທີ່ຈັດລຽງຢູ່ເບື້ອງຂວາ.
ຮູບແຕ້ມປະກອບມີຄວາມສຳຄັນຫຼາຍ, ບໍ່ມີຮູບພາບ. ພາສາທີ່ເບິ່ງເຫັນໄດ້ຖືກສ້າງຂຶ້ນບົນສັນຍາລັກທີ່ຮາບພຽງ, ມີຮູບແຕ້ມປະກອບ (ຂອບມົນໃນວົງມົນສີ 2px), ອົງປະກອບຕົກແຕ່ງແບບນາມທຳມະດາ (ຮູບແຕ້ມດ້ວຍມື, ກລິດເຕີ້, ລູກສອນ, ຮູບດອກໄມ້), ແລະ ຮູບແບບຈຳລອງຂອງອິນເຕີເຟດຜູ້ໃຊ້ຂອງຜະລິດຕະພັນ. ສັນຍາລັກຕ່າງໆປາກົດຢູ່ໃນໜ້າຕ່າງຫຼັກເປັນແຖວອອກຕາມແນວນອນຂອງເຈັດຮູບແທນຕົວ ແລະ ກະແຈກກະຈາຍໄປທົ່ວໜ້າເປັນເຄື່ອງໝາຍວັກຕອນທີ່ມ່ວນຊື່ນ. ພາບໜ້າຈໍຜະລິດຕະພັນແມ່ນອົງປະກອບທີ່ເບິ່ງເຫັນໄດ້ "ແທ້ຈິງ" ພຽງຢ່າງດຽວ: ພວກມັນສະແດງໃຫ້ເຫັນອິນເຕີເຟດ Notion ຕົວຈິງ (ກະດານ Kanban, ມຸມມອງເອກະສານ, ແຜງຕົວແທນ AI) ພ້ອມດ້ວຍຊຸດອົງປະກອບທີ່ຄົບຖ້ວນ ແລະ ຂໍ້ມູນທີ່ແທ້ຈິງ. ຮູບແບບຈຳລອງຜະລິດຕະພັນໃນໜ້າຕ່າງຫຼັກມີຂະໜາດໃຫຍ່, ຢູ່ໃຈກາງ, ແລະ ປ່ອຍເງົາດຽວທີ່ແຍກມັນອອກຈາກຜ້າໃບ. ບໍ່ມີຮູບພາບວິຖີຊີວິດ, ບໍ່ມີຮູບພາບສະຕັອກ, ບໍ່ມີການສະແດງ 3D ແບບນາມທຳມະດາ.
ພາເລັດ
ຍີ່ຫໍ້
- Notion Blue
#0075de— ອົງປະກອບຫຼັກທີ່ຕື່ມໃສ່ປຸ່ມຮຽກຮ້ອງໃຫ້ປະຕິບັດ (CTA), ເຊິ່ງເປັນການເນັ້ນໃນການນຳທາງທີ່ໃຊ້ງານຢູ່, ປຸ່ມປະຕິບັດທີ່ເຕີມເຕັມແມ່ນໂຄງສີດຽວໃນລະບົບເກືອບເປັນສີດຽວທີ່ມີຄວາມອີ່ມຕົວພຽງພໍທີ່ຈະຖືກຮັບຮູ້ວ່າເປັນສະວິດ.
ເປັນກາງ
- Paper Warmth
#f6f5f4— ຜ້າໃບໜ້າ, ພື້ນຫຼັງໜ້າຕ່າງຫຼັກ, ແລະ ພື້ນຫຼັງພາກສ່ວນຕ່າງໆ ລ້ວນແຕ່ເປັນສີທີ່ອົບອຸ່ນ, ມີສີເບຈເລັກນ້ອຍ ເຊິ່ງເຮັດໃຫ້ລະບົບມີຄວາມຮູ້ສຶກແບບສຳຜັດ ແລະ ແບບອະນາລັອກ. - Pure White
#ffffff— ໜ້າດິນບັດ, ແຜງຍົກຂຶ້ນ, ພື້ນຫຼັງໂລໂກ້, ຂໍ້ຄວາມທີ່ຕັດກັນໃນບັດສີເຂັ້ມ. - Ink Black
#000000— ຂໍ້ຄວາມຫຼັກ, ລິ້ງນຳທາງ, ຫົວຂໍ້ - ໃຊ້ດ້ວຍຄວາມໂປ່ງໃສທີ່ແຕກຕ່າງກັນ (100%, 95%, 90%, 60%, 40%, 20%) ເພື່ອສ້າງລຳດັບຊັ້ນໂດຍບໍ່ຕ້ອງເພີ່ມສີໃໝ່. - Charcoal
#111111— ຕົວເລືອກຂໍ້ຄວາມສີເຂັ້ມສຳລັບພື້ນທີ່ UI ເຫຼົ່ານັ້ນບ່ອນທີ່ສີດຳບໍລິສຸດຈະເບິ່ງຮຸນແຮງເກີນໄປ. - Stone
#757575— ຂໍ້ຄວາມນຳທາງສຳຮອງ, ຂໍ້ຄວາມຊ່ວຍເຫຼືອທີ່ປິດສຽງ, ປ້າຍປຸ່ມທີ່ປິດໃຊ້ງານ - 60% ນໍ້າມຶກອັລຟາ - Graphite
#615d59— ຕົວໜັງສືຫຼັກມີໂທນສີອົບອຸ່ນ - ສີເທົານ້ຳຕານ, ເຊິ່ງສອດຄ່ອງກັບພື້ນຫຼັງທີ່ອົບອຸ່ນ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 96px · 10 ຂັ້ນຕອນ
- NotionInter — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 500, 600, 700 · ຟອນຕ໌ sans-serif ຫຼັກແມ່ນຮູບແບບເລຂາຄະນິດທີ່ມີລັກສະນະເປັນມະນຸດສະທຳ ພ້ອມດ້ວຍຄວາມແຕກຕ່າງເລັກນ້ອຍ, ໃຊ້ໃນຂະໜາດ 400 ສຳລັບເນື້ອໃນ, 500 ສຳລັບການນຳທາງ/ອິນເຕີເຟດຜູ້ໃຊ້, ແລະ 600-700 ສຳລັບຫົວຂໍ້. ຂະໜາດຟອນຕ໌ໃຊ້ໄລຍະຫ່າງຕົວອັກສອນລົບທີ່ຮຸນແຮງໃນຂະໜາດໃຫຍ່ກວ່າ (-4.6px ທີ່ 96px, -2px ທີ່ 72px), ເຊິ່ງເຮັດໃຫ້ຫົວຂໍ້ຮູ້ສຶກກະທັດຮັດ ແລະ ໝັ້ນໃຈຫຼາຍຂຶ້ນ, ແທນທີ່ຈະເປັນແບບອາກາດ.
- Lyon Text — ການທົດແທນ: Source Serif Pro · ໂຄງຮ່າງ 400 · ຟອນຕ໌ serif ສຳລັບບັນນາທິການ, ສະຫງວນໄວ້ສຳລັບແຕ່ລະພາກສ່ວນຂອງຂໍ້ຄວາມຫຼັກ ແລະ ບົດນຳຂອງພາກສ່ວນ, ແມ່ນຖືກໃຊ້ຢ່າງລະມັດລະວັງ (ສີ່ເທື່ອ) ເພື່ອໃຫ້ນ້ຳໜັກຕົວອັກສອນຕາມຕົວອັກສອນ, ຄ້າຍຄືກັບຄຳເວົ້າໃນຮູບແບບວາລະສານ. ມັນເຮັດໜ້າທີ່ເປັນສຳນຽງທີ່ເປັນລະບົບແທນທີ່ຈະເປັນລຳດັບຊັ້ນຂະໜານ.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໂດຍສະເລ່ຍ |
| ຂັ້ນຕອນພື້ນຖານ | 8px |
| ລັດສະໝີປຸ່ມ | 8px |
| ລັດສະໝີບັດ | 12px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 80px |
| ຄວາມກວ້າງຂອງໜ້າ | 1440px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Notion ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- ElevenLabs — ບົດຂຽນຮູບພາບໃນໂທນສີຄຣີມອຸ່ນໆພ້ອມດ້ວຍຫົວຂໍ້ຂ່າວທີ່ລະອຽດອ່ອນ. ປື້ມບັນທຶກແບບ Bauhaus—ເຈ້ຍສີເປືອກໄຂ່, ໝຶກສີດຳ, ແລະສີມ່ວງ ແລະ ສີສົ້ມດຽວສຳລັບວາງສະແດງຜະລິດຕະພັນ.
- Awesomic — ຕາໜ່າງສັງກະສີບັນນາທິການທີ່ມີເຄື່ອງໝາຍວັກຕອນສີສົ້ມເຮັດໃຫ້ນຶກເຖິງເຈ້ຍປິວຕີ້
- Monad — ວາລະສານດ້ານວິຊາການກ່ຽວກັບເຈ້ຍ parchment ອຸ່ນ
- Dub — ແຜງຄວບຄຸມເຈ້ຍເຂົ້າດ້ານຂອງ Link
- Seline Analytics — ໂຕະວິເຄາະທີ່ງຽບສະຫງົບຢູ່ເທິງເຈ້ຍອຸ່ນໆ
- Anthropic — ວາລະສານວິທະຍາສາດພາກສະໜາມກ່ຽວກັບຜ້າໜັງແກະອຸ່ນໆ—ໜ້າຜິວງາຊ້າງທີ່ສະຫງົບ, ຫົວຂໍ້ບັນນາທິການທີ່ມີລວດລາຍ, ແລະ ການເນັ້ນສີດິນເຜົາດຽວທີ່ປາກົດຂຶ້ນເມື່ອຕ້ອງການການປະຕິບັດເທົ່ານັ້ນ.
- Calendly — ນໍ້າມຶກສີຟ້າເຂັ້ມເທິງຫິນອ່ອນເຢັນ
- Augen Pro — ການນຳສະເໜີສີຂາວຂອງ Apple ມີສີຟ້າໄຟຟ້າທີ່ມີນ້ຳໜັກເບົາ ແລະ ເປັນສີທຳມະດາເປັນຈຸດເດັ່ນໃນພື້ນທີ່ສີຂາວດຽວ.
- Antimetal — ບັນທຶກເຫດການໃນເຈ້ຍສີຄີມ - ຕອນເຊົ້າທີ່ງຽບສະຫງົບຢູ່ວາລະສານວິທະຍາສາດ, ບ່ອນທີ່ຄວາມຍັບຍັ້ງສະແດງຄວາມໝັ້ນໃຈ ແລະ ຮອຍຂີດຂ່ວນເຮັດໃຫ້ເກີດຄວາມໜັກໜ່ວງ
- Perk — ປູນຂາວໄຟຟ້າໃສ່ເຈ້ຍ parchment ອຸ່ນໆ
- Ditto — ກອງປະຊຸມທີ່ມີແສງແດດສ່ອງເຖິງການສ້າງຕົວຢ່າງດອກໄມ້ປ່າ. ພື້ນຜິວສີຄຣີມອຸ່ນ, ສີພື້ນຖານສີເຫຼືອງສົດໃສ, ນໍ້າມຶກສີຟ້າເຂັ້ມ, ຮູບແບບສີອໍແກນິກທີ່ເບັ່ງບານຢູ່ທາງຫຼັງຊິ້ນສ່ວນ.
- Officevibe — ວາລະສານບັນນາທິການທີ່ຂຽນດ້ວຍເຈ້ຍສີຄຣີມອຸ່ນໆ. ລອງນຶກພາບເຖິງບົດຂຽນທີ່ຄິດເຖິງກ່ຽວກັບການຄຸ້ມຄອງຊັບພະຍາກອນມະນຸດ, ນຳສະເໜີເປັນຜະລິດຕະພັນ - ຕົວອັກສອນຕົວຫຍໍ້ serif ທີ່ກະຊິບຜ່ານອິນເຕີເຟດສີຟ້າທີ່ທັນສະໄໝ.