Notion
Дафтари коғазии гарм дар офтоби нисфирӯзӣ
Интерфейси Notion дар равшании рӯз ба як дафтарчаи коғазии дӯстдошта монанд аст: як матои гарм ва қаймоқранг (#f6f5f4), ки ба ҷои стерилизатсияшуда, типографияи саховатманди sans-serif ба матни маҳсулот вазни таҳрирӣ медиҳад ва ранге, ки ҳамчун аломатҳои пунктуатсионӣ истифода мешавад - "ҳабҳои шафтолу" феълҳоро таъкид мекунанд, як лангари кабуд амали асосиро мустаҳкам мекунад ва як қатор рангҳои таъкидӣ (марҷон, каҳрабо, осмон, нисфи шаб) заминаҳои кортро мисли стикерҳо ранг мекунанд. Кортҳо дар матои канорҳо ва кунҷҳои тунук - бе сояҳо, бе хром - ба монанди қисмҳои хаткашидаи дафтарчаи Moleskine ҷойгир карда шудаанд. Аниматсия бозича ва пружинӣ аст, бо гузаришҳои ҳамвор дар 200 мс ва аниматсияҳои пружинӣ, ки ба интерфейс ҳаёт мебахшанд, бе ороиш.
Дар марказ ҷойгир карда шуда, паҳнои максималӣ тақрибан ба 1440 пиксел маҳдуд аст. Унсури асосӣ як стек дар марказ ҷойгир аст: як қатор рамзҳо → сарлавҳаи калони дусатра бо як планшети рангаи дарунсохт → зерсарлавҳа → як сатр бо ду тугмаи даъват ба амал → як макети калони UI маҳсулот. Дар зери унсури асосӣ, бахшҳо байни шабакаҳои кортҳои сафед ва панелҳои аксенти пурраранг иваз мешаванд. Девори логотип як шабакаи яксатри марказонидашудаи логотипҳои шарик дар ранги хокистарӣ мебошад. Блокҳои хусусиятҳо аз тарҳбандии дусутунӣ (матн дар чап, панели ранга дар рост) истифода мебаранд, ки байни бахшҳо аз чап ба рост иваз мешаванд. Бахши "Аз ёварони худ дар ҳолати дархост пурсед" аз шабакаи кортҳои 2x2 истифода мебарад, ки дар он корти болоӣ паҳнои пурраро ишғол мекунад ва сатри поёнӣ ба ду сутуни баробар тақсим мешавад. Новаҳо байни бахшҳо фаровонанд (~80 пиксел), ки ритми амудии оромро эҷод мекунанд. Навигатсия як сатри болоии собит бо баландии 64 пиксел бо унсурҳои навигатсия дар марказ ва тугмаҳои амал дар тарафи рост ҷойгиршуда мебошад.
Тасвирҳо бе аксҳо хеле муҳиманд. Забони визуалӣ бар асоси рамзҳои ҳамвор ва тасвиршуда (кунҷҳои мудаввар дар доираҳои рангаи 2 пиксел), унсурҳои ороишии абстрактӣ (хатҳои дастӣ кашидашуда, дурахшон, тирҳо, шаклҳои гул) ва макетҳои интерфейси корбарии маҳсулот сохта шудааст. Рамзҳо дар равзанаи асосӣ ҳамчун як қатори уфуқии ҳафт аватар пайдо мешаванд ва дар тамоми саҳифа ҳамчун аломатҳои пунктуатсионӣ пароканда шудаанд. Скриншотҳои маҳсулот ягона унсурҳои визуалии "воқеӣ" мебошанд: онҳо интерфейси воқеии Notion (лавҳаҳои Kanban, намудҳои ҳуҷҷатҳо, панелҳои агенти зеҳни сунъӣ)-ро бо маҷмӯи пурраи унсурҳо ва маълумоти воқеӣ нишон медиҳанд. Макети маҳсулот дар равзанаи асосӣ калон, марказӣ аст ва як сояеро меандозад, ки онро аз холст ҷудо мекунад. Дар он аксҳои тарзи зиндагӣ, тасвирҳои саҳҳомӣ, рендерҳои абстрактии 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 барои сарлавҳаҳо истифода мешавад. Миқёси шрифт аз фосилаи манфии ҳарфҳои хашмгин дар андозаҳои калонтар (-4.6 пиксел дар 96 пиксел, -2 пиксел дар 72 пиксел) истифода мебарад, ки сарлавҳаро нисбат ба ҳаво фишурдатар ва боэътимодтар мегардонад.
- Lyon Text — ивазкунӣ: Source Serif Pro · контурҳо 400 · Шрифти серифи таҳрирӣ, ки барои бахшҳои алоҳидаи матни асосӣ ва муқаддимавии бахшҳо нигоҳ дошта шудааст, барои додани вазни адабӣ ба шрифт кам истифода мешавад (чор маротиба), ба монанди иқтибос дар тарҳбандии маҷалла. Он ҳамчун лаҳҷаи системавӣ ба ҷои иерархияи параллелӣ амал мекунад.
Фосилаҳо ва шакл
| Мақсад | Маънӣ |
|---|---|
| Зичӣ | миёна |
| Қадами асосӣ | 8px |
| Радиуси тугма | 8px |
| Радиуси корт | 12px |
| Сояҳо | бе марзҳо ба ҷои сояҳо |
| Байни бахшҳо | 80px |
| Паҳнои саҳифа | 1440px |
Соҳиби зеҳни сунъӣ вебсайти шуморо бо услуби Notion месозад ва онро пур мекунад
- Тавассути истинод - Instagram, TikTok, Facebook, маҳсулот ва паёмҳоро пур кунед.
- Мундариҷаро аз сомонаи кӯҳнаи худ интиқол диҳед — танҳо суроғаро муайян кунед.
- Тарроҳии муосир дар беҳтарин муҳаррик: React ( Next.js) бо рендеринги сервер ва беҳсозии SEO аз қуттӣ.
- Беҳсозии пурра автоматии SEO барои натиҷаҳои ҷустуҷӯ ва тавсияҳои шабакаи асаб.
Услубҳои монанд
- ElevenLabs — Эссеи аксӣ бо рангҳои гарми қаймоқӣ бо сарлавҳаҳои нозук. Дафтарчаи услуби Баухаус — коғази ранги пӯсти тухм, ранги сиёҳ ва як лаки арғувонӣ ва норанҷӣ барои намоиши маҳсулот.
- Awesomic — Тӯри руҳии таҳрирӣ бо аломатҳои пунктуатсионӣ, ки конфеттиро ба хотир меорад
- Monad — маҷаллаи таҳририяи техникӣ дар бораи пергаменти гарм
- Dub — Панели идоракунии коғази биринҷи маттӣ дар Link
- Seline Analytics — Мизи таҳлилии ором дар рӯи коғази гарм
- Anthropic — Маҷаллаи илмӣ-саҳроӣ дар бораи пергаменти гарм — сатҳҳои ороми устухонӣ, сарлавҳаҳои таҳририи серифӣ ва лакнети ягонаи гилӣ, ки танҳо вақте пайдо мешавад, ки амал лозим бошад.
- Calendly — Сиёҳи кабуди тира дар мармари хунук
- Augen Pro — Ранги сафеди Apple дорои ранги кабуди барқии клиникӣ, бевазн ва ягона лаҳҷа дар фазои монохром мебошад.
- Antimetal — Як солномаи таҳририя бо коғази қаймоқӣ - як субҳи ором дар маҷаллаи илмӣ, ки дар он худдорӣ эътимодро ифода мекунад ва ҳарфҳои серифӣ кори вазнинро анҷом медиҳанд.
- Perk — Лаймҳои барқӣ дар коғази гарми пергаментӣ
- Ditto — Коргоҳи офтобӣ барои сохтани намунаҳои гулҳои ваҳшӣ. Сатҳҳои гарми қаймоқӣ, ранги асосии зардранги дурахшон, рангҳои кабуди тираи баҳрӣ, шаклҳои ранги органикӣ, ки дар паси асар шукуфтаанд.
- Officevibe — Маҷаллаи таҳририя дар коғази гарми қаймоқранг. Тасаввур кунед, ки як эссеи пурмазмун дар бораи идоракунии захираҳои инсонӣ, ки ҳамчун маҳсулот пешниҳод шудааст - шрифти серифи курсив, ки тавассути интерфейси муосири кабуди осмонӣ пичиррос мезанад.