တယ်လီဂရမ်၊ WhatsApp+380637610482
ဗယ်လီရီ ဒန်ယွတ်ခ်
ဗယ်လီရီ ဒန်ယွတ်ခ်ဆော့ဖ်ဝဲရေးသားသူစီးပွားရေးလုပ်ငန်းများအတွက် AI ကိရိယာများ တီထွင်ခြင်း။ အရည်အသွေးမြင့်။ ဈေးနှုန်းသက်သာ။Telegram သို့ စာရေးရန်
Framer — ဤပုံစံဖြင့် ဝဘ်ဆိုက်တစ်ခု၏ အစမ်းကြည့်ရှုခြင်း

Framer

လစ်ဟာနေတဲ့ နီယွန်ပြခန်း

Framer သည် လုံးဝနီးပါး မှောင်မိုက်နေသော အနက်ရောင်ပတ္တူတစ်ခု—ပြခန်းဖွင့်ပွဲတွင် အကြောင်းအရာများသည် နီယွန်ဆိုင်းဘုတ်ကဲ့သို့ ဝဲပျံနေသော အနက်ရောင်ပတ္တူတစ်ခု—အဖြစ် လုပ်ဆောင်သည်။ GT Walsheim Medium တွင် 0.8–1.1 ကျဉ်းမြောင်းသော လိုင်းအကွာအဝေးနှင့် ရန်လိုသော အနုတ်လက္ခဏာစာလုံးအကွာအဝေး (-0.04em at 54px) ဖြင့် ခေါင်းစဉ်များသည် စာမျက်နှာပေါ်တွင် သပ်ရပ်စွာနေရာယူမည့်အစား ရှေ့သို့တွန်းပို့သော အကျဉ်းချုပ်၊ အလှဆင်ထားသော စာလုံးပုံစံကို ဖန်တီးပေးသည်။ တစ်ခုတည်းသော လျှပ်စစ်အပြာရောင် (#0099ff) သည် လုပ်ဆောင်နိုင်သော အသားပေးဖော်ပြချက်အားလုံး—ဘောင်များ၊ တောက်ပမှု၊ အိုင်ကွန်များ၊ တက်ကြွသောအခြေအနေများ—ကို ပေးစွမ်းပြီး ကျန်မျက်နှာပြင်များမှာ အနက်ရောင်စစ်စစ်မှ အနက်ကို ဖန်တီးရန် သိမ်မွေ့သော မီးခိုးရောင်အကူးအပြောင်းများ (#111၊ #171717၊ #242424) ကို အားကိုးပြီး အရောင်မခွဲခြားဘဲ ရှိနေသည်။ အစိတ်အပိုင်းများသည် အလှဆင်ခြင်းထက် ထည့်သွင်းစဉ်းစားခံရသည်ဟု ခံစားရသည်- 8–25px ၏ လုံးဝန်းသောအချင်းဝက်၊ ပါးလွှာသော 1px ဘောင်များ၊ အရိပ်အနည်းငယ်နှင့် အချည်းနှီးကို ထွန်းလင်းစေသော ဖောက်ထွင်းမြင်ရသော မျက်နှာပြင်များ။

အကျယ်အပြည့်ရှိသော အပိုင်းများသည် အနက်ရောင်ကင်းဗတ်စ်ထက် ကျော်လွန်ပြီး အကြောင်းအရာကို အများဆုံး အကျယ် ~1200px အထိ ကန့်သတ်ထားပြီး အတွင်းတွင် အလယ်ဗဟိုပြုထားသည်။ အဓိကအပိုင်းတွင် ဘယ်ဘက်ညှိထားသော ခေါင်းစဉ်နှင့် လုပ်ဆောင်ချက်ခေါ်ဆိုမှု (CTA) ခလုတ်တစ်ခုတည်း ပါဝင်ပြီး ညာဘက်ခြမ်းကို ရည်ရွယ်ချက်ရှိရှိ ဗလာထားပါသည်—အလယ်ဗဟိုမပြုပါ။ အပိုင်းများသည် စာသားသီးသန့် အပြင်အဆင်များ (ခေါင်းစဉ်ကြီး + စာသားအောက်ခံ) နှင့် ထုတ်ကုန် ဖန်သားပြင်ဓာတ်ပုံများကြားတွင် အလှည့်ကျ ပြောင်းလဲပါသည်။ "Framer ပါရှိသည်" အပိုင်းသည် ကော်လံ ၄ ခုပါ ဇယားကွက်ရှိ လိုဂိုနံရံကို အသုံးပြုသည်။ အသိုင်းအဝိုင်းအပိုင်းတွင် ထုတ်ကုန် ဖန်သားပြင်ဓာတ်ပုံကို ထောင့်ဝိုင်းများပါသည့် အလယ်ဗဟိုပြု၊ အကျယ်အပြည့်ကွန်တိန်နာအတွင်း ထားရှိသည်။ လမ်းညွှန်မှုမှာ အနည်းဆုံးဖြစ်သည်—ဘယ်ဘက်တွင် လိုဂိုပါရှိပြီး ညာဘက်တွင် ချိန်ညှိထားသော လင့်ခ်များပါသည့် ပါးလွှာသော အပေါ်ဘားတစ်ခုဖြစ်ပြီး မြင်သာသော ထိန်းချုပ်မှုမရှိပါ။ အပိုင်း စည်းချက်- အပိုင်းများအကြားတွင် သိသာထင်ရှားသော 80px ဒေါင်လိုက်ကွာဟချက်များရှိပြီး ကွက်လပ်ထဲတွင် ပေါလောမျောနေသော အကြောင်းအရာများ၏ ကွဲပြားသောကျွန်းများကို ဖန်တီးပေးသည်။

ထုတ်ကုန်၏ အသုံးပြုသူမျက်နှာပြင်၏ ဖန်သားပြင်ဓာတ်ပုံများသည် အဓိကဖြစ်သည်— ယာဉ်ကြောမီးပွိုင့်အစက်များပါသည့် ခရုမ်းကဲ့သို့သော ဝင်းဒိုးဖြင့် ဘောင်ခတ်ထားပြီး အက်ပ်၏ ထည့်သွင်းထားသော ဖန်သားပြင်ဓာတ်ပုံများသည် အဓိကပုံဖြစ်လာသည်။ အရည်အသွေးကို သက်သေပြသည့် လိုဂိုများကို အနက်ရောင်နောက်ခံပေါ်တွင် အဖြူရောင်စာလုံးများဖြင့် ကျယ်ပြန့်သော အကွာအဝေးဖြင့် ပြသထားသည်။ ဓာတ်ပုံများ၊ သရုပ်ဖော်ပုံများ သို့မဟုတ် abstract ဂရပ်ဖစ်များကို အသုံးမပြုပါ—အမြင်အာရုံဘာသာစကားသည် ထုတ်ကုန်ကိုယ်တိုင်ဖြစ်ပြီး အသက်ဝင်သော မျက်နှာပြင်အဖြစ် ပြသထားသည်။ အိုင်ကွန်ပုံစံ- minimalist၊ outlined၊ monochrome နှင့် အဖြူရောင် အရွယ်အစားငယ်များဖြင့် ပြသထားသည်။ စာသားသိပ်သည်းဆ- စာသားအများစုပါဝင်ပြီး ထုတ်ကုန်ဖန်သားပြင်ဓာတ်ပုံများပုံစံဖြင့် ရံဖန်ရံခါ အပိုင်းအစကြီးများဖြင့် ပါဝင်သည်။ နေရာလွတ်၏ အမြင်အာရုံချိန်ခွင်လျှာသည် ရုပ်ပုံများထက် typography ကို သိသိသာသာ ဦးစားပေးသည်။

ရောင်စုံ

အမှတ်တံဆိပ်

  • Vivid Violet #0066ff — interface မှာ solid color button background ပြသထားတဲ့ တစ်ခုတည်းသောနေရာက primary action button ပါ။

ကြားနေ

  • Bone #ffffff — အဓိကခေါင်းစဉ်များ၊ မှောင်သောနောက်ခံပေါ်ရှိ အဓိကစာသား၊ ခလုတ်နောက်ခံသည် တစ်ခုတည်းသော အလင်းရင်းမြစ်ဖြစ်သည်။
  • Void #000000 — စာမျက်နှာကင်းဗတ်၊ လမ်းညွှန်နောက်ခံ၊ ကတ်မျက်နှာပြင်များ၊ အိုင်ကွန်ဖြည့်ခြင်း—အားလုံးသည် မရှိမဖြစ်လိုအပ်သော အကြောင်းအရာအားလုံးကို စုပ်ယူသည့် အဆုံးမဲ့အနက်ရောင်ဖြစ်သည်။
  • Graphite #111111 — မြှင့်တင်ထားသော ကတ်မျက်နှာပြင်များသည် ကြီးမားသော၊ လုပ်ဆောင်နိုင်စွမ်းရှိသော ကတ်များနှင့် မော်ဒယ်ကွန်တိန်နာများထက် တစ်ဆင့်မြင့်သည်။
  • Obsidian #171717 — ခလုတ်များ၊ အပိုကတ်များ၊ UI ဖြည့်မှုများအတွက် အလယ်အလတ်မျက်နှာပြင် - အပြန်အလှန်တုံ့ပြန်နိုင်သော အစိတ်အပိုင်းများကို ပတ္တူမှ ခွဲထုတ်သည်။
  • Slate #242424 — မောက်စ်တင်လိုက်တဲ့အခါ input field တွေနဲ့ indent လုပ်ထားတဲ့ panel တွေက text format ကိုမပြောင်းခင် အတောက်ပဆုံး neutral shade တွေဖြစ်ပါတယ်။
  • Ash #333333 — အသုံးမပြုတော့သော နောက်ခံပုံများနှင့် ဖွဲ့စည်းပုံဆိုင်ရာ အစိတ်အပိုင်းများအတွက် နက်ရှိုင်းစွာဖြည့်ခြင်း။

စာလုံးပုံစံ

၁၂ မှ ၆၈px အထိ · အဆင့် ၈ ဆင့်

  • sans-serif — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · sans-serif - ထုတ်ယူထားသောဒေတာတွင်တွေ့ရှိရသော်လည်း AI မှဖော်ပြမထားပါ။
  • GT Walsheim — အစားထိုးခြင်း: Inter Tight · မျဉ်းကြောင်းများ 500 · ခေါင်းစဉ်များနှင့် ခေါင်းစဉ်များအတွက် ဖောင့်သည် brand ဖောင့်ဖြစ်သည်။ ၎င်းကို 44–68px အတိုင်းအတာအတွင်း လိုင်းအကွာအဝေး 0.8–1.1 နှင့် စာလုံးအကွာအဝေး -0.04em မှ -0.05em အထိ တင်းကျပ်စွာ ချုပ်လုပ်ထားသည်။ ၎င်းသည် အလှဆင်ပစ္စည်းမဟုတ်ပါ။ GT Walsheim ၏ ဂျီဩမေတြီနွေးထွေးမှုကို တင်းကျပ်သော မက်ထရစ်များနှင့် ပေါင်းစပ်ခြင်းဖြင့် စနစ်၏ အသံကို ယုံကြည်မှုရှိသော၊ သေးငယ်သော နှင့် အနည်းငယ် အနာဂတ်ဆန်သော ဖန်တီးပေးသည်။ အလားတူ ဂျီဩမေတြီဖော်ပြချက်အတွက် Inter Tight သို့မဟုတ် Space Grotesk Bold ကို စဉ်းစားပါ။
  • Inter Variable — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · အဓိကစာသား၊ လမ်းညွှန်ချက်နှင့် ဒုတိယခေါင်းစဉ်များသည် အဓိကအလုပ်ဖြစ်သည်။ Inter Variable ဝင်ရိုးသည် အလေးချိန်များကို ချောမွေ့စွာထည့်သွင်းနိုင်စေပါသည်။ အရွယ်အစားတိုးလာသည်နှင့်အမျှ ခြေရာခံခြင်းသည် ကျဉ်းမြောင်းလာသည်- -0.001em မှ 18px အထိနှင့် -0.027em မှ 22px အထိ။ variable ဗားရှင်းသည် ဆိုက်၏ ချောမွေ့သော micro-animations များကို ခွင့်ပြုသည်။ အစားထိုး- Inter ( Google) – နီးပါးတူညီသော fallback တစ်ခုဖြစ်သည်။

ကြားကာလများနှင့်ပုံစံ

ရည်ရွယ်ချက်အဓိပ္ပာယ်
သိပ်သည်းဆပျမ်းမျှ
အခြေခံအဆင့်10px
ခလုတ်အချင်းဝက်9999px
ကတ်အချင်းဝက်20px
အရိပ်များအရိပ်များအစား ဘောင်မရှိပါ
အပိုင်းများအကြား80px
စာမျက်နှာအကျယ်1200px

AI က သင့်ဝက်ဘ်ဆိုက်ကို Framer ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်

  • Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
  • သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
  • အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
  • ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။

အလားတူပုံစံများ

  • Auros — ဇီဝအလင်းပြန်ဒေတာဘောလုံးများပါရှိသော အနိစ္စဒေသ
  • Origin Financial — တိတ်ဆိတ်ငြိမ်သက်သော ခမ်းနားထည်ဝါမှု၏ သန်းခေါင်ယံပြခန်း။ ကြီးမားသော serif စာလုံးများနှင့် တောက်ပသော ရောင်စုံပြားအနည်းငယ်သည် ဘဏ္ဍာရေးသည် ဂရုတစိုက်ရွေးချယ်ထားသော အနုပညာလက်ရာတစ်ခုဖြစ်သည်ဟု ခံစားချက်ကို ဖန်တီးပေးသည့် တိတ်ဆိတ်ပြီး မှောင်မိုက်လုနီးပါးရှိသော အခန်းတစ်ခန်း။
  • Raycast — သန်းခေါင်ယံ ကွပ်ကဲရေးစင်တာ၊ ကိုရယ်နီယွန်
  • Dimension — မှောင်ရီပျိုးစပြုချိန်တွင် အလင်းရောင်ကောင်းစွာရသော အလုပ်စခန်းတစ်ခု
  • Reflect Notes — ကြယ်များပြည့်နှက်နေသော ခရမ်းရောင်အာကာသသည် မှောင်မိုက်သော နက္ခတ်တာရာကြည့်စခန်းတစ်ခုဖြစ်ပြီး အနက်ရောင်အကွက်အကွင်းနောက်ခံတွင် ကြယ်စုများကဲ့သို့ မှတ်စုများ လွင့်မျောနေပါသည်။
  • Ameba — သန်းခေါင်ယံအချိန်တွင် ထိန်းချုပ်ခန်း - အေးခဲနေသော မှန်ပြားများအတွင်းမှ လျှပ်စစ်အပြာရောင် လျှပ်စီးကြောင်းတစ်ခု
  • Branding — အနက်ရောင်ပြခန်းနံရံ၊ သွေးနီရောင် အသားပေးဖော်ပြချက်များ - အဖြူရောင်စာလုံးကြီးများသည် မှောင်မိုက်သော ပတ္တူပေါ်တွင် ပေါ်လွင်နေပြီး တောက်ပသော အနီရောင် အသားပေးဖော်ပြချက်တစ်ခုတည်းနှင့် ဝဘ်မျက်နှာပြင်ထက် ပြခန်းဆိုင်းဘုတ်နှင့် ပိုတူသည့် ထင်ရှားသော အလှဆင်ပစ္စည်းများဖြင့် ရောနှောထားသည်။
  • Harness — ဖော့စဖရပ်စ်ရောင် အစိမ်းရောင် အလှဆင်မှုများဖြင့် သန်းခေါင်ယံတွင် မစ်ရှင် ထိန်းချုပ်ရေး
  • Koto — သန်းခေါင်ယံအချိန်တွင် Obsidian ပြခန်း။ မှောင်မိုက်လုနီးပါးဖြစ်နေသော စင်မြင့်တစ်ခု၊ နွေးထွေးသောအလင်းရောင်ရင်းမြစ်မှာ အဝါရောင်မာကာတစ်ခုတည်းသာရှိပြီး ပြပွဲပိုစတာများကဲ့သို့ ကျယ်ပြန့်သော အနုတ်လက္ခဏာအာကာသထဲတွင် ဖိသိပ်ထားသောပုံစံဖြင့် ပေါလောမျောနေသည်။
  • Ohzi — မှောင်မိုက်သောပြခန်းတွင် ချိတ်ဆွဲထားသော တောက်ပနေသော ကုဗတုံးတစ်ခု
  • Depot — မှောင်မိုက်သော server terminal။ အလုပ်စတင်ကြောင်း အချက်ပြသည့် အစိမ်းရောင် LED တစ်လုံးပါသည့် အနက်ရောင်နီးပါးရှိသော developer console တစ်ခုနှင့် ကျန် user interface များကို graphite ဖြင့် ပြသထားသည်။
  • Maciej Zadykowicz — ကာလီဒိုစကုပ်နံရံပန်းချီပါရှိသော သန်းခေါင်ယံပြခန်းသည် အနက်ရောင်နီးပါးရှိသော စတူဒီယိုနံရံတစ်ခုဖြစ်ပြီး ရောင်စုံစာလုံးအနုပညာလက်ရာတစ်ခုက အာရုံစိုက်မှုကို ဖမ်းစားနိုင်သော်လည်း ကျန်အရာအားလုံးသည် တိတ်ဆိတ်ငြိမ်သက်ပြီး ဆင်ခြင်တုံတရားဖြင့် ရှိနေသည်။