
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 အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Studio — ရွေ့လျားနေသော ပြခန်းနံရံ။ မျက်နှာပြင်တစ်ခုစီသည် တိတ်ဆိတ်ငြိမ်သက်သော မီးခိုးရောင် ပြပွဲမျက်နှာပြင်ကို ကိုယ်စားပြုပြီး စာလုံးပုံစံပစ္စည်းများနှင့် ထပ်နေသော ဖန်တီးမှုလက်ရာများသည် အာရုံစိုက်မှုအတွက် ယှဉ်ပြိုင်ကြသည်။
- Mollie — ကက်ရှ်မီးယားကောင်တာ၊ မှောင်သောစာရင်းဇယား။ အနက်ရောင်စာသားတစ်ဝိုက်တွင် အယ်ဒီတာ့အာဘော်ဒီဇိုင်းအတွက် အဖြူရောင်နေရာလွတ်အလုံအလောက်ချန်ထားပါ၊ ထို့နောက် နွေးထွေးသောခရင်မ်များ၊ အက်စ်ပရက်ဆိုအညိုရောင်များနှင့် ငွေပေးချေမှုနည်းလမ်းများ၏ ထိတွေ့နိုင်သောဓာတ်ပုံများဖြင့် ထုတ်ကုန်နှင့်သက်ဆိုင်သောအချက်များကို အားဖြည့်ပါ။
- Basis Theory — ဒီဇိုင်းစတူဒီယိုရှိ ငွေပေးချေမှုစက်များ။ အဖြူရောင်နည်းပညာစက္ကူ၊ ထပ်နေသော ဖောက်ထွင်းမြင်ရသော ငွေပေးငွေယူအလွှာများနှင့် တစ်ခုတည်းသော အပြာရောင်ထိန်းချုပ်မှုဒြပ်စင်သည် အမြင်အာရုံဆိုင်ရာ ဦးတည်ရာကို သတ်မှတ်ပေးသည်။
- CleanShot X — အပြာရောင်မီးထွန်းထားသော desktop ပါသည့် studio တစ်ခု။ ကျစ်လစ်သော အနက်ရောင်စာသားပတ်လည်တွင် တည်ငြိမ်သော အဖြူရောင်နေရာလွတ်တစ်ခု ဖန်တီးပြီးနောက် ကြွယ်ဝသော အပြာရောင်ထိန်းချုပ်မှုများနှင့် အလွှာလိုက် Mac ထုတ်ကုန်ပုံများကို အဓိကထားလိုက်ပါ။
- Modern Treasury — ဂရပ်စက္ကူပေါ်ရှိ ဘဏ္ဍာရေးစာရင်းဇယား။ ငွေသားစီးဆင်းမှုများကို မျဉ်းကြောင်းငယ်များ၊ အညွှန်းတပ်ထားသော node များနှင့် တိကျပြီး ဖုံးကွယ်ထားသော ထိန်းချုပ်မှုများဖြင့် ပြသထားသည့် တိတ်ဆိတ်ငြိမ်သက်သော အဖြူရောင် လည်ပတ်မှုစာရွက်နှင့် ဆင်တူသည့် စာမျက်နှာများကို ဖန်တီးပါ။
- Basha-Franklin — အဖြူရောင် ဘောင်အောက်က ပြခန်းဇယားကွက်။ နွေးထွေးတဲ့ #f4ede6 အရောင်၊ သိမ်မွေ့တဲ့ အနက်ရောင်ဖွဲ့စည်းပုံနဲ့ ပုံနှိပ်ထားတဲ့ ဗိသုကာလက်ရာ အစုစုနဲ့ တူတဲ့ ဓာတ်ပုံတွေကို အခြေခံထားတဲ့ မညီမျှတဲ့ ကော်လံတွေကို အသုံးပြုပါ။
- Bajgart Office — အယ်ဒီတာ့အာဘော်ပြခန်းနံရံ။ ခရိုမီယမ်ဖြင့်ပြုလုပ်ထားသော interface element များထက် သိမ်မွေ့သော serif font များနှင့် portfolio အပိုင်းအစများ ပိုမိုမြင်သာသော အလေးချိန်ရှိသည့် ကြီးမားသော အဖြူရောင်နေရာလွတ်ကို အသုံးပြုပါ။
- Heptabase — နေရောင်ခြည်ဖြင့် တောက်ပသော စားပွဲ။ နွေးထွေးသော စက္ကူကဲ့သို့သော မျက်နှာပြင်များ၊ မီးသွေးရောင် ထိန်းချုပ်ကိရိယာများနှင့် သုတေသနပြုလုပ်ရန်အတွက် မျောနေသော ပြတင်းပေါက်များသည် ဆော့ဖ်ဝဲလ် ထိန်းချုပ်ကိရိယာတစ်ခုထက် စနစ်တကျ စီစဉ်ထားသော အလုပ်ခွင်တစ်ခု၏ ခံစားချက်ကို ဖန်တီးပေးပါသည်။
- Bejamas — Pajamas—မှန်အနက်ရောင်မှတစ်ဆင့် အက်ဆစ်ထုံး။ မျက်နှာပြင်ကို မှုန်ဝါးနေသော အစိမ်းရောင်အလင်းတန်းများ ဖြတ်ကျော်သည့် ဆွဲဆောင်မှုရှိသော အနက်ရောင်အကန့်များဖြင့် ရောနှောထားသည့် တည်ငြိမ်ပြီး မီးခိုးရောင်ဖျော့ဖျော့ အယ်ဒီတာ့အာဘော် စာမျက်နှာများကို ဖန်တီးပါ။
- Baba — အနီရောင်နေရောင်ခြည်အောက်တွင် ဂရုစိုက်ရမည့်မှတ်စုများ။ လူများ၏ဓာတ်ပုံများကို စိတ်ခံစားမှုဗဟိုချက်အဖြစ်အသုံးပြု၍ အဖြူရောင်၊ ပန်းရောင်နှင့် ခရင်မ်ရောင်သတင်းအချက်အလက်မျက်နှာပြင်များပတ်လည်တွင် ကျယ်ပြန့်သောအနီရောင်ဇာတ်လမ်းအစင်းများကို ဖန်တီးပါ။
- Grafana Labs — Sunrise Signal Station ရဲ့ ထိန်းချုပ်ခန်း။ တိတ်ဆိတ်ငြိမ်သက်တဲ့ မီးခိုးရောင်နဲ့ အဖြူရောင် အလုပ်ခွင်ဟာ ကျယ်ပြန့်တဲ့ လေးရောင် မိုးကုတ်စက်ဝိုင်း ရောင်စဉ်တန်းနဲ့ တိကျတဲ့ အပြာရောင် interface signal တွေနဲ့ ပေါင်းစပ်ထားပါတယ်။
- Kagi — သီးခြားစာဖတ်ခန်း။ တိတ်ဆိတ်ငြိမ်သက်မှုကို ဖြိုခွင်းရန် သိမ်မွေ့သော ခရမ်းရောင်အသားပေးမှုများနှင့် နွေးထွေးသော pastel မျက်နှာပြင်များကို အသုံးပြု၍ ရဲရင့်သော ဂရပ်ဖိုက်စာသားပတ်လည်တွင် ပွင့်လင်းသောအဖြူရောင်နေရာလွတ်တစ်ခု ဖန်တီးပါ။