Electronic Materials Office
မီးသွေးဖြင့် အလှဆင်ထားသော ပြခန်းတွင် တောက်ပနေသော မီးခဲတစ်ခု
အီလက်ထရွန်းနစ်ပစ္စည်းများရုံးသည် ညဉ့်နက်ပိုင်းအလုပ်ရုံတစ်ခုဖြစ်သည်- မှိန်ဖျော့ဖျော့ ဂျက်နက်နက်ပတ္တူ၊ တောက်ပသောလိမ္မော်ရောင်မီးခဲတစ်ခုနှင့် ကြေညာမည့်အစား တိုးတိုးလေးပြောသော စာလုံးပုံစံတစ်ခု။ အင်တာဖေ့စ်သည် မျက်နှာပြင်တစ်ခုစီကို မှောင်နေသောစတူဒီယိုတစ်ခုကဲ့သို့ သဘောထားသည်- ကီးဘုတ်၏ဓာတ်ပုံများသည် တစ်ခုတည်းသော အလင်းရင်းမြစ်ဖြစ်ပြီး UI သည် ၎င်းကိုလိုက်နာသည်။ 200-weight GT-Flexa တွင် တည်ရှိသော ခေါင်းစဉ်များသည် ကျယ်ပြန့်သော အနုတ်လက္ခဏာအာကာသတွင် ပေါ်လွင်နေသည်။ ကိုယ်ထည်မိတ္တူသည် ရည်ရွယ်ချက်ရှိရှိ သေးငယ်ပြီး လူသားဆန်သည် (Times)။ အရောင်ကို တိုင်းတာသည်- စာလုံးအတွက် သန့်စင်သောအဖြူရောင်၊ လင့်ခ်များအတွက် မှိန်ဖျော့သောခရမ်းရောင် (#9e9eff) နှင့် ၎င်း၏ကိုယ်ပိုင် 30px အလင်းရောင်ဖြင့် တောက်ပနေသော စာမျက်နှာပေါ်ရှိ လုပ်ဆောင်ချက်တစ်ခုအတွက် လိမ္မော်ရောင်တစ်ခု (#f45500)။ အစိတ်အပိုင်းများသည် 20px အချင်းဝက်အတွင်း တင်းကျပ်စွာ တပ်ဆင်ထားပြီး #9d9d9d တွင် ဘောင်များသည် မသိသာလှဘဲ စနစ်တွင် အရိပ်များသည် အဓိကလုပ်ဆောင်ချက်ပတ်လည်ရှိ အရောင်ရှိသော halo နှစ်ခုသာရှိသည်။
အကျယ်အပြည့်၊ မီးသွေးကင်းဗတ်စ်တစ်ခု၊ အလယ်ဗဟိုတွင်၊ အမြင့်ဆုံးအကျယ်အကြောင်းအရာ (~၁၂၀၀px) ပါရှိသည်။ အဓိကမျက်နှာပြင်သည် ထုတ်ကုန်ဗီဒီယိုပါရှိသော ၂၀px-အချင်းဝက်ရှိသော မီဒီယာကတ်တစ်ခုဖြင့် စတင်ပြီး viewport အကျယ်၏ ၈၀% ခန့်ကို နေရာယူထားပြီး၊ ထို့နောက်တွင် အကြောင်းအရာအပြည့်အစုံအကျယ်နီးပါးအထိ လွှမ်းခြုံထားသော မျဉ်းများစွာပါသည့် GT-Flexa 200 ခေါင်းစဉ်တစ်ခု ပါရှိသည်။ အပိုင်းစည်းချက်- Tobias ပုံစံ အဖုံးအားလုံးပါသော တစ်ခုတည်းသော ထုတ်ကုန်ဖော်ပြချက်အပိုင်းတစ်ခု၊ ထို့နောက် ထုတ်ကုန်ဖော်ပြချက်ကတ်များ၏ 2x2 grid (ဒက်စ်တော့ပေါ်တွင်)။ ကတ်များသည် 1px #9d9d9d ဘောင်များနှင့် ၎င်းတို့အကြားတွင် 24px gutter များကို အသုံးပြုသည်။ ဒေါင်လိုက်အသက်ရှူခြင်းကျယ်ပြန့်ခြင်း—အပိုင်းများကို ပိုင်းခြားမည့်အစား မီးသွေးအနုတ်လက္ခဏာနေရာ ၄၈-၁၂၈px ဖြင့် ပိုင်းခြားထားသည်။ Navigation သည် အပေါ်ဘက်တွင် ကျောက်ချထားသော တစ်ခုတည်းသော၊ ပွင့်လင်းမြင်သာသော panel တစ်ခုဖြစ်ပြီး ဝှက်ထားသောလင့်ခ်များအစုအဝေးနှင့် Ember call-to-action တစ်ခုတည်းပါရှိသည်။ ဘေးဘက်ဘား၊ mega-menu၊ ဒုတိယ navigation မရှိပါ။
ပုံများသည် ထုတ်ကုန်သရုပ်ပြရန် ရည်ရွယ်ချက်အတွက်သာဖြစ်သည်—လုံးဝအနက်ရောင်နောက်ခံတွင် Altar I ကီးဘုတ်၏ အနီးကပ် macro ရိုက်ချက်ဖြစ်ပြီး အပေါ်မှ backlight ဖြင့် ကာဗာလင်းစေပြီး keycap များသည် အနားတစ်ဝိုက်တွင် အလင်းပြန်စေသည်။ လူနေမှုပုံစံ၊ လူ့လက်များ၊ ပတ်ဝန်းကျင်ဆိုင်ရာအခြေအနေများ မရှိပါ။ ပုံများသည် contrast မြင့်မားပြီး မှောင်သည်။ monochrome palette ပြင်ပရှိ တစ်ခုတည်းသောအရောင်မှာ Ember Orange call-to-action ကို ထင်ဟပ်စေသော ကီးဘုတ်ပေါ်ရှိ လိမ္မော်ရောင် power switch ဖြစ်သည်။ ပုံများသည် စတုရန်း သို့မဟုတ် 16:9 ဖြစ်ပြီး ကတ်များ၏အနားစွန်းများကို ကျော်လွန်၍ 20px အချင်းဝက်ရှိသော ကတ်များတွင် အမြဲထားရှိသည် (ဓာတ်ပုံပတ်လည်တွင် padding မရှိဘဲ စာသားသည် အနားအောက်တွင်ရှိသည်)။ အိုင်ကွန်ပုံစံ- တစ်ခုတည်းသော အိုင်ကွန်ပုံစံမှာ လိုဂိုရှေ့တွင် ပြည့်နေသော စက်ဝိုင်းငယ် (●) ဖြစ်သည်—လိမ္မော်ရောင်အစက်တစ်စက်၊ ~6px အထူ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Ember Orange
#f45500— ဖြည့်စွက်ထားသော primary action button သည် UI တွင် တစ်ခုတည်းသော chromatic မျက်နှာပြင်ဖြစ်ပြီး 30px orange halo ပါရှိသောကြောင့် filament ကဲ့သို့ တောက်ပနေသည်။ primary call button ရှိ 30px အပြင်ဘက်အလင်းရောင်သည် Ember Orange hexagon သင်္ကေတကို ထပ်တူပြုသော်လည်း ဖြည့်စွက်ခြင်းမဟုတ်ဘဲ အရိပ်အဖြစ်တည်ရှိပြီး ခလုတ်ကို အတွင်းမှ လင်းလက်နေပုံပေါ်စေသည်။
ကြားနေ
- Studio Charcoal
#202020— ပတ္တူနှင့် ကတ်ထူပြားမျက်နှာပြင်များသည် မှောင်မိုက်သော ပြခန်းတစ်ခု၏ ကြမ်းပြင်ကဲ့သို့ဖြစ်ပြီး လုံးဝမည်းနက်ခြင်းမရှိသောကြောင့် မျက်လုံးသည် နူးညံ့သောအနားများတွင်သာ အနားယူနိုင်သည်။ - Bone White
#ffffff— အဓိကစာသား၊ ပုံများပေါ်ရှိ ပါးလွှာသောဘောင်များနှင့် ရှားရှားပါးပါး ပြောင်းပြန်မျက်နှာပြင်။ ဖောင့်အဆင့်ဆင့်တစ်ခုလုံးကို သီးခြားစီ ထိန်းသိမ်းထားသည်။ - Ash Gray
#9d9d9d— အရောင်ပေါင်းစပ်မှုတွင် အလယ်အလတ်မီးခိုးရောင်တစ်ခုတည်းသာရှိပြီး အဖြူရောင်သည် အလွန်တောက်ပနေသည့်အခါတွင် အသုံးပြုသည်။ - Mid Felt
#eaeaea— ပြောင်းပြန်ပြားများ သို့မဟုတ် modal grids များအတွက် မျက်နှာပြင်ပေါ့ပါးစွာ ဆေးကြောခြင်း - အညိုရောင်နှင့် မှောင်သော ပတ္တူကြားတွင် တည်ရှိသော အဖြူရောင်အရိပ်။ - Carbon
#000000— အထင်ရှားဆုံး အသားပေးဖော်ပြချက်ကတော့ မီးသွေးပတ္တူက ပုံသဏ္ဍာန်ကို ကောင်းကောင်းထိန်းထားဖို့ ပေါ့ပါးလွန်းတဲ့ အိုင်ကွန်စုတ်ချက်တွေနဲ့ ဆန့်ကျင်ဘက်ဘောင်တွေအတွက်ပါ။ - Lavender Link
#9e9eff— ထည့်သွင်းထားသောလင့်ခ်၏အရောင်နှင့် အပိုလုပ်ဆောင်ချက်ဘောင်၏ အပြင်အဆင်သည် နွေးထွေးသောလိမ္မော်ရောင်နှင့် တိတ်ဆိတ်ပြီး အေးမြသော ဆန့်ကျင်ဘက်ဖြစ်ပြီး မီးခိုးရောင်နောက်ခံတွင် လုပ်ဆောင်ချက်များကို ရှင်းရှင်းလင်းလင်း ဖတ်ရှုနိုင်စေရန် သေချာစေသည်။
စာလုံးပုံစံ
၁၆ မှ ၈၆ px အထိ · အဆင့် ၈ ဆင့်
- GT-Flexa — အစားထိုးခြင်း: Inter (200/400) or Manrope (200/400) · မျဉ်းကြောင်းများ 200, 400 · ခေါင်းစဉ်များနှင့် အလှဆင်ပစ္စည်းများအတွက် အဓိကဖောင့်။ 200 အလေးချိန်သည် 24px အထက် ခေါင်းစဉ်တိုင်းကို ခွင့်ပြုသည် - ၎င်းသည် ထူးခြားသောစတိုင်ဖြစ်သည်- 68px နှင့် 86px တွင် စာလုံးများသည် အော်ဟစ်မည့်အစား လေထုထဲသို့ ပျော်ဝင်သွားပုံရသည်။ 400 အလေးချိန်သည် ကြားရခဲသော ခေါင်းစဉ်ခွဲများနှင့် ကတ်စာတန်းများအတွက် သင့်လျော်သည်။ အကြီးဆုံးအရွယ်အစားများတွင် လိုင်းအကွာအဝေးကို 1.0 အထိ လျှော့ချထားသောကြောင့် အလှဆင်ဖောင့်များသည် လေတိုင်ကဲ့သို့ တစ်ခုနှင့်တစ်ခု အထပ်လိုက်စီထားသည်။
- Tobias-light — အစားထိုးခြင်း: Söhne Buch or Inter Tight · မျဉ်းကြောင်းများ 400 · အပိုင်းခေါင်းစဉ်များနှင့် အောက်ခြေလိုဂိုအတွက် ဒုတိယစာလုံးပုံစံ။ ၎င်းကို GT-Flexa 200 အောက်တွင် တစ်ဆင့်နိမ့်သော တန်ချိန်ဆန့်ကျင်ဘက်ပုံစံဖန်တီးရန် အသုံးပြုထားသည်—Tobias တွင် ပိုမိုဗိသုကာလက်ရာနှင့် ဖော်ပြနိုင်သောခံစားချက်ရှိပြီး GT-Flexa တွင် ပိုမိုလေထုဆန်သည်။ အနုတ်စာလုံးအကွာအဝေးသည် Tobias Light ၏ ကျယ်ပြန့်သောအချိုးအစားကို ကျဉ်းမြောင်းစေသည်။
- Times — အစားထိုးခြင်း: Source Serif 4 or PT Serif · မျဉ်းကြောင်းများ 400 · စာသားကိုယ်ထည်နှင့် ခေါင်းစဉ်စာပိုဒ်များသည် ဂျီဩမေတြီပုံစံ၊ အလှဆင်ဖောင့်များနှင့် တမင်တကာ ဆန့်ကျင်ဘက်ဖြစ်သည်။ စာသားကိုယ်ထည်အရွယ်အစားထက် မကျော်လွန်ဘဲ ထုတ်ကုန်ဖော်ပြချက်များကို နွေးထွေးမှုနှင့် အယ်ဒီတာ့အာဘော်ဆိုင်ရာ အခွင့်အာဏာကို ပေါင်းထည့်ပေးသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 4-8px |
| ခလုတ်အချင်းဝက် | 20px |
| ကတ်အချင်းဝက် | 20px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 48-128px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Electronic Materials Office ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- OFFFICE : — တစ်ဆူတည်းသော ဖောင့်ထဲတွင် နစ်မြုပ်နေသော noir ပြခန်း
- Bibliothèque — မီးရောင်အောက်က အနက်ရောင်ကုဗပုံသဏ္ဍာန်ပြခန်း - ကျယ်ပြောပြီး မှောင်မိုက်တဲ့ ခန်းမကြီးထဲက တစ်ခုတည်းသော မီးထွန်းထားတဲ့ ပန်းကန်ပြား
- 21 TSI — ကြက်သွေးရောင် ဗလာနတ္ထိ၊ တစ်ခုတည်းသော ပုံရိပ် - အသုံးပြုသူ မျက်နှာပြင်သည် လေထုထဲသို့ ပျော်ဝင်သွားသည့် အဆင့်မြင့် ဖက်ရှင် အယ်ဒီတာ့အာဘော်
- Structured — ပလတ်စတစ်စက္ကူကဲ့သို့ စက္ကူပေါ်တွင် ရီနေးဆွန်းစ်ပြခန်း
- CHAIBOY — နောက်ခံမီးထွန်းထားသော ဓာတ်ပုံတစ်ပုံတည်းပါသည့် အနက်ရောင်ပြခန်းနံရံ
- Holiday 100 — သန်းခေါင်ယံအချိန်တွင် လက်ဆောင်ပြခန်းတစ်ခု—serif ခေါင်းစဉ်သည် မီးမောင်းထိုးပြသည့်အရာအဖြစ်၊ မှောင်မိုက်သောပတ္တူသည် ကတ္တီပါနံရံအဖြစ် ဆောင်ရွက်ပြီး ထုတ်ကုန်ပုံတစ်ပုံစီကို ဂရုတစိုက်ရွေးချယ်ထားသော ဘောင်တစ်ခုကဲ့သို့ ချိတ်ဆွဲထားသည်။
- Apple (España) — ပြတိုက်ပြခန်းသည် နေ့အလင်းရောင်ဖျော့ဖျော့အောက်တွင် တစ်ခုတည်းသော ဆွဲဆောင်မှုရှိသော အလေးချိန်မဲ့ အဖြူရောင်နေရာတစ်ခုဖြစ်ပြီး ပြပွဲတစ်ခုစီကို အရောင်ဖျော့ဖျော့ဖြင့် အလှဆင်ထားသော မီးအိမ်ဖြင့် ထွန်းလင်းထားသည်။
- Analogue — အနက်ရောင်ပြခန်းပြသမှုအဖုံး - ကုန်ပစ္စည်းများသည် ဟင်းလင်းပြင်ထဲတွင် ဝဲပျံနေသည်
- Apple (España) — Obsidian Gallery ပြခန်းသည် မှောင်မိုက်သော ပြပွဲခန်းမတစ်ခုဖြစ်ပြီး တိုက်တေနီယမ်အရာဝတ္ထုတစ်ခုတည်းသည် မှောင်မိုက်သောနောက်ခံတွင် တောက်ပနေသည်။
- Studio Oker — နီရဲရဲ အသားပေးဖော်ပြထားသည့် မှောင်မိုက်နေသော ပြခန်းတစ်ခု—အနက်ရောင်နံရံများ စီတန်းထားသော ဖိုင်တွဲအခန်းတစ်ခု—တွင် အဖြူရောင်စာလုံးများ ပေါလောမျောနေပုံရပြီး အနီရောင် တိုးတိုးလေးတစ်ချက်က တိတ်ဆိတ်မှုကို ဖြတ်ပြေးနေသည်။
- 099 SUPPLY — အဖြူအမည်း အရာဝတ္ထုတွေနဲ့ ပြည့်နေတဲ့ ပြခန်းနံရံ
- Retool — နွေးထွေးသော အော့ဘ်စီဒီယန် အလုပ်ရုံ - တိကျသောကိရိယာများအတွက် မျက်နှာပြင်တစ်ခု၊ မီးခိုးတလူလူဖြင့် ထွန်းညှိထားသော၊ အရာအားလုံးကို ဖန်တီးထားသည်