UI Style Guide ဆိုတာဘာလဲ?? ဘယ်နေရာတွေမှာသုံးတာလဲ??
ပြောရရင်တော့ UI Style Guideဆိုတာ UI Designerတွေအတွက် lifesaverပါပဲ ။
ဒါလေးကိုမြင်နေတွေ့နေရတာတော့ကြာပါပြီ။ ပုံတွေ,စာတွေဖတ်ကြည့်ပေမယ့် သူ့ကဒီလာက် အသုံး၀င်မယ်ဆိုတာ မသိခဲ့ပါဘူး ။ အခုတော့ UI Style Guideမရှိတာတွေကို createလုပ်၊ ရှိတာတွေပြင်တာ၊ updateတွေ လုပ်ရင်းနဲ့ တကယ်လုပ်ဖြစ်မှ သူရဲ့ အရမ်းအသုံး၀င်ပုံကိုသိတာမို့လို့ Share ပေးဖို့ idea လေးရလာတာနဲ့ ကျနော့ရဲ့အတွေ့အကြုံကိုအခြေခံပြီး ရေးဖြစ်တာပါ။
UI Style Guide ဆိုတာဘာလဲ?
UI Style Guide က UI components တွေကို စီထားတဲ့ ပုံ/File အချပ်ကြီးပါပဲ။ ဘာ Code မှမပါပါဘူး။
UI Components တွေမှာ Color Palette, CTA Button (Call To Action), pop up or overlay messages Style, Error messages Style, Font Family , Font Sizeတွေ, Colorsတွေ, Form Input တွေ, Layout Styleတွေ, Card Style, Icon Set, Layout Gridတွေ ပါပါတယ်။
UI Style Guide Create လုပ်ဖို့ဆိုရင်UI Designer တယောက်ပဲလိုပါတယ်။
အချိန်ပေးစရာသိပ်မလိုပါဘူး။ Productလုပ်နေရင်းနဲ့ Style Guide ကို update လုပ်နေရတာပါ။
UI Style Guide ကို ဘယ်နေရာတွေမှာသုံးတာလဲ??
UI Style Guide ကို
- Designer တွေ Design ဆွဲရင် Productive ဖြစ်ဖို့,
- Design Consistency ရှိဖို့ နဲ့
- Front End Developerတွေနဲ့ Communicate, Collaborate လုပ်ဖို့ အဓိကသုံးပါတယ်။
- Productive ဖြစ်တယ်ဆိုတာက
ကိုယ်သုံးတဲ့ Design Tools ပေါ်မူတည်ပြီး ( Sketch, Photoshop, XD, Figma, etc…) ပြန်ပြင်တာ (သို့) Featuresအသစ်ပဲထပ်ထည့်တာပဲဖြစ်ဖြစ်၊ အဲ့ဒီ Style Guide file ထဲကနေ လိုအပ်တဲ့ componentsေ တွယူပြီး ကိုယ်ဆွဲနေတဲ့ Design file ထဲထည့်ပေးလိုက်ရုံပါပဲ။ Form ပဲဖြစ်ဖြစ် , Button ပဲဖြစ်ဖြစ်ပေါ့..ကိုယ်သာ Style Guide မထားဘူးဆိုရင် တစ်ခုအသစ်ထည့်တိုင်း..ပြင်တိုင်း… ပြန်ဆွဲနေရမှာပါ။ - Style Guide မရှိရင်
ဥပမာ- CTA Button တခုကိုပဲဆွဲမယ်ဆိုပါစို့.. Buttonတွေမှာ ယေဘူယျအားဖြင့် Size (၃)မျိုးရှိပါတယ်…Small, Normal နဲ့ Large Size ပါ။ အခုကတော့ (1)ခုကိုပဲ မြင်သာအောင်ပြောပြပါ့မယ်… CTA Button ဆွဲရင် ပထမဆွဲတုန်းက Height- 40 ၊ Width-120 နဲ့ပဲထားပါတော့ … ပထမတော့ CTA တွေရဲ့ Sizeတွေကို မှတ်မိကောင်းမှတ်မိနေနိုင်ပေမယ့် နောက်ပိုင်း ပြင်တာတွေ, update တွေ, feature အသစ်တွေများလာတဲ့အခါ Components တွေလည်း အသစ်တိုးတာတွေများလာမယ်။components တွေရဲ့ styleတွေကိုလည်း မှတ်ရတာများလာမယ်။ မှတ်ရတာများလာတော့..တချို့တ၀က်ကိုမေ့တာကတော့ ထုံးစံပါပဲ။ နောက်ဆုံးတော့ ပထမကိုယ်မှတ်ထားတဲ့ Button အတိုင်းအတာ size တွေဟာ သိပ်မသေချာတော့ပါဘူး။ ဇဝေဇဝါ ပါပဲ..မေ့ချင်သလိုတောင်ဖြစ်နေဆိုတော့ .. အရင်က size ကိုပြန်ရှာ ပြန်ကြည့်.. ပြန်ဆွဲ .. ဒါတောင် button တခုပဲရှိပါသေးတယ် ..UI Components တွေကအများကြီးပါ။ “ဒါလေး”ပြန်ဆွဲရတာ မကြာပါဘူမထင်ပါနဲ့ “ဒါလေး”တွေများလာတဲ့အခါ “ဒါကြီး”တွေဖြစ်လာပါတယ် (ကျနော့ အတွေ့အကြုံအရပေါ့နော်..)
ဒါမျိုးတွေကို Style Guide သာရှိမယ်ဆိုရင် အေးဆေးပါပဲ.. ရှိပြီးသား componentsေတွဆို..လာထား..အကုန် Style Guideကနေ..ကိုယ့် file ထဲဆွဲထည့် ..မရှိသေးရင်လည်း ..အသစ်ဆွဲပြီး..နောက်တခါပြန်သုံးလို့ရအောင် .. Style Guide ထဲထည့်…အရောင် , size, Style ဘာမှမှားစရာမရှိ၊ ပြန်ဆွဲစရာမလို၊ အချိန်မကုန်တော့ပါဘူး။ ဒီမှာတင် Design က Consistency ရှိပြီး productive ဖြစ်သွားပါပြီ။ - Front-End Developerတွေနဲ့ ဘယ်လို Communicate,Collaborate လုပ်ဖိုသုံးတာလဲ ??
Font-End Developer တွေကို UI Style Guideပေးထားြခင်းအားဖြင့် UI Design ကို ပိုပိုသပ်ရပ်စေပြီး ဆွဲထားတာနဲ့ Developmentလုပ်ထားတာကလည်းအမျာကြီး မကွာတော့ပါဘူး။( Style guide ထဲမှာ color တွေ, sizeတွေ တခြားလိုအပ်တာတွေ အကုန်ပါတာကိုး) မဟုတ်ရင်တော့ …ကိုယ်ဆွဲတုန်းကတော့ လှပသပ်ရပ်နေတာပဲ …. Developmentလုပ်ပြီးမှ ကြည့်လိုက်တော့ ကိုယ်ဆွဲတုန်းလောက် မလှတော့ဘူး. ..တခုခုတော့လိုေနတယ်လို့ ခံစားရတာ မျိုးတွေရှိနိုင်ပါတယ်။ ကျနော် အခုပြောတဲ့ အခြေအနေမျိုးကို UI Designerတွေ ကြုံတွေ့ဖူးမယ်လို့ ထင်ပါတယ် ။ (ကျနော်လည်း ကြုံတွေ့ ခဲ့ရပါတယ်) ။ ဒါပေမယ့် UI Styel Guide သာ ရှိနေရင်…UI Style Guideကို Front-End Developer နဲ့ သာ share ထားရင်.. ဒီလိုမျိုး မဖြစ်နိုင်တော့ပါဘူး။
ပြီးတော့ နောက်တချက်က Front-End Developer တွေအနားမှာ ကိုယ်တိုင်သွားညှိစရာမလိုတော့ပါဘူး။ အချိန်မကုန်တော့ပါဘူး။ (UI Style Guideထဲမှာ color Code တွေကအစ၊ font family ၊ font sizeတွေ ၊ Card တွေရဲ့ drop Shadow အဆုံး…တခြား UI မှာပါတဲ့ Components တွေအကုန် သေချာဖော်ပြပေးထားတဲ့အတွက်ပါ။)
Front-End Developer တွေဖက်ကကြည့်မယ်ဆိုရင်လည်း UI Designer က Design ဆွဲပြီး ပုံအချပ်လိုက်ပေးလိုက်တော့ Size တွေ ,color တွေ, Font Family တွေကို တခုချင်းစီ file ကို ဖွင့်ပြီး လိုက်ကြည့်ရမလို ဖြစ်နေတယ်။ ပြီးတော့ Front-End Developer တွေမှာက UI Designer တွေလို color picker, Photoshop, Sketch, or Other Design tools and Plugin တွေကို သူတို့စက်မှာ သွင်းထားေလ့သိပ်မရှိပါဘူး။ ဒီတော့ color code ကအစ UI Designerက ပေးရပါတယ်။ ပြီးတော့ Design နဲ့ပါတ်သတ်တာမှန်သမျှကို UI Designer ကပဲ အကုန် provideလုပ်ပေးရတာပါ။
ဒါဆို ဘယ်လို provideလုပ်ပေးမှာလဲ???..Chatboxမှာ တခုချင်းစီေမးရင်တခုခြင်းစီ ဖြေတာမျိုးလား??(ဒါက အရင်ကကျနော့အတွေ့အကြုံအရပေါ့နော်)
ဒါဆိုရင်တော့ .. အမေးသံသရာကနေ လွတ်မှာမဟုတ်ပါဘူး.. ဒါကြောင့် ဒီလိုမျိုး Provide လုပ်ပေးဖို့ဆိုရင် တနေရာတည်းမှာ Product မှာပါသမျှ components တွေကို အကုန် list လုပ်ထားတဲ့ Style Guide ကအကုန်ေဖြရှင်းပြီးသားဖြစ်မှာပါ ။
ဒီနေရာမှာ မှတ်သားရမှာက Front-End developer နဲ့ Styleguide ကို share တဲ့အခါမှာ… ဒီအတိုင်း ပုံအ ေသကြီးတခါတည်းပေးလိုက်လို့မရဘူးဆိုတာပါပဲ..ဘာလို့လဲဆိုတော့ သူကို အမြဲ update လုပ်နေရမှာကိုး..။ ဒီတော့ ကိုယ် update လုပ်လိုရမယ့် file linkလေးပဲ share တာပိုအဆင်ပြေပါတယ်။ (ဥပမာ.. Google Drive folder Link ေလး share တာမျိုးပေါ့…) ဒါမှ သူနဲ့ကိုယ်နဲ့ ကြားမှာ Style Guide က အမြဲ sync (Update)ဖြစ်နေမှာပါ။ နောက်မို့ဆို ..ပုံအသေအချပ်လိုက်ကြီးသာ share လိုက်ရင် Style Guideကို တခါ updateလုပ်ရင် တခါ Fileထပ်ပို့နဲ့ fileတွေပုံတာပဲ အဖတ်တင်ပါလိမ့်မယ်။
UI Style Guideကို ဘယ်အချိန်မှာ createလုပ်ရမှာလဲ?
Product မစခင်လား??
Product ပြီးသွားမှလား??
၂ခုလုံးမဟုတ်ပါဘူး ။
Product အသစ်ဆိုရင် Product စလုပ်ပြီဆိုတာနဲ့ Style Guideကို လည်း Create လုပ်ထားရမှာပါ။ ပြီးေတာ့မှ လုပ်နေရင်းနဲ့ တစ်page ခြင်းစီမှာပါတဲ့ Componentsတွေကို design လုပ်ပြီးအဲ့ဒီ componentsေတွကို Style Guideမှာလည်း ထည့်သွားရမှာပါ။ Productမပြီးဆံုးသရွေ့ Style Guide Update ပြီးတယ်ဆိုတာလည်းမရှိပါဘူး.. Featureအသစ်တွေ၊ updateတွေလုပ်နေသမျှ components အသစ်တွေထပ်ထည့်နေရအုံးမှာပါ…။
ရှိပြီးသား product ဆိုရင်လည်း Styleguideမရှိသေးရင် အချိန်ရတဲ့အခါ productမှာရှိတဲ့ Components တွေကို Style Guide Create လုပ်ပြီးထည့်ပါ ။ အဓိကကတော့ Styleguideကို အမြဲ Updateလုပ်ပါ ။
တခြား UI Style Guide တွေကိုလည်းလေ့လာနိုင်အောင် ဖော်ပြပေးလိုက်ပါတယ်။
40 Great Examples Of UI Style Guides
နောက်ဆုံးကျနော်ပြောချင်တာကတော့ Companyတွေအနေနဲ့လည်း ကိုယ့် product အတွက် consistencyရှိဖို့နဲ့ productiveဖြစ်ဖို့အတွက် Style Guide လေးတွေမရှိသေးရင် createလုပ်ဖို့ ကိုယ့် Designerကိုမေးသင့်ပါကြောင်းနဲ့ …
Designer တွေအနေနဲ့လည်း ကိုယ်ကိုင်နေတဲ့ product အတွက် Style Guideလုပ်ထားတာ မရှိသေးရင် Styleguide လုပ်ပါ, သုံးကြည့်ပါ။ ရှိရင်လည်း company ကထွက်ရင် Latest update ဖြစ်တဲ့ UI Style Guides ကို company ကို ပေးခဲ့ဖို့မမေ့ပါနဲ့လို့ မှာရင်း….
Article လေးကတော့ ဒီမှာပြီးပါပြီ။
မရှင်းတာရှိရင်လည်း comment ပေးခဲ့လို့ရပြီး နောက်တောင်းဆိုချင်တဲ့ Articleအကြောင်းအရာများရှိရင်လည်း ဒီ form လေးမှာမေးခဲ့လို့ရပါတယ်။ ကျနော်လည်းလေ့လာသင်ယူဆဲမို့ ကျန်ခဲ့တာ၊ အမှားပါရင်ရှိရင် ထောက်ပြပေးပါ။
ဒါဆို နောက်တပါတ် ကျနော့ Medium က Article လေးမှာ ပြန်တွေ့ကြပါမယ်။ အားလုံးပဲ ကျန်းမာပျော်ရွင်ကြပါစေ။
