د Adobe تجربو ډیزاین ټیککس، لارښوونې، او تخنیکونه

د 01 01

د Adobe تجربو ډیزاین ټیککس، لارښوونې، او تخنیکونه

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

مګر لومړی، تاسو ښايي فکر وکړو چې د پروتوټیسپین سافټویر لخوا څه مانا لري. په دې ځای کې د لویو لوبغاړو ترمنځ پروتوسیو، اصول، UXPin، اتومیک . io ، د تجربې ډیزاین او انډول دي. د غوښتنلیکونو په څیر لکه Sketch 3، Photoshop او انځورګر چېرته د جامد ډیزاینونو تولید کیږي، دا ګرافیکي سمونګر د نن ورځ په ګرځنده او ویب ډیزاین کې ځای کې مشترک فعالیتونه، تحریک او نور خصوصیات وړاندې کوي.

د موبایل زیاتوالی او ناگزیرتیا سره، په کارن باندې د لیزر په څیر تمرکز، دا نور د ډیزاینر لپاره کافی نه دی چې څو سایټونه ونیسئ، یو څو کمپیوټر سره یوځای کړئ او بیا یې خوشې کړئ او یا یې د ویب سرور ته اپیل کړئ. د UI / UX کاري فلو په اساسي توګه بدلون بدل کړی دی. د پروسې هر پړاو، د کاروونکي، خاکونو، تار چوکاټ، ماک اپپټونه، او پروتوټائپ کولو پېژندل د ډیری کارن کار ازموینې تابع دي.

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

په واقعیت کې، دا سافټویر د نن ورځ د "چټک پروتوټائپ" ډیزاین او پراختیا چاپیریال کې یو مهم جز دی.

د دې سره سره، راځئ چې د تجربې ډیزاین سره ځینې خوند ولرو.

02 of 07

د انډرن تجربې ډیزاین کې په یوه ساده سرک سره د ګرم کولو پنټ جوړ کړئ

د XD یو پاک اړخ د ویکٹر د نقاشي وسیلو کارول دي. نښان ونه موندل شو؟ کومه خبره نده. خپل ځان رال کړئ. دلته څنګه دي:

1. د Ellipse Tool غوره کړئ او د اختیاري / Alt-Shift سیسټمونو فشار سره یو حلقه راښکاره کړئ.
2. د حلقې انتخابول، د خوند رنګ FF0000 ته او د ملکیت په سرحد کې "هیڅ" ته وټاکئ .
3. د لمر ټکي د ښودلو لپاره په حلقه دوه ځله کلک کړئ. د لاندې لمر ښکته لاندې کړئ.
4. د ټاکل شوي لنگر پوائنټ او برخی دوه ځله کلک کړئ د لینونو سره بدلیږي.
5. د سپینې ډک سره یو بل کوچنۍ حلقه وټاکئ او هیڅ خنډ نه لري. دا ځای په ځای کېږدئ او پن او ګوټ انتخاب کړئ. د Properties په سر کې د پایګاه پینل کې د افقی مرکز تڼۍ کلیک وکړئ او پن جوړ شوی.

03 of 07

د Adobe تجربو ډیزاین کې د پس منظر خالی جوړ کړئ

دا یو عام دی چې په پس منظر انځور کې متن یا نور منځپانګې ولري. ستونزه دلته د عکس عکس دی، په پرتله ډیری وختونه، پورته یې د محتوياتو لوړول. د دې مسلې حل کول د شاليد انځور روښانه کول دي. تاسو کولی شئ عکس په فټشپشاپ یا د بل عکس سمونې سافټویر کې ولیکئ، مګر دا یوڅه ناکافي دی، په ځانګړي توګه له دې چې XD کولی شي ستاسو لپاره دا کار سرته ورسوي. دلته څنګه دي:

1. نوی آرټبورډ جوړ کړئ او خپل شاليد انځور اضافه کړئ.
2. د مستطیل وسیله غوره کړئ یو انځور د انځور په اړه د مستطیل راواړوي. د مستطیل شوي انتخاب سره، ډیزاین ته سپینه او سټروک ته هیڅوک ونه کړئ.
3. د مستطیل شوي انتخاب سره، د شتمنیو په پینل کې د پس منظر خوندیتوب غوره کړئ . دا درې سلایډونه د روښانه غږ، روښانتیا او ناڅاپي دي. دلته هغه څه دي چې:

• د زیږون اندازه: د شکل لاندې د انځور انځور روښانه کوي. تر ټولو لوړ ارزښت +50 دی.
• روښانتیا: په انځور کې تعصب او سایټونه تعدیل کوي. لږترلږه ارزښت 50 - او اعظمي ارزښت 50 + دی.
• دوامداره والی: د شکل الندې د عکس عکس او لید لیدنه اغیزمن کوي. ارزښتونه د 0٪ څخه تر 100٪ پورې وي.

که تاسو واقعیت غواړئ "شیان بدل کړئ"، د انځور "نظر" بدلولو لپاره د شکل رنګ بدل کړئ او د توقیف ارزښت سره لوبې وکړئ.

04 of 07

د Adobe تجربو ډیزاین کې یوه پیچله جوړه کړئ

د ډیزاین ډیزاین ستونزه د انفراسټرکچر عناصر دي عناصر باید یو عام رنګ وي مګر، کله چې په یو مخکی انځور یا ټوټې رنګ کې له لاسه ورکړل شوي وي. د حل حل یوه لویه ده. د ویډیو یو څه ناڅاپي درجه ایښودل شوی دی چې د انٹرفیس عنصر او پس منظر ترمنځ. دا د XD په ترسره کولو کې اسانه ده. دلته څنګه دي:

1. خپل آرټ بورډ په XD کې جوړ کړئ، یو انځور اضافه کړئ او د انټرنېټ عناصر د مناسبو UI کټ فایل> د پرانیستې UI کټ څخه ... - د آرټ بورډ کې. په پورته عکس کې عکس د وضعیت بار او د اپین بار بار ستونزمن کوي.
2. د مستطیل وسیله غوره کړئ او د مستطیل راټول کړئ. په Properties Panel کې انتخاب کړئ او د رنګ غوره په پاپ کې د پاپ څخه ګریډیټ غوره کړئ. تور رنګ او سپین ته رنګ کړئ. د ارزښت - دوامداره کولو 60٪ ته او سپینه A ارزښت 0٪ ته مقرر کړئ .
3. د مستطیل انتخاب سره، اعتراض انتخاب کړئ> ترتیب> بیرته لیږل . د انټرنیټ عناصر اوس د انځور په اړه لیدل کیږي.

05 of 07

د Adobe تجربو ډیزاین کې یو انځور اوتار جوړ کړئ

یو عام ډیزاین نمونه په چیٹ ایپس کې موندل کیږي چیرې چې خلک د یو بل سره خبرې کوي او د سپیکر په اړه د سپیکر تصویر ښکاري. دا avatars عموما هغه انځورونه دي چې ماسک شوي دي. دا مرکه ساده ده دا په XD کې ترسره کوي. دلته څنګه دي:

1. تاسو د انځور سره یو انځور او یو حلقه یا بل شکل پیل کړئ. تاسو کولی شئ حلقه د هر رنګ سره ډکه کړئ. هغه څه چې تاسو ته اړتیا نلري د ګوتو رنګ اضافه کول دي. کله چې تا اغیزه رامنځ ته شي نو دا به له لاسه ورکړي، نو ولې ځورول کیږي. که تاسو د دې حلقې غلا کولو ته اړتیا لرئ، دا د کلپ بورډ ته کاپي کړئ.
2. دا انځور د انځور په لور حرکت وکړئ او انځور او حلقه دواړه غوره کړئ. د بوټو شیانو سره غوره شوی، د شکل سره مسک غوره کړئ شکل . کله چې تاسو مایک خلاص کړ، اوتار جوړ شو. له دې ځایه تاسو یې بیا وټاکئ.
3. که تاسو اړتیا لرئ چې د سټیټ اضافه کړئ، د خپل کلپ بورډ کې د آريکا تخته کې د ګردې ناستې پیټ کړئ. د کاپی سره غوره شوی فورمه د Properties په واسطه وتړئ او د ګوتو رنګ او چوکۍ اضافه کړئ. د دوی د لیکلو لپاره، د دواړو لینکونو انتخاب وکړئ او د ځانگړي کولو په پایله کې د مرکز په نښه کولو کې د مرکز په نښه کولو بټنونو کلیک وکړئ.
4. که تاسو غواړئ عکس د ماسک په شاوخوا کې ولګوئ، ماسک دوه ځله کلک کړئ. دا به د عکس او ماسک شکل ښکاره کړي. په انځور کې کلیک وکړئ او په پوسټ کې یې ودرځوئ. کله چې تاسو مایق خپور کړ، تصویر به د ماسک دننه خپل نوې موقعیت کې وي.

06 د 07

د Adobe تجربو ډیزاینونو سره لوبې وکړئ

د تجربې ډیزاین آرډونه یوازې د تاسو لپاره شتون نلري ترڅو محتویات وړاندې کړئ. دوی هم کولی شي په کار واچول شي. دلته یو څه شیان دي چې تاسو یې کولی شئ:

1. که تاسو د آرټ بورډ لینکسپټ او د پورټریټ نسخو ته اړتیا لرئ، د آرټ بورډ دوه ځله او د نقل شوي انتخاب سره، د ځمکې په تڼۍ کې د لیدنې تڼۍ کلیک وکړئ. آرټبورډ به د لینکسپین په لور کې بدلون بدل کړي. که آرټبورډ د هغې محتويات ولري، د آرټبورډ نوم او د آرټبورډ ځانګړتیاوې به د پراخې پینل کې راښکاره شي.
2. د آرټبورډ لپاره د ګمرک رنګ اضافه کولو لپاره، او د دې مسلې لپاره پروژه، د آرټبورډ غوره کړئ او د Properties Panel په بڼه برخه کې د رنګ رنګ چپ کلیک وکړئ. د رنګ لپاره د هیکسډایډیلټ ارزښت داخل کړئ او + لاسلیک کلیک وکړئ. رنګ به د ګمرک رنګ په توګه اضافه شي. د نورو رنګونو په بل ځای کې غوښتنه وکړئ، یو اعتراض غوره کړئ او د رنګ تطبیق لپاره د ګمرک رنګ چپ کلیک وکړئ.
3. آرټ بورډونه عمودي سیسټم وړ وړل کیدی شي. د دې کولو لپاره، د ارټ بورډ غوره کړئ او یا هم د هغې د لوړوالی بدل کړئ یا د پراپرټ پینلونو کې یا د آرټ بورډ د ښکته کولو لاندې ښکته. د ملکیت پینل کې د سکولول وړ ساحې کې، د پاپ مینو مینو څخه عمودی انتخاب کړئ او د سکرین لپاره د لیدپورت لوړوالی داخل کړئ. دا نارې شوې نیلې کرښه تاسو د لیدلورټ لاندې ښکاري. د دې آزموینې لپاره، د لوبې تڼۍ کلیک وکړئ او لاړ شئ. د سکولول کولو بندولو لپاره، په Scrolling پاپ کې هیڅوک وټاکئ.

07 د 07

د Adobe تجربه ډیزاین کې د ګرځنده UI کټ مټ

د تجربې ډیزاین د II د پراختیا لپاره د UI کټ مټ دی، د Android او وینډوز UI's. کله چې تاسو لومړی یې دوی پرانيزئ نو تاسو فکر کوئ چې دوی په ښه ځای کې ځای لري. په بشپړه توګه نه د هر یو ویټ او ټوټې په کټیو کې په بشپړ ډول د سمون وړ دي. راځئ چې د انټرنیډ تار تار جوړ کړئ.

1. تاسو د آرټبورډ وسیله غوره کړئ او د پراخې پینل په ګوګل برخې کې د Android موبایل غوره کول پیل کړئ.
2. د دوتنې غوره کول> د UI کټ پرانیست> ګوګل مواد . دا د منځپانګې ډیزاین UI کټ خلاصوي. د مقناطيش ګلاس انتخاب کړئ او د هغه د لارښوونو لارښوونې د آرشيف تخته وکاروي . زه غواړم له دې سره پیل وکړم ځکه چې دا د انفراسټرکچر عناصر د مناسب سکرین پر ځای کولو لارښوونه کوي. که تاسو په بلیو پښو باندې کلیک وکړئ نو تاسو به وګورئ چې دا تړل شوی دی. د انلاین کولو لپاره د هر یو سره تړل شوی تڼۍ کلیک کړئ . مارکيټ مارک کړئ او انتخاب د کلپ بورډ ته نقل کړئ. خپل سند ته بیرته راستانه کړئ او سکرین په خپل آرټ بورډ کې چټک کړئ.
3. یوځل بیا د اپلیټ بار باندې کلیک وکړئ چې د آرټ بورډ ترټولو غوره. خبر ولرئ چې تاسو څنګه کولی شئ دا غوره کړئ. د انتخاب انتخاب وکړئ> فرنج ته لاړئ. ستاسو ټاکنه اوس د سکرین لارښود څخه پورته ده. دا باید تاسو ته ووایاست چې د هر یو عنصر په سمه توګه باید سمبال شي.
4. دوه ځله د وضعیت بار په سر کې ټک وکړئ او د Properties Panel او د رنګ رنګ 455A64 ته ورسوئ . د اپلی بار دوه ځله کلک کړئ او ډک ډک 607D8B ته وټاکئ. دا باید ووایي چې هر عنصر په یو UI کټ کې د پروژې د رنګ مشخصاتو پوره کولو لپاره د بدلون لپاره کیدی شي.
5. د شبیهاتو څه شی؟ دلته د هغوی رنګ بدلول دي. د دې لپاره غوره کړئ چې زړه غوره کړئ. که تاسو د Properties Panel ته ګورئ، نو تاسو فکر کولی شئ چې تاسو نشئ کولی سم انتخاب کړئ. پوره نه ده د زړه یو ځل بیا زړه ټک وکړئ . Properties خلاصه او تاسو د FF0000 ته د ډک رنګ بدلوي. د پاتې شبیونو او متن لپاره دا دوه ګونی دوه کلیک ټک بیا تکرار کړئ.