UI design တွေဆွဲတဲ့အချိန်မှာ Maintainable ဖြစ်ဖို့နဲ့ စနစ်ကျနေဖို့အတွက် Design System လိုအပ်ပါတယ်။ Design System မရှိရင် ကိုယ်ဆွဲထားတဲ့ Design တွေမှာ အရောင်လေးတခုပြောင်းဖို့အတွက် ရှိသမျှ စာမျက်နှာတွေကို အကုန်လုံးကို တစ်ခုချင်းလိုက်ပြင်နေရတတ်တယ်။ ဒါဟာတကယ်တော့မဖြစ်သင့်ပါ။ Page နည်းတဲ့ Project တွေမှာ သိပ်မသိသာပေမယ့် Page တွေ ရာချီပြီး ရှိတဲ့ Project တွေဆိုရင် ဒုက္ခလှလှတွေပါပြီ။ ဒါကြောင့် ကိုယ့်အနေနဲ့ UI တွေကို Design ဆွဲတဲ့အခါ Design System ကို အရင်တည်ဆောက်ပြီး ဆွဲတာက ကိုယ့်ရဲ့ Project ကို ပိုပြီးမြန်ဆန်စေသလို တခြား team တွေနဲ့ တွဲပြီးအလုပ်လုပ်တဲ့အခါမှလည်း အဆင်ပြေစေမှာဖြစ်ပါတယ်။
ဒီတော့ Design System တည်ဆောက်နည်းတွေအများကြီးထဲကမှ အသုံးများတဲ့ Atomic Design System အကြောင်းကို ဒီ ဆောင်းပါးမှာ အကျဉ်းချုပ်ရှင်းပြပေးသွားမှာဖြစ်ပါတယ်။
Atomic Design မှာ element ၅ ခုပါဝင်ပါတယ်။ သူတို့ကိုတော့
- Atoms
- Molecules
- Organisms
- Templates
- Pages လို့မှတ်သားနိုင်ပါတယ်။
1. Atoms
Atoms ဆိုတာကတော့ UI design တခုရဲ့အသေးငယ်ဆုံး အစိတ်အပိုင်းတွေကိုခေါ်တာပါ။ Atom မှာဆိုရင် buttons တွေ text style တွေ inputs တွေ labels တွေနဲ့ icons အထိပါဝင်ပါတယ်။ ဒီလိုသေးငယ်ပြီး အသုံးများတဲ့ element တွေကိုအရင်တည်ဆောက်ရပါတယ်။
2. Molecules
Molecules ဆိုတာကတော့ Atoms တွေကို ပေါင်းစပ်ထားတဲ့ Design Elements တခုဖြစ်ပါတယ်။ ဥပမာ Contact Form တခုမှာဆိုရင် Title ပါမယ် Form Label ပါမယ် Form Input ပါမယ် Submit button ပါမယ်။ ဒီလို Atom လေးတွေကို ပေါင်းစပ်ထားခြင်းကို Molecules လို့ပါတယ်။ ဒီနေရာမှာ ကိုယ့်ရဲ့ project အပေါ်မူတည်ပြီး Molecules တွေရဲ့ Design တွေ Size တွေ အရောင်တွေက အပြောင်းအလဲဖြစ်နိုင်ပါတယ်။
3. Organisms
Organisms ဆိုတာကတော့ Atoms တွေ Molecules တွေကို ပေါင်းစပ်ထားတဲ့ Design Elements တခုဖြစ်ပါတယ်။ Organisms မှာဆို Molecules (၂)ခု (၃)ခု ပေါင်းစပ်ထားတာမျိုးကိုခေါ်ပါတယ်။ ဥပမာ – စောစောက Contact Form မှာကိုပဲ အပေါ်မှာ Header တွေထည့်တာ Navigation တွေထည့်ပြီး ပေါင်းစပ်တာမျိုးတွေပါ။
4. Templates
Templates ဆိုတာကတော့ Organisms အစုအဝေးတွေကို သူ့နေရာနဲ့သူ နေရာအထားအသိုတွေ စီမံထားတဲ့ အခြေအနေတခုပါ။ ကိုယ့်ရဲ့ Project မှာ Article တွေပါရင် Article အတွက် template၊ User Profile တွေရဲ့ template၊ Video တွေရဲ့ template ဒီလိုတစ်ခုချင်း ဖန်တီးထားတဲ့ အခြေအနေကိုခေါ်ပါတယ်။ ဒီ template တွေဟာလည်း Atoms တွေ Molecules တွေကိုအခြေပြီးပေါင်းစပ်ထားတာပဲ ဖြစ်ပါတယ်။ ဒီအခြေအနေမှာ ဘာအချက်အလက်၊ data တွေမှပါအုံးမှာမဟုတ်ပါဘူး။
5. Pages
Pages ဆိုတာကတော့ Atomic Design System ရဲ့ နောက်ဆုံးအပိုင်းပဲဖြစ်ပါတယ်။ Templates တွေကို ပေါင်းစပ် အသုံးပြုကာ ကိုယ့် Project မှာပါဝင်မယ့် တကယ်အချက်အလက် Data တွေကို ထည့်ပြီး UI design တစ်ခု ရုပ်လုံးပေါ်လာတဲ့ အဆင့်ပဲဖြစ်ပါတယ်။
ဒါကြောင့် ဒီလို Design System တခုကိုတည်ဆောက်ထားခြင်းအားဖြင့် ကိုယ့်ရဲ့ Project ဟာ ပြုပြင်ပြောင်းလဲရ လွယ်ကူပြီး စနစ်တကျရှိတဲ့ Design Project တခုကို ရရှိစေမှာပဲဖြစ်ပါတယ်။ ကိုယ့်အနေနဲ့ရော UI Design တွေဆွဲတဲ့အခါ ဘယ်လို Design System တွေကိုအသုံးပြုနေလဲ? UI Design တွေဆွဲအခါ ဘယ်အပိုင်းတွေမှာ အခက်အခဲရှိနေလဲ Comment မှာမျှဝေခဲ့ပေးပါအုံး။ အဆုံးထိဖတ်ပေးတဲ့အတွက် ကျေးဇူးပါတယ်။
Myat Min Lu
Founder of VECTOR Online Learning Platform
VECTOR Online Learning Platform and E Learning Leading
#myatminlu #uiux #vector
