Notion
Akwụkwọ ndetu akwụkwọ na-ekpo ọkụ n'anwụ ehihie
Ọdịdị nke Notion dị ka akwụkwọ ndetu a hụrụ n'anya n'ehihie: kanvas na-ekpo ọkụ, nke na-eme ka ọ dị nro (#f6f5f4) nke na-adị ka ihe na-emetụ aka kama ịbụ ihe na-adịghị ọcha, nke na-eme ka ọ dị mma, nke na-enye aka na mbipụta ngwaahịa ahụ, na agba ejiri dị ka akara edemede dị mkpụmkpụ - ngwaa "pills" nke peach na-egosipụta, otu acha anụnụ anụnụ na-akwado isi ihe omume ahụ, na ọtụtụ agba olu (coral, amber, sky, midnight) na-agba ndabere kaadị ahụ dị ka ihe mmado. A na-ahazi kaadị ndị ahụ na kanvas nwere ókèala na nkuku dị gịrịgịrị - enweghị onyinyo, enweghị chrome - dị ka akụkụ nke akwụkwọ ndetu Moleskine. Ihe nkiri na-atọ ọchị ma na-agba mmiri, yana mgbanwe dị nro na 200ms na ihe nkiri agwa na-eme ka interface ahụ dị ndụ na-enweghị ịchọ mma.
N'etiti, obosara kachasị elu dị ihe dị ka 1440px. Isi ihe bụ mkpokọta etiti: ahịrị nke akara ngosi → isi okwu ukwu nwere mkpụrụ ọgwụ agba agbakwunyere → isi okwu → ahịrị nwere bọtịnụ oku abụọ → nnukwu UI ngwaahịa. N'okpuru ihe bụ isi, ngalaba na-agbanwe n'etiti grid nke kaadị ọcha na panel olu agba zuru oke. Mgbidi akara ngosi bụ grid otu ahịrị etiti nke akara ngosi ndị mmekọ na isi awọ. Blọk atụmatụ ahụ na-eji nhazi kọlụm abụọ (ederede dị n'aka ekpe, panel agba n'aka nri), na-agbanwe aka ekpe gaa n'aka nri n'etiti ngalaba. Ngalaba "Jụọ ndị enyemaka gị mgbe achọrọ ya" na-eji grid kaadị 2x2, ebe kaadị elu na-eburu obosara zuru oke, a na-ekewa ahịrị ala n'ime kọlụm abụọ hà nhata. Ọwara dị n'etiti ngalaba dị oke (~80px), na-emepụta ụda kwụ ọtọ dị jụụ. Njemgharị ahụ bụ ogwe elu edobere 64px ogologo nwere ihe igodo etiti na bọtịnụ ihe omume edoziri aka nri.
Ihe osise dị oke mkpa, na-enweghị foto. A na-ewulite asụsụ anya na akara ngosi dị larịị, nke e sere ese (akụkụ gbara gburugburu na okirikiri agba 2px), ihe ịchọ mma nkịtị (squiggles aka sere, glitter, akụ, ọdịdị okooko), na ihe ngosi nke interface onye ọrụ nke ngwaahịa ahụ. Akara ngosi ndị a na-apụta na windo bụ isi dị ka ahịrị kwụ ọtọ nke avatars asaa ma gbasaa na ibe ahụ dị ka akara edemede egwuregwu. Foto ntanetị ngwaahịa bụ naanị ihe ngosi "ezigbo": ha na-egosi interface Nation n'ezie (bọọdụ Kanban, echiche akwụkwọ, panel ndị nnọchi anya AI) nwere ihe zuru oke na data n'ezie. Nkowa ngwaahịa dị na windo bụ isi buru ibu, etiti, ma na-atụ otu onyinyo nke kewapụrụ ya na kanvas. Enweghị foto ndụ, enweghị onyonyo ngwaahịa, enweghị ihe ngosi 3D nkịtị.
Paletị
Akara
- Notion Blue
#0075de— Isi ihe na-ejupụta bọtịnụ oku-n'ihe omume (CTA), olu dị na bọtịnụ ọrụ na-agagharị, na bọtịnụ ihe omume jupụtara bụ naanị atụmatụ agba dị na sistemụ fọrọ nke nta ka ọ bụrụ monochrome nke juputara nke ọma iji hụ dị ka mgba ọkụ.
Na-anọpụ iche
- Paper Warmth
#f6f5f4— Ihe osise ibe ahụ, ndabere windo bụ isi, na ndabere ngalaba niile bụ agba na-ekpo ọkụ, nke na-eme ka sistemụ ahụ nwee mmetụta analog. - Pure White
#ffffff— Elu kaadị, ogwe e welitere elu, ndabere akara ngosi, ederede dị iche na kaadị gbara ọchịchịrị. - Ink Black
#000000— Ederede bụ isi, njikọ ụzọ, isi okwu - ejiri ya mee ihe n'ụzọ dị iche iche (100%, 95%, 90%, 60%, 40%, 20%) iji wuo usoro nhazi na-etinyeghị agba ọhụrụ. - Charcoal
#111111— Nhọrọ ederede gbara ọchịchịrị maka mpaghara UI ebe ojii dị ọcha ga-adị oke njọ. - Stone
#757575— Ederede igodo nke abụọ, ederede enyemaka dara ogbi, akara bọtịnụ agbanyụrụ - ink alfa 60% - Graphite
#615d59— Isi ihe odide ahụ nwere ụda ọkụ - isi awọ aja aja, nke kwekọrọ na ndabere ọkụ.
Ụdị edemede
site na 12 ruo 96px · nzọụkwụ iri
- NotionInter — nnọchi: Inter · ihe nhazi 400, 500, 600, 700 · Isi mkpụrụedemede sans-serif bụ nke na-eme ka mmadụ nwee ọdịdị ala, nke nwere obere nkọwa, nke a na-eji na nha 400 maka ederede ahụ, 500 maka ịnyagharịa/njikwa onye ọrụ, na 600-700 maka isi okwu. Nha mkpụrụedemede ahụ na-eji oghere mkpụrụedemede na-adịghị mma na nha buru ibu (-4.6px na 96px, -2px na 72px), nke na-eme ka isi okwu ahụ dị obere ma nwee obi ike, kama ikuku.
- Lyon Text — nnọchi: Source Serif Pro · ihe nhazi 400 · A na-eji mkpụrụedemede serif nke nchịkọta akụkọ, nke edobere maka akụkụ dị iche iche nke isi ederede na okwu mmeghe nke ngalaba, eme ihe n'ụzọ dị mfe (ugboro anọ) iji nye ibu arọ nke mkpụrụedemede, dị ka okwu e kwuru na nhazi magazin. Ọ na-arụ ọrụ dị ka olu sistemụ kama ịbụ usoro nhazi yiri ibe ya.
Oge na ụdị
| Ebumnuche | Ihe ọ pụtara |
|---|---|
| Njupụta | nkezi |
| Nzọụkwụ bụ isi | 8px |
| Redịọs bọtịnụ | 8px |
| Redịọs kaadị | 12px |
| Onyinyo | mba - ókèala kama onyinyo |
| N'etiti ngalaba | 80px |
| Obosara ibe | 1440px |
AI ga-ewulite weebụsaịtị gị n'ụdị Notion ma jupụta ya
- Jupụta ngwaahịa na ozi site na njikọ ahụ - Instagram, TikTok, Facebook.
- Bufee ọdịnaya site na saịtị ochie gị—kpọọ naanị adreesị ahụ.
- Nhazi ọgbara ọhụrụ na injin kacha mma: React ( Next.js) na nhazi sava na nhazi SEO n'ime igbe.
- Nhazi SEO akpaghị aka zuru oke maka nsonaazụ ọchụchọ na ndụmọdụ netwọkụ akwara.
Ụdị ndị yiri ya
- ElevenLabs — Edemede foto n'ụdị ude ọkụ nwere isi akụkọ dị mfe nghọta. Akwụkwọ ndetu ụdị Bauhaus—akwụkwọ nwere agba àkwá, ink ojii, na otu olu odo odo na oroma maka ngosipụta ngwaahịa.
- Awesomic — Ntugharị zinc nke nchịkọta akụkọ nwere akara edemede oroma na-echetara gị confetti
- Monad — akwụkwọ akụkọ teknụzụ nchịkọta akụkọ gbasara akwụkwọ parchment ọkụ
- Dub — Ogwe njikwa akwụkwọ osikapa matte nke Link
- Seline Analytics — Tebụl nyocha dị jụụ dị n'elu akwụkwọ ọkụ
- Anthropic — Akwụkwọ akụkọ sayensị gbasara vellum na-ekpo ọkụ—elu ọdụ́ dị jụụ, isi akụkọ e serifed, na otu olu ụrọ nke na-apụta naanị mgbe ọ dị mkpa ime ihe.
- Calendly — Ink na-acha anụnụ anụnụ gbara ọchịchịrị n'elu mabụl oyi
- Augen Pro — Ngosipụta ọcha nke Apple nwere acha anụnụ anụnụ eletriki, nke na-enweghị ibu, dịka naanị olu ya n'ime oghere monochrome.
- Antimetal — Akụkọ ihe mere eme nke akwụkwọ edemede dị n'akwụkwọ ude—ụtụtụ dị jụụ n'akwụkwọ sayensị, ebe njide onwe onye na-egosi obi ike na serif na-ebuli ibu arọ
- Perk — Lime eletriki dị na akwụkwọ parchment ọkụ
- Ditto — Ụlọ ọrụ ebe a na-eme ihe atụ okooko osisi ọhịa. Elu ude na-ekpo ọkụ, agba ntọala odo odo na-egbuke egbuke, ink anụnụ anụnụ miri emi, agba organic na-acha okooko osisi n'azụ ihe ahụ.
- Officevibe — Magazin nchịkọta akụkọ gbasara akwụkwọ na-acha ude ọkụ. Chee echiche banyere edemede dị mma gbasara njikwa HR, nke a na-egosi dị ka ngwaahịa—mkpụrụedemede serif nke na-ada ụda site na interface acha anụnụ anụnụ nke oge a.