Notion
Incwadi yencwajana efudumele elangeni lasemini
Isixhumi se-Notion sibukeka njengencwajana yephepha ethandekayo emini: indwangu efudumele, ekhilimu (#f6f5f4) ezwakala ithinta kunokuba ibe yinyumba, ukuthayipha okukhululekile okungenayo i-serif okunikeza isisindo sokuhlela kukhophi yomkhiqizo, nombala osetshenziswa njengezimpawu zokubhala ezincane—izenzo ezigqamisa ama-"pills" e-peach, okuluhlaza okwesibhakabhaka okukodwa kugcizelela isenzo esiyinhloko, kanye nohlu olujikelezayo lwemibala yokugcizelela (i-coral, i-amber, isibhakabhaka, phakathi kwamabili) kufaka imibala ngemuva kwekhadi njengezitika. Amakhadi ahlelwe kundwangu enemingcele emincane namakhona—akukho zithunzi, akukho chrome—njengezingxenye ezifakwe umugqa zencwajana ye-Moleskine. I-animation iyadlala futhi i-springy, enezinguquko ezibushelelezi kuma-200ms kanye nezithombe zomlingiswa ezi-springy eziletha impilo ku-interface ngaphandle kokuhlobisa.
Iphakathi nendawo, ububanzi obukhulu bukhawulelwe cishe ku-1440px. Into eyinhloko iyi-stack ephakathi nendawo: umugqa wezimpawu → isihloko esikhulu semigqa emibili esinephilisi elinombala elifakiwe → isihlokwana → umugqa onezinkinobho ezimbili zokubiza isenzo → i-mockup enkulu ye-UI yomkhiqizo. Ngaphansi kwento eyinhloko, izingxenye ziyashintshana phakathi kwamagridi amakhadi amhlophe namaphaneli agqamisa umbala ogcwele. Udonga lwelogo luyigridi eyodwa ephakathi yamalogo abalingani ku-grayscale. Amabhulokhi ezici asebenzisa ukwakheka kwamakholomu amabili (umbhalo ngakwesobunxele, iphaneli enemibala ngakwesokudla), eshintshana ngakwesobunxele kuya kwesokudla phakathi kwezigaba. Ingxenye ethi "Buza abasizi bakho uma kudingeka" isebenzisa igridi yamakhadi angu-2x2, lapho ikhadi eliphezulu lithatha ububanzi obugcwele, kanti umugqa ongezansi uhlukaniswe ngamakholomu amabili alinganayo. Ama-gutter phakathi kwezigaba akhulu (~80px), edala isigqi esizolile esiqondile. Ukuzulazula kuyibha ephezulu eqondile engu-64px enezinto zokuzulazula eziphakathi nendawo kanye nezinkinobho zesenzo eziqondaniswe kwesokudla.
Imifanekiso ibaluleke kakhulu, ayinazo izithombe. Ulimi olubonakalayo lwakhiwe phezu kwezimpawu eziyisicaba, ezinemifanekiso (imiphetho eyindilinga emibuthanweni enemibala engu-2px), izinto zokuhlobisa ezingabonakali (izimbotshana ezidwetshwe ngesandla, i-glitter, imicibisholo, ukuma kwezimbali), kanye nezithombe ezibukwayo zesibonisi somsebenzisi somkhiqizo. Izimpawu zivela efasiteleni eliyinhloko njengomugqa ovundlile wama-avatar ayisikhombisa futhi zisakazeke ekhasini lonke njengezimpawu zokubhala ezidlalayo. Izithombe-skrini zomkhiqizo yizona kuphela izinto ezibonakalayo "zangempela": zibonisa isibonisi sangempela se-Notion (amabhodi e-Kanban, ukubukwa kwamadokhumenti, amaphaneli e-AI agent) anesethi ephelele yezinto kanye nedatha yangempela. Isibonisi somkhiqizo efasiteleni eliyinhloko sikhulu, simaphakathi, futhi senza isithunzi esisodwa esisihlukanisa ne-canvas. Azikho izithombe zendlela yokuphila, azikho izithombe zesitoko, azikho izithombe ezingabonakali ze-3D.
Iphalethi
Umkhiqizo
- Notion Blue
#0075de— Into eyinhloko egcwalisa inkinobho yokubiza isenzo (i-CTA), i-accent ekuzulazuleni okusebenzayo, izinkinobho zesenzo ezigcwalisiwe yizo kuphela uhlelo lombala ohlelweni olucishe lube yi-monochrome olugcwele ngokwanele ukuthi lubonwe njengoshintsho.
Okungathathi hlangothi
- Paper Warmth
#f6f5f4— I-canvas yekhasi, ingemuva lefasitela eliyinhloko, kanye nengemuva lesigaba konke kunemibala efudumele, enombala oluhlaza okwesibhakabhaka kancane enikeza uhlelo umuzwa othintayo nofanayo. - Pure White
#ffffff— Izindawo zamakhadi, amaphaneli aphakanyisiwe, ingemuva lelogo, umbhalo ophikisanayo kumakhadi amnyama. - Ink Black
#000000— Umbhalo oyinhloko, izixhumanisi zokuzulazula, izihloko - zisetshenziswa ngokusobala okuhlukile (100%, 95%, 90%, 60%, 40%, 20%) ukwakha uhlu ngaphandle kokwengeza imibala emisha. - Charcoal
#111111— Inketho yombhalo omnyama kulezo zindawo ze-UI lapho umnyama omsulwa ungabukeka unzima kakhulu. - Stone
#757575— Umbhalo wokuzulazula wesibili, umbhalo osizayo othulisiwe, amalebula enkinobho akhutshaziwe - i-alpha ye-inki engu-60% - Graphite
#615d59— Umbhalo oyinhloko unombala ofudumele - onsundu onsundu, ovumelana nesizinda esifudumele.
Ukuthayipha
kusukela ku-12 kuya ku-96px · izinyathelo eziyi-10
- NotionInter — esikhundleni: Inter · izinhlaka 400, 500, 600, 700 · Ifonti eyinhloko ye-sans-serif iyi-geometric humanist enezincazelo ezincane, esetshenziswa ngobukhulu obungu-400 bombhalo womzimba, obungu-500 bokuzulazula/isikhombimsebenzisi somsebenzisi, kanye nobungu-600-700 bezihloko. Isikali sefonti sisebenzisa isikhala sezinhlamvu esibi kakhulu ngobukhulu obukhulu (-4.6px ku-96px, -2px ku-72px), okwenza isihloko sizizwe sincane futhi siqiniseka, kunokuba sibe nomoya.
- Lyon Text — esikhundleni: Source Serif Pro · izinhlaka 400 · Ifonti ye-serif yokuhlela, egcinelwe izingxenye ngazinye zombhalo oyinhloko kanye nezethulo zezingxenye, isetshenziswa kancane (izikhathi ezine) ukunikeza uhlobo lokubhala isisindo, okufana nesilinganiso esisesimisweni sikamagazini. Isebenza njenge-accent ehlelekile kunokuba ibe yi-hierarchy efanayo.
Izikhawu kanye nesimo
| Inhloso | Incazelo |
|---|---|
| Ubuningi | isilinganiso |
| Isinyathelo esiyisisekelo | 8px |
| Irediyasi yenkinobho | 8px |
| Irediyasi yekhadi | 12px |
| Izithunzi | cha - imingcele esikhundleni sezithunzi |
| Phakathi kwezigaba | 80px |
| Ububanzi bekhasi | 1440px |
I-AI izokwakha iwebhusayithi yakho ngesitayela se- Notion futhi iyigcwalise
- Gcwalisa ngemikhiqizo kanye nokuthunyelwe ngesixhumanisi - Instagram, TikTok, Facebook.
- Dlulisa okuqukethwe kusuka kusayithi lakho elidala—vele ucacise ikheli.
- Umklamo wesimanje enjinini engcono kakhulu: React ( Next.js) enokunikeza iseva kanye nokwenza ngcono i-SEO ngokungenaphutha.
- Ukwenziwa ngcono kwe-SEO okuzenzakalelayo ngokuphelele kwemiphumela yokusesha kanye nezincomo zenethiwekhi ye-neural.
Izitayela ezifanayo
- ElevenLabs — Indatshana yesithombe enemibala efudumele nezihloko ezimfushane. Incwadi yokubhala yesitayela seBauhaus—iphepha elinombala wegobolondo leqanda, uyinki omnyama, kanye nophawu olulodwa oluphuzi noluphuzi lokubonisa umkhiqizo.
- Awesomic — I-zinc mesh yokuhlela enezimpawu zokubhala eziwolintshi ezikhumbuza i-confetti
- Monad — iphephabhuku lobuchwepheshe lokuhlela ngesikhumba esifudumele
- Dub — Iphaneli yokulawula iphepha lelayisi elingacwebezeli kahle le-Link
- Seline Analytics — Ithebula lokuhlaziya elithule ephepheni elifudumele
- Anthropic — Ijenali yesayensi yensimu ekhuluma nge-vellum efudumele—izindawo ezizolile ze-ivory, izihloko zokuhlela ezicacile, kanye nokugqamisa okukodwa kobumba okuvela kuphela lapho kudingeka isenzo.
- Calendly — Uyinki oluhlaza okwesibhakabhaka onsundu obandayo
- Augen Pro — Isethulo esimhlophe se-Apple sibonisa umbala oluhlaza okwesibhakabhaka okhanyayo, ongenasisindo, njengophawu olulodwa endaweni eyodwa.
- Antimetal — Umlando wokuhlela ephepheni elinokhilimu—ukusa okuthule ephephabhukwini lesayensi, lapho ukuzibamba kuveza ukuzethemba khona kanye nama-serif enza umsebenzi onzima
- Perk — Ilayimu kagesi ephepheni elifudumele lesikhumba
- Ditto — Indawo yokusebenzela ekhanyiswe yilanga edala amasampula ezimbali zasendle. Izindawo ezifudumele zokhilimu, umbala ophuzi okhanyayo oyisisekelo, uyinki oluhlaza okwesibhakabhaka ojulile, imibala yemvelo eqhakaza ngemuva kwesiqephu.
- Officevibe — Umagazini wokuhlela okhuluma ngephepha elifudumele elinombala okhilimu. Cabanga ngendatshana ecatshangelwe kahle ngokuphathwa kwe-HR, eyethulwe njengomkhiqizo—ifonti ye-cursive serif ehleba ngokusebenzisa isikhombikubona sesimanje esiluhlaza okwesibhakabhaka.