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 အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Calendly — အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်
- Augen Pro — Apple ရဲ့ အဖြူရောင်တင်ဆက်မှုမှာ ဆေးပညာဆန်ပြီး အလေးချိန်မရှိတဲ့ လျှပ်စစ်အပြာရောင်ကို တစ်မူထူးခြားတဲ့အရောင်အဖြစ် အသုံးပြုထားပါတယ်။
- Antimetal — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် မှတ်တမ်းတစ်ခု—သိပ္ပံဂျာနယ်တစ်စောင်တွင် တိတ်ဆိတ်ငြိမ်သက်သော မနက်ခင်းတစ်ခု၊ ထိန်းချုပ်နိုင်စွမ်းက ယုံကြည်မှုကို ဖော်ဆောင်ပေးပြီး serif များက လေးလံသောဝန်ကို လုပ်ဆောင်ပေးသည်။
- Perk — ပူနွေးသော စက္ကူပေါ်တွင် လျှပ်စစ်ထုံး
- Ditto — နေရောင်အောက်က တောပန်းနမူနာတွေကို ဖန်တီးနေတဲ့ အလုပ်ရုံ။ နွေးထွေးတဲ့ ခရင်မ်မျက်နှာပြင်တွေ၊ တက်ကြွတဲ့ အဝါရောင်အောက်ခံအရောင်၊ နက်ရှိုင်းတဲ့ အပြာရောင်မင်တွေ၊ လက်ရာရဲ့နောက်ကွယ်မှာ ပွင့်လန်းနေတဲ့ အော်ဂဲနစ်အရောင်ပုံစံတွေ။
- Officevibe — နွေးထွေးသော ခရင်မ်ရောင်စက္ကူပေါ်တွင် ရေးသားထားသော အယ်ဒီတာ့အာဘော် မဂ္ဂဇင်းတစ်စောင်။ HR စီမံခန့်ခွဲမှုဆိုင်ရာ အတွေးအမြင်ရှိသော ဆောင်းပါးတစ်ပုဒ်ကို ထုတ်ကုန်တစ်ခုအဖြစ် တင်ပြထားသည်—ခေတ်မီ အပြာရောင် မျက်နှာပြင်မှတစ်ဆင့် တိုးတိုးလေး ရေးသားထားသော လက်ရေးဆက် serif ဖောင့်တစ်ခု။