Airbnb
သန္တာရောင် စာညှပ်တစ်ခုပါသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် ပြခန်းနံရံတစ်ခု
Airbnb ဟာ "အဖြူရောင်ကင်းဗတ်စ်" ပုံစံနဲ့ လည်ပတ်ပြီး ဓာတ်ပုံပညာက အကောင်းဆုံးပါပဲ။ မျက်နှာပြင်တိုင်းနီးပါးဟာ တိတ်ဆိတ်ငြိမ်သက်တဲ့ monochrome frame ဖြစ်ပြီး အိမ်ခြံမြေတွေရဲ့ မျက်နှာပြင်အပြည့်ပုံတွေကို အလုံးစုံထင်ဟပ်စေပြီး လုပ်ဆောင်ချက်ကို ဖော်ပြတဲ့ တစ်ခုတည်းသော အရောင်ဖြစ်တဲ့ သန္တာရောင်သမ်းတဲ့ accent (Rausch) နဲ့ ပေါင်းစပ်ထားပါတယ်။ စာလုံးပုံစံက geometric sans-serif (Airbnb Cereal VF) ဖြစ်ပြီး body text၊ interface နဲ့ section headings (22-22) အတွက် သေးငယ်ပြီး ယုံကြည်မှုရှိတဲ့ အရွယ်အစားတွေဖြစ်ပါတယ်။ negative line spacing နဲ့ ကျယ်ဝန်းတဲ့ line spacing ပါရှိတာကြောင့် စာသားသိပ်သည်းတဲ့ ကတ်တွေကို ဖတ်ရလွယ်ကူစေပါတယ်။ interface က ပြားချပ်ချပ်၊ frameless နဲ့ လုံးဝန်းပါတယ်- ကတ်တွေနဲ့ controls တွေမှာ radii 12-3၊ အဝိုင်း pill-shaped buttons နဲ့ search bar လို ထင်ရှားတဲ့ element တွေအတွက်ပဲ soft, layered shadows တွေရှိပါတယ်။ ကျန်တာအားလုံးကတော့ ကတ်တွေ၊ list items တွေ၊ links တွေဖြစ်ပြီး chrome accents တွေထက် white space နဲ့ fine lines တွေကို အားကိုးပါတယ်။
အကျယ်အဝန်းအပြည့် ကန့်သတ်ချက်မရှိသော အပြည့်အစုံ အပြင်အဆင်—အကြောင်းအရာသည် မြင်နိုင်သော ဧရိယာအတွင်း အစွန်းမှအစွန်းသို့ ဆန့်ထွက်နေပြီး ဒက်စ်တော့ပေါ်ရှိ တစ်ဖက်စီတွင် အလျားလိုက် အနားသတ် ၄၀ px ခန့်ရှိသည်။ ဟီးရိုးသည် ပုံ သို့မဟုတ် ခေါင်းစဉ်မပါဘဲ ကြားနေအဖြူရောင် ပတ္တူပေါ်တွင် အလယ်တွင် မျောနေသော ရှာဖွေရေး အဖုံးတစ်ခုဖြစ်ပြီး ရှာဖွေရေးဘားသည် ဟီးရိုးဖြစ်သည်။ ရှာဖွေမှုအောက်တွင် စာမျက်နှာသည် ဒေါင်လိုက်စီထားသော အလျားလိုက် scroll လုပ်နိုင်သော အပိုင်းများအဖြစ်သို့ ပြောင်းလဲသွားသည် (အတန်းလေးတန်းကို မြင်နိုင်သည်- Featured Homes၊ Great Hotels၊ Other City၊ Available Next Month)၊ တစ်ခုစီတွင် အမြင့် ၃၂၀ px ခန့်ရှိပြီး ဒေါင်လိုက် gutters ၄၈ px ဖြင့် ပိုင်းခြားထားသည်။ အပိုင်းတစ်ခုစီတွင် အလျားလိုက် overflow နှင့် မြှား navigation ပါရှိသော ကတ် ၇ ကတ် grid ကို အသုံးပြုသည်။ footer သည် #f7f7f7 နောက်ခံပေါ်ရှိ လင့်ခ်များ၏ ၃ ကော်လံ grid တစ်ခုဖြစ်ပြီး မူပိုင်ခွင့်အချက်အလက်၊ ဘာသာစကား/ငွေကြေးရွေးချယ်မှုများနှင့် လူမှုမီဒီယာအိုင်ကွန်များပါရှိသော အောက်ခြေဘားတစ်ခု ပါရှိသည်။ navigation သည် အလယ်တွင် tab navigation နှင့် ညာဘက်ချိန်ညှိထားသော ထိန်းချုပ်မှုများပါရှိသော fixed top bar တစ်ခုဖြစ်သည်။
ဓာတ်ပုံပညာသည် အမြင်အာရုံစနစ်ကို လွှမ်းမိုးထားပြီး အိမ်ခြံမြေစာရင်းများ၏ မျက်နှာပြင်အပြည့်ပုံများကို အဓိကအကြောင်းအရာအမျိုးအစားအဖြစ် အသုံးပြုထားသည်။ ဓာတ်ပုံအားလုံးသည် နွေးထွေးပြီး အလင်းရောင်ကောင်းမွန်စွာရရှိသော အိမ်များနှင့် ဟိုတယ်များ၏ အတွင်းပိုင်းနှင့် အပြင်ပိုင်းရိုက်ချက်များဖြစ်ပြီး သဘာဝအရောင်ပြင်ဆင်မှု (filter များ သို့မဟုတ် duotones များမပါဘဲ) ဖြင့် ပြုပြင်ထားသည်။ ပုံများကို စာရင်းကတ်များအတွက် 1:1 aspect ratio ဖြင့် တင်းကျပ်စွာဖြတ်တောက်ထားပြီး ကတ်၏အနားကို bleed မရှိဘဲဖြည့်ထားသည်။ interface တစ်လျှောက်ရှိ icon များသည် monochrome outline (line weight ~16–16) ရှိပြီး navigation categories နှင့် UI controls များအတွက် အနည်းငယ်သာအသုံးပြုသည်။ logo သည် တစ်ခုတည်းသော multicolor graphic element (Rausch) ဖြစ်သည်။ သရုပ်ဖော်ပုံများ၊ 3D render များ၊ abstract graphics များမပါဝင်ပါ။ visual language သည် pure photography နှင့် minimalist monochrome iconography ဖြင့် နူးညံ့သောအဖြူရောင် canvas ပေါ်တွင်ပြုလုပ်ထားသည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Rausch
#ff385c— အနီရောင်ကို အိုင်ကွန်များ၊ ဆိုင်းဘုတ်များနှင့် ဂရပ်ဖစ်အသေးစိတ်အချက်အလက်များအတွက် အလှဆင်အရောင်အဖြစ် အသုံးပြုသည်။ ၎င်းကို လုပ်ဆောင်ချက်တောင်းဆိုမှုများအတွက် အဓိကအရောင်အဖြစ် အသုံးမပြုသင့်ပါ။ - Rausch 600
#e00b41— hover/active မျက်နှာပြင်များပေါ်တွင် brand accents အဖြစ်အသုံးပြုသည့် မျက်နှာပြင်များအတွက် Rausch ဆေး၏ ဖိထားသော မှောင်မိုက်သောဗားရှင်း။
ကြားနေ
- Hof
#222222— ကိုယ်ထည်မိတ္တူ၊ အဓိကစာသား၊ ခေါင်းစဉ်များ၊ အိုင်ကွန်အကြမ်းဖျင်းများနှင့် ပြောင်းပြန်နောက်ခံတို့သည် အနက်ရောင်နှင့်နီးစပ်သော ကြားနေအရောင်ဖြစ်ပြီး အရောင်မခွဲခြားနိုင်သောစနစ်တစ်ခုလုံးအတွက် အခြေခံအဖြစ် ဆောင်ရွက်ပါသည်။ - Foggy
#6a6a6a— ဒုတိယစာသား၊ အသံတိတ်ထားသော စာတန်းထိုးများ၊ အရန်စာသား၊ ပိတ်ထားသော အိုင်ကွန်ဖြည့်ခြင်းနှင့် ကတ်ခေါင်းစဉ်များအောက်တွင် မသိမသာ မက်တာဒေတာ။ - Grey 500
#c1c1c1— စာသားကို ပိတ်ထားခြင်း၊ ထည့်သွင်းရန်နေရာများတွင် placeholder စာသားနှင့် status ကို အလေးမပေးရန် လိုအပ်သည့် muted icon outline များ။ - Bebe
#ebebeb— အနားသတ်ပါးများ၊ မျဉ်းသားထားသော အဝင်အကွက်များ၊ စာရင်းလိုင်းများအကြား ပိုင်းခြားပေးသည့်နေရာများနှင့် သိမ်မွေ့သော ပိုင်းခြားလိုင်းများ။ - Deco
#dddddd— အသုံးမပြုတော့သော ကွန်တိန်နာများ၊ နေရာသတ်မှတ်ခြင်းများနှင့် ပိတ်ထားသော ကတ်အခြေအနေများအတွက် ကတ်နောက်ခံပုံများ။ - Faint
#f7f7f7— စာမျက်နှာကင်းဗတ်နောက်ခံပုံ၊ အောက်ခြေမျက်နှာပြင်နှင့် အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသော အစိတ်အပိုင်းများအတွက် hover state တို့သည် ဤစာမျက်နှာကို သန့်စင်သောအဖြူရောင်ကတ်များနှင့် ကွဲပြားစေသည့် နူးညံ့ပြီး ခရင်မ်ရောင်ဖြစ်သည်။
စာလုံးပုံစံ
၁၁ မှ ၂၈px အထိ · အဆင့် ၅ ဆင့်
- Airbnb Cereal VF — အစားထိုးခြင်း: Circular · မျဉ်းကြောင်းများ 400, 500, 600, 700 · Airbnb အတွက် ဒီဇိုင်းထုတ်ထားတဲ့ စိတ်ကြိုက် geometric sans-serif ဖောင့်။ ကိုယ်ထည်စာသားကို 14px/400 မှာ၊ UI label တွေကို 16px/500 မှာ၊ section heading တွေကို 20px/600 မှာ၊ 22px/500 မှာ -0.02em အကွာအဝေးနဲ့ စာလုံးအကွာအဝေးနဲ့ စာမျက်နှာခေါင်းစဉ်တွေကို 28px/700 မှာ နေရာချထားပြီး စာလုံးအကွာအဝေးက အရွယ်အစားတိုးလာတာနဲ့အမျှ လျော့ကျသွားပါတယ်။ မျက်နှာပြင်အရွယ်အစားကြီးတဲ့ geometric sans-serif ဖောင့်တွေရဲ့ လက္ခဏာတစ်ရပ်ပါ။ "salt" alternate glyph feature ကို ဖွင့်ပေးပါတယ်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 12px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | နူးညံ့သောအရိပ်များ |
| အပိုင်းများအကြား | 48px |
| စာမျက်နှာအကျယ် | 1440px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Airbnb ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Apple (España) — အဖြူရောင်ပြခန်းပြသမှုခွက်
- Silencio — ပေါလောမျောနေသော ရှေးဟောင်းပစ္စည်းများပါသည့် အဖြူရောင်အခန်း။ နွေးထွေးသောစက္ကူဖြင့်ပြုလုပ်ထားသော ပြခန်းပြသမှုတစ်ခု၊ အနုတ်လက္ခဏာထုထည်နောက်ခံတွင် အစိတ်အပိုင်းတစ်ခုစီသည် ၎င်း၏နေရာယူထားပြီး တိတ်ဆိတ်မှုသည် ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်တစ်ခုဖြစ်သည်။
- Oakâme — နေရောင်အောက်က ပူနွေးတဲ့ ကျောက်တုံးတွေနဲ့ ထွင်းထားတဲ့ Provençal အလုပ်ရုံတစ်ခု
- Nike — အားကစားအောင်မြင်မှုများ၏ monochrome ပြခန်း - အဖြူရောင်နံရံများ၊ အနုပညာလက်ရာတစ်ခုအနေဖြင့် ထုတ်ကုန်၊ chrome သည် နောက်ခံတွင် ပျောက်ကွယ်သွားသည်
- Arc — သန်းခေါင်ယံရေပြင်ပေါ်က စက်မှုဇုန်အဖြူရောင်ပြခန်း
- Rivian — ပြခန်း၏ ကွန်ကရစ်နံရံပေါ်ရှိ လျှပ်စစ်ကျောက်တိုင်တစ်တိုင်။ Rivian သည် မော်တော်ယာဉ်တစ်ခုစီကို ကျယ်ပြန့်သော အဖြူရောင်အာကာသကို ထုလုပ်ထားသော ပန်းပုရုပ်တစ်ခုအဖြစ် တင်ပြထားပြီး၊ စာလုံးအရွယ်အစားကြီးမားလွန်းသောကြောင့် ဗိသုကာလက်ရာတစ်ခုဖြစ်လာကာ၊ မက်တီမျက်နှာပြင်ပေါ်ရှိ နေရောင်ခြည်ကဲ့သို့ တစ်ရောင်တည်းသောလေထုကို ဖြိုခွင်းပေးသည့် နွေးထွေးသောအဝါရောင်တစ်ခုတည်းဖြင့် တင်ပြထားသည်။
- Analogue — အနက်ရောင်ပြခန်းပြသမှုအဖုံး - ကုန်ပစ္စည်းများသည် ဟင်းလင်းပြင်ထဲတွင် ဝဲပျံနေသည်
- ddna — ကုသမှုမပြုလုပ်ရသေးသော ပိတ်ချောထည်ပေါ်တွင် နွေးထွေးသော ပြတိုက်ပြသမှုခွက်
- Zellerfeld — အဖြူရောင်စကျင်ကျောက်ပေါ်ရှိ ပန်းပုဆရာအလုပ်ရုံတစ်ခု—ကျောက်ပြားခုံ၏ တစ်ထပ်တည်းမျက်နှာပြင်များ၊ ကိုဘော့မီးပွားတစ်ခု၊ ကြမ်းပြင်မှ မျက်နှာကြက်အထိ စာလုံးသေးများ၏ တိုးတိုးလေးအသံ
- UY Studio — ဘုန်းကြီးကျောင်း၏ ကျောက်ပြခန်းသည် ကွန်ကရစ်နံရံများပါရှိသော တိတ်ဆိတ်ငြိမ်သက်သော နေရာတစ်ခုဖြစ်ပြီး ရေမွှေးပုလင်းများကို အဖြူရောင်အုတ်ခုံများပေါ်တွင် တင်ထားပြီး ၄၀၀ ဝပ် မီးအိမ်တစ်လုံးနှင့် နွေးထွေးသော မီးခိုးရောင်မီးသီးလေးလုံးဖြင့် အလင်းရောင်ပေးထားသည်။
- Basic.Space — အဖြူရောင်စကျင်ကျောက်ပေါ်ရှိ ပြတိုက်မှူးပြခန်း
- COS — အဖြူရောင်နံရံများပါသည့် ခေတ်ဆန်သောပြခန်း