Shop
အဖြူရောင်စကျင်ကျောက်ပေါ်တွင် ပေါလောမျောနေသော ကုန်သွယ်ရေးကြယ်စု
အွန်လိုင်းစတိုးသည် "အဖြူရောင်ကင်းဗတ်စ်" မော်ဒယ်ပေါ်တွင် လည်ပတ်ပြီး ထုတ်ကုန်များကို thumbnail ဇယားကွက်များအစား ကြီးမားသော၊ ကွေးညွှတ်နေသော image card များအဖြစ် ပြသထားသည်။ interface တစ်ခုလုံးသည် အလွန်ချောမွေ့သည်- တစ်လျှောက်လုံးတွင် 20-28px radii၊ ဆေးပြားပုံသဏ္ဍာန်ထိန်းချုပ်မှုများနှင့် စာသားကို ကြည်လင်ပြတ်သားပြီး ရဲရင့်စေသော တင်းကျပ်သော negative tracking ပါရှိသော ကျစ်လစ်သိပ်သည်းသော 16px GT Standard ကိုယ်ထည်။ စနစ်၏ တစ်ခုတည်းသော ရဲရင့်သော အသားပေးမှုမှာ လိုဂို၊ စက်ဝိုင်းရှာဖွေမှုရလဒ်အကွက်နှင့် တူညီသောခလုတ်တွင် အရောင်ခြယ်ထားသော အရိပ်အဖြစ် ပေါ်လာသည့် တက်ကြွသောခရမ်းရောင် (#5433eb) ဖြစ်သည်။ ကျန် palette ၏ ကျန်အပိုင်းမှာ နွေးထွေးသော ကြားနေအရောင်ဖြစ်သည်- အဖြူရောင်မျက်နှာပြင်များ၊ သိမ်မွေ့သော အေးမြသော မီးခိုးရောင်ကင်းဗတ်စ်၊ သိမ်မွေ့သောဘောင်များနှင့် အနက်ရောင်နီးပါးစာသား။ 12px gutters များဖြင့် သိပ်သည်းဆသည် ကျစ်လစ်သိပ်သည်းနေသော်လည်း hero နှင့် catalog strips များသည် 64-80px ၏ ကျယ်ပြန့်သော vertical rhythm ကြောင့် အသက်ရှူမှားလောက်အောင် လှပနေပြီး ကုန်သွယ်မှုအတွေ့အကြုံကို catalog ထက် browsing အတွေ့အကြုံကဲ့သို့ ပိုမိုခံစားရစေသည်။
အများဆုံးအကျယ်မှာ 1200px ဖြစ်ပြီး ကြည်လင်သော #f2f4f5 ပတ္တူပေါ်တွင် အလယ်တွင်ရှိပြီး ဘယ်ဘက်တွင် 64px အကျယ်ရှိသော ဘေးဘားတစ်ခုပါရှိသည်။ အဓိကဒြပ်စင်မှာ ထုတ်ကုန်ကတ်များကို အလယ်တွင်ရှိသော ခရမ်းရောင် "ဆိုင်" လိုဂိုအထက်တွင် ထားရှိပြီး ၎င်းအောက်တွင် ဆေးပြားပုံသဏ္ဍာန် ရှာဖွေရေးဘားတစ်ခုပါရှိသည်။ အမျိုးအစားဆေးပြားများကို ရှာဖွေရေးဘားအောက်တွင် အလယ်တွင် တစ်တန်းတည်းဖြင့် စီစဉ်ထားသည်။ အကြောင်းအရာကဏ္ဍများ (အမျိုးသမီး၊ အမျိုးသား၊ အလှအပ၊ အိမ်၊ ကလေးနှင့်ကလေးများ) တွင် သတ်မှတ်ထားသော မျဉ်းများအဖြစ် လိုက်ပါသွားပြီး တစ်ခုချင်းစီတွင် ထုတ်ကုန်ပုံများပါရှိသော ကော်လံ ၄ ခုပါ ဇယားကွက် သို့မဟုတ် ကော်လံ ၂ ခုပါ "အဓိကဒြပ်စင်နှင့် ဇယားကွက်" ဖွဲ့စည်းမှုပါရှိသည်။ ဒေါင်လိုက်စည်းချက်သည် ကျယ်ဝန်းသည်- အဓိကကဏ္ဍများအကြား 64–80px။ အောက်ခြေသည် စာမျက်နှာ၏အောက်ခြေရှိ မှောင်မိုက်သော မျဉ်းကြောင်းတစ်ခုဖြစ်ပြီး ကော်လံပုံသဏ္ဍာန်လင့်ခ်အုပ်စုများပါရှိသည်။ အလျားလိုက်ထုတ်ကုန်ပြားများ၏ ညာဘက်ရှိ ကာရိုးဆယ်မြှားများသည် စာမျက်နှာအမှတ်များမပါဘဲ scroll လုပ်နိုင်သော အကြောင်းအရာကို ညွှန်ပြသည်။
ဓာတ်ပုံပညာသည် အဓိကအမြင်အာရုံဒြပ်စင်ဖြစ်သည်- အဖြူရောင်နောက်ခံတွင် မျက်နှာပြင်အပြည့်ထုတ်ကုန်ဓာတ်ပုံများ၊ 1:1 ဖြတ်တောက်ထားသော ထုတ်ကုန်ပုံများနှင့် နွေးထွေးသော မြေကြီးအရောင်များ (အညိုရောင်၊ terracotta၊ sage၊ ivory) ပါသော လူနေမှုပုံစံပုံများဖြစ်သည်။ ထုတ်ကုန်ပုံများတွင် ၎င်းတို့၏ကိုယ်ပိုင်အရောင်ရှိသည် - အသုံးပြုသူမျက်နှာပြင်သည် အရောင်မခွဲခြားဘဲ ထုတ်ကုန်အရိပ်များသည် အမြင်အာရုံကွဲပြားမှုကို ပေးစွမ်းနိုင်သည်။ အမှတ်တံဆိပ်လိုဂိုများသည် သီးခြားအိုင်ကွန်များအဖြစ်မဟုတ်ဘဲ မှောင်သော သို့မဟုတ် ပေါ့ပါးသော အဓိကပုံများတွင် ထပ်နေသောစာသားအဖြစ် ပေါ်လာသည်။ အဓိကဖွဲ့စည်းမှုတွင် ထုတ်ကုန်ကတ်များကို wordmark အထက်တွင် အနည်းငယ်ထပ်နေသော ကြယ်စုတစ်ခုအဖြစ် ထားရှိသည်။ အိုင်ကွန်များသည် minimalist နှင့် monochrome (အနက်ရောင်မျဉ်းကြောင်းများ) ဖြစ်ပြီး တစ်ခုတည်းသော အမှတ်တံဆိပ်အရောင်ကို အသုံးပြုသော အမျိုးအစားအိုင်ကွန်များမှလွဲ၍။ ထုတ်ကုန်ပုံများတွင် ရုပ်ပုံများ၊ 3D effect များ သို့မဟုတ် gradient များ မရှိပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Shop Violet
#5433eb— ပေးပို့ခလုတ်၊ အစက်ချစာသားအမှတ်အသားနှင့် အမှတ်တံဆိပ်လိုဂိုတို့သည် အဖြူရောင်နောက်ခံပေါ်ရှိ လုပ်ဆောင်ချက်နှင့် တစ်ဦးချင်း၏ ထူးခြားမှုကို မီးမောင်းထိုးပြသည့် တစ်ခုတည်းသော အသားပေးမှုများဖြစ်သည်။ - Violet Wash
#c0b5f3— ခရမ်းရောင်ပေးပို့ခလုတ်နောက်ကွယ်ရှိ ဖောက်ထွင်းမြင်ရသော ရောင်ခြည်စက်ဝန်းသည် အရောင်မပြောင်းလဲဘဲ ၎င်း၏တောက်ပမှုကို ထိန်းသိမ်းထားသည်။
ကြားနေ
- Canvas Mist
#f2f4f5— စာမျက်နှာနောက်ခံနှင့် မြှင့်တင်ထားသော ကတ်များနောက်ကွယ်ရှိ အပိုမျက်နှာပြင်ပြုပြင်မှု။ - Pure White
#ffffff— ကတ်များ၊ ထည့်သွင်းရန်နေရာများ၊ မျောနေသော ဆိုင်းဘုတ်များနှင့် ဆေးပြားပုံသဏ္ဍာန် ခလုတ်များအတွက် အဓိကမျက်နှာပြင်။ - Ink Black
#000000— မှောင်မိုက်မုဒ်တွင် အဓိကစာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်များ၊ လမ်းညွှန်သင်္ကေတများနှင့် ထုတ်ကုန်ကတ်များ။ - Faint Border
#ebebeb— ကတ်များပေါ်ရှိ ပါးလွှာသော ပိုင်းခြားမျဉ်းများ၊ ထည့်သွင်းသည့်အကွက် မျဉ်းကြောင်းများနှင့် ဆေးပြားပုံသဏ္ဍာန် ခလုတ်ဘောင်များ။ - Muted Gray
#787574— အသုံးမပြုသည့်အခါ ဒုတိယစာသား၊ လမ်းညွှန်အညွှန်းများ၊ အိုင်ကွန်အကြမ်းဖျင်းများ - Cool Stone
#cccccc— နေရာဦးထားမှုများ၊ မသန်စွမ်းအခြေအနေများနှင့် အသုံးမပြုတော့သော အိုင်ကွန်နောက်ခံများ
စာလုံးပုံစံ
၁၁ မှ ၁၆ px အထိ · အဆင့် ၄ ဆင့်
- GT Standard — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400 · အရွယ်အစားအားလုံးတွင် အဓိကဖောင့် - ကိုယ်ထည်စာသားနှင့် ခေါင်းစဉ်နှစ်မျိုးလုံးအတွက်။ GTStandard-MRegular 16px/-0.031em တွင် body စာသား၊ ခလုတ်များနှင့် အညွှန်းများအတွက် အဓိကဖောင့်ဖြစ်သည်။ GTStandard-Memibold 20px/-0.05em တွင် GTStandard-Memibold ကို ခေါင်းစဉ်ကြီးများစွာအတွက် အသုံးပြုသည်။ GTStandard-MMedium 11–12px ကို microcaption များအတွက် အသုံးပြုသည်။ ဖောင့်မူကွဲတစ်ခုစီကို optical weight 400 ဖြင့်ပြသထားသည် - ဖောင့်အဆင့်ဆင့်ကို bold contrast ထက် သိမ်မွေ့သော gradient များနှင့် သိပ်သည်းသော negative letter spacing မှတစ်ဆင့် ရရှိသည်။ ၎င်းသည် signature style တစ်ခုဖြစ်သည်- Shop သည် bold font များဖြင့် မအော်ဟစ်ဘဲ စာလုံးအကွာအဝေးမှတစ်ဆင့် စာသားကို ပုံသွင်းသည်။
- Shopify Sans — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 700 · အက်ပ်တင်ခြင်း ဘန်နာများနှင့် ကွတ်ကီးသဘောတူညီချက်စာသားကဲ့သို့သော စနစ်အဆင့် မက်ဆေ့ချ်များအတွက် သီးသန့်ထားသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 12px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 28px |
| အရိပ်များ | နူးညံ့သောအရိပ်များ |
| အပိုင်းများအကြား | 64px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Shop ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Apple iPhone Duo — အဖြူရောင်ပြခန်းထဲက ခေါက်သိမ်းလို့ရတဲ့ ကိရိယာတစ်ခု။ ထုတ်ကုန်ရဲ့ ရုပ်ပုံတွေကို အလယ်မှာ ထားပြီး စာလုံးပုံစံနဲ့ အပြာရောင် ထိန်းချုပ်မှုတွေကိုတော့ တမင်တကာ နှိမ့်ချထားပါတယ်။
- AYOCIN — ကျန်းမာခြင်းရဲ့ နေရောင်ခြည်သင်္ကေတ။ နွေးထွေးတဲ့ အတွင်းပိုင်းဓာတ်ပုံနဲ့ ဆင်တူတဲ့ မျက်နှာပြင်တွေကို ဖန်တီးပါ- ကြီးကျယ်ခမ်းနားတဲ့ စာလုံးပုံစံ၊ ဖြည်းဖြည်းချင်း မှုန်ဝါးနေတဲ့ ဗိသုကာလက်ရာအရိပ်တွေနဲ့ တိတ်ဆိတ်ငြိမ်သက်ပြီး ခရင်မ်လို နူးညံ့တဲ့ နေရာမှာ တည်ရှိတဲ့ အလင်းရောင်ရှိတဲ့ အရာဝတ္ထုတစ်ခုတည်း။
- Apple AirPods 5 — Apple — အဖြူရောင်နောက်ခံပေါ်ရှိ ရုပ်ရှင်ရုံ။ တည်းဖြတ်ရန်အတွက် ကျယ်ပြန့်သော အဖြူရောင်နေရာလွတ်သည် ရွေ့လျားနေသော အရာဝတ္ထုများ၏ ပုံရိပ်များနှင့် ပြည့်ဝသောအလင်းရောင်များသည် အမြင်အာရုံဆိုင်ရာ ဒရာမာကို ဖန်တီးပေးသည့် အပြည့်အစုံ ကြော်ငြာများအတွက် နေရာပေးသည်။
- Hopper — နေဝင်ချိန် ဆန်တိုရီနီမြို့ကို မျှော်ကြည့်နေသည့် ပြတင်းပေါက်တစ်ခု။ ဦးတည်ရာ၏ ပျော့ပျောင်းသော ဓာတ်ပုံတစ်ပုံသည် လေထုအလွှာအဖြစ် ဆောင်ရွက်ပေးပြီး ၎င်းပေါ်တွင် ကျစ်လစ်သော အဖြူရောင် လမ်းညွှန်မှုနှင့် ဘွတ်ကင်ခလုတ်များ ရှိနေသည်။
- Bose — ကမ်းရိုးတန်းရှိ အသံစင်မြင့်တစ်ခု။ လေတိုက်ခတ်နေသော ကြော်ငြာပုံတစ်ပုံသည် ဘောင်ကို ပြည့်နှက်နေပြီး ၎င်းပတ်လည်တွင် ကြည်လင်ပြတ်သားသော အဖြူအမည်း ကမ်ပိန်းထိန်းချုပ်မှုများကို တိကျသော အသေးစိတ်အချက်အလက်များကဲ့သို့ စီစဉ်ထားသည်။
- Bauhaus Clock — Bauhaus မှ လှုံ့ဆော်မှုရယူထားသော နာရီများ – ပြာလဲ့ရောင် စက်ပိုင်းဆိုင်ရာ အလင်းပြန်မှု။ တည်ငြိမ်ပြီး ပေါ့ပါးသော မျက်နှာပြင်များကို မှောင်မိုက်သော ရုပ်ရှင်နာရီပုံရိပ်ဖြင့် ဘောင်ခတ်ပြီး ပြာလဲ့ရောင်ကို ရှားပါးသော တောက်ပမှုအသေးစိတ်အဖြစ် အသုံးပြုပါ။
- Cursor — မီးခိုးတလူလူဖြင့် ထွန်းထားသော သက်တောင့်သက်သာရှိသော သိုးသားရေချုပ်အလုပ်ရုံ
- Slush — ပါစတယ်စက္ကူပေါ်တွင် လေမှုတ်နိုင်သော စတစ်ကာများ၏ စကြဝဠာ
- MindMarket — ခရင်မ်စက္ကူပေါ်တွင် ရေးသားထားသော ဇာတ်လမ်းပုံပြင်စာအုပ်တစ်အုပ် - နေရောင်စိုစွတ်ပြီး စတစ်ကာကဲ့သို့ နူးညံ့သော မျက်နှာပြင်ပေါ်တွင် ကြီးမားသော ခေါင်းစဉ်များနှင့် ဖြတ်ထုတ်ထားသော စက္ကူဇာတ်ကောင်များ တစ်ပြိုင်နက်တည်း ရှိနေသည့် ဖော်ရွေသော အယ်ဒီတာ့အာဘော် ပတ္တူတစ်ခုဖြစ်သည်။
- Airbnb — သန္တာရောင် စာညှပ်တစ်ခုပါသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် ပြခန်းနံရံတစ်ခု
- Superr — နေ့လည်ခင်းနေရောင်ဖျော့ဖျော့အောက်က နွေးထွေးတဲ့ ကျောင်းသုံးမှတ်စုစာအုပ်တစ်အုပ်။ ခရင်မ်ရောင်စာမျက်နှာ၊ အဖုံးမပါသော လိမ္မော်ရောင်မာကာနှင့် ခွာရန်စောင့်ဆိုင်းနေသော ကော်ဖြင့်ပြုလုပ်ထားသော အမည်စတစ်ကာတစ်ထပ်။
- Apple (España) — ပြတိုက်ပြခန်းသည် နေ့အလင်းရောင်ဖျော့ဖျော့အောက်တွင် တစ်ခုတည်းသော ဆွဲဆောင်မှုရှိသော အလေးချိန်မဲ့ အဖြူရောင်နေရာတစ်ခုဖြစ်ပြီး ပြပွဲတစ်ခုစီကို အရောင်ဖျော့ဖျော့ဖြင့် အလှဆင်ထားသော မီးအိမ်ဖြင့် ထွန်းလင်းထားသည်။