سبد خرید شما
   برای دیدن سبد خرید باز خود لطفا از طریق این لینک وارد شوید

بسیاری از کاربران و مشتریان برنامه های Adobe احتمالاً طراحی UI و UX را در برنامه های دیگر مانند illustrator یا حتی Photoshop انجام داده اند. Adobe XD به عنوان ابزاری برای طراحی UI-UX ساخته شده است

آموزش طراحی رابط کابری UI و تجربه کاربری Ux

آموزش UX و طراحی وب: نحوه استفاده از Adobe XD


کمپانی Adobe اپلیکیشن Adobe XD را به منظور طراحی گرافیکی بسیار زیبا وارد فضا UX کرده است.
بسیاری از کاربران و مشتریان برنامه های Adobe احتمالاً طراحی UX را در برنامه های دیگر مانند illustrator یا حتی Photoshop انجام داده اند. Adobe XD به عنوان ابزاری برای طراحی UX ساخته شده است. این برنامه در خود ویژگی های شگفت انگیز - اما عمدتا غیر ضروری - برنامه های گرافیکی مشابه خود را پشت سر گذاشته است. این برنامه به شما این امکان را می دهد تا به سرعت برنامه ها و وب سایت های خود را قالب بندی اولیه کرده و نمونه هایی از آن ها را تهیه کنید.

شروع به کار در Adobe XD
 

 

شروع به کار در Adobe XD

اولین چیزی که هنگام راه اندازی برنامه Adobe XD متوجه آن خواهید شد و با آن رو به رو می شوید، صفحه شروع است. به عنوان کاربر جدید Adobe XD، من به شدت توصیه می کنم دکمه Start Tutorial را کلیک کنید. در این بخش پانل هایی که روند کار با XD را توضیح می دهد، در صفحه، نمایش داده می شوند.

این بخش به سرعت شما را با اصول برنامه و نحوه کار با آن آشنا می کند. شما یاد می گیرید که چگونه کارهای مهم مانند ایجاد تابلوهای آرشیو، وارد کردن تصاویر، استفاده از شبکه تکرار و چگونگی پیوند artboard ها را برای نمونه سازی به طور کامل انجام دهید. اگر شما یک کاربر از برنامه های قبلی شرکت ادوبی مثل فتوشاپ و یا ایلاستریتور باشید، بسیاری از این موارد را به سرعت فرا می گیرید.
آموزش روند کار با XD

طراحی و نمونه اولیه (Design  و  Prototype)

پس از پایان آموزش برنامه، زمان آن رسیده است که یک پروژه جدید ایجاد کنید. می توانید با انتخاب File> New این کار را به راحتی انجام دهید. با این کار شما به صفحه ای مشابه صفحه خوش آمد گویی باز خواهید گشت. در اینجا می توانید وضوح صفحه نمایش را بر اساس دستگاه و یا اندازه وب انتخاب کنید یا مقادیر مربوط به اندازه دلخواه خود را در بخش مشخص شده وارد کنید.

پس از انتخاب اندازه برای پروژه خود، وارد رابط Adobe XD خواهید شد. در این بخش خواهید دید که رابط کاربری در برگه های مشخص تقسیم شده است: طراحی و نمونه اولیه (Design  و  Prototype)

در برگه Design، تمام عناصر خود را بر روی تخته ها بنا خواهید کرد، برنامه Adobe XD برخی از ابزارهای طراحی را نیز برای ایجاد اشکال اساسی ارائه می دهد یا می توانید فایل ها و تصاویر ایجاد شده خود را از خارج از برنامه وارد Adobe XD کنید.

ویژگی های قدرتمند

Adobe XD بسیاری از ویژگی هایی را که انتظار دارید در یک ابزار UX داشته باشید را ارائه می دهد. بت بسیاری از ابزارها از طریق سایر برنامه های شرکت ادوبی آشنا خواهید بود، به عنوان مثال ابزارهای رسم بسیار شبیه به سایر برنامه های شرکت ادوبی می باشد. از طرف دیگر، لایه ها کمی متفاوت هستند و لازم است کمی با آن ها کار کنید تا شبیه کار با آن ها را در کار طراحی UX متوجه شوید.

آموزش طراحی نمونه اولیه (Design  و  Prototype)

به این نکته توجه کنید که هر عنصر روی لایه خود است. این لایه ها حاوی نمادهایی هستند که نشان می دهد چه نوع محتوایی در آن لایه ها قرار دارد و موجود است، چه یک تصویر، شکل، پوشه و... باشد. شما به سرعت از آن چه در هر لایه وجود دارد را از طریق این آیکون ها می توانید متوجه شوید. البته، می توانید لایه ها را بکشید تا ترتیب آنها تغییر یابد و با کلیک بر روی نماد چشم، همانند آنچه انتظار دارید و مشابه برنامه های فتوشاپ و ایلاستریتور، آن را تغییر داده و غیر فعال کنید.

کیت های UX

Adobe XD با کیت های UX کامل می شود و به راحتی می توانید برنامه های بومی را برای سیستم عامل های iOS, Windows و پلتفرم Google به راحتی ایجاد کنید. برای دسترسی به این کیت ها، کافیست File> Open UI Kits را انتخاب کنید.

Repeat Grid ویژگی خارق العاده ای در Adobe XD

این کیت ها به شما امکان دسترسی به عناصر UI استاندارد را می دهند که در هر یک از سیستم عامل ها پیدا می شود. این به شما امکان می دهد تا متوجه شوید برنامه خود را در محیط بومی خود به صورتی می بینید. همچنین می توانید در زمان نمونه سازی طرح خود از برخی از این عناصر UI استاندارد استفاده کنید تا در زمان صرفه جویی کنید.

شبکه را تکرار کنید

Repeat Grid ویژگی خارق العاده ای در Adobe XD  است. یک بار یک یا چند اشیا را ایجاد کنید، سپس اشیا را انتخاب کرده و Repeat Grid را فعال کنید. اکنون می توانید اشیا موجود را هم در محور x و هم در محور y تکرار کنید. حتی می توانید فاصله بین اشیا را تنظیم کرده و ظاهر اشیاء را به صورت گروهی یا جداگانه تنظیم کنید.

نمادهای موجود در Adobe XD

فقط به تمام سناریوهای مختلفی فکر کنید که در آن امکان انجام سریع کارهای خسته کننده و تکراری فراهم خواهد شد! برای ایجاد یک گالری یک شبکه از تصاویر را تصور کنید. انجام این نوع کارها برای دستیابی به ظاهری مطلوب، به انجام کار به صورت دستی و تلاش زیادی نیاز داشت.

نمادها

نمادهای موجود در Adobe XD به روش بسیار مشابه ای شبیه به برنامه های دیگر مانند Illustrator یا Axure کار می کنند. اگر شی دارید که می خواهید از طریق چندین بورد از آن استفاده کنید، می توانید آن را به یک سمبل تبدیل کنید. هرگونه تغییر در شی، در هر جای دیگری که در طراحی استفاده شود، اعلام خواهد شد. به عنوان مثال، اگر شما نیاز به تغییر رنگ در جسم دارید، فقط یک بار این تغییر را ایجاد کنید و این تغییر در تمامی بوردهایی که آن شی موجود است اعمال می شود. تمام نمونه ها و شی های ایجاد شده در طول طراحی به روز می شوند.

کتابخانه های Creative Cloud

به عنوان یک کاربر سری برنامه های Creative Cloud شرکت ادوبی، ممکن است فایل های مختلف خود را مانند رنگ ها، سبک ها، تصاویر و سایر عناصر را در همه برنامه های Adobe به اشتراک بگذارید. در آگوست سال 2017، Adobe قابلیتی برای برنامه Adobe XD را در دسترس قرار داد تا به این فایل ها بتواند دسترسی داشته باشد. در صورت استفاده از محصولاتی مانند Photoshop یا Illustrator با ایجاد Assets برای پروژه های Adobe XD خود می توانید در زمان صرفه جویی زیادی داشته باشید.
نمونه اولیه در adobe xd

نمونه اولیه

پس از اتمام طراحی تمام بودرهای خود، احتمالاً می خواهید نحوه عملکرد برنامه خود را ببینید. بر روی برگه Prototype در گوشه بالا سمت چپ کلیک کنید و می توانید شروع به ایجاد پیوندها بین بوردهای خود کنید، با انتخاب این گزینه می توانید نمونه ای که نمایانگر صفحه نمایش در برنامه است را مشاهده کنید. این یک راه حل فوق العاده ساده و در عین حال ارزشمند و قدرتمند است که می توانید برنامه های خود را به مرحله اجرا برسانید.

برای ایجاد پیوند بین صفحه ها، زمانی هر شی را انتخاب کنید و یک پیکان در سمت راست کادر ظاهر می شود. می توانید این پیکان را به یک بورد دیگری بکشید و رها کنید تا آن را پیوند دهید یا بر روی آن کلیک کنید و از منو آن را انتخاب کنید.

پیش نمایش

پیش نمایش

هنگامی که اشیاء را به سایر بوردها پیوند می زنید، می توانید انتقال را با سهولت و آسانی انجام دهید. سپس، پس از اتصال ، می توانید بر روی دکمه Play از بالا و سمت راست کلیک کنید تا پیش نمایش برنامه را ببینید. از طرف دیگر، می توانید برنامه XD را برای ایفون/اندروید بارگیری کنید و پیش نمایش کار خود را در دستگاه ها و گوشی های خود به صورت واقعی و Real Time پیش نمایش کنید. این کار را می توانید یا از طریق USB یا از طریق Creative Cloud انجام دهید.

شما به راحتی می توانید نمونه اولیه خود را با ایجاد پیوند مستقیم از برنامه به اشتراک بگذارید. پس از انجام این کار، همکاران و دیگر ذی نفعان می توانند نظر خود را در رابطه با کار شما داده و هر بخشی که نیاز به تغییر دارد را در قالب یک Comment به پروژه اضافه کنند.

Assets خارج از برنامه

اگر در حال طراحی یک برنامه بومی و نیتیو هستید، به احتمال زیاد نیاز دارید که Assetsهای خود را برای تحویل به یک توسعه دهنده ارسال کنید. این قابلیت در برنامه Adobe XD وجود دارد شما می توانید به صورت ورژن های مختلف فایل های خود را برای توسعه دهنده ارسال کنید.

Post Author
محسن الهامی
مدیر وکتو

طراح رابط کاربری و تجربه کاربری، طراح گرافیک، برنامه نویس