Seline Analytics
ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
Seline ကို နွေးထွေးသော ကျောက်နောက်ခံ (#fafaf9) တွင် တောက်ပသော အပြာရောင်တစ်ခုတည်းဖြင့် ပုံဖော်ထားပြီး ကျန်အရောင်အားလုံးသည် ကြားနေအရောင်များဖြစ်ပြီး Tailwind ကျောက်အရောင် palette မှ ရေးဆွဲထားသည်။ ခေါင်းစဉ်များကို စိတ်ကြိုက်ဒီဇိုင်းထုတ်ထားသော geometric sans-serif ဖောင့် (roobert) ဖြင့် 400 အလေးချိန်နှင့် ကျဉ်းမြောင်းသော အနုတ်လက္ခဏာစာလုံးအကွာအဝေးဖြင့် ဖော်ပြထားပြီး စာသားကို ပေါ့ပေါ့ပါးပါး၊ တိုးတိုးလေးပြောသကဲ့သို့ ယုံကြည်မှုရှိစေသည်။ UI မျက်နှာပြင်များသည် နွေးထွေးသောနောက်ခံပေါ်တွင် ပေါလောမျောနေပြီး 16px နူးညံ့သော blur တစ်ခုတည်းဖြင့် ပေါလောမျောနေသည်။ ဘောင်များကို ပါးလွှာသော 1px ကျောက်အရောင်ရှိသော မျဉ်းကြောင်းများဖြင့် ဖန်တီးထားပြီး လေးလံသော ပိုင်းခြားကိရိယာများ သို့မဟုတ် panel များအစား အဓိကဖွဲ့စည်းပုံဆိုင်ရာ အစိတ်အပိုင်းအဖြစ် ရက်ရောစွာအသုံးပြုထားသည်။ အပြင်အဆင်သည် အသက်ဝင်သည်- ကျယ်ပြန့်သော ဒေါင်လိုက်စည်းချက်ပေါ်တွင် ဗဟိုပြုထားသော အပြည့်အဝအကျယ်အကြောင်းအရာ၊ ဆေးပြားပုံသဏ္ဍာန် အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသော ထိန်းချုပ်မှုများ၊ ကိုယ်ရည်ကိုယ်သွေးအတွက် mascot ပုံနှင့် ထုတ်ကုန်အထောက်အထားအဖြစ် dashboard screenshot များပါရှိသည်။ အလုံးစုံအယ်ဒီတာ့အာဘော်သည် ခွဲခြမ်းစိတ်ဖြာမှုအရဖြစ်သည်- တည်ငြိမ်သည်၊ monochrome၊ ယုံကြည်မှုရှိပြီး အခြားအရာအားလုံးကို တမင်တကာ ထိန်းချုပ်ထားသောကြောင့် စာမျက်နှာပေါ်တွင် အပြာရောင်လုပ်ဆောင်ချက်တောင်းဆိုမှုသည် အထင်ရှားဆုံးအစိတ်အပိုင်းဖြစ်သည်။
စာမျက်နှာသည် အကျယ်ဆုံးဖြစ်ပြီး ခန့်မှန်းခြေအားဖြင့် 1200px အလယ်တွင်ရှိပြီး ဒေါင်လိုက်နေရာလွတ်များစွာရှိသည်။ သူရဲကောင်းသည် ဘယ်ဘက်သို့ညှိထားသော နှစ်ကြောင်းပါ စာသားဘလောက်တစ်ခုဖြစ်ပြီး အပြာရောင်ဖြင့် တစ်ခုတည်းသော စကားစု ("ရိုးရှင်းပြီး ထိရောက်သည်")၊ ထို့နောက် လုပ်ဆောင်ရန် ခေါ်ဆိုမှုနှစ်ခုပါသော တန်းတစ်ခု (အပြာရောင်ဆေးပြား + ghost ဆေးပြား)၊ ထို့နောက် မီးခိုးရောင်ဖြင့် ပါတနာလိုဂိုများတန်းတစ်ခု၊ ထို့နောက် ယုံကြည်မှုအဆင့်သတ်မှတ်ချက်များတန်းတစ်ခုနှင့် ထို့နောက် အပြည့်အဝအကျယ်ရှိသော floating dashboard preview တစ်ခုဖြစ်ပြီး နောက်အပိုင်းနှင့် အနည်းငယ်ထပ်နေသည်။ ခေါက်အောက်တွင် တစ်ခုတည်းသောကော်လံဇယားကွက်တွင် ထောက်ခံစာတန်းများကို အလှည့်ကျဖော်ပြထားပြီး ၎င်းနောက်တွင် အင်္ဂါရပ်ဖော်ပြချက်များ၊ ဘယ်ဘက်သို့ညှိထားသောစာသားနှင့် အလယ်ဗဟိုရှိ ထုတ်ကုန်ရုပ်ပုံများပါသော အပြည့်အဝအကျယ်အပိုင်းများရှိသည်။ လမ်းညွှန်သည် minimalist top bar တစ်ခုဖြစ်သည် - ဘယ်ဘက်တွင် လိုဂို၊ အလယ်ဗဟိုရှိ လမ်းညွှန်လင့်ခ်များ၊ login + အပြာရောင်လုပ်ဆောင်ချက်ခေါ်ဆိုမှု - လမ်းညွှန်၏အလယ်တွင် avatar များ၏ floating cluster တစ်ခုရှိပြီး identity verification အဖြစ်ဆောင်ရွက်သည်။ အပိုင်းများအကြား နေရာလွတ်များသည် ကျယ်ပြန့်သည် (96px)။ အချက်အလက်များ ရှုပ်ထွေးနေမည့်အစား အယ်ဒီတာ့အာဘော်စည်းချက်ကို ဖန်တီးရန်ဖြစ်သည်။
ထုတ်ကုန်၏ user interface ၏ screenshot များက အမြင်အာရုံဘာသာစကားကို လွှမ်းမိုးထားသည်—dashboard preview သည် grayscale (1) (0.94) contrast filter ဖြင့် render လုပ်ထားသော ဓာတ်ပုံတစ်ပုံဖြစ်ပြီး data ၏အရောင်များကို monochrome hue သို့ လျှော့ချပေးသည်။ တစ်ခုတည်းသော လူသားပုံမှာ linear mascot sticker (ဦးထုပ်ဆောင်းထားသော ဇာတ်ကောင်) ဖြစ်ပြီး SVG ပုံစံဖြင့် outline များကိုသာဆွဲထားပြီး analytical content နှင့် ပျော်ရွှင်ဖွယ် counterpoint အဖြစ် အပိုင်းတစ်ခုလျှင် တစ်ကြိမ်ထားကာ နူးညံ့သောအရိပ်ဖြင့် အနက်၏စတစ်ကာကဲ့သို့သော effect ကိုဖန်တီးပေးသည်။ brand logo နှင့် glyphs များသည် သေးငယ်သော အနက်ရောင်မီးပွားများ/မီးတောက်များဖြစ်သည်။ ဓာတ်ပုံများမရှိပါ—လူနေမှုပုံစံဓာတ်ပုံများ၊ အဖွဲ့ဓာတ်ပုံများ၊ ပတ်ဝန်းကျင်ပုံများမရှိပါ။ အရာဝတ္ထု (dashboard) သည် အဓိကဇာတ်ကောင်ဖြစ်သည်။ အလှဆင် icon အားလုံးသည် #0c0a09 သို့မဟုတ် #3ba6f1 ဖြင့် 1px outline style ဖြင့်ဖြစ်ပြီး ဘယ်တော့မှ ဖြည့်မထားပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Cyan Signal
#3ba6f1— အဓိက လုပ်ဆောင်ရန် လှုံ့ဆော်မှု၊ တက်ကြွသောလင့်ခ်များနှင့် အမှတ်တံဆိပ်အိုင်ကွန်များ၏ အပြင်အဆင်တို့သည် စာမျက်နှာပေါ်ရှိ တစ်ခုတည်းသော အရောင်အသားပေးမှုများဖြစ်ပြီး လုပ်ဆောင်ချက်ကို အာရုံစိုက်စေရန်အတွက် အနည်းငယ်သာအသုံးပြုပါသည်။ - Cyan Edge
#3398e1— အပြာရောင်ကို action outline များ၊ link label များနှင့် interactive element များကို မီးမောင်းထိုးပြရန် အသုံးပြုသည်။ ၎င်းကို calls to action အတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။
ကြားနေ
- Ink Black
#0c0a09— အဓိကခေါင်းစဉ်များ၊ အသားပေးဖော်ပြထားသော စာသားနှင့် ဖော်ပြနိုင်သော သင်္ကေတများသည် နွေးထွေးပြီး အနက်ရောင်နီးပါးဖြစ်သည်။ - Stone Canvas
#fafaf9— စာမျက်နှာနောက်ခံက မျက်နှာပြင်ရဲ့ အဖြူရောင်အစား စက္ကူလို ခံစားရစေတဲ့ နွေးထွေးပြီး ခရင်မ်ရောင်ဖြစ်ပါတယ်။ - Pure White
#ffffff— မြေပုံမျက်နှာပြင်များ၊ ထွက်နေသော ပြားများနှင့် ထည့်သွင်းမှုအကွက်ဖြည့်များသည် မူရင်းအားဖြင့် ပြားချပ်ပြီး အရိပ်မရှိပါ။ - Stone Border
#e8e6e5— ကတ်များ၊ လမ်းညွှန်ချက်နှင့် ထည့်သွင်းမှုအကွက်များရှိ ပါးလွှာသောဘောင်များသည် ပိုင်းခြားကိရိယာများမဟုတ်ဘဲ အဓိကဖွဲ့စည်းပုံဆိုင်ရာ အစိတ်အပိုင်းဖြစ်သည်။ - Stone Muted
#d6d3d1— အပိုဘောင်များ၊ သိမ်မွေ့သောနောက်ခံအရိပ်များ၊ အလှဆင်ထားသော ပိုင်းခြားကိရိယာများ။ - Ash Gray
#a8a29e— အကူအညီစာသား၊ အိုင်ကွန်အကြမ်းဖျင်းများ၊ ပိတ်ထားသည် အခြေအနေများ - ဖတ်ရှုနိုင်သော်လည်း အလုပ်မလုပ်ပါ။
စာလုံးပုံစံ
၁၀ မှ ၅၂px အထိ · အဆင့် ၅ ဆင့်
- Roobert — အစားထိုးခြင်း: Inter Tight or Satoshi · မျဉ်းကြောင်းများ 400, 500 · ခေါင်းစဉ်များနှင့် စာသားအပြင်အဆင်အတွက် ဖောင့်သည် အနည်းဆုံး အနုတ်စာလုံးအကွာအဝေးရှိသော ထူးခြားသည့် ဂျီဩမေတြီ sans-serif ဖြစ်သည် (-0.025em at 32px၊ -0.021em at 52px)။ ၄၀၀ x ၅၂px အလေးချိန်သည် ဖောင့်၏ ထင်ရှားသောလက္ခဏာဖြစ်သည်- ထူးခြားမှုမရှိ၊ သိမ်မွေ့သော်လည်း အာဏာရှိသော်လည်း ပေါ့ပေါ့တန်တန်ဖော်ပြထားသည်။ ခေါင်းစဉ်များသည် လွန်ကဲစွာမဟုတ်ဘဲ ၎င်းတို့၏နေရာကို ရယူထားသည်။
- Inter — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 600 · ကိုယ်ထည်စာသား၊ လမ်းညွှန်ချက်၊ UI နှင့် ခေါင်းစဉ်များအတွက် အဓိကဖောင့်သည် မျက်နှာပြင်ပြင်ပစာသားအားလုံးအတွက် ကြားနေ၊ ယူနီဗာဆယ်ဖောင့်ဖြစ်သည်။ ကိုယ်ထည်စာသားအတွက် အဓိကအရွယ်အစားမှာ 14px၊ အလေးချိန် 400 နှင့် 1.64 လိုင်းအကွာအဝေးသည် (ကြိမ်နှုန်း 1174) ဖြစ်သည်။ အရွယ်အစားသေးငယ်သော စာလုံးအကွာအဝေး (0.004em) သည် ထူထဲသော UI ကို ဖတ်ရှုနိုင်စေရန် သေချာစေသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ကျယ်ဝန်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 10px |
| အရိပ်များ | နူးညံ့သောအရိပ်များ |
| အပိုင်းများအကြား | 96px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Seline Analytics ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Notion — နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
- Anthropic — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရေးသားထားသော သိပ္ပံနည်းကျ လယ်ကွင်းဂျာနယ်တစ်စောင်—တည်ငြိမ်သော ဆင်စွယ်မျက်နှာပြင်များ၊ ခြစ်ရာပါ အယ်ဒီတာ့အာဘော် ခေါင်းစဉ်များနှင့် အရေးယူဆောင်ရွက်မှု လိုအပ်သည့်အခါတွင်သာ ပေါ်လာသည့် တစ်ခုတည်းသော ရွှံ့စေးအနှစ်သာရ။
- Calendly — အေးစက်သော စကျင်ကျောက်ပေါ်တွင် နက်ပြာရောင်မင်
- Augen Pro — Apple ရဲ့ အဖြူရောင်တင်ဆက်မှုမှာ ဆေးပညာဆန်ပြီး အလေးချိန်မရှိတဲ့ လျှပ်စစ်အပြာရောင်ကို တစ်မူထူးခြားတဲ့အရောင်အဖြစ် အသုံးပြုထားပါတယ်။
- Antimetal — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် မှတ်တမ်းတစ်ခု—သိပ္ပံဂျာနယ်တစ်စောင်တွင် တိတ်ဆိတ်ငြိမ်သက်သော မနက်ခင်းတစ်ခု၊ ထိန်းချုပ်နိုင်စွမ်းက ယုံကြည်မှုကို ဖော်ဆောင်ပေးပြီး serif များက လေးလံသောဝန်ကို လုပ်ဆောင်ပေးသည်။
- Perk — ပူနွေးသော စက္ကူပေါ်တွင် လျှပ်စစ်ထုံး
- Ditto — နေရောင်အောက်က တောပန်းနမူနာတွေကို ဖန်တီးနေတဲ့ အလုပ်ရုံ။ နွေးထွေးတဲ့ ခရင်မ်မျက်နှာပြင်တွေ၊ တက်ကြွတဲ့ အဝါရောင်အောက်ခံအရောင်၊ နက်ရှိုင်းတဲ့ အပြာရောင်မင်တွေ၊ လက်ရာရဲ့နောက်ကွယ်မှာ ပွင့်လန်းနေတဲ့ အော်ဂဲနစ်အရောင်ပုံစံတွေ။
- Officevibe — နွေးထွေးသော ခရင်မ်ရောင်စက္ကူပေါ်တွင် ရေးသားထားသော အယ်ဒီတာ့အာဘော် မဂ္ဂဇင်းတစ်စောင်။ HR စီမံခန့်ခွဲမှုဆိုင်ရာ အတွေးအမြင်ရှိသော ဆောင်းပါးတစ်ပုဒ်ကို ထုတ်ကုန်တစ်ခုအဖြစ် တင်ပြထားသည်—ခေတ်မီ အပြာရောင် မျက်နှာပြင်မှတစ်ဆင့် တိုးတိုးလေး ရေးသားထားသော လက်ရေးဆက် serif ဖောင့်တစ်ခု။