Mobile Apps Development : Part 2

အပိုင်း ၁ ။ Mobile Apps Development

Mobile Development ပိုင်းကို လုပ်မယ်လို့ စဉ်းစားထားရင် အရင်ဆုံး လိုအပ်တာက Device ပါ။ တစ်ခါမှ မသုံးဖူး မမြင်ဖူးတဲ့ Phone OS အတွက် UI ပိုင်းကို စဉ်းစားဖို့ဆိုတာ အတော်ကို မလွယ်လှပါဘူး။ iPhone က design pattern နဲ့ Android က design pattern နဲ့ ဆင်သလိုလို ရှိပေမယ့် မတူပါဘူး။ Windows Phone 8 ဆိုရင်လည်း တစ်ခြားဆီပါပဲ။ ဒါကြောင့် ကိုယ်လုပ်မယ့် Mobile Platform အတွက် OS ကို ကိုယ်တိုင် အရင် သုံးကြည့်ဖို့လိုတယ်။ iOS လုပ်မလား Android လုပ်မလား ဆိုတာ ကိုယ်တိုင် ဘယ် OS ကို သဘောကျလဲ ပေါ်မှာလည်း မူတည်တယ်။ Phone သုံးကြည့်ရင်းနဲ့ အခြားသူတွေ ရေးထားတဲ့ Application တွေကိုလေ့လာလို့ ရမယ်။ UI concept တွေကို နားလည်လာမယ်။ Web Development ပိုင်းကလာတဲံ့ လူတစ်ယောက်က iPhone မသုံးဘူးပဲနဲ့ iPhone အတွက် UI ကို Web မှာလို စဉ်းစားလို့ မရသလို Android မသုံးဘူးပဲနဲ့လည်း Web UI အတိုင်း Android မှာ သွားပြီး apply လုပ်လို့မရပါဘူး။

Design Pattern

iOS

iOS UI Design တွေ မဆွဲခင်မှာ iOS Human Interface Guidelines ကို အရင်ဖတ်သင့်ပါတယ်။ နည်းနည်းတော့ ပျင်းဖို့ ကောင်းပေမယ့် iPhone မှာဆို ဘယ်လို iPad မှာဆို ဘယ်လို iPhone 5 အတွက်ဆို ဘယ်လို UI design ဆွဲသင့်တယ်ဆိုတာကို ရေးသားထားပါတယ်။ ဒါ့အပြင် Pttrns ကိုလည်း သွားပြီး ကြည့်သင့်ပါတယ်။ App တော်တော်များများရဲ့ UI Design တွေကို တွေ့နိုင်ပါတယ်။ iOS မှာ Normal display နဲ့ Retina Display ဆိုပြီး ၂ခု ရှိတယ်။ ဒါကြောင့် image တွေကို စဆွဲကတည်းက ၂ ဆ ပို ဆွဲထားဖို့လိုတယ်။ ဥပမာ။။ image size ကို 100 x 100 သုံးမယ်ဆိုရင် 200 x 200 ဆွဲထားဖို့လိုတယ်။ 200 x 200 တစ်ပုံ 100 x 100 တစ်ပုံ ကို Xcode ထဲမှာထည့်ပေးရပါတယ်။ ၂ ဆ image တွေကို name မှာ @2x ထပ်ဖြည့်ပေးရပါတယ်။ myimage.png နဲ့ myimage@2x.png ဆိုပြီါ် ၂ ပုံပေါ့။ App icon design ကို 1024 x 1024 px နဲ့ ဆွဲထားခဲ့ဖို့လိုပါတယ်။ ဖြစ်နိုင်ရင်တော့ Design အားလုံးကို vector နဲ့ ဆွဲထားတာ ပို အဆင်ပြေမယ်။ App Store ပေါ်တင်ရင် App icon size ကို အရင် က 512 x 512 px ပဲ တောင်းခဲ့ပေမယ့် နောက်ပိုင်း 1024 x 1024 px တောင်းပါတယ်။

Android

Android UI Design အတွက် Android Design ကို ဖတ်ကြည့်သင့်ပါတယ်။ သို့ပေမယ့် Android 3.0 or later အတွက် ဖြစ်ပါတယ်။ မြန်မာနိုင်ငံ အပြင် အခြားနိုင်ငံတွေမှာလည်း Android 2.2 ကို အသုံးပြုနေသူ အများအပြားပါ။ Android 4.0 Design အတိုင်းတော့ Android 2 မှာ မရနိုင်ပါဘူး။ Action Bar အတွက်တော့ Sherlock Action Bar ကို အသုံးပြုပြီးတော့ Android 2.2 မှာ Action bar ကို အသုံးပြုနိုင်ပါတယ်။ Pttrns လိုမျိုး Android အတွက် Android Pttrns ဆိုတာ ရှိပါတယ်။ Android မှာ Screen Size မျိုး စုံရှိပါတယ်။ Screen မျိုးစုံကို Support ဖို့ အတွက် Android Supporting Multiple Screens ကို ဖတ်ပြီးတော့ လေ့လာနိုင်ပါတယ်။ [Designing (and converting) for multiple mobile densities] ဆိုတာလေးကိုလည်း ဖတ်သင့်ပါတယ်။ အဲဒီ site မှာ converter လေးပါ ထည့်ထားပေးတဲ့ အတွက် image size ကို တွက်လို့ရပါတယ်။ Android မှာ အဓိကအားဖြင့် ldpi , mdpi , hdpi , xhdpi ဆိုပြီး ရှိပါတယ်။

ဥပမာ ။

  • 36×36 for low-density
  • 48×48 for medium-density
  • 72×72 for high-density
  • 96×96 for extra high-density

အဲဒီ အကြောင်းတွေ မသိပဲ ကျွန်တော် android ကို စလုပ်တုန်းက image size နဲ့ ပတ်သက်ပြီးတော့ ဒုက္ခရောက်ခဲ့တယ်။ ဘယ် size ကို အဓိက ထားရမှန်း မသိသလို android UI design တွေ ဘယ်လို ရှိလဲ ဆိုတာ မသိပဲနဲ့ စခဲ့တာကြောင့် တော်တော်လေးကို လေ့လာရတာ နှောင့်နှေးပါတယ်။

Image တွေ ကိုယ်တိုင် ဆွဲရင်တော့ vector နဲ့ ဆွဲထားတာ အကောင်းဆုံးပါပဲ။ အဆင်ပြေတဲ့ size ကို လွယ်လင့် တကူ ပြင်လို့ရသလို quality လည်း မကျသွားတဲ့ အတွက်ကြောင့်ပါ။

Windows Phone

Windows Phone Design ကတော့ အခြား Mobile တွေနဲ့ မတူပဲ ကွဲထွက်နေပါတယ်။ Flat , Metro UI ပေါ့။ Windows Phone ရဲ့ Design Principles ကို ဦးစွာ ပထမ ဖတ်ကြည့်သင့်တယ်။ Windows Phone UI က တခြား Phone တွေထက် ရိုးရှင်းပါတယ်။ ရိုးရှင်းတာကောင်းပေမယ့် လှပဖို့ အတွက် ပိုပြီး အားစိုက်ထုတ်ရပါတယ်။ အကုန်လုံးက Flat UI တွေပါပဲ။ Windows Phone နဲ့ ပတ်သက်ပြီးတော့ ကျွန်တော် သိပ်မသိတဲ့ အတွက် အများကြီး အသေးစိတ် မရေးနိုင်ပါဘူး။

ဆက်ပါအုံးမည်။

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.