په Adobe Adobe Design Design CC کې د موادو ډیزاین کارډ څنګه جوړول

د Google څخه د توکو ډیزاین ځانګړتیا د اصلي موخې لپاره د Android ټلویزیون موخه وه چې د پلی کولو په اړه د ډیزاین تسلسل وړاندیز وکړي.

د 06 01

په Adobe Adobe Design Design CC کې د موادو ډیزاین کارډ څنګه جوړول

د ټامین ګیټس

کله چې ډیزاینرانو د هغې له لارې پیسې پیل کړې او د هغې تر شا فکر یې کوله، د موادو ډیزاین په خاموشۍ سره په ویب او ګرځنده ډیزاین کې د خورا اغیزمن لید فلسفې څخه و. تاسو ټولو ته اړتیا لرئ چې وګورئ په کوم څه چې موږ یې په Pinterest کې د موادو ډیزاین پلټنه ترسره کوو او تاسو به په سلګونو بیلګې او د وسایطو، ټلیفونونو، او حتی ویب پاڼې تجربه وګورئ.

د موادو د ډیزاین دلیل اړخ دا د ګوګل فکر دی چې څنګه اطلاقات باید ښکاره شي او د موبایل وسیلو په کار کار وکړي مګر مفکورې په هر ډول پلیټ فارم کې د هرې اندازې په هر اسڪرين کې پلي کیږي. لکه څنګه چې ګوګل د ځانګړتیا په پرانیسته پیراګراف کې وویل، "موږ ځان ته ننګونه وکړه ترڅو د خپلو کاروونکو لپاره یو بصری ژبه جوړه کړو چې د ټیکنالوژۍ او ساینس نوي کولو سره د ښه ډیزاین کلاسیک اصول مطابقت کوي. دا د موادو ډیزاین دی. دا ځانګړی د ژوندی سند دی چې موږ به د توکو د ډیزاین اصول او ځانګړتیاوو ته ادامه ورکړو لکه نوي شی. "

مواد په عمومی اصطلاحاتو کې، کاغذ دی او د موادو ډیزاین نښه نښه ده. په یوه سطحه د یوه ګرافیک کارت په اړه فکر وکړئ او تاسو په سمه لار یاست. کارت یو داسې عنصر دی چې عکسونه، ویډیوګانې، متن لینکونه او داسې نور دي مګر په کوم ځای کې چې دوی د ډیزاینیک ډیزاینونو څخه توپیر لري نو دوی د یو واحد موضوع تمرکز لپاره دي. کارتونه کنډک لرونکي دي، په غیرقانوني سایډونو کې ښیي چې دوی د سطحې څخه پورته دي او که دوی په همدغه الوتکه کې وي نو دوی د "ټولګې" په نامه یادېږي.

په دې "څنګه" موږ د ځانګړتیا پر اساس کارت جوړ کړئ. د مختلف انځورونو او انځور کولو وسیلو سره کارت جوړولو په ځای، موږ به د بل لوري څخه راشي. موږ د Adobe تجربې ډیزاین کې د وسایلو کارولو ته ادامه ورکوو چې دا مهال په مکینتش کې یوازې عامه پیشنهاد کې دی او وړیا دی. تاسو کولی شئ دلته دلته کښته کړئ.

راځه چي پیل یی کړو.

02 د 06

د Adobe پروپوزل ډیزاین سي سي کې د پروتوټائپ ډول آرټبورډ جوړول

د پیل کولو لپاره د آرټ بورډ وسیله او د آرټارټ ټلیپ څخه کار واخلئ. د ټامین ګیټس

د تجربې ډیزاین سي سي (XD) کې د Start Screen څخه د انټرنیټ اسیرډ جوړولو لپاره کومه څرګنده لاره شتون نلري. کله چې موږ د XD پرانيستلو سره کار وکړو، نو د آی فون 6 انتخاب انتخابول دي، او کله چې انٹرفیس پرانیستل شي، موږ د توکپټې په ښکته کې د آرټ بورډ وسیله غوره کوو او د پراپرټ پینل غوره انتخاب ته د انتخابونو څخه موبایل ګرځنده غوره کړئ . بیا موږ د انتخابی وسیلو ته لاړ شو، د فون د آرشیف نوم په یوځل کلیک وکړئ او آرټ بورډ لرې کړئ. نور نشته.

د XD په اوسني نسخه کې، د آی فون 6 په څیر یو کوچني تیر دی چې کله، کلیک وکړی، د drop-down مینو پرانيزئ. له دې ځایه تاسو د انټرنیټ ګرځنده نسخه او د Android موبايل آرټبورډ غوره کول غوره کړئ په انټرنیټ کې.

د دې لپاره چې موږ د کارت لپاره مناسب سکرین ځای پرانیزي، موږ معمولا د Sketch 3 سر ته رسئ او د آرټ بورډ کې د موادو ډیزاین نمونې څخه د حالت بار، کاپی بار، او د اپیل بار پیسټ کړئ. د ماین پاکۍ ډیزاین د موادو ډیزاین ټیلیفوني (د دوتنې> نوی څخه د نمونې> توکي ډیزاین ) او یو بل بل ښه وړیا وړیا یو د کییل لیتربیرټر څخه دی کوم چې تاسو دلته ترلاسه کولی شئ. که تاسو Sketch ندی لرئ، تاسو کولی شئ د XD سټیسرونو څخه کاپی او پیټ کړئ چې په دوتنې> Open UI Kit> Google توکي . تاسو کولی شئ د فوتوشاپ، انځورګر، د اثراتو او خاصو وروسته وروسته د انټرنټ لپاره د Google څخه هم ډاونلوډ کړئ.

03 of 06

د Adobe XD CC آرټبورډ ته د موادو ډیزاین کارډ اضافه کول

د UI کټګوري خورا ډیر ګټور دي ځکه چې دوی د موادو ډیزاین ځانګړتیا سره سمون لري. د ټامین ګریټیشن

د XD یو ترټولو ګټور ځانګړتیاوې د ایپل iOS، Google ګوګل او مایکروسافټ ونډو لپاره د UI کټګوري شاملول دي. په ډیری برخو کې، دوی د "ریپټ پروټوټائپ" اصطلاح ته "Rapid" کلمه اضافه کوي. همدارنګه دوی د ډیزاینر دنده آسانه کړې چې په عام ډول د UI عناصر په ډیزاین ایپليټ کې لکه د فوټشاپ، انځورګر یا خاکی.

موږ د اړتیا وړ UI عنصر یو کارت و. د دې لپاره ترلاسه کولو لپاره موږ د دوتنې غوره کول> د یو نوي سند په توګه پرانیستل شوي UI کټ> د گوگل مواد او کټ پرانيستل. هغه عنصر چې موږ ورته اړتیا درلوده د کارت په کټګورۍ کې وموندل شو.

موږ د دې په اړه مینه کوو هغه د منځپانګې ډیزاین ځانګړتیا تعقیبوي لکه څنګه چې د محتوياتو بلاکس نمونو کې وړاندې شوي، همداراز د متن بڼه بندي او د فاصلو نمونه چې د ټایګرافی بڼه کې ښودل شوي.

د کارت سټیټ چې موږ یې غوښتل و، یوه یې ښکته خواړه وه. موږ په ساده ډول د خپل مایک سره واده کوو او کلپ بورډ ته یې کاپي کړو. له بده مرغه، XD د پرانیستو اسنادو لپاره یوځای شوی انټرنیټ نلري. څه چې موږ کوو هغه د خلاص سند کړکۍ یو څه ته حرکت کوو ترڅو وښایه چې موږ یې کار کوو، انتخاب کړئ او پیټ کړئ. د ایکس ایکس ډی اسنادو تر منځ د چټک تغیر کولو بله لاره دا ده چې د قوماندې لپاره فشار واچوي .

04 06

په Adobe Adobe Design Design CC کې د موادو ډیزاین عنصر څنګه څنګه بدل کړئ

د UI عنصر د XD پروژې ته اضافه شوي دي. ډاډ ترلاسه کړئ چې د اعتراض کولو نه مخکې اعتراض ګډوډ کړئ. د ټامین ګیټس

کله چې په XD کې کارټ د کلپ بورډ څخه راځي نو په آسانۍ سره یې کار پیل نکړي. لومړنی شی چې تاسو یې کول غواړئ د کارت ګروپ ګډوډ کړئ ځکه چې تاسو ته یوڅه لاسرسی ته اړتیا لرئ او کارتونه یې کاروي. د دې کولو لپاره، کارت وټاکئ او اعتراض غوره کړئ> ناباوره کړئ یا د Shift-Command-G پریس وکړئ .

ستاسو کارت اوس درې برخې لري:

لومړی ګام دا دی چې د سپینې سپین خونې بکس حذف کړي. د دې یوازینۍ موخه دا ده چې د انځور لپاره د ځای ځای په توګه کار وکړو کوم چې تاسو یې غوره کوي، که تاسو غوره کړئ، اختیاري.

د متن سره بکس په واقعیت کې یو تیاره سپین رنګ دی چې 50٪ ناپاکتیا لري. دا بکس د متن پس منظر په توګه کارول کیدی شي او تاسو کولی شئ د رنګ او د بکس توقعات بدل کړئ.

که څه هم دا په چټکتیا سره نده، د سپینې سپین خاکي د موادو ډیزاین نمونه تعقیبوي چې د هغې پوستکي کونړونه یې په 2 پکسلونو ویشل شوي دي. که چیرې تاسو یو انځور اضافه کوئ نو په یاد ساتئ. دا به د ګوتو کڅوړو ته هم اړتیا وي کوم چې د امیجونې درخواست یا یا XD کې اضافه کیدی شي.

وګورئ چې دا د کارت آرامۍ حالت څنګه دی، دا سایه ته اړتیا لري. خاصه دا روښانه کوي چې د 2 پکسلونو کارت د آرام کولو لوړتیا شتون لري. د دې اضافه کولو لپاره، د تور رنګ شاليد شکل وټاکئ او د Y او B (Blur) ارزښتونه د 2 په ملکیت پینل کې ترتیب کړئ.

05 06

څنګه د Adobe XD CC کې د موادو ډیزاین کارت ته یو انځور اضافه کړئ

د انځورونو سره د کار کولو یوه لاره د واردونکي عکس ماسکولو لپاره د ځایځای کارول دي. د ټامین ګیټس

د کارت پیژندل 344 پکسلز پراخ دی او د انځور ساحه 150 پکسلز لوړه ده ( د سپینې سپین خړوب نیم نیم لوړوالی ) موږ دا تصویر په فټشاپ کې پرانیزئ، دا اندازه یې لوټ کړه او د Photoshop صادراتو په بڼه یې د 2x اختیار په کارولو سره خوندي کړه بکس دا انځور د Adobe XD سره وارد شو.

بیا مو د سپینې سپین خونې بکس په تیرو ځایونو کې واچاوه او غوره انتخاب > د شکل سره ماسک کړئ . نتیجه هغه عکس وه چې د شکل ګرد کونکي یې پورته کوي. وروسته بیا دا انځور خپل وروستی مقام ته لاړ.

د انځور سره سم، موږ بیا د منځنۍ سپین رنګ بکس پس منظر رنګ بدل شو، متن بدل شو او د لنک متن رنګ.

06 06

د Adobe XD CC د گرډ فیچر څخه کار اخیستل

د عناصرو دقیق ځای پر ځای کولو لپاره د Adobe تجربه ډیزاین سي آر د گرډ فیډ استعمال کړئ. د ټامین ګیټس

د کارت بشپړولو سره اوس اړتیا لري چې د موادو ډیزاین نمونې مطابق سم سمبال شي. دا پدې مانا ده چې د کارت په دواړو اړخونو کې 8 پکسلونه شتون لري او کارت د اپیل بار څخه 8 پکسلونه ته اړتیا لري. د دې کولو لپاره، د فنبورډ نوم کې یوځل کلیک وکړئ او، د Properties Panel کې، گرډ غوره کړئ. دا ګرد د آرټ بورډ څخه ښکاري.

د ډیزاین شوي گرډ اندازه 8 انټرنټونه دي چې د موادو ډیزاین لپاره ورته ګاز اندازه وي. که تاسو مختلف انداز ته اړتیا ولرئ، د گرډ سیمه کې ارزښت بدل کړئ. که تاسو غواړئ د گرین رنګ بدل کړئ، د رنګ چپ ټک وکړئ او د رنګ غوره انتخاب څخه رنګ غوره کړئ.

د ګرید لید سره، په کارت کلیک وکړئ او په وروستي پوست کې یې حرکت کړئ.

د پای ته رسولو لپاره، موږ کارت انتخاب کړ، د ګریپ ډرایټ تڼۍ کلیک کړئ او د کارتونو تر منځ د 8 پکسلونو ترمنځ فاصله بدل کړه.