Notion
နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
Notion ရဲ့ interface ဟာ နေ့ခင်းကြောင်တောင်မှာ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်လိုပါပဲ- နွေးထွေးပြီး ခရင်မ်ရောင်ကင်းဗတ်စ် (#f6f5f4) ဟာ ပိုးသတ်ထားတဲ့အစား ထိတွေ့ရလွယ်ကူတဲ့ ခံစားချက်ကို ပေးစွမ်းပြီး ထုတ်ကုန်မိတ္တူကို အယ်ဒီတာ့အာဘော်အလေးချိန်တိုးစေတဲ့ ကျယ်ပြန့်တဲ့ sans-serif စာလုံးပုံစံနဲ့ ရှားပါးတဲ့ ပုဒ်ဖြတ်ပုဒ်ရပ်အဖြစ် အသုံးပြုထားတဲ့ အရောင်- peach "pills" က ကြိယာတွေကို မီးမောင်းထိုးပြပြီး၊ အပြာရောင်တစ်ခုတည်းက အဓိကလုပ်ဆောင်ချက်ကို အထောက်အကူပြုပြီး လှည့်ပတ်နေတဲ့ accent hues (coral, amber, sky, midnight) တွေက ကတ်နောက်ခံကို စတစ်ကာတွေလို အရောင်ခြယ်ပေးပါတယ်။ ကတ်တွေကို Moleskine မှတ်စုစာအုပ်ရဲ့ မျဉ်းကြောင်းတွေလို အနားသတ်နဲ့ ထောင့်ပါးလေးတွေပါတဲ့ ကင်းဗတ်စ်ပေါ်မှာ စီစဉ်ထားပါတယ်- အရိပ်တွေ၊ ခရုမ်းတွေ မပါပါဘူး- Moleskine မှတ်စုစာအုပ်ရဲ့ မျဉ်းကြောင်းတွေလိုပါပဲ။ animation က ပျော်စရာကောင်းပြီး ပျော့ပျောင်းတဲ့ပုံစံရှိပြီး 200ms မှာ ချောမွေ့တဲ့ transition တွေနဲ့ ပျော့ပျောင်းတဲ့ character animation တွေက interface ကို အလှဆင်စရာမလိုဘဲ အသက်ဝင်စေပါတယ်။
အလယ်ဗဟိုတွင်ထားလျှင် အများဆုံးအကျယ်ကို 1440px ခန့်အထိ ကန့်သတ်ထားသည်။ အဓိကဒြပ်စင်မှာ အလယ်ဗဟိုတွင်ရှိသော stack ဖြစ်သည်- သင်္ကေတများတန်း → ထည့်သွင်းထားသော အရောင်ဆေးပြားပါသည့် ကြီးမားသော နှစ်ကြောင်းပါ ခေါင်းစဉ် → ခေါင်းစဉ်ခွဲ → လုပ်ဆောင်ချက်ခေါ်ဆိုရန် ခလုတ်နှစ်ခုပါသည့် အတန်း → ထုတ်ကုန် UI mockup ကြီးတစ်ခု။ အဓိကဒြပ်စင်အောက်တွင် အပိုင်းများသည် အဖြူရောင်ကတ်များ၏ grid များနှင့် အရောင်အပြည့်ဖြင့် အလှဆင်ထားသော panel များအကြား တစ်လှည့်စီဖြစ်သည်။ လိုဂိုနံရံသည် မိတ်ဖက်လိုဂိုများ၏ အလယ်ဗဟိုတွင် မီးခိုးရောင်စကေးဖြင့် တစ်တန်းတည်းပါ grid တစ်ခုဖြစ်သည်။ feature block များသည် ကော်လံနှစ်ခုပါ layout (ဘယ်ဘက်တွင် စာသား၊ ညာဘက်တွင် အရောင်ပါ panel) ကို အသုံးပြုပြီး အပိုင်းများအကြား ဘယ်မှ ညာသို့ တစ်လှည့်စီဖြစ်သည်။ "Ask your assistant on demand" အပိုင်းသည် 2x2 ကတ် grid ကို အသုံးပြုပြီး အပေါ်ဆုံးကတ်သည် အကျယ်အပြည့်ကို ယူထားပြီး အောက်ဆုံးတန်းကို ညီမျှသောကော်လံနှစ်ခုအဖြစ် ပိုင်းထားသည်။ အပိုင်းများအကြားရှိ gutters များသည် ကျယ်ဝန်းသည် (~80px)၊ တည်ငြိမ်သော vertical rhythm ကို ဖန်တီးပေးသည်။ navigation သည် အလယ်ဗဟိုတွင်ရှိသော navigation element များနှင့် ညာဘက်တွင် ချိန်ညှိထားသော action ခလုတ်များပါသည့် fixed 64px အမြင့်ရှိသော အပေါ်ဘားတစ်ခုဖြစ်သည်။
ပုံဥပမာများသည် အဓိကကျပြီး ဓာတ်ပုံများ မပါဝင်ပါ။ အမြင်အာရုံဘာသာစကားကို ပြားချပ်ချပ်၊ ရုပ်ပုံသင်္ကေတများ (2px အရောင်စက်ဝိုင်းများဖြင့် လုံးဝန်းသောအနားများ)၊ abstract အလှဆင်ဒြပ်စင်များ (လက်ဖြင့်ရေးဆွဲထားသော squiggles၊ glitter များ၊ မြားများ၊ ပန်းပွင့်ပုံများ) နှင့် ထုတ်ကုန်၏ user interface ၏ mockup များဖြင့် တည်ဆောက်ထားသည်။ သင်္ကေတများသည် main window တွင် avatar ခုနစ်ခုပါ အလျားလိုက်တန်းအဖြစ် ပေါ်လာပြီး စာမျက်နှာတစ်လျှောက်တွင် ပျော်ရွှင်ဖွယ်ကောင်းသော ပုဒ်ဖြတ်ပုဒ်ရပ်များအဖြစ် ပြန့်ကျဲနေသည်။ ထုတ်ကုန် screenshot များသည် တစ်ခုတည်းသော "အစစ်အမှန်" အမြင်အာရုံဒြပ်စင်များဖြစ်သည်- ၎င်းတို့သည် အစိတ်အပိုင်းအပြည့်အစုံနှင့် တကယ့်ဒေတာများပါရှိသော Notion interface (Kanban board များ၊ document views များ၊ AI agent panels) ကို ပြသထားသည်။ main window ရှိ ထုတ်ကုန် mockup သည် ကြီးမားပြီး အလယ်ဗဟိုတွင်ရှိပြီး ၎င်းကို canvas နှင့် ခွဲထားသော အရိပ်တစ်ခုတည်းကို ဖြစ်ပေါ်စေသည်။ လူနေမှုပုံစံဓာတ်ပုံများ၊ stock image များ၊ abstract 3D render များ မရှိပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Notion Blue
#0075de— တက်ကြွသော navigation တွင် အသားပေးဖော်ပြသည့် call-to-action (CTA) ခလုတ်ကို ဖြည့်သည့် အဓိကအစိတ်အပိုင်းဖြစ်သည့် ဖြည့်ထားသော action ခလုတ်များသည် monochrome စနစ်တွင် switch အဖြစ် မြင်နိုင်လောက်အောင် saturated ဖြစ်သော တစ်ခုတည်းသော အရောင်ပေါင်းစပ်မှုဖြစ်သည်။
ကြားနေ
- Paper Warmth
#f6f5f4— စာမျက်နှာကင်းဗတ်၊ အဓိကဝင်းဒိုးနောက်ခံနှင့် အပိုင်းနောက်ခံအားလုံးသည် နွေးထွေးပြီး အနည်းငယ်အညိုရောင်ဖြစ်ပြီး စနစ်ကို ထိတွေ့နိုင်သော၊ အန်နာလော့အငွေ့အသက်ပေးစွမ်းသည်။ - Pure White
#ffffff— ကတ်မျက်နှာပြင်များ၊ မြှင့်တင်ထားသော အကန့်များ၊ လိုဂိုနောက်ခံ၊ မှောင်သောကတ်များပေါ်တွင် ဆန့်ကျင်ဘက်စာသား။ - Ink Black
#000000— အဓိကစာသား၊ လမ်းညွှန်လင့်ခ်များ၊ ခေါင်းစဉ်များ - အရောင်အသစ်များထည့်ခြင်းမရှိဘဲ အဆင့်ဆင့်တည်ဆောက်ရန်အတွက် မတူညီသောပွင့်လင်းမြင်သာမှု (၁၀၀%၊ ၉၅%၊ ၉၀%၊ ၆၀%၊ ၄၀%၊ ၂၀%) ဖြင့်အသုံးပြုသည်။ - Charcoal
#111111— စစ်မှန်သောအနက်ရောင်သည် အလွန်ကြမ်းတမ်းလွန်းသည်ဟု ထင်ရသည့် UI နေရာများအတွက် မှောင်သောစာသားရွေးချယ်မှု။ - Stone
#757575— ဒုတိယလမ်းညွှန်စာသား၊ အသံတိတ်အကူအညီစာသား၊ ခလုတ်တံဆိပ်များကို ပိတ်ထားသည် - မင် ၆၀% အယ်လ်ဖာ - Graphite
#615d59— အဓိကစာသားသည် နွေးထွေးသောအရောင် - အညိုရောင်ဖျော့ဖျော့ဖြစ်ပြီး ၎င်းသည် နွေးထွေးသောနောက်ခံနှင့် လိုက်ဖက်ညီသည်။
စာလုံးပုံစံ
၁၂ မှ ၉၆px အထိ · ၁၀ ဆင့်
- NotionInter — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 600, 700 · အဓိက sans-serif ဖောင့်သည် သိမ်မွေ့သော သိမ်မွေ့သော သိမ်မွေ့မှုများပါရှိသော ဂျီဩမေတြီ လူသားဝါဒဆန်သော ဖောင့်တစ်ခုဖြစ်ပြီး အရွယ်အစားများမှာ body text အတွက် 400၊ navigation/user interface အတွက် 500 နှင့် heading အတွက် 600-700 တွင် အသုံးပြုသည်။ ဖောင့်စကေးသည် အရွယ်အစားကြီးများတွင် (96px တွင် -4.6px၊ 72px တွင် -2px) အနုတ်လက္ခဏာစာလုံးအကွာအဝေးကို အသုံးပြုသောကြောင့် ခေါင်းစဉ်ကို လေဝင်လေထွက်ကောင်းမည့်အစား ပိုမိုကျစ်လျစ်ပြီး ယုံကြည်မှုရှိစေသည်။
- Lyon Text — အစားထိုးခြင်း: Source Serif Pro · မျဉ်းကြောင်းများ 400 · အဓိကစာသား၏ အပိုင်းတစ်ခုချင်းစီနှင့် အပိုင်းမိတ်ဆက်များအတွက် သီးသန့်ထားရှိသော အယ်ဒီတာ့အာဘော် serif ဖောင့်ကို မဂ္ဂဇင်းအပြင်အဆင်ရှိ ကိုးကားချက်တစ်ခုနှင့်ဆင်တူသော စာလုံးပုံစံ၏ စာပေအလေးချိန်ကို ပေးစွမ်းရန်အတွက် အနည်းငယ်သာ (လေးကြိမ်) အသုံးပြုသည်။ ၎င်းသည် ပြိုင်တူအဆင့်ဆင့်ထက် စနစ်တကျ အသံထွက်အဖြစ် လုပ်ဆောင်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 8px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1440px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Notion ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Mollie — ကက်ရှ်မီးယားကောင်တာ၊ မှောင်သောစာရင်းဇယား။ အနက်ရောင်စာသားတစ်ဝိုက်တွင် အယ်ဒီတာ့အာဘော်ဒီဇိုင်းအတွက် အဖြူရောင်နေရာလွတ်အလုံအလောက်ချန်ထားပါ၊ ထို့နောက် နွေးထွေးသောခရင်မ်များ၊ အက်စ်ပရက်ဆိုအညိုရောင်များနှင့် ငွေပေးချေမှုနည်းလမ်းများ၏ ထိတွေ့နိုင်သောဓာတ်ပုံများဖြင့် ထုတ်ကုန်နှင့်သက်ဆိုင်သောအချက်များကို အားဖြည့်ပါ။
- Kagi — သီးခြားစာဖတ်ခန်း။ တိတ်ဆိတ်ငြိမ်သက်မှုကို ဖြိုခွင်းရန် သိမ်မွေ့သော ခရမ်းရောင်အသားပေးမှုများနှင့် နွေးထွေးသော pastel မျက်နှာပြင်များကို အသုံးပြု၍ ရဲရင့်သော ဂရပ်ဖိုက်စာသားပတ်လည်တွင် ပွင့်လင်းသောအဖြူရောင်နေရာလွတ်တစ်ခု ဖန်တီးပါ။
- Milanote — Milanote သည် သီးသန့်ဖန်တီးမှုစတူဒီယိုတစ်ခုဖြစ်သည်။ မျောနေသော ရုပ်ထွက်ဘုတ်များကို အသုံးပြု၍ အယ်ဒီတာ့အာဘော်ပြခန်းပုံစံ စာမျက်နှာများကို ဖန်တီးပါ- မှောင်မိုက်သောဘောင်ခတ်ထားသော နံရံများ၊ အဖြူရောင်ပြသရန်နေရာနှင့် နူးညံ့သောအနက်ရှိသော ဖန်သားပြင်ဓာတ်ပုံများ။
- Co2 — ဆောင်းရာသီအလင်းရောင်အောက်က ရာသီဥတုမြေပုံ။ serif ခေါင်းစဉ်များ၊ အမျိုးအစားကုဒ်ဒေတာများနှင့် ရေခဲပုံများသည် ကျယ်ပြန့်သော အဖြူရောင်အနားသတ်များကို မီးမောင်းထိုးပြသည့် လေကြောင်းစာရွက်စာတမ်းရှုခင်းကဲ့သို့သော စာမျက်နှာများကို ဖန်တီးပါ။
- GitButler — စာသားအဆုံးတွင် စိမ်းပြာရောင်။ သိမ်မွေ့သော နည်းပညာဆိုင်ရာ ဇယားကွက်များ၊ နွေးထွေးသော ဂရပ်ဖိုက်မျက်နှာပြင်များနှင့် သိမ်မွေ့သော စိမ်းပြာရောင် အသားပေးဖော်ပြချက်ပါရှိသော မြင့်မားသော ဆန့်ကျင်ဘက် serif ခေါင်းစဉ်များ ပေါင်းစပ်မှု။
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Calendly — အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်