Shopify
သန်းခေါင်ယံ ဖန်လုံအိမ် - ကုန်အမှတ်တံဆိပ်များသည် နက်ရှိုင်းသော အပြာရောင်နောက်ခံတွင် ပွင့်လန်းပြီး ပူစီနံတစ်ပွင့်တည်းဖြင့် ထွန်းလင်းနေသည်
Shopify ရဲ့ ဒီဇိုင်းစနစ်က ကူးသန်းရောင်းဝယ်ရေးအတွက် ညသန်းခေါင်ယံ အလုပ်ရုံဆွေးနွေးပွဲတစ်ခုပါ- နက်ရှိုင်းတဲ့ ပြာလဲ့ရောင် အစိမ်းရောင်နဲ့ ဆေးသုတ်ထားတဲ့ အနက်ရောင်နီးပါး ပတ္တူ၊ ကျယ်ပြန့်ပြီး ယုံကြည်မှုရှိတဲ့ sans-serif စာလုံးပုံစံနဲ့ အပြန်အလှန် တုံ့ပြန်မှုရှိတဲ့ အခိုက်အတန့်တွေကို အသက်ဝင်စေတဲ့ တက်ကြွတဲ့ ပူစီနံ အသွင်အပြင်တစ်ခုတည်းနဲ့ အပြန်အလှန် တုံ့ပြန်မှုရှိတဲ့ အခိုက်အတန့်တွေကို အသက်ဝင်စေပါတယ်။ interface က မှောင်မိုက်တဲ့အခန်းတစ်ခုနဲ့ ဆင်တူပြီး ထုတ်ကုန်တွေနဲ့ အမှတ်တံဆိပ်တွေက အလင်းရဲ့ အရင်းအမြစ်တွေဖြစ်ပြီး ဓာတ်ပုံတွေနဲ့ ဆိုင်ရှေ့မျက်နှာစာတွေက အနက်ရောင်နီးပါး မျက်နှာပြင်တွေကို တောက်ပစေပြီး chrome အစိတ်အပိုင်းတွေကတော့ ပျောက်ကွယ်သွားပါတယ်။ အစိတ်အပိုင်းတွေက geometric ဖြစ်ပေမယ့် နူးညံ့ပါတယ်- အနားသတ်ပါးတဲ့ 12px-radius ကတ်တွေ၊ ဆေးပြားပုံသဏ္ဍာန် ခလုတ်တွေနဲ့ အော်သံတွေထက် တိုးတိုးလေးပြောတဲ့ 330-weight စာလုံးပုံစံတွေ ပါဝင်ပါတယ်။ တစ်ခုတည်းသော chromatic punctuation mark (#36f4a4) ကို link တွေ၊ tag တွေနဲ့ focus state တွေမှာ အနည်းငယ်သာ အသုံးပြုထားပြီး merchant ဇာတ်လမ်းတွေက visual focal point ဖြစ်နေစေဖို့အတွက် လုပ်ဆောင်နိုင်တဲ့ အခိုက်အတန့်တွေအတွက် အရောင်ကို သီးသန့်ထားပေးပါတယ်။
အများဆုံးအကျယ်မှာ ~1280px ဖြစ်ပြီး၊ အလယ်ဗဟိုတွင်ရှိပြီး၊ ဓာတ်ပုံကွန်တိန်နာထက်ကျော်လွန်၍ အကျယ်အပြည့် splash blocks များပါရှိသည်။ စာမျက်နှာ rhythm သည် အလှည့်ကျဖြစ်သည်- (1) အပေါ်ယံဖုံးအုပ်ထားသော ခေါင်းစဉ်နှင့် call-to-action ခလုတ်များပါသည့် အကျယ်အပြည့် dark splash စာမျက်နှာ၊ (2) ကော်လံ ၂ ခုတွင် အကျယ်အများဆုံးစာသားနှင့် ရုပ်ပုံ blocks များပါသည့် သက်တောင့်သက်သာရှိသော dark အပိုင်းများ သို့မဟုတ် ကော်လံ ၃ ခုတွင် ရုပ်ပုံ grid များ၊ (3) ပိုမိုနက်ရှိုင်းသော canvas ပေါ်တွင် မြှင့်တင်ထားသော ကတ်များအဖြစ် ပြသထားသော interactive showcase panel များ (ထုတ်ကုန်ကတ်၊ ပို့ဆောင်ရေးဂဏန်းတွက်စက်၊ ကမ္ဘာ့မြေပုံ)။ Navigation သည် logo + navigation element ၃ ခု + secondary links + primary call-to-action ခလုတ်ပါသည့် fixed top bar တစ်ခုဖြစ်ပြီး အားလုံးကို ညာဘက်သို့ ချိန်ညှိထားသည်။ vertical rhythm သည် အပိုင်းများအကြား ချောမွေ့သော transition ဖြင့် 80px ကွာဟချက်များကို အသုံးပြုသည် - dark အပိုင်းများအကြားတွင် ပိုင်းခြားထားခြင်းမရှိဘဲ၊ မျက်နှာပြင်အရောင်တွင်သာ ပြောင်းလဲမှုရှိသည်။
အမြင်အာရုံဒီဇိုင်းသည် လက်လီရောင်းချသူအပေါ် အဓိကထားပါသည်- အရွယ်အစားအပြည့် ထုတ်ကုန်ဓာတ်ပုံများနှင့် အမှတ်တံဆိပ်ပွဲများမှ ဓာတ်ပုံများသည် အမြင်အာရုံအလေးချိန်၏ အဓိကကို သယ်ဆောင်ထားပြီး မကြာခဏဆိုသလို အဖြူရောင်စာသားများ ထပ်ဆင့်ထားသော နောက်ခံကြီးများဖြင့် ပုံစံဖြင့် ပြုလုပ်ထားသည်။ ပုံများကို တင်းကျပ်စွာ ဖြတ်တောက်ထားပြီး ဆန့်ကျင်ဘက်အရောင်မြင့်မားကာ ပွဲတော်ဆန်သော သဘောသဘာဝရှိသည် (Nasdaq ခေါင်းလောင်းမြည်သံ၊ အုပ်စုလိုက် နှုတ်ခွန်းဆက်စကားများ၊ လက်ထဲတွင် ထုတ်ကုန်များ၏ အနီးကပ်ဓာတ်ပုံများ)။ မှောင်မိုက်သောနောက်ခံသည် ဤဓာတ်ပုံများကို မီးအိမ်များဖြင့် လင်းစေသည်ဟု အထင်အမြင်ကို ဖန်တီးပေးသည်။ သရုပ်ဖော်ပုံများသည် အနည်းဆုံးဖြစ်သည်—အဓိကရှင်းလင်းချက်ကို ထည့်သွင်းထားသော ထုတ်ကုန်ပုံများနှင့် ဆိုင်မျက်နှာစာများ၏ ဖန်သားပြင်ဓာတ်ပုံများဖြင့် လုပ်ဆောင်သည်။ အိုင်ကွန်များသည် အဖြူအမည်းဖြစ်ပြီး 1.5–2px လိုင်းအကျယ်ရှိပြီး ပုံမှန်အားဖြင့် အဖြူရောင် သို့မဟုတ် တက်ကြွသောအခြေအနေများအတွက် #36f4a4 ဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Shopify Mint
#36f4a4— လင့်ခ်များတွင် Active navigation indicator များ၊ focus ring များ၊ tag highlight များနှင့် hover highlight များသည် မှောင်မိုက်သောနောက်ခံတွင် enabled interactivity ခံစားချက်ကို ဖန်တီးပေးသည့် တစ်ခုတည်းသော chromatic sparkle ဖြစ်သည်။
ကြားနေ
- Midnight Forest
#02090a— စာမျက်နှာကင်းဗတ်စ်၊ ခေါင်းစီးနောက်ခံပုံများ၊ အပိုင်းနောက်ခံပုံများ - Deep Lichen
#061a1c— အဓိကကတ်မျက်နှာပြင်များ၊ မြှင့်တင်ထားသော ပြားများ၊ အကြောင်းအရာဘလောက်များ။ - Shaded Fern
#072720— လမ်းညွှန်ဘောင်၊ အပိုကတ်များ၊ ဘောင် မြင့်တက်နေသည်ကို မသိသာလှပါ။ - Spruce Border
#1e2c31— ကတ်များအတွက် ပါးလွှာသော ဘောင်များ၊ ပိုင်းခြားမျဉ်းများ၊ ထည့်သွင်းရန်အကွက် မျဉ်းကြောင်းများ။ - Abyss Indigo
#000a1e— ထုတ်ကုန်များ/သရုပ်ပြမှုများ ထည့်သွင်းရန်အတွက် အပိုမျက်နှာပြင်၊ လုပ်ဆောင်ချက်များ၏ဖော်ပြချက်များပါရှိသော ပြားများ။ - Pure White
#ffffff— အဓိကစာသား၊ ခလုတ်ဖြည့်ခြင်း၊ ခေါင်းစဉ်၊ လိုဂိုများ။
စာလုံးပုံစံ
၁၂ မှ ၇၀ px အထိ · အဆင့် ၈ ဆင့်
- Neue Haas Grotesk — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 330, 400, 500, 550, 600 · အဓိက စာစီစာရိုက်စနစ်မှာ ပြင်းထန်မှုထက် သိမ်မွေ့သော ဖောင့်အလေးချိန် 70–96px (330–400) ရှိသော ခေါင်းစဉ်များ၊ ဖောင့်အလေးချိန် 16–18px (400–500) ရှိသော ကိုယ်ထည်မိတ္တူ၊ နှင့် ဖောင့်အလေးချိန် 14–16px (500–550) ရှိသော navigation နှင့် user interface တို့ဖြစ်သည်။ မျက်နှာပြင်အရွယ်အစားကြီးများတွင် အလွန်ပေါ့ပါးသော ဖောင့်အလေးချိန် 330 သည် ထူးခြားသောအင်္ဂါရပ်တစ်ခုဖြစ်သည်- ၎င်းသည် အလွန်အကျွံမဟုတ်ဘဲ ထိန်းထိန်းသိမ်းသိမ်းဖြင့် ယုံကြည်မှုကို ပေးစွမ်းသည်။
- Inter Variable — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 420, 450, 550 · လမ်းညွှန်မျက်နှာပြင်ဒြပ်စင်များ၊ မှတ်စုငယ်များ၊ tab ထိန်းချုပ်မှုများနှင့် အောက်ခြေရှိ မိုက်ခရိုစာသားများတွင် အသုံးပြုသည့် ဒုတိယဖောင့်အမျိုးအစား။ ၎င်း၏ အနည်းငယ်ပိုကြီးသော စာလုံးသေးများနှင့် စံစာလုံးအကွာအဝေး ပိုမိုများပြားခြင်းကြောင့် ကျစ်လစ်သောအရွယ်အစားများတွင် ပိုမိုဖတ်ရှုရလွယ်ကူစေသည်။ ၎င်းသည် ပုံမှန်နှင့် အလတ်စားဖောင့်ကြားရှိ ကွာဟချက်ကို 420-weight ဖောင့်ဖြင့် ဖြည့်ဆည်းပေးသည့် အခြေအနေများအတွက်လည်း သင့်လျော်ပါသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 12px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1280px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Shopify ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Retool — နွေးထွေးသော အော့ဘ်စီဒီယန် အလုပ်ရုံ - တိကျသောကိရိယာများအတွက် မျက်နှာပြင်တစ်ခု၊ မီးခိုးတလူလူဖြင့် ထွန်းညှိထားသော၊ အရာအားလုံးကို ဖန်တီးထားသည်
- Elektron — သန်းခေါင်ယံအချိန်တွင် စက်ပစ္စည်းထိန်းချုပ်မှုပြားသည် အနက်ရောင်နီးပါးရှိသော ပတ္တူတစ်ခုဖြစ်ပြီး ထုတ်ကုန်ဓာတ်ပုံများသည် တောက်ပနေသော်လည်း အင်တာဖေ့စ်မှာမူ မမြင်နိုင်သလောက်ဖြစ်နေသည်။
- REKKI — ဓာတ်ပုံဓာတ်ခွဲခန်းရှိ ပျံသန်းမှုထိန်းချုပ်ရေး panel
- OFFFICE : — တစ်ဆူတည်းသော ဖောင့်ထဲတွင် နစ်မြုပ်နေသော noir ပြခန်း
- Clyde — မီးအိမ်တစ်ခုတည်းသာရှိသော အရောင်းပြခန်းသည် မှောင်လုနီးပါးဖြစ်နေသော ပြခန်းတစ်ခုဖြစ်ပြီး အခန်းထဲတွင် တစ်ခုတည်းသော အရောင်မှာ နွေးထွေးသော ရောင်ပြေးဘောလုံးဖြစ်သည်။
- Channel Studio — သန္တာကျောက်မီးအုပ်တစ်ခုပါသော စတူဒီယိုဓာတ်ပုံဓာတ်ခွဲခန်း
- Electronic Materials Office — မီးသွေးဖြင့် အလှဆင်ထားသော ပြခန်းတွင် တောက်ပနေသော မီးခဲတစ်ခု
- ORYZO AI — မှောင်ခန်းတစ်ခုအကြောင်း ရိုက်ကူးထားသော ဓာတ်ပုံအက်ဆေး။ နွေးထွေးသောအမှောင်ထုထဲတွင် ဝဲပျံနေသော တစ်ခုတည်းသော အရာဝတ္ထုတစ်ခု၊ ခရင်မ်ဖျော့ဖျော့သည် တစ်ခုတည်းသော အလှဆင်ပစ္စည်းဖြစ်သည်။
- Factory — သန်းခေါင်ယံတွင် "စစ်ခန်း" ဂိတ်။ "စက်ရုံ" သည် မီးအိမ်ထွန်းထားသော ညွှန်ကြားချက်တစ်ခုကဲ့သို့ အဖြူရောင်ကတ်တစ်ခု ကျရောက်နေသည့် လုံးဝမည်းနက်သော ထိန်းချုပ်ခုံတစ်ခုဖြစ်ပြီး အခန်းထဲတွင် တစ်ခုတည်းသော အရာဝတ္ထုမှာ အလုပ်ဖြစ်သည်။
- Hungry Tiger — တန်ဒူရ်မီးဖိုချောင်နံရံပေါ်တွင် နနွင်းရောင်တောက်တောက် ဂရပ်ဖီတီ။ ရွှေရောင်နှင့် သံချေးတက်နေသော အညိုရောင်တို့ ပေါင်းစပ်ထားသော ရောင်စုံပန်းချီ၊ စာလုံးအရွယ်အစား အလွန်ကြီးမားသဖြင့် ဝဘ်ဆိုက်ထက် ဟင်းခတ်အမွှေးအကြိုင်ဈေးကွက် ဆိုင်းဘုတ်နှင့် ပိုတူနေသည်။
- Bibliothèque — မီးရောင်အောက်က အနက်ရောင်ကုဗပုံသဏ္ဍာန်ပြခန်း - ကျယ်ပြောပြီး မှောင်မိုက်တဲ့ ခန်းမကြီးထဲက တစ်ခုတည်းသော မီးထွန်းထားတဲ့ ပန်းကန်ပြား
- Apple (España) — မီးအလင်းရောင်တပ်ဆင်ထားသော အနက်ရောင်ပြဇာတ်ရုံ