Notion
Үдийн наран дор дулаахан цаасан дэвтэр
Notion-ийн интерфэйс нь өдрийн цагаар хайртай цаасан дэвтэр шиг харагддаг: цэвэр биш харин хүрэлцэхүйц мэдрэмж төрүүлдэг дулаан, өтгөн зотон даавуу (#f6f5f4), өгөөмөр sans-serif typography нь бүтээгдэхүүний хуулбарт редакцийн жинг нэмж, сийрэг цэг таслал болгон ашигласан өнгө - тоорын "эм" нь үйл үгсийг тодруулдаг, ганц цэнхэр гол үйлдлийг бэхэлдэг, эргэлддэг өргөлтийн өнгөнүүд (шүрэн, хув, тэнгэр, шөнө дунд) нь картын дэвсгэрийг наалт шиг өнгөөр буддаг. Картуудыг зотон даавуун дээр нимгэн хүрээ, булангууд - сүүдэргүй, хромгүй - Moleskine дэвтрийн доторлогоотой хэсгүүд шиг байрлуулсан. Анимаци нь тоглоомтой, пүрштэй бөгөөд 200мс-ийн жигд шилжилтүүд болон гоёл чимэглэлийн бус харин интерфэйсийг амьдруулдаг пүрштэй дүрийн анимэйшнуудтай.
Төвлөрсөн, хамгийн их өргөн нь ойролцоогоор 1440 пикселээр хязгаарлагддаг. Үндсэн элемент нь төвлөрсөн стек юм: тэмдэгтүүдийн эгнээ → суулгагдсан өнгөт эм бүхий том хоёр мөртэй гарчиг → дэд гарчиг → хоёр үйлдэлд уриалсан товчлууртай мөр → бүтээгдэхүүний том UI загвар. Үндсэн элементийн доор хэсгүүд нь цагаан картын тор болон бүрэн өнгийн өргөлтийн самбаруудын хооронд ээлжлэн байрладаг. Логоны хана нь саарал өнгийн түншийн логоны төвлөрсөн нэг эгнээний тор юм. Онцлог блокууд нь хэсгүүдийн хооронд зүүнээс баруун тийш ээлжлэн хоёр баганын зохион байгуулалтыг ашигладаг (зүүн талд текст, баруун талд өнгөт самбар). "Туслахаасаа хүсэлт гаргавал асуу" хэсэг нь 2x2 картын тор ашигладаг бөгөөд дээд карт нь бүтэн өргөнийг эзэлдэг бөгөөд доод мөр нь хоёр тэнцүү багана болгон хуваагддаг. Хэсгүүдийн хоорондох ус зайлуулах хоолойнууд нь өргөн (~80 пиксел) бөгөөд тайван босоо хэмнэлийг бий болгодог. Навигаци нь төвлөрсөн навигацийн элементүүд болон баруун тийш зэрэгцүүлсэн үйлдлийн товчлууруудтай 64 пиксел өндөртэй тогтмол дээд баар юм.
Зураггүй, зурагтай дүрслэлүүд хамгийн чухал. Харааны хэл нь хавтгай, зурагтай тэмдэг (2 пикселийн өнгийн тойрог хэлбэрээр бөөрөнхий ирмэгүүд), хийсвэр чимэглэлийн элементүүд (гараар зурсан мушгиралт, гялтганасан дүрс, сум, цэцгийн хэлбэр) болон бүтээгдэхүүний хэрэглэгчийн интерфэйсийн загварууд дээр суурилдаг. Тэмдэгтүүд нь үндсэн цонхонд долоон аватарын хэвтээ эгнээ хэлбэрээр гарч ирэх бөгөөд хуудсан дээр тоглоомтой цэг таслал хэлбэрээр тархсан байдаг. Бүтээгдэхүүний дэлгэцийн агшин нь цорын ганц "жинхэнэ" харааны элементүүд юм: тэдгээр нь бодит Notion интерфэйсийг (Канбан самбар, баримт бичгийн харагдац, хиймэл оюун ухааны агент самбар) бүрэн элементүүд болон бодит өгөгдөлтэй хамт харуулдаг. Үндсэн цонхонд байгаа бүтээгдэхүүний загвар нь том, төвлөрсөн бөгөөд зотон даавуунаас тусгаарласан ганц сүүдэр тусгадаг. Амьдралын хэв маягийн зураг, сток зураг, хийсвэр 3D дүрслэл байхгүй.
Палетт
Брэнд
- Notion Blue
#0075de— Үйлдэлд дуудах (CTA) товчийг дүүргэдэг гол элемент, идэвхтэй навигацийн өргөлт, дүүрсэн үйлдлийн товчлуурууд нь бараг монохром систем дэх унтраалга гэж ойлгогдохоор хангалттай ханасан цорын ганц өнгөний схем юм.
Төвийг сахисан
- Paper Warmth
#f6f5f4— Хуудасны зураг, үндсэн цонхны дэвсгэр болон хэсгийн дэвсгэр нь бүгд дулаан, бага зэрэг шаргал өнгөтэй тул системд хүрэлцэхүйц, аналог мэдрэмж төрүүлдэг. - Pure White
#ffffff— Картын гадаргуу, товгор самбар, логоны дэвсгэр, бараан картууд дээрх тодосгогч текст. - Ink Black
#000000— Үндсэн текст, навигацийн холбоосууд, гарчгууд - шинэ өнгө нэмэхгүйгээр шатлал бий болгохын тулд өөр өөр тунгалаг байдалтай (100%, 95%, 90%, 60%, 40%, 20%) ашигладаг. - Charcoal
#111111— Цэвэр хар өнгө хэтэрхий хатуу харагдах хэрэглэгчийн интерфэйсийн хэсгүүдэд зориулсан бараан текстийн сонголт. - Stone
#757575— Хоёрдогч навигацийн текст, дуугүй туслах текст, идэвхгүй товчлуурын шошго - 60% бэхний альфа - Graphite
#615d59— Үндсэн текст нь дулаан өнгө аястай - бор саарал өнгөтэй бөгөөд энэ нь дулаан дэвсгэртэй зохицдог.
Типографи
12-оос 96 пиксел хүртэл · 10 алхам
- NotionInter — солих: Inter · тоймууд 400, 500, 600, 700 · Үндсэн sans-serif фонт нь нарийн мэдрэмжтэй геометрийн хүмүүнлэг фонт бөгөөд үндсэн текстэд 400, навигаци/хэрэглэгчийн интерфэйсэд 500, гарчиг хэсэгт 600-700 хэмжээтэй ашиглагддаг. Фонтын хэмжээ нь том хэмжээтэй (96 пиксел дээр -4.6 пиксел, 72 пиксел дээр -2 пиксел) үед сөрөг үсгийн зайг түрэмгий ашигладаг бөгөөд энэ нь гарчгийг агаартай биш харин илүү авсаархан, өөртөө итгэлтэй болгодог.
- Lyon Text — солих: Source Serif Pro · тоймууд 400 · Үндсэн текстийн бие даасан хэсгүүд болон хэсгийн оршилд зориулагдсан редакцийн сериф фонтыг сэтгүүлийн загварт иш татсантай төстэй фонтын утга зохиолын жинг өгөхийн тулд бага зэрэг (дөрвөн удаа) ашигладаг. Энэ нь зэрэгцээ шатлалын оронд системийн өргөлт болж үйлчилдэг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 8px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг Notion хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- Dub — Линкийн царцсан будааны цаасан удирдлагын самбар
- Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
- Anthropic — Дулаан илгэн цаасны тухай шинжлэх ухааны салбарын сэтгүүл - тайван зааны ясан гадаргуу, сериф хээтэй редакцийн гарчиг, зөвхөн үйлдэл шаардлагатай үед гарч ирдэг ганц шавар аялга.
- Calendly — Хүйтэн гантиг дээр хар хөх бэх
- Augen Pro — Apple-ийн цагаан өнгөний дүрслэл нь монохром орон зайд цорын ганц тод өнгө болгон эмх цэгцтэй, жингүй, цахилгаан цэнхэр өнгийг хослуулсан.
- Antimetal — Цөцгий цаасан дээрх редакцийн тэмдэглэл - шинжлэх ухааны сэтгүүлд өнгөрүүлсэн нам гүм өглөө, биеэ барих нь өөртөө итгэх итгэлийг илэрхийлж, серифүүд хүнд ажлыг хийдэг.
- Perk — Дулаан илгэн цаасан дээр цахилгаан лайм
- Ditto — Нарны гэрэлд зэрлэг цэцгийн дээж бүтээх цех. Дулаан цөцгийтэй гадаргуу, тод шар суурь өнгө, гүн хар хөх бэх, бүтээлийн ард дэлбээлж буй органик өнгөний хэлбэрүүд.
- Officevibe — Дулаан цөцгий өнгийн цаасан дээрх редакцийн сэтгүүл. Хүний нөөцийн менежментийн талаарх бодлыг төрүүлэм, орчин үеийн цэнхэр интерфэйсээр шивнэн бичигдсэн курсив сериф фонтыг бүтээгдэхүүн болгон танилцуулж байна гэж төсөөлөөд үз дээ.