Apple (España)
ခေါင်းစဉ်သတင်းများကို မကြားရသလောက်ရှိသော အဖြူရောင်နေရာလွတ်ရှိသော ဘုရားကျောင်းကြီး။ ပါစတယ်အရောင်များနှင့် အပြာရောင်ချည်တစ်ခုတည်းဖြင့်သာ ချည်နှောင်ထားသော ကြီးမားသော ဖောင့် ၇၀၀ ခန့်ရှိသော ကျယ်ပြန့်ပြီး လင်းထိန်နေသော ခန်းမကြီး။
Apple ရဲ့ ထုတ်ကုန်စာမျက်နှာဘာသာစကားဟာ စာစီစာရိုက်ရက်ရောမှုကို လေ့လာခြင်းဖြစ်ပါတယ်- SF Pro Display ရဲ့ ကြီးမားတဲ့ ခေါင်းစဉ်တွေက အဖြူရောင်နောက်ခံမှာ ဝဲနေပြီး ကျယ်ပြန့်တဲ့ အဖြူရောင်နေရာလွတ်တွေ ဝန်းရံထားတာကြောင့် စကားလုံးတိုင်းကို ရည်ရွယ်ချက်ရှိရှိ ခံစားရစေပါတယ်။ palette က monochromatic နီးပါးပါ - #1d1d1f စာသား၊ #ffffff နဲ့ #f5f5f7 ကြားမှာ တစ်လှည့်စီပါတဲ့ canvas - အပြာရောင်တစ်ခုတည်း (#0071e3) ကို အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိတဲ့ အခိုက်အတန့်တွေအတွက်သာ သီးသန့်ထားရှိထားပါတယ်။ အရောင်ကို ထုတ်ကုန်ပုံတွေမှာ (pastel အရောင်တွေ) ပါဝင်ပြီး အလှဆင် UI အစိတ်အပိုင်းတွေအဖြစ် ဘယ်တော့မှ မပါဝင်ပါဘူး။ အစိတ်အပိုင်းတွေက frameless ပါ- အချင်းဝက် 28px ရှိတဲ့ လုံးဝိုင်းတဲ့ကတ်တွေ၊ ဆေးပြားပုံသဏ္ဍာန်ခလုတ်တွေက စာမျက်နှာရဲ့အနားတွေကို ထိလုနီးပါးဖြစ်နေပြီး မြင်သာတဲ့ containers ဒါမှမဟုတ် drop shadow တွေ မရှိပါဘူး။ စည်းချက်ကို ပိုင်းခြားတာ ဒါမှမဟုတ် ဘောင်တွေမဟုတ်ဘဲ အဖြူရောင်နဲ့ မီးခိုးရောင်အစင်းတွေကို တစ်လှည့်စီပြောင်းလဲခြင်းဖြင့် ဖန်တီးထားပါတယ်။
အပိုင်းများသည် စာမျက်နှာ၏ အကျယ်အဝန်းအပြည့်ကို နေရာယူထားပြီး၊ အစွန်းမှအစွန်းသို့ ကျယ်ပြန့်စွာ ဖြည့်စွက်ထားသည် (ခန့်မှန်းခြေအားဖြင့် ၄၀-၁၀၀ မျက်နှာ)။ အများဆုံး အကြောင်းအရာအကျယ်ကို strip တစ်ခုစီအတွင်း ထိရောက်စွာ အလယ်ဗဟိုတွင် ထားရှိသည်။ အဓိကဒြပ်စင်မှာ အလယ်ဗဟိုရှိ stack တစ်ခုဖြစ်သည်- မျက်ခုံးပုံတံဆိပ်၊ ချဲ့ထားသော ခေါင်းစဉ်၊ တစ်ခုတည်းသော call-to-action ခလုတ်၊ ဈေးနှုန်းတန်းနှင့် ထို့နောက် viewport ၏အောက်ခြေတွင် ဖြည့်ထားသော ထုတ်ကုန်ပုံ။ အပိုင်းများသည် ထပ်ခါတလဲလဲပုံစံကို လိုက်နာသည်- strip အတွင်းရှိ ဘယ်ဘက်သို့ ချိန်ညှိထားသော ခေါင်းစဉ်၊ ထို့နောက် ထုတ်ကုန်ဖော်ပြချက်များပါသော ကော်လံနှစ်ခုပါ အပြင်အဆင် (ဘယ်ဘက်တွင် စာသား/ညာဘက်တွင် ရုပ်ပုံ သို့မဟုတ် အလှည့်ကျ)၊ ကတ်များ၏ ကော်လံသုံးခုပါ grid သို့မဟုတ် အလယ်ဗဟိုရှိ visual showcase တို့ဖြင့် ပေါင်းစပ်ထားသည်။ အကြောင်းအရာစည်းချက်ကို အဖြူရောင်နှင့် သုံးရောင်နောက်ခံများကို ၁၀၀-၁၀၀ စင်တီမီတာရှိသော ဒေါင်လိုက်ကွာဟချက်များဖြင့် အပြည့်အဝထိန်းချုပ်ထားသည်—အပိုင်းခြားများမရှိ၊ ကတ်များမပါသော element များပါရှိသည်။ Global navigation သည် တစ်ခုတည်းသော၊ fixed bar တစ်ခုဖြစ်သည်။ ထုတ်ကုန်သတ်မှတ်ချက်အပိုင်းများသည် ကျယ်ပြန့်သော band များကို အသုံးပြုပြီး စာသားကို ကျဉ်းမြောင်းသောကော်လံများ (~၅၆၀px) တွင် အလယ်ဗဟိုပြုထားပြီး ပိုမိုကျယ်ပြန့်သော visual area နှင့် ဆန့်ကျင်ဘက်တွင် ထားရှိထားသည်။
Apple ရဲ့ အမြင်အာရုံဘာသာစကားက အဓိကအားဖြင့် ထုတ်ကုန်ဓာတ်ပုံရိုက်ကူးခြင်းပါ- လူနေမှုပုံစံနောက်ခံ သို့မဟုတ် ဇာတ်ခုံမြင်ကွင်းများမပါဘဲ သန့်စင်သောအဖြူရောင် သို့မဟုတ် အရောင်နောက်ခံတွင် ဟာ့ဒ်ဝဲ၏ အနီးကပ်ပုံများကို ပြသထားသည်။ အဓိကပုံတွင် pastel green MacBook Neo ကို ကိုင်ထားသော လက်များကို ပြသထားသည်—လူသားဒြပ်စင်သည် ဒုတိယဖြစ်ပြီး စိတ်ခံစားမှုထက် စကေးနှင့် အသွင်အပြင်ကို ပြသသည်။ ထုတ်ကုန်မျိုးကွဲကဏ္ဍများတွင်၊ စက်ပစ္စည်းနှစ်ခုကို လိုက်ဖက်သော အနားသတ်အရောင်များ (ပန်းရောင်၊ အစိမ်း၊ ငွေရောင်၊ မိုးပြာရောင်) နောက်ခံတွင် ဘေးချင်းယှဉ်ပြသထားပြီး၊ ကတ်တစ်ခုစီသည် ထုတ်ကုန်အလယ်တွင်ရှိသော ပြားချပ်ချပ်အရောင်ကွက်လပ်တစ်ခုရှိသည်။ အသေးစိတ်ရိုက်ချက်များတွင် ကြားနေနောက်ခံတွင် အလွန်အမင်းအနီးကပ်ပုံများ (လက်တော့ပ်ပတ္တာ၊ ကင်မရာမော်ဂျူး) ကို အသုံးပြုထားသည်။ ရုပ်ပုံများ၊ abstract ဂရပ်ဖစ်များ၊ အလှဆင်ပုံများ မပါရှိပါ—ထုတ်ကုန်ကိုယ်တိုင်က အမြင်အာရုံဒြပ်စင်ဖြစ်သည်။ အိုင်ကွန်ဂရပ်ဖီသည် နေရာတိုင်းတွင်ရှိသည်—1.5–2px အထူရှိသော SF Symbols ပုံစံ monochrome line icon များကို Apple system icon set မှယူထားသည်။ ဓာတ်ပုံရိုက်ကူးခြင်းကို အမြဲတမ်း high-key ပုံစံဖြင့် ပြုလုပ်ထားသည်- ထုတ်ကုန်ကို သုံးဖက်မြင်အရာဝတ္ထုအစား ဂရပ်ဖစ်ပုံစံသို့ လျှော့ချပေးသည့် uniform၊ shadow-free lighting။
ရောင်စုံ
အမှတ်တံဆိပ်
- Electric Blue
#0071e3— UI တွင် တစ်ခုတည်းသော အရောင်အနှစ်သာရမှာ ဖြည့်ထားသော လုပ်ဆောင်ချက်ခလုတ်များဖြစ်ပြီး လုပ်ဆောင်ချက်ခေါ်ဆိုမှုများအတွက် အနည်းငယ်သာ အသုံးပြုပါသည်။ - Link Blue
#0066cc— Inline စာသားလင့်ခ်များ၊ မြားများနှင့် chevron များပါသောလင့်ခ်များ။ - Citrus Gradient
#3b3b23— ထုတ်ကုန်ရဲ့ ထူးခြားချက်ဖြစ်လာတဲ့ နောက်ထပ်အပြီးသတ်နည်းလမ်းတစ်ခုကတော့ အဝါရောင်-အစိမ်းရောင် အသားပေးအရောင်တွေအဖြစ် မှိန်ဖျော့သွားတဲ့ မှောင်တဲ့အောက်ခံအရောင်ပါ။
ကြားနေ
- Primary Ink
#1d1d1f— ခေါင်းစဉ်များ၊ ကိုယ်ထည်စာသားနှင့် ခလုတ်တံဆိပ်များသည် မျက်နှာပြင်အားလုံးတွင် အဓိက ရှေ့မျက်နှာစာအရောင်ဖြစ်ပြီး အဓိကထုတ်ကုန်ပုံ၏ နောက်ခံသည် အပေါ်ဘက်ရှိ #1d1d1f မှ အပြာရောင်သို့ ချောမွေ့စွာ ကူးပြောင်းသည်။ - Mid Gray
#707070— ဒုတိယစာသား၊ အလုပ်မလုပ်သော လမ်းညွှန်ချက်အခြေအနေ၊ အသံတိတ်ထားသော UI အညွှန်းများ - Deep Gray
#474747— လမ်းညွှန်စာသားနှင့် သင်္ကေတပုံများကို အလယ်အလတ်ဖောင့်ဖြင့် အသုံးပြုထားသည်။ - Hairline
#d6d6d6— ကဏ္ဍများနှင့် UI အစိတ်အပိုင်းများအကြား ပါးလွှာသော နယ်နိမိတ်များ။ - Canvas
#f5f5f7— အပြန်အလှန် အပိုင်းနောက်ခံများ - အဖြူရောင်နေရာများကို ပိုင်းခြားထားသော မီးခိုးရောင်အစင်း။ - Paper
#ffffff— ကတ်မျက်နှာပြင်၊ အဓိကစာမျက်နှာနောက်ခံ၊ မှောင်မိုက်သောနောက်ခံပေါ်ရှိ ခလုတ်စာသား။
စာလုံးပုံစံ
၁၂ မှ ၉၆px အထိ · ၁၀ ဆင့်
- SF Pro Display — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 600, 700 · ပြသရန်အတွက် သူရဲကောင်းခေါင်းစဉ်များနှင့် ခေါင်းစဉ်ခွဲများ — 700 အလေးချိန်ကို 80–96px တွင် -1.44px အနုတ်စာလုံးအကွာအဝေးဖြင့် ထားရှိခြင်းသည် Apple ၏ ထူးခြားသော "အဖြူရောင်တွင် ပေါလောမျောနေသော ကြီးမားသော ခေါင်းစဉ်" ကို ဖန်တီးပေးသည်။ အစားထိုးများ- Inter, system-ui
- SF Pro Display — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 600 · အပိုင်းခေါင်းစဉ်များ၊ ကတ်ခေါင်းစဉ်များ၊ ခေါင်းစဉ်ခွဲများ - အပေါ်က ခေါင်းစဉ်တိုတွေနဲ့ မတူဘဲ အလတ်စားအရွယ်အစားတွေမှာ စာလုံးအကွာအဝေး အနည်းငယ် အပြုသဘောဆောင်တဲ့ ၆၀၀ ဖောင့်က နွေးထွေးပြီး ဖော်ရွေတဲ့ခံစားချက်ကို ခံစားရစေပါတယ်။
- SF Pro Text — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 600 · ကိုယ်ထည်စာသား၊ လမ်းညွှန်ချက်၊ အထောက်အကူပြုစာပိုဒ်များနှင့် စာတန်းငယ်များအတွက်၊ အညွှန်း ၄၀၀ တွင် 17px ရှိသော ဖောင့်သည် အဓိကဖောင့်ဖြစ်သည်။ အနုတ်စာလုံးအကွာအဝေးသည် သတင်းအချက်အလက်များသော စာမျက်နှာများတွင် အဓိကစာသားကို ပိုမိုတိကျစွာ ဖော်ပြနိုင်စေပါသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8-10px |
| ခလုတ်အချင်းဝက် | 980px |
| ကတ်အချင်းဝက် | 28px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 100-120px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Apple (España) ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Airbnb — သန္တာရောင် စာညှပ်တစ်ခုပါသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် ပြခန်းနံရံတစ်ခု
- Peak Design — ပြခန်းနံရံ၊ တစ်စိတ်တစ်ပိုင်း အလင်းရောင်
- Ramp — အယ်ဒီတာ့အာဘော် ဘဏ္ဍာရေးဌာန၊ နီယွန်မာကာတစ်ခုတည်းပါသော အဖြူအမည်းစာမျက်နှာများ။ စာစောင်၏ အဖြူအမည်း မျက်နှာပြင်နီးပါးရှိပြီး၊ တောက်ပသော လိမ္မော်ရောင် မျဉ်းကြောင်းတစ်ခုတည်းက အပြန်အလှန် ဆက်သွယ်မှုတိုင်းကို ငွေကြေးဆိုင်ရာ အချက်ပြမှုအဖြစ်သို့ ပြောင်းလဲပေးသည်။
- 099 SUPPLY — အဖြူအမည်း အရာဝတ္ထုတွေနဲ့ ပြည့်နေတဲ့ ပြခန်းနံရံ
- Orderful — စက်မှုလုပ်ငန်းထောက်ပံ့ပို့ဆောင်ရေး ထိန်းချုပ်ရေး ကုန်းပတ် - ပုံနှိပ်ထားသော ထောက်ပံ့ပို့ဆောင်ရေး စေလွှတ်သူ စစ်ဆေးရမည့်စာရင်း၊ မင်အနက်ရောင်နှင့် ခွဲစိတ်မှုဆိုင်ရာ အနီရောင်ဖြင့် ရေးသားထားပြီး၊ စာမျက်နှာတစ်ခုစီတွင် အော်ပရေတာတစ်ဦးမှ အရေးကြီးသောအရာတစ်ခုကို အော်ဟစ်နိုင်လောက်အောင် လျှို့ဝှက်ထားသည်။
- Apple (España) — အဖြူရောင်ပြခန်းပြသမှုခွက်
- teenage engineering — စတူဒီယိုအလင်းရောင်ဆိုင်ရာ စက်မှုလုပ်ငန်းကတ်တလောက် - ထုတ်ကုန်သည် စာမျက်နှာပေါ်ရှိ တစ်ခုတည်းသော အရေးကြီးသော အရာဝတ္ထုဖြစ်ပြီး ကျန်အရာအားလုံးကို ၎င်းနှင့်ပတ်သက်ပြီး ဆွေးနွေးထားသည်။
- Apple (España) — မနက်ခင်းမြူခိုးတွေကြားက ပြခန်းပြတင်းပေါက်တစ်ခု
- Lightship — လမ်းမကြီးရဲ့ ရုပ်ရှင်ပုံစံ ဒိုင်ယိုရာမာတစ်ခု။ နီးကပ်စွာ တပ်ဆင်ထားတဲ့ ရှုခင်းဓာတ်ပုံကြီးတွေနဲ့ အလှဆင်ထားတဲ့ နွေးထွေးတဲ့ ခရင်မ်ရောင်ပြခန်းနံရံတွေ၊ ဘောင်တွေမှာ မမြင်ရတဲ့ ပါးလွှာတဲ့ အနက်ရောင်စာလုံးတွေနဲ့ မြက်ခင်းပြင်ထဲက မီးပုံလို တောက်ပတဲ့ လိမ္မော်ရောင်တစ်ခုတည်းက monochrome ကို ဖြိုခွင်းနေတယ်။
- Custo — တစ်ထပ်တည်းကျတဲ့ ဖောင့်နဲ့ သေနတ်ရောင်ပြခန်း။ မီးခိုးရောင်-အစိမ်းရောင် ရောစပ်ထားတဲ့ ပြခန်းတစ်ခု၊ အဲဒီမှာ မှောင်မိုက်တဲ့ အရာဝတ္ထုတစ်ခုတည်းနဲ့ 57px ဖောင့်က သူ့အလိုလို ပြောပြနေတယ်။
- Silencio — ပေါလောမျောနေသော ရှေးဟောင်းပစ္စည်းများပါသည့် အဖြူရောင်အခန်း။ နွေးထွေးသောစက္ကူဖြင့်ပြုလုပ်ထားသော ပြခန်းပြသမှုတစ်ခု၊ အနုတ်လက္ခဏာထုထည်နောက်ခံတွင် အစိတ်အပိုင်းတစ်ခုစီသည် ၎င်း၏နေရာယူထားပြီး တိတ်ဆိတ်မှုသည် ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်တစ်ခုဖြစ်သည်။
- ORYZO AI — မှောင်ခန်းတစ်ခုအကြောင်း ရိုက်ကူးထားသော ဓာတ်ပုံအက်ဆေး။ နွေးထွေးသောအမှောင်ထုထဲတွင် ဝဲပျံနေသော တစ်ခုတည်းသော အရာဝတ္ထုတစ်ခု၊ ခရင်မ်ဖျော့ဖျော့သည် တစ်ခုတည်းသော အလှဆင်ပစ္စည်းဖြစ်သည်။