
Apple
အပြာရောင်ခလုတ်တစ်ခုတည်းနဲ့ အဖြူရောင်အခန်းတစ်ခန်း
Apple ရဲ့ ဒီဇိုင်းဟာ ထိန်းထိန်းသိမ်းသိမ်းနဲ့ ပုံဖော်ထားတဲ့ ပုံစံတစ်ခုပါ- အဖြူရောင်နီးပါး ပတ္တူ၊ ကျယ်ဝန်းတဲ့ အဖြူရောင်နေရာလွတ်နဲ့ တက်ကြွတဲ့ အပြာရောင်တစ်ခုတည်းက လုပ်ဆောင်ချက်တိုင်းကို ရည်ရွယ်ချက်ရှိရှိ ခံစားရစေပါတယ်။ အဓိကအာရုံစိုက်မှုကတော့ စာလုံးပုံစံပါ - SF Pro မှာ စာလုံးအရွယ်အစား ကြီးလာတာနဲ့အမျှ လျော့နည်းသွားတဲ့ အနုတ်လက္ခဏာအကွာအဝေးက ခေါင်းစဉ်တွေကို အလွန်အကျွံလေးလံမနေဘဲ ဗိသုကာပိုင်းဆိုင်ရာ ရှင်းလင်းပြတ်သားမှုပေးစွမ်းပါတယ်။ ထုတ်ကုန်က ဒီဇိုင်းပါပဲ- ထုတ်ကုန်ဓာတ်ပုံကြီးတွေနဲ့ လူနေမှုပုံစံပုံရိပ်တွေက လွှမ်းမိုးနေပြီး chrome အစိတ်အပိုင်းတွေက ပါးလွှာတဲ့ဘောင်တွေ၊ ဖောက်ထွင်းမြင်ရတဲ့ လမ်းညွှန်မှုနဲ့ သိမ်မွေ့တဲ့မျဉ်းကြောင်းတွေအဖြစ် ပြောင်းလဲသွားပါလိမ့်မယ်။ အလှဆင်ပစ္စည်းတွေအတွက် အရောင်အပြည့်ဘလောက်တွေနဲ့ ပရိုမိုးရှင်းပစ္စည်းတွေအတွက် အလှဆင်ပစ္စည်းတွေအစား စကေးပြောင်းလဲမှုတွေကတစ်ဆင့် စည်းချက်ညီမှုကို ဖန်တီးပေးပါတယ်။
စာမျက်နှာ အပြင်အဆင်သည် အကျယ်အပြည့်ရှိသော စာမျက်နှာဖြစ်ပြီး အများဆုံး ကွန်တိန်နာအကျယ်ကို ပုံသေမထားပါ။ အပိုင်းများသည် အစွန်းမှအစွန်းသို့ ဆန့်ထွက်နေပြီး စာသားဘလောက်များသည် အလယ်တွင် 980px ခန့်ရှိသည်။ navigation သည် scroll တွင်ပေါ်လာသော ထုတ်ကုန်တစ်ခုစီအတွက် အပို subfolder တစ်ခုပါသည့် တစ်ခုတည်းသော၊ ပုံသေ global bar တစ်ခုဖြစ်သည်။ အဓိက အပြင်အဆင်သည် အမြဲတမ်းအလယ်တွင်ရှိသည်- ထုတ်ကုန်အမည်ကြီးတစ်ခု၊ တစ်ကြောင်းတည်းသော tagline တစ်ခု၊ pill ခလုတ်နှစ်ခု၊ ထို့နောက် ကျန်ရှိသော viewport ကိုဖြည့်သည့် ထုတ်ကုန်ပုံတစ်ပုံ။ အပိုင်းများကို ဒေါင်လိုက်စီတန်းထားသော ကျယ်ပြန့်သော ဒေါင်လိုက်စည်းချက် (အပိုင်းများအကြား 64px+)၊ #f5f5f7 နှင့် အရောင်နောက်ခံများကို တစ်လှည့်စီစီထားသည်။ အောက်ဆုံးစာမျက်နှာသည် အကျယ်အပြည့်ဝန်ဆောင်မှုကတ်များ (Apple TV+၊ Fitness+၊ Music၊ Arcade) ၏ အလျားလိုက်အတန်းတစ်ခုဖြစ်ပြီး တစ်ခုစီတွင် overlay text နှင့် pill ခလုတ်တစ်ခုပါရှိသည်။ ဘေးဘက်များမပါ၊ multi-column content layout များမပါ၊ asymmetrical composition များမပါ—အရာအားလုံးသည် အလယ်တွင်၊ အထပ်လိုက်စီတန်းထားပြီး၊ ညီမျှသည်။
ဓာတ်ပုံပညာသည် အဓိကအမြင်အာရုံဘာသာစကားဖြစ်သည်။ ထုတ်ကုန်ဓာတ်ပုံများကို ဖြူဖွေးသန့်စင်သော သို့မဟုတ် နူးညံ့သောမီးခိုးရောင်နောက်ခံတွင် ရိုက်ကူးထားပြီး မည်သည့်နောက်ခံအကြောင်းအရာမှမပါဘဲ—ကိရိယာသည် ကြယ်ပွင့်ဖြစ်ပြီး သီးခြားဖြစ်ပြီး အလင်းရောင်ရှိသည်။ လူနေမှုပုံစံဓာတ်ပုံများကို အကျယ်အပြည့်ရှိသော ဘန်နာများဖြင့် ပြသထားပြီး မကြာခဏ တင်းကျပ်စွာဖြတ်တောက်ထားသော အရာဝတ္ထုများဖြင့် ပြသထားသည်။ အရောင်ပြောင်းလဲမှုများ (ပါစတယ်အပြာ၊ ပန်းရောင်၊ အစိမ်း) သည် အလှဆင်ပစ္စည်းအဖြစ်မဟုတ်ဘဲ ထုတ်ကုန်အပိုင်းများအတွက် နောက်ခံအဖြစ် ဆောင်ရွက်ပေးသည်။ အိုင်ကွန်ဂရပ်ဖီသည် ရိုးရှင်းပြီး မျဉ်းကြောင်းအခြေခံ၊ 1-2px အထူ၊ စာသားနှင့် မီးခိုးရောင်စကေးတူညီသည်။ ထုတ်ကုန်ဓာတ်ပုံများမှလွဲ၍ သရုပ်ဖော်ပုံများ၊ abstract ဂရပ်ဖစ်များ၊ 3D ပုံဖော်ခြင်းများ မပါဝင်ပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Apple Blue
#0071e3— ဖြည့်ထားသော လုပ်ဆောင်ချက်ခလုတ်များ၊ ရွေးချယ်ထားသော အခြေအနေများ - အသွင်အပြင်တိုင်းကို အဓိပ္ပာယ်ရှိစေရန်အတွက် ချွေတာစွာအသုံးပြုသည့် အပြန်အလှန်တုံ့ပြန်နိုင်သော ရောင်စုံအရောင်။ - Link Blue
#0066cc— မီးမောင်းထိုးပြထားသော လုပ်ဆောင်ချက်ဘောင်များ၊ ထည့်သွင်းထားသောလင့်ခ်များ - ပြည့်နေသောတက်ဘလက်သည် အလွန်တောက်ပြောင်နေမည့်နေရာတွင် Apple Blue ထက် ပိုမိုပြည့်ဝသောအရောင်ကို အသုံးပြုထားသည်။ - Signal Blue
#2997ff— အလှဆင်ဘောင်များ၊ ရုပ်ပုံအကြမ်းများ၊ အိုင်ကွန်ဘောင်များ - စနစ်တွင် အဖျော့ဆုံးအပြာရောင်ဖြစ်ပြီး အသုံးပြုသူ အပြန်အလှန်ဆက်သွယ်မှုအတွက်ထက် လေထုအတွက် အသုံးပြုသည်။
ကြားနေ
- Carbon
#1d1d1f— အဓိကစာသား၊ ခေါင်းစဉ်ဘောင်များ၊ လမ်းညွှန်လိုင်းများ၊ ကတ်ဘောင်များ - အဓိကမင်အရောင်မှာ အနက်ရောင်နီးပါးဖြစ်ပြီး အနည်းငယ်နွေးထွေးသော အရိပ်အယောင်ရှိသည်။ - Frost
#f5f5f7— စာမျက်နှာကင်းဗတ်၊ အဓိကစာသားနောက်ခံနှင့် အောက်ခြေမျက်နှာပြင်တို့သည် Apple ၏ထူးခြားသော မီးခိုးရောင်ဖျော့ဖျော့ဖြစ်ပြီး အဖြူရောင်ထက် အနည်းငယ်ပိုအေးသည်။ - Ice
#f4f8fb— ဖော်ပြနိုင်သော မျက်နှာပြင်ဖြည့်မှုများ၊ သိမ်မွေ့သောအရောင်များ၊ မှောင်မိုက်သောနောက်ခံပေါ်ရှိ ခလုတ်စာသား—ထင်ရှားပေါ်လွင်စေခြင်းမရှိစေဘဲ အပိုင်းကို အသက်ဝင်စေသည့် သိမ်မွေ့သောအပြာရောင်။ - Smoke
#333333— ဒုတိယစာသား၊ လမ်းညွှန်ဖြည့်ခြင်း၊ ခလုတ်ဘောင်များ - အလယ်အလတ်မီးခိုးရောင်ထက် ပိုမိုဆွဲဆောင်မှုရှိသော ဘောင်များနှင့် အိုင်ကွန်များအတွက် စွယ်စုံရကြားနေအရောင်။ - Graphite
#474747— Navigation text၊ navigation borders၊ link borders - သည် element အဆင့်ဆင့်တွင် Carbon နှင့် Smoke အကြား အလယ်အလတ်နေရာတွင် တည်ရှိသည်။ - Ash
#707070— အောက်ခြေစာသား၊ စာရင်းဘောင်များ၊ လမ်းညွှန်ဘောင်များ၊ အသံတိတ်စာသား - ရှိရန် လိုအပ်သော်လည်း ထင်ရှားရန်မလိုအပ်သော အကြောင်းအရာအတွက် မီးခိုးရောင်အလယ်အလတ်။
စာလုံးပုံစံ
၁၂ မှ ၅၆px အထိ · အဆင့် ၈ ဆင့်
- SF Pro Display — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 600, 700 · ခေါင်းစဉ်များနှင့် စာသားကြီးများ—၄၀px+ အရွယ်အစားများသည် ကျဉ်းမြောင်းသော အပေါက်နှင့် ပိုမိုအားကောင်းသော negative tracking အတွက် display format ကို အသုံးပြုသည်။ ၇၀၀ ကို ကြော်ငြာ layout များအတွက် သီးသန့်ထားပြီး ၄၀၀ သည် အယ်ဒီတာ့အာဘော် အကြောင်းအရာရှိ ထုတ်ကုန်အမည်များအတွက် သီးသန့်ထားသည်။
- SF Pro Text — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 300, 400, 600 · ကိုယ်ထည်စာသား၊ လမ်းညွှန်ချက်၊ ခလုတ်များ၊ ခေါင်းစဉ်ခွဲများ — အလုပ်လုပ်သောဖောင့်; ကိုယ်ထည်စာသားအတွက် ၄၀၀၊ ခေါင်းစဉ်ခွဲများနှင့် အရည်အချင်းပြည့်မီသော အညွှန်းများအတွက် ၃၀၀၊ လမ်းညွှန်ဒြပ်စင်များနှင့် ခလုတ်စာသားအတွက် ၆၀၀; အနုတ်စာလုံးအကွာအဝေးသည် အရွယ်အစားအလိုက် အချိုးကျလျော့ကျသည် (-0.022em မှ 12px အထိ -0.01em မှ 44px အထိ)။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 12px |
| ခလုတ်အချင်းဝက် | 980px |
| ကတ်အချင်းဝက် | 8px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64px |
| စာမျက်နှာအကျယ် | 1440px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Apple ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Ui — မက်တီစက္ကူပေါ်တွင် လက်တွေ့အစီအစဉ်
- ElevenLabs — ခေါင်းစဉ်ငယ်များပါရှိသော နွေးထွေးသောခရင်မ်ရောင်ဖြင့် ဓာတ်ပုံစာစီစာကုံးတစ်ပုဒ်။ Bauhaus ပုံစံ မှတ်စုစာအုပ်တစ်အုပ်—ဥခွံရောင်စက္ကူ၊ မင်အနက်ရောင်နှင့် ထုတ်ကုန်ပြသရန်အတွက် ခရမ်းရောင်နှင့် လိမ္မော်ရောင်တစ်ခုတည်းသာ ပါဝင်သည်။
- monopo saigon — အယ်ဒီတာ့အာဘော် တိတ်ဆိတ်မှုနောက်ကွယ်မှ အရည်နှင့် တောက်ပသော အလင်းရောင်တစ်ခု—အရည်ပျော်နေသော အလင်းရောင်ပေါ်တွင် ပေါလောမျောနေသော တစ်ရောင်တည်းသော အယ်ဒီတာ့အာဘော်ပြခန်း
- Awesomic — စက္ကူစများနှင့် ဆင်တူသော လိမ္မော်ရောင် ပုဒ်ဖြတ်အမှတ်အသားများပါသည့် အယ်ဒီတာ့အာဘော် သွပ်ကွက်
- Monad — နွေးထွေးသော စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် နည်းပညာဂျာနယ်
- Dub — Link ရဲ့ မက်တီဆန်စက္ကူ ထိန်းချုပ်ကန့်
- Seline Analytics — ပူနွေးသောစက္ကူပေါ်တွင် တိတ်ဆိတ်ငြိမ်သက်သော ခွဲခြမ်းစိတ်ဖြာရေးစားပွဲ
- Ventriloc — ပူနွေးသောစက္ကူပေါ်ရှိဒေတာ၏ အယ်ဒီတာ့အာဘော်စောင့်ကြည့်ရေးဌာန - တစ်ရောင်တည်းသောတိကျမှုကို မီးမောင်းထိုးပြသည့် လိမ္မော်ရောင်မီးခဲတစ်လုံး
- Duolingo — အဖြူရောင်စက္ကူပေါ်တွင် ဆော့ကစားတတ်သော အတန်းပိုင် maskot
- Stripe — အေးခဲထားသောဖန်ပေါ်တွင် အင်ဒီဂိုမင်ဖြင့်ရေးသားထားသော အကောင့်စာအုပ်တစ်အုပ်
- Notion — နေ့လည်ခင်းနေရောင်အောက်က နွေးထွေးတဲ့ စက္ကူမှတ်စုစာအုပ်တစ်အုပ်
- Hyer Aviation — လေယာဉ်မောင်းခန်းထဲက မှောင်ရီပျိုးစ အချိန်။ ဖျော့ဖျော့ မိုးသောက်ချိန် ကောင်းကင်နဲ့ လေယာဉ်ကိုယ်ထည်အရွယ်အစားရှိတဲ့ serif လိုဂိုတို့ ဆုံတွေ့နေပြီး နွေးထွေးတဲ့ ရွှံ့စေးအရောင် တစ်ခုတည်းက monochrome စတိုင်ကို ဖြိုခွင်းလိုက်ပါတယ်။