ဘယ်လိုကိုယ်သင် UXPin အတူစတင်ရန်

by တွမ်အစိမ်းရောင်

09 ၏ 01

ဘယ်လိုကိုယ်သင် UXPin အတူစတင်ရန်

အဆိုပါ UXPin အိမ်မှာစာမျက်နှာပေါ်တွင် account တစ်ခုဖွင့်ထားကြ၏။

ကျွန်တော်, မိုဘိုင်းဒီဇိုင်း၏ဘုံသို့ app ကိုဒီဇိုင်းနှင့်တုံ့ပြန်မှုဒီဇိုင်းကိုရွှေ့အဖြစ် UX ကို (အသုံးပြုသူအတွေ့အကြုံ) နှင့်တခုတခုအပေါ်မှာတိုးမြှင့်အာရုံစိုက်ရှိခဲ့သည် wireframing , အပြန်အလှန်ရှေ့ပြေးပုံစံနှင့် mockups ။ အဲဒီမှာဒီနယ်ပယ်မှာရည်ရွယ်အဲဒီမှာ tools တွေကိုအထဲကတစ်ဦးတစ်တန်ဖြစ်ကြပြီးသူတို့ရှုပ်ထွေးသောကနေအစအဆုံးအကုန်ပြေးကျဲနှင့်အနိုင်နိုင်အသုံးဝင်သောဖို့ဝန်ကိုထမ်းရွက်ဧရာပါရှိပါတယ်။ ကဒီဇိုင်နာများများအတွက်ဒီဇိုင်နာများကတီထွင်ခဲ့သည်ရိုးရှင်းစွာဘာလို့လဲဆိုတော့ငါ့မျက်စိဖမ်းမိသော tools တွေကိုတစ်ခုမှာ UXPin ဖြစ်ပါတယ်။

ကျနော်တို့ရှေ့ဆက်မဖြစ်မီ ... တစ်ဦးအတွက်အသိပေးချက်။ သင်တို့အဘို့ဆော့ဝဲပိုင်ဆိုင်ကြိုက်နှစ်သက်သည်အဖွဲ့အစည်းတစ်ခုဖြစ်ပါသည်လျှင် UXPin သင်တို့အဘို့မဟုတ်ပါဘူး။ ဒီ app ထဲမှာပြုသောအမှုအလုပ်အပေါငျးတို့သဘရောက်ဇာ၌ပြစ်မှားမိသည်ကိုသင်တို့ကိုကယ်တင်စီမံကိန်းများသင့်အကောင့်မှကယ်တင်ခြင်းသို့ရောက်ရ၏။

UXPin နှင့်အတူစတင်ရန်သင်သည် UXPin တစ်ဘရောက်ဇာများနှင့်ခေါင်းကိုဖွင့်။ ဒီကနေသင်တစ်ဦးအခမဲ့စမ်းသပ်ဘို့ sign up ကိုလို့ရပါတယ်သို့မဟုတ်သင့်မျှော်လင့်လိုအပ်ချက်အပေါ်အခြေခံပြီးတစ်ဦးသည်လစဉ်အစီအစဉ်အဘို့အစီစဉ်ပါ။ နိမိတ်လက္ခဏာကိုတက်ဖြစ်စဉ်ကိုအတော်လေးလွယ်ကူသည်နှင့်သင်သည်သင်၏ user name နဲ့ password ကိုထားပြီတခါ, သင့်စတင်ရန်အဆင်သင့်ရှိပါတယ်။

09 ၏ 02

UXPin အတွက်တစ်ဦးကစီမံကိန်းစတင်ပါရန်မည်သို့

သငျသညျစီမံကိန်းကိုအမျိုးအစားများကိုအမျိုးမျိုးအကြားရွေးချယ်နိုင်ပါသည်။

သင်လော့ဂ်အခါ Dashboard ကိုမှာရောက်လာခြင်းနှင့်, ဒီမှာထံမှသင်တို့အသစ်တခု wireframe အသစ်တစ်ခုမိုဘိုင်းစီမံကိန်းကိုသို့မဟုတ်တစ်တုံ့ပြန်မှုက်ဘ်ဒီဇိုင်းစီမံကိန်းကိုကိုဖန်တီးရန်ဆုံးဖြတ်နိုင်ပါတယ်။ plug-ins သင်သည်သင်၏ Photoshop ကိုသို့မဟုတ် Sketch စီမံကိန်းများတွင်ရောက်စေဖို့ခွင့်ပြုလိမ့်မည်ဟု UXPin ဘို့လည်းရှိပါတယ်။ ဒီကိုဘယ်လိုရန်ငါအချို့စာသားကိုနှင့်အတူတစ်ဦးနဖူးစည်းစာတန်းဖန်တီးနှင့်နဖူးစည်းစာတန်းအီးမေးလ် button ကိုထည့်သွင်းဖို့သွားနေပါတယ်။ ဒီလိုဆောင်ရွက်မှငါအသစ်တစ်ခု wireframe Create ရွေးချယ်ထားကြသည်။

09 ၏ 03

အဆိုပါ UXPin Interface ကိုသုံးပါရန်ကိုဘယ်လို

အဆိုပါ UXPin interface ကို။

အဆိုပါဒီဇိုင်းက Surface လေးဒေသများသို့လည်းကျိုးသည်။ လက်ဝဲမှာအနက်ရောင်ဧရိယာ၌သငျ, သုံးစမတ် Element တွေကို panel ကိုဖွင့် element တွေရှာစာမျက်နှာမှတ်စုများ add နှင့်အဖွဲ့သည်အဖွဲ့ဝင် add ပါလိမ့်မယ်သင်ဒက်ရှ်ဘုတ်သို့ပြန်ကြကုန်အံ့ကြောင်း tools တွေကိုတစ်စီးရီးများမှာအဆိုပါ Element တွေကိုဖွင့်လှစ်။ အောက်ခြေတွင်တိုတောင်းတဲ့သင်ခန်းစာဖွင့်လှစ်မယ့်ခလုတ်ဖြစ်ပါသည်, သင်မေးလေ့ရှိသောမေးခွန်းများရဲ့အ access လုပ်ပါတယ်ကြောင်းကိုသင်၏အကောင့်များနှင့်အခြားဝင်ရောက်ဖို့ခွင့်ပြုသောအခြား, သင်မေးခွန်းများမေးခြင်းနှင့်ပင်တုံ့ပြန်ချက်များကိုဖွင့်ကြကုန်အံ့။

ထိပ်တလျှောက်တွင်အပြာရောင်ဧရိယာ၌ကိရိယာများနှင့်ဂုဏ်သတ္တိများတစ်ခုစီးရီးဖြစ်ကြသည်။ လက်ျာဘက်၌အဆိုပါမဲမှောင်ခလုတ်, သင်သည်သင်၏အဒီဇိုင်း iterate စီမံကိန်း setting များကိုချိန်ညှိ, စာမကျြနှာကိုမျှဝေခြင်းနှင့်စာမျက်နှာတစ်ခု In-browser ကိုတုပခြင်းလုပ်ဖို့ခွင့်ပြုပါ။

သင်က, ဒီဇိုင်းက Surface များအတွက် bits သည်နှင့်အပိုငျးပိုငျးဖမ်းပြီးသင်၏စီမံကိန်းအမည်နှင့်စာမျက်နှာကိုထည့်သွင်းသို့မဟုတ်ဖယ်ရှားပစ်ရှိရာ Element တွေကို panel ကဖြစ်ပါတယ်။

အဆိုပါ Element တွေကိုစာကြည့်တိုက် UX ကိုဒီဇိုင်နာများများအတွက်သာယာသောအံ့သြစရာဖြစ်ပါတယ်။ ဤသူသည်သင်တို့ကဲ့သို့ပင်ကောင်းစွာသင်စာလုံး Awesome ကို icon များ, မိုဘိုင်းနှင့်လူမှု Widgets တစ်ဦးစုဆောင်းမှုဘို့လက်ဟန် icon များနှင့်အတူ Bootstrap နှင့်ဖောင်ဒေးရှင်းမှ element တွေကိုသုံးခွင့်ရှိသည်ကို iOS ကနေ Android အတွက် Lolipop အထိ Anon 30 ရက်စာကြည့်တိုက်များကနေရှေးခယျြပေးနိုင်ပါတယ်ချ pop ။

09 ၏ 04

တစ်ဦးက UXPin စာမျက်နှာရန်တစ်ခုက Element ကို Add လုပ်နည်း

Element တစ်ခုရဲ့ထည့်သွင်းခြင်းတစ်ဦး Drag and Drop ပြုလုပ်ပြီးဖြစ်စဉ်တစ်ခုဖြစ်သည်။

ငါ mouse ကိုလွှတ်ပေးရန်သောအခါငါ, ဒီဇိုင်းမျက်နှာပြင်ဖို့ Box ကိုဒြပ်စင်ဆွဲငင်ခြင်းနှင့်စတင်ရန်ရန်, Properties ကို panel ကိုဖွင့်လှစ်။ အဆိုပါ Properties ကိုခလုတ်သင်ဒြပ်စင်အမည်နှင့်ဒြပ်စင်ရဲ့ width ကိုအမြင့်နှင့်အနေအထားတန်ဖိုးများသတ်မှတ်ထားပေးနိုင်ပါတယ်။ သင်တို့သည်လည်းယင်းဒြပ်စင်မှ padding ကို add ထောင့်ကိုချွတ်ပတ်လည်နှင့်၎င်း၏ opacity ကိုချိန်ညှိနိုင်ပါတယ်။ အဆိုပါနောက်ခံအရောင် button ကိုနှိပ်ခြင်းအားတစ်ဦး RGBA အရောင်ရွေးသူဖွင့်လှစ်။

သင်တို့သည်လည်းရှေးခယျြထားသောဒြပ်စင်တစ်ခုဖောင်, နယ်စပ်နှင့်ပုံစံသတ်မှတ်နိုင်သည်။ အဆိုပါ Lightning Bolt ကသင်တစ်ဦးကိုရွေးချယ်ဒြပ်စင်မှအပြန်အလှန်ဆက်သွယ် add နိုင်စွမ်းကိုပေးသည်။

09 ၏ 05

UXPin ခုနှစ်တွင် Add ပြီးတော့ Format ကိုစာသားရန်ကဘယ်လို

တစ်ဦး UXPin ဒြပ်စင်မှစာသားကိုထည့်သွင်းခြင်း။

စာသားမထည့်ရန်, ဒီဇိုင်းမျက်နှာပြင်မှစာသားဒြပ်စင် drag and သင်၏စာသားရိုက်ထည့်ပါ။ ယင်းစာလုံးဂုဏ်သတ္တိများဖွင့်လှစ်ခြင်းနှင့်သင်၏စာသားကို format ဖို့စာသားအိမ်ခြံမြေ button ကိုကလစ်နှိပ်ပါ။ သငျသညျ Dummy စာသားတစ်ခုပိတ်ပင်တားဆီးမှုလိုအပ်ခဲ့လျှင်, စာသားဒြပ်စင်ပေါင်းထည့်ခြင်းနှင့်ဖောင့်ဂုဏ်သတ္တိအတွက် Generate ငါ့ရဲ့ဇာတ်မြင့် button ကို click လုပ်ပါ။

09 ၏ 06

တစ်ဦးက UXPin စာမျက်နှာတစ်ခု Image ကို Add လုပ်နည်း

စာမျက်နှာတစ်ခု image ကိုထည့်သွင်းဖို့သုံးလမ်းရှိပါတယ်။

ဒီတာဝန်ပြီးမြောက်ဖို့နည်းလမ်းတွေ၏စုံတွဲတစ်တွဲရှိတယ်။ သငျသညျ, ထို toolbar ကိုအတွက် Image ကို Tool ကိုသုံးတဲ့စာကြည့်တိုက်ကနေတစ်ဦးကို Image ဒြပ်စင် add သို့မဟုတ်အထက်ပြထားတဲ့အတိုင်းရိုးရှင်းစွာဒီဇိုင်းမျက်နှာပြင်ပေါ်မှာဒြပ်စင်များပေါ်သို့သင်၏ desktop ကနေပုံတစ်ပုံကို drag and drop နိုင်ပါတယ်။

09 ၏ 07

တစ်ဦးက UXPin စာမျက်နှာရန် A ခလုတ် Add လုပ်နည်း

UXPin တစ်ခုကျယ်ပြန့်ခလုတ်ကိုစာကြည့်တိုက်ရှိတယ်။

အထက်တွင်ဖော်ပြထားသည့်အတိုင်းတစ်ဦး Button ကိုဒြပ်စင်သည်ရှာရန်ဧရိယာသို့ "Button ကို" ဝလည်းမရှိသော်လည်း, ထိုစာကြည့်တိုက်သားအပေါင်းတို့၌တွေ့ခလုတ်အပေါငျးတို့သထဖွင့်လှစ်။ ဒီဇိုင်းမျက်နှာပြင်ပေါ်သို့သင်တို့အဘို့အလုပ်ဖြစ်တယ်သောတဦးတည်းဆွဲပါနှင့်အရောင်, အစာလုံးနှင့်ပင်နယ်စပ်ရေးရာချင်းဝက်ကိုပြောင်းလဲနိုင်အောင် Properties ကိုအသုံးပြုပါ။ ခလုတ်ကိုအတွင်းပိုင်းစာသားပြောင်းပေးဖို့, စာသားပေါ်တခါ click နဲ့အသစ်ကစာသားကိုရိုက်ထည့်ပါ။

09 ၏ 08

တစ်ဦးက UXPin စာမျက်နှာရန် interactive Add လုပ်နည်း

interactive နှင့်ရွေ့လျားမှုဟာဆက်သွယ်မှုသည် panel ကမှတဆင့်ထည့်သွင်းထားသည်။

ဒါဟာပထမဦးဆုံးပေါ်လာနိုင်ပါသည်ကဲ့သို့ရှုပ်ထွေးမဟုတ်ပါဘူး။ အီးမေးလ် input ကိုများအတွက်, ကိုယ့်စာသားထဲသို့ဝင်ခြင်းနှင့်စာသားကို format ပြုလုပ်တခုမှာတစ်ခု input ကိုဒြပ်စင်ဆက်ပြောသည်။ Panel ၏အပေါ်ညာဘက်ထောင့်တွင် - ထို Input ကိုဒြပ်စင်နှင့်အတူ Element ကိုဂုဏ်သတ္တိများအဆိုပါကျြဆနျ button- မြင်နိုင် click နှိပ်ပြီးပေါ်လာသောအခါ, Properties ကိုခလုတ်နှိပ်ပြီးရွေးချယ်ထားကြသည်။

ခလုတ်ကိုကို Select လုပ်ပါနှင့်ဆက်သွယ်မှုသည် button ကို click နှိပ် - ထိုဂုဏ်သတ္တိများအတွက် Lightning Bolt- ။ အဆိုပါဆက်သွယ်မှုသည် panel ကိုဖွင့်လှစ်သည့်အခါ, နယူး Interaction ကိုရွေးပါ။ နှိမ့်ချ pop ဟာအစပျိုးထံမှ Click ရွေးချယ်ပါ။ အဆိုပါလှုပ်ရှားမှုဧရိယာထဲမှာပြရန် Element ကို select လုပ်ပါ။ သငျသညျယခု Element ကိုပြသနိုင်ဖို့ရာဟုမေးပါလိမ့်မည်။ အဆိုပါ gunsite အပေါ်တစ်ချိန်က Click နှင့် Input ကိုဒြပ်စင်ပေါ်တွင်ကလစ်လုပ်ပါ။ ၎င်းဒြပ်စင်ဖော်ထုတ်နှင့်အတူ, သငျသညျယခုဒြပ်စင်လှုပ်ရှားဖို့ဖြစ်စေမဆုံးဖြတ်ရန်နိုင်ပါတယ်။ ဤကိစ္စတွင်၌ငါအတွက်လွယ်ကူခြင်းနှင့်အတူ Input box ကိုပြသနိုင်ဖို့ဆုံးဖြတ်ခဲ့ပါတယ်နှင့်စတုရန်းမီတာ 300 ၏ default အနေနဲ့ကြာချိန်တန်ဖိုးသွားလေ၏။

ကျွန်မကိုလည်းနှိပ်လိုက်သောအခါခလုတ်ကိုညာဘက်အကြောင်းကို 65 pixels ကိုရွှေ့ရှိသည်ဖို့ချင်တယ်။ ငါခလုတ်ကိုရွေးချယ်ထားသောဆက်သွယ်မှုသည် panel ကိုဖွင့်လှစ်ခြင်းနှင့်နယူး Interaction ရွေးချယ်ထားကြသည်။ ငါအဲဒီ settings ကိုအသုံးပြု:

ခလုတ်: ကိုကလစ်နှိပ်ပါ
လှုပ်ရှားမှု: အားဖြင့်ရွှေ့
Direction အဖွဲ့ရွှေ့: အက x ဝင်ရိုးပေါ်တွင် 65 px
Animation ရဲ့: Linear
Duration: 300 ms

တစ်ဦးအပြန်အလှန်ဖယ်ရှားရန်ဒြပ်စင်ကို select နှင့်ဆက်သွယ်မှုသည် panel ကိုဖွင့်လှစ်။ အဆိုပါ panel ကိုအတွက်အပြန်အလှန်အားရွေးချယ်ပါကဖျက်ပစ်ရန်အမှိုက်ပုံးထဲ Can ကိုကလစ်နှိပ်ပါ။

09 ၏ 09

UXPin ခုနှစ်တွင်သင့်စာမျက်နှာကိုစမ်းသပ်ဖို့ကိုဘယ်လို

သင်က browser မှာစမ်းသပ်ရန်။

ကြောင့်သင် browser မှာအလုပ်လုပ်ကိုင်နေကြသည်ဟူသောအချက်ကိုရန်, စမ်းသပ်ခြင်းသေပြီရိုးရှင်းပါသည်။ အဆိုပါ Simulate ဒီဇိုင်း button ကိုကလစ်နှိပ်ပါ။ အဆိုပါစာမျက်နှာကို browser အတွက်ဖွင့်လှစ်ပါလိမ့်မယ်သင်ကလမ်းကိုစမ်းသပ်နိုင်ပါတယ်။ ထို့အပြင်တစ်ဦး panel ကမျိုးစုံစာမျက်နှာများ, အသုံးဝင်မှုစမ်းသပ်ခြင်း, တိုက်ရိုက်မျှဝေခြင်းရှိပါတယ်လျှင်, မှတ်ချက်များဘို့ခွင့်ပြုထားတဲ့စာမျက်နှာ, တစ်ဆိုက်ကိုမြေပုံ၏ဘယ်ဘက်အခြမ်းမှဆက်ပြောသည်တည်းဖြတ်ခြင်းနှင့် Dashboard ကိုတစ်ဦးအပြန်ရှိပါတယ်ဖြစ်လိမ့်မည်။

စာမျက်နှာ၏အောက်ခြေတွင်သင် Interactive မှဒြပ်စင်ပြပွဲပြသသို့မဟုတ်မှတ်ချက်များဖုံးကွယ်နှင့်အခြားသူများနှင့်အတူစီမံကိန်း link ကို share ခွင့်ပြုသောအခြားသေးငယ်တဲ့ panel ကဖြစ်ပါတယ်။