Sushi Design System - UI Kit
၁ သောင်း+
ဒေါင်းလုဒ်များ
အားလုံး
info
ဤအက်ပ်အကြောင်း
ဆူရှီသည် သန့်ရှင်းပြီး ရိုးရှင်းသော ဒီဇိုင်းဘာသာစကားဖြင့် အသုံးပြုသူ အင်တာဖေ့စ်များကို ခိုင်ခံ့အောင်တည်ဆောက်ပေးသည့် Zomato ၏ ကိုယ်ပိုင်ဒီဇိုင်းစနစ်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ဇွမ်မာတိုတွင် ဤအရာကို မြေပြင်မှ တည်ဆောက်ခဲ့သည်။ ၎င်းသည် ကျွန်ုပ်တို့အတွက် ဒီဇိုင်းစနစ်တစ်ခုသာမကဘဲ၊ ၎င်းသည် ကျွန်ုပ်တို့၏အသုံးပြုသူများအတွက် အသစ်နှင့် ပိုမိုကောင်းမွန်သောအတွေ့အကြုံကို ပေးဆောင်ရန် ကူညီပေးသည်။ ဆူရှီသည် အနုမြူဗုံး၊ သန့်ရှင်းပြီး ရိုးရှင်းသော ဒီဇိုင်းဘာသာစကားဖြင့် စိတ်ကြိုက်အသုံးပြုသူ အင်တာဖေ့စ်များကို တည်ဆောက်ရာတွင် ကူညီပေးနိုင်သည်။ Sushi သည် ၎င်း၏ကိုယ်ပိုင်ဒီဇိုင်းဘာသာစကားဖြင့် တည်ဆောက်ထားသော်လည်း၊ ၎င်းသည် နယ်ပယ်များစွာတွင် Google ၏ Material Design အစိတ်အပိုင်းများကို အပြည့်အဝလက်ခံပြီး အသုံးပြုပါသည်။
ဒီဇိုင်းစနစ်နှင့် အမှတ်တံဆိပ်လမ်းညွှန်ချက်များအတွက် အကိုးအကားအဖြစ် Zomato အတွင်းရှိ အဖွဲ့အမျိုးမျိုးမှ အသုံးပြုပြီး ကိုယ်စားပြုသည် - Product၊ Engineering၊ Marketing နှင့် Branding။
ဒီဇိုင်းစနစ်ဆိုတာ ဘာလဲ?
ဒီဇိုင်းစနစ်သည် မည်သည့်အပလီကေးရှင်းအရေအတွက်ကိုမဆို တည်ဆောက်ရန်အတွက် ရှင်းရှင်းလင်းလင်း စံနှုန်းများဖြင့် လမ်းညွှန်ထားသည့် ပြန်လည်အသုံးပြုနိုင်သော အစိတ်အပိုင်းများ စုစည်းမှုဖြစ်သည်။ ဒီဇိုင်းစနစ်သည် ဒစ်ဂျစ်တယ်ထုတ်ကုန်တစ်ခုတည်ဆောက်ရန် သင်အသုံးပြုသည့် ပိုင်ဆိုင်မှုများနှင့် အစိတ်အပိုင်းများ စုစည်းမှုတစ်ခုမျှသာမဟုတ်ပါ။ Intercom မှထုတ်ကုန်ဒီဇိုင်းဒါရိုက်တာ Emmet Connolly ၏ပြောကြားချက်အရ "... ဒီဇိုင်းစနစ်အများစုသည် အမှန်တကယ်ပင် Pattern Libraries များဖြစ်သည်- အကန့်အသတ်မရှိနီးပါးနည်းလမ်းများဖြင့် စုစည်းနိုင်သည့် UI Lego အပိုင်းကြီးတစ်ခုဖြစ်သည်။ အပိုင်းအားလုံးသည် တသမတ်တည်းဖြစ်နိုင်သော်လည်း စုစည်းမှုရလဒ်များ ဖြစ်မည်ဟု မဆိုလိုပါ။ သင့်ထုတ်ကုန်သည် ပြန်သုံးနိုင်သော UI အစိတ်အပိုင်းများအစုအဝေးမျှသာဖြစ်သည်။ ဖွဲ့စည်းပုံနဲ့ အဓိပ္ပါယ်ရှိတယ်။ ၎င်းသည် ယေဘူယျဝဘ်စာမျက်နှာမဟုတ်ပါ၊ ၎င်းသည် အယူအဆစနစ်တစ်ခု၏ သင်္ကေတဖြစ်သည်။"
ဆူရှီဒီဇိုင်းစနစ်
အခြေခံများ
ဖောင်ဒေးရှင်းများသည် ကျွန်ုပ်တို့၏ ဒီဇိုင်းစနစ်၏ စာစီစာရိုက်၊ ရောင်စုံ palettes၊ အိုင်ကွန်များ၊ အကွာအဝေး၊ အရိပ်နှင့် အချက်အလက်ဗိသုကာကို သတ်မှတ်သည့် ဒစ်ဂျစ်တယ်အမှတ်တံဆိပ်လမ်းညွှန်ချက်များဖြစ်သည်။ အက်တမ်ဒီဇိုင်းမူများကို လိုက်နာသော ဆူရှီသည် ပေါင်းစပ်နိုင်သော အစိတ်အပိုင်းများကို အသုံးပြု၍ အောက်ခြေတွင် တည်ဆောက်ထားပြီး အက်တမ် ➡️ မော်လီကျူး ➡️ သက်ရှိများအဖြစ် ခိုင်းစေပါသည်။
အနုမြူဒီဇိုင်း
ကျွန်ုပ်တို့၏စနစ်တွင် ပုံဖော်ထားသည့် Atomic Design (Brad Frost မှ ဖော်ပြထားသည့်အတိုင်း)။
#Atoms
အသေးဆုံး ခွဲခြားမရနိုင်သော ယူနစ်များသည် အက်တမ်များဖြစ်သည်။ Android (သို့မဟုတ် မည်သည့်မိုဘိုင်း UI) တွင်မဆို စာသားအညွှန်းများ၊ ခလုတ်များနှင့် ရုပ်ပုံကိုင်ဆောင်သူများသည် အက်တမ်များဖြစ်သည်။
#မော်လီကျူးများ
အက်တမ်များစွာကို ဖွဲ့စည်းရန် ပါ၀င်သည့် မြင်ကွင်းများ ဖြစ်သော်လည်း သုံးစွဲသူအတွက် တစ်ခုတည်းသော အရာတစ်ခုကဲ့သို့ ပြုမူနေသေးသည်မှာ မော်လီကျူးများဖြစ်သည်။ ဥပမာအားဖြင့်၊ ထည့်သွင်းသည့်ကွက်လပ်များတွင် ထည့်သွင်းသည့်ဘောက်စ်၊ အမှားအယွင်းအကွက်နှင့် ရှင်းလင်းသောခလုတ်တစ်ခုပါရှိသော်လည်း ၎င်းသည် တစ်ခုတည်းသော အရာတစ်ခုဖြစ်သည်။
#သက်ရှိများ
ရှုပ်ထွေးသော်လည်း ပြန်သုံးနိုင်သော အစိတ်အပိုင်းများ သည် စည်းလုံးညီညွတ်စွာ အတူတကွ လုပ်ဆောင်သည်။ အက်တမ်များနှင့် မော်လီကျူးများစွာဖြင့် ဖွဲ့စည်းထားသည်။ တဂ်များပါ၀င်သော အမှတ်အဆင့်သတ်မှတ်ချက်ဘားများဖြစ်ပြီး တစ်ခုစီတွင် နံပါတ်တစ်ခုနှင့်အိုင်ကွန်တစ်ခုပါရှိသည်။ မတူညီသော အဆင့်သတ်မှတ်ချက်များကို ရွေးချယ်သည့်အခါ တဂ်များသည် အရောင်ပြောင်းသည်။ တဂ်တစ်ခုစီကို အခြားနေရာများတွင်လည်း အသုံးပြုကြသည်၊ သို့သော် အဆင့်သတ်မှတ်ဘားအဖြစ်၊ ၎င်းသည် အဓိပ္ပါယ်အသစ်များကို ဖန်တီးရန်အတွက် အားလုံး အတူတကွ လုပ်ဆောင်ပါသည်။
စာစီစာရိုက်
သင်သိသည့်အတိုင်း စာစီစာရိုက်သည် ရေးထားသောဘာသာစကားကို နားလည်လွယ်၊ ဖတ်နိုင်စေရန်နှင့် ဆွဲဆောင်မှုဖြစ်စေရန် အမျိုးအစားကို စီစဥ်ခြင်းအနုပညာဖြစ်သည်။ အမျိုးအစားအစီအစဥ်တွင် စာလုံးပုံစံများ၊ အမှတ်အရွယ်အစားများ၊ မျဉ်းအရှည်များ၊ လိုင်းအကွာအဝေးနှင့် စာလုံးအကွာအဝေးကို ရွေးချယ်ခြင်းနှင့် စာလုံးအတွဲများကြားရှိ နေရာလွတ်များကို ချိန်ညှိခြင်းတို့ ပါဝင်ပါသည်။
ကျွန်ုပ်တို့သည် အောက်ဖော်ပြပါ စာလုံးပုံစံကွဲများကို ပံ့ပိုးပေးသည်-
ExtraLight
အလင်း
ပုံမှန်အစည်းအဝေး
အလယ်အလတ်
SemiBold
ရဲရင့်ခြင်း။
ExtraBold
ဖောင့်အလေး 8 ခုအထိရှိသော မည်သည့်ဖောင့်ကိုမဆို အသုံးပြုနိုင်ပြီး ၎င်းတို့ကို ဤအမည်တူများမှ သတ်မှတ်ပေးနိုင်သည်။ ကျွန်ုပ်တို့တွင် သရုပ်ပြရန်အတွက် Metropolis၊ Okra နှင့် Roboto ရှိသော်လည်း၊ သင့်အမှတ်တံဆိပ်နှင့် သက်ဆိုင်သည့် မည်သည့်ဖောင့်ကိုမဆို သင်အသုံးပြုနိုင်ပါသည်။
အရောင်များ
ဆူရှီသည် ၎င်း၏ palette တွင် ကြိုတင်သတ်မှတ်ထားသော အရောင်အစုံကိုလည်း ပေးပါသည်။ အလွန်ထူးခြားသောကိစ္စများအတွက်၊ သင့်ကိုယ်ပိုင်အရောင်များကို လွတ်လပ်စွာသုံးနိုင်သော်လည်း၊ သို့မဟုတ်ပါက သင့်ထုတ်ကုန်၏အစိတ်အပိုင်းအားလုံးအတွက် ဤ palette မှအရောင်များကို အသုံးပြုရန် အကြံပြုအပ်ပါသည်။
ကုဒ်သိုလှောင်မှု
ဒီဇိုင်းစနစ်နှင့် အမှတ်တံဆိပ်လမ်းညွှန်ချက်များအတွက် အကိုးအကားအဖြစ် Zomato အတွင်းရှိ အဖွဲ့အမျိုးမျိုးမှ အသုံးပြုပြီး ကိုယ်စားပြုသည် - Product၊ Engineering၊ Marketing နှင့် Branding။
ဒီဇိုင်းစနစ်ဆိုတာ ဘာလဲ?
ဒီဇိုင်းစနစ်သည် မည်သည့်အပလီကေးရှင်းအရေအတွက်ကိုမဆို တည်ဆောက်ရန်အတွက် ရှင်းရှင်းလင်းလင်း စံနှုန်းများဖြင့် လမ်းညွှန်ထားသည့် ပြန်လည်အသုံးပြုနိုင်သော အစိတ်အပိုင်းများ စုစည်းမှုဖြစ်သည်။ ဒီဇိုင်းစနစ်သည် ဒစ်ဂျစ်တယ်ထုတ်ကုန်တစ်ခုတည်ဆောက်ရန် သင်အသုံးပြုသည့် ပိုင်ဆိုင်မှုများနှင့် အစိတ်အပိုင်းများ စုစည်းမှုတစ်ခုမျှသာမဟုတ်ပါ။ Intercom မှထုတ်ကုန်ဒီဇိုင်းဒါရိုက်တာ Emmet Connolly ၏ပြောကြားချက်အရ "... ဒီဇိုင်းစနစ်အများစုသည် အမှန်တကယ်ပင် Pattern Libraries များဖြစ်သည်- အကန့်အသတ်မရှိနီးပါးနည်းလမ်းများဖြင့် စုစည်းနိုင်သည့် UI Lego အပိုင်းကြီးတစ်ခုဖြစ်သည်။ အပိုင်းအားလုံးသည် တသမတ်တည်းဖြစ်နိုင်သော်လည်း စုစည်းမှုရလဒ်များ ဖြစ်မည်ဟု မဆိုလိုပါ။ သင့်ထုတ်ကုန်သည် ပြန်သုံးနိုင်သော UI အစိတ်အပိုင်းများအစုအဝေးမျှသာဖြစ်သည်။ ဖွဲ့စည်းပုံနဲ့ အဓိပ္ပါယ်ရှိတယ်။ ၎င်းသည် ယေဘူယျဝဘ်စာမျက်နှာမဟုတ်ပါ၊ ၎င်းသည် အယူအဆစနစ်တစ်ခု၏ သင်္ကေတဖြစ်သည်။"
ဆူရှီဒီဇိုင်းစနစ်
အခြေခံများ
ဖောင်ဒေးရှင်းများသည် ကျွန်ုပ်တို့၏ ဒီဇိုင်းစနစ်၏ စာစီစာရိုက်၊ ရောင်စုံ palettes၊ အိုင်ကွန်များ၊ အကွာအဝေး၊ အရိပ်နှင့် အချက်အလက်ဗိသုကာကို သတ်မှတ်သည့် ဒစ်ဂျစ်တယ်အမှတ်တံဆိပ်လမ်းညွှန်ချက်များဖြစ်သည်။ အက်တမ်ဒီဇိုင်းမူများကို လိုက်နာသော ဆူရှီသည် ပေါင်းစပ်နိုင်သော အစိတ်အပိုင်းများကို အသုံးပြု၍ အောက်ခြေတွင် တည်ဆောက်ထားပြီး အက်တမ် ➡️ မော်လီကျူး ➡️ သက်ရှိများအဖြစ် ခိုင်းစေပါသည်။
အနုမြူဒီဇိုင်း
ကျွန်ုပ်တို့၏စနစ်တွင် ပုံဖော်ထားသည့် Atomic Design (Brad Frost မှ ဖော်ပြထားသည့်အတိုင်း)။
#Atoms
အသေးဆုံး ခွဲခြားမရနိုင်သော ယူနစ်များသည် အက်တမ်များဖြစ်သည်။ Android (သို့မဟုတ် မည်သည့်မိုဘိုင်း UI) တွင်မဆို စာသားအညွှန်းများ၊ ခလုတ်များနှင့် ရုပ်ပုံကိုင်ဆောင်သူများသည် အက်တမ်များဖြစ်သည်။
#မော်လီကျူးများ
အက်တမ်များစွာကို ဖွဲ့စည်းရန် ပါ၀င်သည့် မြင်ကွင်းများ ဖြစ်သော်လည်း သုံးစွဲသူအတွက် တစ်ခုတည်းသော အရာတစ်ခုကဲ့သို့ ပြုမူနေသေးသည်မှာ မော်လီကျူးများဖြစ်သည်။ ဥပမာအားဖြင့်၊ ထည့်သွင်းသည့်ကွက်လပ်များတွင် ထည့်သွင်းသည့်ဘောက်စ်၊ အမှားအယွင်းအကွက်နှင့် ရှင်းလင်းသောခလုတ်တစ်ခုပါရှိသော်လည်း ၎င်းသည် တစ်ခုတည်းသော အရာတစ်ခုဖြစ်သည်။
#သက်ရှိများ
ရှုပ်ထွေးသော်လည်း ပြန်သုံးနိုင်သော အစိတ်အပိုင်းများ သည် စည်းလုံးညီညွတ်စွာ အတူတကွ လုပ်ဆောင်သည်။ အက်တမ်များနှင့် မော်လီကျူးများစွာဖြင့် ဖွဲ့စည်းထားသည်။ တဂ်များပါ၀င်သော အမှတ်အဆင့်သတ်မှတ်ချက်ဘားများဖြစ်ပြီး တစ်ခုစီတွင် နံပါတ်တစ်ခုနှင့်အိုင်ကွန်တစ်ခုပါရှိသည်။ မတူညီသော အဆင့်သတ်မှတ်ချက်များကို ရွေးချယ်သည့်အခါ တဂ်များသည် အရောင်ပြောင်းသည်။ တဂ်တစ်ခုစီကို အခြားနေရာများတွင်လည်း အသုံးပြုကြသည်၊ သို့သော် အဆင့်သတ်မှတ်ဘားအဖြစ်၊ ၎င်းသည် အဓိပ္ပါယ်အသစ်များကို ဖန်တီးရန်အတွက် အားလုံး အတူတကွ လုပ်ဆောင်ပါသည်။
စာစီစာရိုက်
သင်သိသည့်အတိုင်း စာစီစာရိုက်သည် ရေးထားသောဘာသာစကားကို နားလည်လွယ်၊ ဖတ်နိုင်စေရန်နှင့် ဆွဲဆောင်မှုဖြစ်စေရန် အမျိုးအစားကို စီစဥ်ခြင်းအနုပညာဖြစ်သည်။ အမျိုးအစားအစီအစဥ်တွင် စာလုံးပုံစံများ၊ အမှတ်အရွယ်အစားများ၊ မျဉ်းအရှည်များ၊ လိုင်းအကွာအဝေးနှင့် စာလုံးအကွာအဝေးကို ရွေးချယ်ခြင်းနှင့် စာလုံးအတွဲများကြားရှိ နေရာလွတ်များကို ချိန်ညှိခြင်းတို့ ပါဝင်ပါသည်။
ကျွန်ုပ်တို့သည် အောက်ဖော်ပြပါ စာလုံးပုံစံကွဲများကို ပံ့ပိုးပေးသည်-
ExtraLight
အလင်း
ပုံမှန်အစည်းအဝေး
အလယ်အလတ်
SemiBold
ရဲရင့်ခြင်း။
ExtraBold
ဖောင့်အလေး 8 ခုအထိရှိသော မည်သည့်ဖောင့်ကိုမဆို အသုံးပြုနိုင်ပြီး ၎င်းတို့ကို ဤအမည်တူများမှ သတ်မှတ်ပေးနိုင်သည်။ ကျွန်ုပ်တို့တွင် သရုပ်ပြရန်အတွက် Metropolis၊ Okra နှင့် Roboto ရှိသော်လည်း၊ သင့်အမှတ်တံဆိပ်နှင့် သက်ဆိုင်သည့် မည်သည့်ဖောင့်ကိုမဆို သင်အသုံးပြုနိုင်ပါသည်။
အရောင်များ
ဆူရှီသည် ၎င်း၏ palette တွင် ကြိုတင်သတ်မှတ်ထားသော အရောင်အစုံကိုလည်း ပေးပါသည်။ အလွန်ထူးခြားသောကိစ္စများအတွက်၊ သင့်ကိုယ်ပိုင်အရောင်များကို လွတ်လပ်စွာသုံးနိုင်သော်လည်း၊ သို့မဟုတ်ပါက သင့်ထုတ်ကုန်၏အစိတ်အပိုင်းအားလုံးအတွက် ဤ palette မှအရောင်များကို အသုံးပြုရန် အကြံပြုအပ်ပါသည်။
ကုဒ်သိုလှောင်မှု
အပ်ဒိတ်လုပ်ခဲ့သည့်ရက်
ဒေတာ ဘေးကင်းလုံခြုံရေး
ဆော့ဖ်ဝဲရေးသူများ၏ အက်ပ်က သင့်ဒေတာကို မည်သို့စုစည်းပြီး အသုံးပြုကြောင်း ဤနေရာတွင် ဖော်ပြနိုင်သည်။ ဒေတာ ဘေးကင်းလုံခြုံရေးအကြောင်း ပိုမိုလေ့လာရန်
အချက်အလက်မရရှိနိုင်ပါ
