Google ထံမှအဆိုပါပစ္စည်းဒီဇိုင်းသတ်မှတ်ချက်တွင်မူလ platform ပေါ်တွင်ဒီဇိုင်းကိုက်ညီမှုအကြံပြုဖို့လမ်းအဖြစ်အန်းဒရွိုက်ပလက်ဖောင်းရည်ရွယ်ခဲ့သည်။
06 ၏ 01
Adobe ကအတွေ့အကြုံဒီဇိုင်း CC ကိုတစ်ဦးပစ္စည်းဒီဇိုင်းကဒ်ဖန်တီးနည်း
ဒီဇိုင်နာများကမှတဆင့်ဥိးနှင့်နောက်ကွယ်မှအတှေးအချေါကိုနားလည်စတင်ပြီးတာနဲ့ပစ္စည်းဒီဇိုင်းတိတ်တဆိတ်အတွက်သြဇာအရှိဆုံးအမြင်အာရုံအတွေးအခေါ်များတဦးဖြစ်လာသည် ကို web နှင့်မိုဘိုင်းဒီဇိုင်း ။ သငျသညျအကြှနျုပျတို့မှာရတဲ့နေကြတယ်ဆိုတာကိုကြည့်ဖို့လုပ်ဖို့လိုအပ်သမျှ Pinterest ပေါ်မှာပစ္စည်းဒီဇိုင်းရှာဖွေရေးလုပ်ဖို့ဖြစ်ပါတယ်နှင့်သင် devices များ, တက်ဘလက်, ပင်ကွန်ရက်စာမျက်နှာတွေပေါ်မှာဥပမာများနှင့်စမ်းသပ်ချက်ရာပေါင်းများစွာကိုမြင်ရပါလိမ့်မယ်။
ပစ္စည်းဒီဇိုင်း၏စိတ်ဝင်စားဖွယ်ရှုထောင့်က apps များပေါ်လာနှင့်မိုဘိုင်း Device များပေါ်တွင်အလုပ်လုပ်သင့်တယ်ဘယ်လိုန်းကျင် Google ရဲ့စဉ်းစားတွေးခေါ်သော်လည်းသဘောတရားများကိုမဆို platform ပေါ်တွင်မဆိုအရွယ်အစားမဆိုမျက်နှာပြင်မှလျှောက်ထားလျက်ရှိသည်။ Google ကသတ်မှတ်ချက်များ၏အဖွင့်စာပိုဒ်ထဲမှာဒီလိုဖော်ပြထားသည့်အတိုင်း "ကျနော်တို့ကနည်းပညာနှင့်သိပ္ပံများ၏ဆန်းသစ်တီထွင်မှုများနှင့်ဖြစ်နိုင်ခြေနှင့်အတူကောင်းသောဒီဇိုင်း၏ဂန္အခြေခံမူ synthesizes သောငါတို့အသုံးပြုသူများအတွက်တစ်အမြင်အာရုံဘာသာစကားကိုဖန်တီးရန်ကိုယျ့ကိုယျကိုစိန်ခေါ်ခဲ့သည်။ ဤသည်ပစ္စည်းဒီဇိုင်းဖြစ်ပါတယ်။ ဤသည် spec ကျနော်တို့ပစ္စည်းဒီဇိုင်း၏အခွခေံနှင့်အသေးစိတ်အချက်အလက်ကိုဖွံ့ဖြိုးတိုးတက်ဖို့ဆက်လက်အဖြစ် updated ပါလိမ့်မည်တဲ့လူနေမှုစာရွက်စာတမ်းဖြစ်၏။ "
အဆိုပါပစ္စည်းကိုစက္ကူနှင့်ပစ္စည်းဒီဇိုင်းတစ်ခုလက်ခဏာကဒ်ဖြစ်ပါသည်အလွန်ယေဘုယျစည်းကမ်းချက်များ၌အကြောင်းကိုပြောခဲ့တယ်။ တစ်ဦးမျက်နှာပြင်တခုတခုအပေါ်မှာအညွှန်းကိန်းကဒ်၏စဉ်းစားပါနဲ့သင်သည်လက်ျာခြေရာခံအပေါ်ဖြစ်ကြသည်။ တစ်ဦးကကတ်ကိုဒါပေါ်ဓာတ်ပုံများ, ဗီဒီယိုများ, စာသားလင့်များနှင့််တစ်ဦး element ဖြစ်ပါတယ်ပေမယ့်ဘယ်မှာသူတို့အများဆုံးအပြန်အလှန်ဒီဇိုင်းများကှာခွားသူတို့တစ်တွေတစ်ခုတည်းဘာသာရပ်အာရုံစိုက်ဖို့ရည်ရွယ်နေကြသည်ဖြစ်ပါတယ်။ ကဒ်များကိုထောင့်ဝိုင်းကြပါပြီ, သူတို့ကတစ်ဦးမျက်နှာပြင်အထက်နှင့်သူတို့သူတို့တစ်တွေ "စုဆောင်းခြင်း" အဖြစ်ရည်ညွှန်းကြသည်အတူတူလေယာဉ်ပေါ်မှာရှိသမျှလျှင်ဖြစ်ကြောင်းညွှန်ပြမောမှောင်မိုက်အရိပ်မဆံ့။
ဤသည်၌ "ဘယ်လိုစေရန်" ကျနော်တို့က spec အပေါ်အခြေခံပြီးတစ်ကဒ်ကိုဖန်တီးရန်သွားကြသည်။ အဲဒီအစားထက်ပုံရိပ်နှင့်ပုံဆွဲ tools တွေကိုအမျိုးမျိုးနှင့်အတူကဒ်ဖန်တီးကျွန်တော်တစ်ဦးကွဲပြားခြားနားသောဦးတည်ချက်ကနေလာမယ့်နေကြသည်။ ကျွန်တော်တစ်ဦးပါ Macintosh သာအများပြည်သူ preview ကိုအတွက်လောလောဆယ်တွင်နှင့်အခမဲ့ဖြစ်သည်ဖြစ်သောကို Adobe ရဲ့အတွေ့အကြုံဒီဇိုင်းအတွက် tools တွေကိုသုံးစွဲဖို့သွားနေကြပါတယ်။ သင်ဒီမှာ Download ပြုလုပ်နိုင်ပါသည်။
စလိုက်ကြစို့။
06 ၏ 02
Adobe ကအတွေ့အကြုံဒီဇိုင်း CC ကိုအတွက်ရှေ့ပြေးပုံစံ Artboard Creating
အတွေ့အကြုံဒီဇိုင်း CC ကို (XD) အတွက် Start Screen ကနေတစ်ဦးကို Android ဖုန်းမျက်နှာပြင်ကိုဖန်တီးရန်အဘယ်သူမျှမထင်ရှားလမ်းရှိပါသည်။ ကျွန်ုပ်တို့ XD ဖွင့်လှစ်သည့်အခါလုပ်ဖို့အသုံးပြုသောကဘာလဲ, အင်တာဖေ့ဖွင့်လှစ်တဲ့အခါမှာကျနော်တို့ကို select, iPhone 6 option ကိုရွေးဖို့ဖြစ်ပြီး ယင်း Toolbar ကို၏အောက်ခြေတွင် Artboard tool ကိုနဲ့ Android မိုဘိုင်း select လုပ် ပိုင်ခွင့်နိုင်အောင် Properties panel ကိုအပေါ်ရွေးချယ်မှုကနေ။ ထိုအခါမှသာအိုင်ဖုန်း artboard ရဲ့အမည်ပေါ်တွင်တစ်ချိန်ကကိုကလစ်နှိပ်ပါနှင့် artboard delete, ရွေးချယ်ရေး tool ကိုကူးပြောင်းပါ။ မရှိတော့ပါ။
XD ၏လက်ရှိဗားရှင်းမှာတော့နှိပ်လိုက်သည့်အခါအရာ, iPhone 6 ဘေးမှာသေးငယ်တဲ့မြှားလည်းမရှိ, drop-down menu ကိုဖွင့်လှစ်။ ထိုအရပ်မှသင်တို့ကိုအန်းဒရွိုက်မိုဘိုင်းဗားရှင်းကို select နှင့် အန်းဒရွိုက်မိုဘိုင်း ရှေးခယျြထား artboard အဆိုပါ interface ကိုဖွင့်လှစ်။
ကျနော်တို့ကဒ်အတွက်ဖွင့်လျော်မျက်နှာပြင်အာကာသရှိသည်သေချာစေရန်, ငါတို့အများအားဖြင့် 3 ပုံကြမ်းနှင့် artboard ထဲသို့ပစ္စည်းဒီဇိုင်း Template ကနေအဆင့်အတန်းဘား, Nav ဘားနှင့် App ကိုဘား copy နဲ့ paste ကူးခေါင်း။ ပုံကြမ်း 3.2 တစ်ဦးပစ္စည်းဒီဇိုင်း template ကို (Template:> ပစ္စည်းဒီဇိုင်း မှစ. File> New ကို) ပါရှိသည်နှင့်အခြားကယ့်ကိုအကောင်းအခမဲ့တဦးတည်းသင်ဒီမှာရယူနိုငျသော Kyle Ledbetter ကနေဖြစ်ပါတယ်။ သငျသညျ Sketch ရှိသည်မဟုတ်ကြဘူးလျှင်, သင်ဖိုင်မှတ်တမ်းမှာတွေ့ရတဲ့ XD စတစ်ကာများမှသူတို့ကို copy နဲ့ paste နိုင်ပါတယ်> Open ကို UI ကို Kit> Google ကပစ္စည်း။ သင်တို့သည်လည်းသက်ရောက်မှုများနှင့် Sketch ပြီးနောက်ကို Photoshop, Illustrator အတွက်အသုံးပြုရန် Google ထံမှသူတို့ကိုဒေါင်းလုဒ်ဆွဲနိုင်ပါသည်။
06 ၏ 03
တစ်ဦးကို Adobe XD CC ကို Artboard ရန်ပစ္စည်းဒီဇိုင်းကဒ်ထည့်သွင်းခြင်း
XD ၏အရှိဆုံးအသုံးဝင်သော features တွေတစ်ခုမှာ Apple က iOS ကို Google ကပစ္စည်းနှင့် Microsoft Windows အတွက် UI ကိုပစ္စည်းများရဲ့ပါဝင်ဖြစ်ပါတယ်။ များစွာသောအရိုအသေ, သူတို့သည်အမြဲတစေထိုကဲ့သို့သောကို Photoshop, Illustrator သို့မဟုတ်အဖြစ်ဒီဇိုင်းလျှောက်လွှာအတွက် recreated ခံရဖို့ရှိသည်မဟုတ်ကြဘူးသူတို့ကဘုံ UI ကိုဒြပ်စင်အတွက်လွယ်ကူဒီဇိုင်နာရဲ့အလုပ်လုပ်အမျှကောင်းစွာ။ ဟူသောဝေါဟာရကို "Rapid ရှေ့ပြေးပုံစံ" ကိုနှုတ်ကပတ်တရားတော်ကို "Rapid" add ပုံကြမ်း။
ကျနော်တို့လိုအပ်တဲ့ UI ကိုဒြပ်စင်တစ်ကဒ်ဖြစ်ခဲ့သည်။ အဲဒါကိုရဖို့ကျွန်တော်> Open ကို UI ကို Kit> Google ကပစ္စည်းဖိုင်မှတ်တမ်းကိုရွေးချယ်နှင့်ကိရိယာအစုံသစ်တစ်ခုစာရွက်စာတမ်းအဖြစ်ဖွင့်လှစ်ခဲ့။ ကျနော်တို့လိုအပ်တဲ့ element က Card များကိုအမျိုးအစားမှာတွေ့ရှိခဲ့ခြင်းဖြစ်သည်။
အဘယ်အရာကိုကျနော်တို့ကဤအကြောင်းကိုနှစ်သက်သောအကြောင်းအရာလုပ်ကွက်ကျန်တာတွေအဖြစ်စာစီစာရိုက် spec အတွက်ထွက်ချထားစာသားပုံစံချပေးနှင့်အကွာကျန်တာတွေအတွက်ထွက်ချထားအဖြစ်သူတို့ပစ္စည်းဒီဇိုင်းသတ်မှတ်ချက်လိုက်နာဖြစ်ပါတယ်။
ငါတို့အလိုကဒ်စတိုင်အောက်ခြေလက်ဝဲအတွက်တဦးတည်းဖြစ်ခဲ့သည်။ ကျနော်တို့ရိုးရှင်းစွာကျွန်တော်တို့ရဲ့ mouse ကိုအတူက marquee နှင့် clipboard ထံကကူးယူ။ ကံမကောင်းစွာပဲ XD ပွင့်လင်းစာရွက်စာတမ်းများများအတွက်တဲဘ်တပ်ထား interface ကိုမဆံ့မခံပါဘူး။ အဘယ်အရာကိုကြှနျုပျတို့ပွုကျနော်တို့အပေါ်အလုပ်လုပ်နေကြတထုတ်ဖေါ်ကြောင့်ရွေးပြီး paste လုပ်ပါနည်းနည်းဖွင့်စာရွက်စာတမ်းဝင်းဒိုးကိုနှိမ့်ချရွှေ့ဖြစ်ပါတယ်။ လျင်မြန်စွာဖွင့်လှစ် XD စာရွက်စာတမ်းများအကြား switching ၏နောက်ထပ်လမ်း '' တပ်ရင်းနှိပ်ဖို့ပါပဲ။
06 ၏ 04
Adobe ကအတွေ့အကြုံဒီဇိုင်း CC ကိုတစ်ဦးပစ္စည်းဒီဇိုင်း Element ကို Edit လုပ်နည်း
XD အတွက်ကဒ် clipboard ထံကနေရောက်ရှိသည့်အခါ merrily ကစတင်အလုပ်လုပ်ကြပါဘူး။ သငျသညျကဒ်ရေးသားသည့် bit နဲ့အပိုင်းပိုင်းလက်လှမ်းမလိုအပ်သောကွောငျ့သငျသညျပွုပါရန်လိုအပ်ပါတယ်ပထမဦးဆုံးအရာကတ်အုပ်စုမဖွဲ့ထားပါရန်ဖြစ်ပါသည်။ ဒီလိုလုပ်ဖို့, ထိုကဒ်နှင့်ရွေးချယ်ထားသောအရာဝတ္ထု> အုပ်စုမဖွဲ့ထားပါသို့မဟုတ်စာနယ်ဇင်း Shift-စစ်ဌာနချုပ်-G ရွေးချယ်ပါ။
သင်၏ကဒ်ယခုသုံးအပိုင်းပိုင်း၏ဖွဲ့စည်းထားသည်:
- image ကိုများအတွက်အလင်းကိုမီးခိုးရောင် box ကို။
- စာသားအဘို့အအလတ်စားမီးခိုးရောင်သေတ္တာ
- နောက်ခံအဖြစ်အသုံးပြုကျော box ကို။
ပထမဦးဆုံးခြေလှမ်းအလငျးမီးခိုးရောင် box ကိုဖျက်ပစ်ရန်ဖြစ်ပါသည်။ ယင်း၏သာရည်ရွယ်ချက်သင်ရွေးချယ်လျှင် optional ကို, ကသောပုံရိပ်တစ်ခုအမှတ်အသားအဖြစ်ဆောင်ရွက်ရန်ဖြစ်သည်။
စာသားနှင့်အတူအဆိုပါ box အမှန်တကယ် 50% opacity ကိုအတူမှောင်မိုက်မီးခိုးရောင်ဖြစ်ပါတယ်။ ဤ box ကစာသားနောက်ခံအဖြစ်အသုံးပြုနိုင်ပြီးသင်အရောင်နဲ့ box ကိုဖွင့် opacity ကိုပြောင်းလဲနိုင်သည်။
ဒါကြောင့်ချက်ချင်းထင်ရှားမဟုတ်ပါဘူးသော်လည်း, ထိုအလင်းမီးခိုးရောင်အကွက်ပစ္စည်းဒီဇိုင်းက၎င်း၏ထိပ်တန်းထောင့် 2 pixels ကိုတို့ကဝိုင်းဖြစ်ကြောင်းထဲမှာ spec ။ အောက်ပါအတိုင်း သငျသညျပုံတစ်ပုံထည့်သွင်းလျှင်စိတ်ထဲ၌ဤထားပါ။ ဒါဟာအစတစ်ခုပုံရိပ်လျှောက်လွှာဖို့ဒါမှမဟုတ် XD အတွက်ထည့်သွင်းနိုင်ပါသည်သော rounded corner နဲ့လိုအပ်ပါလိမ့်မယ်။
ဘယ်လောက်ကဒီကလည်းတစ်ဦးအရိပ်လိုအပ်တဲ့ကဒ်၏ကျိန်းဝပ်ပြည်နယ်ဖြစ်သကဲ့သို့ကိုမြင်လျှင်။ အဆိုပါ spec 2 pixels ကို၏ကဒ်တစ်ကျိန်းဝပ်မြင့်လည်းမရှိကရှင်းရှင်းလင်းလင်းကိုမှန်ကန်စေသည်။ , ဒီ add အနက်ရောင်နောက်ခံပုံသဏ္ဍာန်ကို select နှင့်ဂုဏ်သတ္တိများ panel ကို 2 ဖို့ Y ကိုနှင့် B (Blur) တန်ဖိုးများကိုသတ်မှတ်လိုက်ပါ။
06 ၏ 05
Adobe က XD CC ကိုအတွက်ပစ္စည်းဒီဇိုင်းကဒ်တစ်ခု Image ကိုထည့်သွင်းနည်း
ကဒ်ကိုသိရှိ 344 pixels ကိုကျယ်ပြန့်နှင့်ပုံရိပ်ဧရိယာမြင့်သော 150 pixels ကို (ထိုအလင်းမီးခိုးရောင် box ရဲ့တစ်ဝက်အမြင့်) ဖြစ်ပါသည်ကျွန်တော်တို့သည် Photoshop မှာ image ကိုဖွင့်လှစ်အရွယ်အစားကလှီးဖြတ်ခြင်းနှင့်ပေးတဲ့ dialog အမျှ Photoshop ရဲ့ပို့ကုန်အတွက် @ 2x option ကိုအသုံးပြုပြီးကြောင့်ကယ်တင်ခြင်းသို့ရောက်ရ၏ သတ်ေတာ။ အဆိုပါပုံရိပ်က Adobe XD သို့တင်သွင်းခဲ့ခြင်းဖြစ်သည်။
ကျနော်တို့ထို့နောက် pasteboard ပေါ်တွင်ပုံရိပ်ကျော်အလင်းမီးခိုးရောင် box ကိုဆွဲငင်ခြင်းနှင့် Shape အတူ Object ကို> မျက်နှာဖုံးရွေးချယ်ထားကြသည်။ အဆိုပါရလဒ်ပုံသဏ္ဍာန်၏ rounded corner နဲ့တက်ကောက်နေပုံသဏ်ဌာနျခဲ့သညျ။ ကျနော်တို့ထို့နောက်၎င်း၏နောက်ဆုံးအနေအထားဖို့ပုံရိပ်သို့ပြောင်းရွှေ့ခဲ့သည်။
အရပ်ဌာန၌ပုံရိပ်နှင့်အတူကျနော်တို့ထို့နောက်အလတ်စားမီးခိုးရောင် box ရဲ့နောက်ခံအရောင်ကိုပြောင်းလဲ, စာသားနဲ့ link ကိုစာသားရဲ့အရောင်ပြောင်းလဲသွားတယ်။
06 ၏ 06
ယင်းကို Adobe XD CC ကို Grid Feature ကိုအသုံးပြုခြင်း
ကဒ်နှင့်အတူယခုဖြည့်စွက်စနစ်တကျပစ္စည်းဒီဇိုင်း spec အညီထားရှိရန်လိုအပ်ပါသည်။ ဒီအရှိကဒ်၏တစ်ဖက်တစ်ချက်ပေါ်မှာ 8 pixels ကိုဖြစ်ကြောင်းနှင့်ကဒ် app ကိုဘားအောက်တွင်ဖော်ပြထားသော 8 pixels ကိုဖြစ်ရန်လိုအပ်သည်ကိုဆိုလိုသည်။ ဒီလိုလုပ်ဖို့, အ artboard အမည်ပေါ်တွင်တစ်ချိန်က click နဲ့, အ Properties ကို Panel ထဲက, Grid ကိုရွေးပါ။ အဆိုပါဇယားကွက်ဟာ artboard ကျော်ပုံပေါ်ပါတယ်။
ကို default ဇယားကွက်အရွယ်အစားကိုသင် Grid ဧရိယာထဲမှာတန်ဖိုးပြောင်းလဲတစ်ဦးကွဲပြားခြားနားအရွယ်အစားလိုအပ်ပစ္စည်း Design.If များအတွက်တူညီဇယားကွက်အရွယ်အစားဖြစ်ဖြစ်ပျက်ရသော 8 pixels ကိုဖြစ်ပါတယ်။ သင်ဇယားကွက်များ၏အရောင်ကိုပြောင်းလဲလိုလျှင်အရောင် chip ကိုကလစ်နှိပ်ပါနှင့်ရရှိလာတဲ့အရောင်ကောက်ယူသူများထံမှတစ်ဦးအရောင်ကိုရွေးချယ်ပါ။
အဆိုပါဇယားကွက်မြင်နိုင်နှင့်အတူကဒ်ပေါ်မှာ click နှိပ်ခြင်းနှင့်ယင်း၏နောက်ဆုံးအနေအထားသို့ရွှေ့ပါ။
ပြီးမြောက်စေရန်, ငါတို့သည်ကဒ်ရွေးချယ်ထားသောထပ်ခါတလဲလဲ Grid ခလုတ်ကိုနှိပ်လိုက်ခြင်းနှင့်အဖြစ်ကောင်းစွာ 8 pixels ကိုရန်ကတ်များအကြားအကွာပြောင်းလဲသွားတယ်။