Slash
ရွှေချထားသော စာရင်းဇယားများပါသည့် သန်းခေါင်ယံ သေတ္တာ
Slash သည် သန်းခေါင်ယံပြခန်းမုဒ်တွင် လုပ်ဆောင်သည်- အနက်ရောင်နီးပါးရှိသော ပတ္တူ၊ အဖြူရောင်စာလုံးနှင့် ပုဒ်ဖြတ်ပုဒ်ရပ်အဖြစ် အသုံးပြုသော နွေးထွေးသောကြေးနီရောင်တစ်ခုတည်း။ ခေါင်းစဉ်များကို Ivy Presto ဖြင့်ပြသထားပြီး၊ ၎င်းသည် အလွန်အမင်းအရွယ်အစားများ (88px အထိ) တွင်အသုံးပြုသော မြင့်မားသော contrast didone serif တစ်မျိုးဖြစ်သည်။ serif နှင့် sans-serif စာလုံးပုံစံများ ထိပ်တိုက်တွေ့မှုသည် စနစ်၏ထူးခြားချက်ဖြစ်ပြီး ရိုးရာဘဏ်လုပ်ငန်း၏ ပွဲစားလုပ်ငန်း၏ အလေးချိန်မရှိဘဲ ငွေကြေးဆိုင်ရာ အလေးချိန်ကို ပေးစွမ်းသည်။ ကျန်အသုံးပြုသူမျက်နှာပြင်ကို ရည်ရွယ်ချက်ရှိရှိ လျှော့ချထားသည်- ပါးလွှာသောဘောင်များ၊ ဆေးပြားပုံသဏ္ဍာန်ထိန်းချုပ်မှုများ၊ ကျစ်လစ်သော 16px ကိုယ်ထည်စာသားနှင့် စာလုံးအသက်ရှူနိုင်စေရန် သိမ်မွေ့သော upsweep တစ်ခုဖြစ်သည်။ ရွှေရောင် gradient တစ်ခုတည်း (ဇယားမျဉ်း၊ microaccents) သည် monochrome စနစ်သို့ နွေးထွေးမှုကို ပေါင်းထည့်ပေးပြီး ဒီဇိုင်းပရိသတ်အတွက် တည်ဆောက်ထားသော Bloomberg terminal ၏ နွေးထွေးသောအလင်းရောင်ကို ပေါ်လွင်စေသည်။
အကြောင်းအရာသည် 1216px အကျယ်ရှိပြီး အလယ်ဗဟိုတွင် 160px ဒေါင်လိုက် gutters များပါရှိသည်။ Home screen သည် မှောင်မိုက်သော၊ full-width canvas တစ်ခုဖြစ်ပြီး ခွဲထားသော composition ရှိသည်- ဘယ်ဘက်သို့ ချိန်ညှိထားသော serif header (64–88px အကျယ်) အောက်တွင် အီးမေးလ်လိပ်စာအကွက်တစ်ခုပါရှိပြီး ညာဘက်တွင် 50% အကျယ်ရှိသော ထုတ်ကုန် UI card ကြီးတစ်ခု (dashboard screenshot) ရှိသည်။ နောက်ပိုင်းအပိုင်းများတွင် Inter တွင် subheading ပါရှိသော single-column၊ အလယ်ဗဟိုတွင် header (serif၊ 44–64px အကျယ်) ကို အသုံးပြုထားပြီး ၎င်းနောက်တွင် feature descriptions/testimonials/blogs များအတွက် cards များ၏ ကော်လံသုံးခုပါ grid များပါရှိသည်။ navigation သည် fixed top bar တစ်ခုဖြစ်သည်- ဘယ်ဘက်တွင် logo၊ အလယ်ဗဟို menu (Company, Products, Solutions, Clients, Pricing, FAQ)၊ ညာဘက်သို့ ချိန်ညှိထားသော login (မသိသာစေသော) နှင့် getting started (အဖြူရောင်ဖြည့်ထားသော element)။ footer တွင် ကုမ္ပဏီအချက်အလက်နှင့် ဥပဒေဆိုင်ရာအသိပေးချက်များပါရှိသော links များ၏ column ငါးခုပါ grid ပါရှိသည်။ စာမျက်နှာသည် အကြောင်းအရာကြွယ်ဝသော grid အပိုင်းများနှင့် full-screen stats များအကြား အလှည့်ကျပြောင်းလဲသည်—နောက်ခံအရောင်များကို အလှည့်ကျပြောင်းလဲခြင်းထက် ကော်လံများအကြား ကျယ်ပြန့်သော အဖြူရောင်နေရာလွတ်ဖြင့် စည်းချက်ကို သတ်မှတ်သည် (စာမျက်နှာတစ်ခုလုံးကို တစ်ခုတည်းသော၊ ပေါင်းစည်းထားသော canvas အဖြစ် တင်ပြထားသည်)။
ဓာတ်ပုံတွေက အယ်ဒီတာ့အာဘော်ဆန်ပြီး သဘာဝကျပါတယ်- တည်ထောင်သူတွေနဲ့ အဖွဲ့ဝင်တွေရဲ့ လက်တွေ့အလုပ်ပတ်ဝန်းကျင်တွေ (ရုံးခန်းတွေ၊ ဧည့်ခန်းတွေ၊ ဆောက်လုပ်ရေးလုပ်ငန်းခွင်တွေ) မှာ နွေးထွေးတဲ့ပုံတူတွေပါ။ ပုံတွေက ကတ်ဘောင်တွေကို အစွန်းအထင်းမရှိ ဖြည့်ထားပါတယ်။ စာသားဖတ်ရလွယ်ကူစေဖို့အတွက် ထောက်ခံချက်ကတ်တွေရဲ့ အောက်ခြေမှာ မှောင်မိုက်တဲ့ gradient ကို အသုံးပြုထားပါတယ်။ အလှအပ—"LinkedIn နဲ့ အယ်ဒီတာ့အာဘော်မဂ္ဂဇင်းတွေ့ဆုံခြင်း"—က ပေါ့ပေါ့ပါးပါး၊ လူသားဆန်ပြီး အနည်းငယ်တိတ်ဆိတ်ပြီး စတော့ဓာတ်ပုံတွေနဲ့ ဘယ်တော့မှ မပြုပြင်ထားပါဘူး။ ဆောင်းပါး thumbnail တွေက ဓာတ်ပုံတွေနဲ့ သရုပ်ဖော်ထားတဲ့ အယူအဆတွေကို ပေါင်းစပ်ထားပါတယ် (ပဟေဠိထဲမှာ ရပ်နေတဲ့လူတစ်ယောက်၊ ပိုက်ဆံအိတ်တွေနဲ့ မီးလင်းဖို)။ ထုတ်ကုန်ရဲ့ UI ကို မှောင်မိုက်တဲ့မုဒ်မှာ အပြည့်အဝ opacity နဲ့ ပြသထားပြီး စာမျက်နှာရဲ့အပေါ်မှာ သိမ်မွေ့တဲ့မှောင်မိုက်တဲ့ မျက်နှာပြင်တွေပေါ်မှာ ဝဲနေပါတယ်—အဓိကဒြပ်စင်တစ်ခုပါ။ အိုင်ကွန်တွေက #2e3038 ဒါမှမဟုတ် #777a88 မှာ 1px strokes ရှိတဲ့ monochrome ဖြစ်ပြီး brand အရောင်နဲ့ ဘယ်တော့မှ မဖြည့်ထားပါဘူး။
ရောင်စုံ
ကြားနေ
- Bone
#e2e3e9— UI အစိတ်အပိုင်းအများစုတွင် မူလစာသားအတွက် ဖောင့်အရွယ်အစားကြီးခြင်း၊ အသေးစိတ်ဒေတာအညွှန်းများနှင့် စံစာသားလေသံ။ - Obsidian
#08080a— စာမျက်နှာကင်းဗတ်၊ အောက်ခြေနောက်ခံ၊ အမှောင်ဆုံးမျက်နှာပြင်သည် အနက်ရောင်နီးပါးဖြစ်ပြီး အပြာရောင်ဖျော့ဖျော့ရှိသည်။ - Onyx
#040406— ကတ်၏ မျက်နှာပြင်၊ အပိုနောက်ခံသည် အမြင်အာရုံအတွက် စာမျက်နှာထက် တစ်ဆင့်ပိုနက်ရှိုင်းသည်။ - Carbon
#121317— မြှင့်တင်ထားသော panel များ၊ မမြင်သာသော UI ဖြည့်ခြင်း - Surface Stack ၏ ဆင့်ကဲဖြစ်စဉ်တွင် သိသိသာသာ ပေါ့ပါးသော ပထမဆုံးခြေလှမ်း - Graphite
#1c1d22— ဘောင်များ၊ ပိုင်းခြားကိရိယာများ၊ အိုင်ကွန်ကွန်တိန်နာများ၊ ထိန်းချုပ်ကိရိယာ ဆလိုက်ဒါများ—ဖွဲ့စည်းပုံကို သတ်မှတ်ပေးသည့် အသိမ်မွေ့ဆုံးအရောင်။ - Slate
#2e3038— အပိုဘောင်များ၊ အသံတိတ်အိုင်ကွန်မျဉ်းများ၊ အကြောင်းအရာဘလောက်များကြားရှိ သိမ်မွေ့သော ပိုင်းခြားမှုများ။
စာလုံးပုံစံ
၁၃ မှ ၈၈px အထိ · အဆင့် ၉ ဆင့်
- Ivy Presto — အစားထိုးခြင်း: Playfair Display · မျဉ်းကြောင်းများ 400, 500 · ခေါင်းစဉ်များနှင့် ခေါင်းစဉ်ခွဲများအတွက် serif ဖောင့်တစ်ခု—28px နှင့်အထက် ခေါင်းစဉ်များနှင့် အပိုင်းခေါင်းစဉ်များအတွက် သီးသန့်အသုံးပြုသည်။ ပါးလွှာသော serif များပါရှိသော contrast မြင့်မားသော didone စုတ်ချက်များသည် အယ်ဒီတာ့အာဘော်၏ ဇိမ်ခံမှုကို ဖန်တီးပေးသည်။ 0.01em ၏ သေးငယ်သော အပေါင်းစာလုံးအကွာအဝေးသည် ထူးခြားပြီး ဖောင့်ကို ပုံနှိပ်ထားသော၊ စာရင်းကိုင်ပုံစံ အသွင်အပြင်ကို ပေးစွမ်းသည်။ ဤ serif ဖောင့်သည် အမှတ်တံဆိပ်၏ အဓိက အမှတ်အသားဖြစ်ပြီး ၎င်းသည် Slash ကို geometric sans-serif ဖောင့်များကို မူရင်းအတိုင်းအသုံးပြုသော အခြား SaaS fintech ကုမ္ပဏီအားလုံးနှင့် ခွဲခြားပေးသည်။
- Inter — အစားထိုးခြင်း: Inter (self-hosted via Google Fonts) · မျဉ်းကြောင်းများ 300, 400, 500, 600, 700 · UI Sans—အဓိကစာသား၊ လမ်းညွှန်ချက်၊ ခလုတ်များ၊ အညွှန်းများ၊ လင့်ခ်များ၊ ဖောင်အကွက်များနှင့် ခေါင်းစဉ်ခွဲများ။ အဓိကစာသားသည် မမြင်သာသော ဒုတိယစာသားအတွက် 300 ဖောင့်ကို အသုံးပြုသည်။ 500 ကို အလယ်အလတ်အလေးပေးစာသားနှင့် ခလုတ်အညွှန်းများအတွက် အသုံးပြုသည်။ 600 ကို စာလုံးကြီးများဖြင့် ရေးသားထားသော အမျိုးအစားအညွှန်းများအတွက် သီးသန့်ထားရှိသည်။ အနုတ်စာလုံးအကွာအဝေးသည် 2 (-3) မှ လျော့ကျလာပြီး အရွယ်အစား လျော့ကျလာသည်နှင့်အမျှ လျော့ကျသွားသည်၊ ၎င်းသည် Inter ဖောင့်၏ optical scaling ၏ ပုံမှန်ဖြစ်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ကျယ်ဝန်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 10px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 160px |
| စာမျက်နှာအကျယ် | 1216px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Slash ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Modal — မှောင်မိုက်နေသော ဆာဗာအခန်းရှိ ဖော့စဖောရက်စ် တာမီနယ်တစ်ခု - တစ်ခုတည်းသော အလင်းရောင်ရင်းမြစ်မှာ တောက်ပသော အစိမ်းရောင်ဖြစ်သည်
- AgentQL — ညအချိန်တွင် ဆိပ်ကမ်းပေါ်ရှိ မြောက်ပိုင်းအလင်းရောင်များ
- GitHub — ဇီဝအလင်းပြန်နိုင်သော ထိန်းချုပ်မှတ်များပါရှိသော အာကာသ အမိန့်ပေးခုံတစ်ခု—အစိမ်းရောင်အလင်းတစ်ခုတည်းက ရှေ့သို့လမ်းညွှန်ပြသည့် မှောင်မိုက်ပြီး လေထုဆန်သော အလုပ်ခွင်တစ်ခု။
- Doppler — သန်းခေါင်ယံအချိန်တွင် ಲೇಪನ್ಯಾನို၏ ခရမ်းရောင်မီးရောင်။ အနက်ရောင်နီးပါးရှိသော ပတ္တူသည် ခရမ်းရောင်အချက်ပြမှုတစ်ခုနှင့် အစိမ်းရောင်အတည်ပြုမီးရောင်ဖြင့် တောက်ပနေပြီး မျက်နှာပြင်တိုင်းသည် ဆုပ်ကိုင်နိုင်လောက်အောင် ကွေးညွှတ်နေသည်။
- Basedash — မှိန်ဖောင့်ပါသော သန်းခေါင်ယံဒေတာဂိတ်။ မက်ထရစ်များသည် ခရမ်းရောင်နှင့် အစိမ်းရောင်တောက်ပနေပြီး၊ serif ခေါင်းစဉ်များသည် ဆူညံသံများအထက်တွင် ပေါ်လွင်နေပြီး၊ နူးညံ့သောအနက်ရောင်မျက်နှာပြင်များရှိသော အခန်းထဲတွင် အဖြူရောင်ဆေးပြားပုံသဏ္ဍာန်ခလုတ်များသည်သာ တောက်ပသောအရာဝတ္ထုများဖြစ်သည့် မှောင်မိုက်သောနက္ခတ်တာရာကြည့်မျှော်စင်တစ်ခု။
- Superwhisper — မြောက်ပိုင်းအလင်းတန်းများသည် သန်းခေါင်ယံဖန်ခွက်ပေါ်တွင် ပျောက်ကွယ်သွားသည်
- Better Stack — သန်းခေါင်ယံ SRE ကွန်ဆိုးလ်
- Langbase — သန်းခေါင်ယံ မြောက်ပိုင်းအလင်းရောင် ကွန်ဆိုးလ်
- Astro — နက်ဗျူလာတစ်ခုမှ ခရမ်းရောင်တစ်ခုတည်းသော အလင်းရောင်ဖြင့် Deep Space Mission Control
- Wayfinder — တိုက်ရိုက်ရုပ်ပုံတစ်ခုပေါ်တွင် မကြားရသောခေါင်းစဉ်တစ်ခု ဝဲနေသည့် အနက်ရောင်ရုပ်ရှင်မျက်နှာပြင်။ အင်တာဖေ့စ်သည် ထိန်းချုပ်ခုံတစ်ခုမဟုတ်ဘဲ တောက်ပမှု ဆလိုက်ဒါတစ်ခုဖြစ်သည်။
- HashiCorp — ခရမ်းရောင်နီယွန်မီးများထွန်းထားသော သန်းခေါင်ယံအချိန် ထိန်းချုပ်ခန်းသည် မှောင်မိုက်သော နည်းပညာဆိုင်ရာ မျက်နှာပြင်တစ်ခုဖြစ်ပြီး တောက်ပနေသော ဆဋ္ဌဂံပုံ ကုဗတုံးသည် တစ်ခုတည်းသော အရောင်ရည်ညွှန်းချက်အဖြစ် ဆောင်ရွက်သည်။
- Umbrel — ညဘက်ဆာဗာအခန်းထဲက သက်တောင့်သက်သာရှိတဲ့ မီးလှောင်ကျင်းတစ်ခု—တကယ်အရေးကြီးတဲ့အရာကို မီးမောင်းထိုးပြနေတဲ့ မှောင်နေတဲ့အခန်း—မက်မွန်သီးရောင်အလင်းတန်းလေးတစ်ခု။