طراحی رابط کاربری و تجربه ی کاربری یکی از بخش‌های مهم توسعه ی هر وب سایت و اپلیکیشن است که معمولا در فرآیند طراحی رابط کاربری با Adobe XD توسط UI/UX Designer انجام می‌شود. برای این کار، ابزارها و نرم افزارهای زیادی وجود دارد. یکی از بهترین این نرم افزارها، محصول شرکت Adobe به نام Adobe XD است که نسخه ی اولیه ی آن در ماه مارس 2016 منتشر شد.

در این مقاله قصد داریم تا با نحوه ی طراحی رابط کاربری با Adobe XD آشنا شویم. سپس ادوبی ایکس دی را با سایر نرم افزارهای طراحی رابط کاربری و تجربه کاربری مقایسه می‌کنیم تا بدانیم که طراحی سایت با Adobe XD چگونه انجام می‌شود. در پایان این آموزش شما قادر خواهید بود طراحی UI و UX وب سایت و اپلیکیشن خود را انجام دهید. با وب سایت آموزش برنامه نویسی سون لرن همراه باشید.

نرم افزار Adobe XD چیست؟

Adobe XD یک نرم افزار طراحی رابط کاربری و تجربه ی کاربری وب سایت و اپلیکیشن بر پایه ی وکتور (Vector) است. XD مخفف واژه‌های Experience Design به معنای طراحی تجربه است. این نرم افزار مثل نرم افزار Sketch برای طراحی UI و UX یا رابط کاربری و تجربه ی کاربری استفاده می‌شود. ابزارهای زیادی در این نرم افزار وجود دارد مثل Pen، Selection و... . طراحی با Adobe XD ساده است.

اگر از سایر نرم افزارهای شرکت Adobe مانند Photoshop یا Illustrator استفاده کرده اید، کار با XD برایتان بسیار ساده‌تر می‌شود. رابط جذاب و کاربردی، یکی از ویژگی‌های خوب این نرم افزار است. ویژگی مهم دیگر این است که نرم افزار Adobe XD به صورت تخصصی برای طراحان رابط و تجربه ی کاربری ایجاد شده است و در نتیجه نسبت به فوتوشاپ، کارایی بالاتری در این حوزه دارد.

نرم افزار Adobe XD، به راحتی با سایر نرم افزارهای شرکت Adobe هماهنگ می‌شود. هم چنین، نوع محتوایی که در محیط نرم افزار، به اصطلاح درگ و دراپ می‌کنید را به صورت خودکار تشخیص می‌دهد. ادوبی ایکس دی از Prototype Mode پشتیبانی می‌کند و می‌توانید با آپلود کردن پروتوتایپ خود روی سرورهای Adobe، آن را با دیگران به اشتراک بگذارید.

مقایسه ی XD، Sketch و Figma برای طراحی رابطه ی کاربری

فیگما یا Figma، یک نرم افزار طراحی رابط کاربری است که در مرورگر اجرا می‌شود. اسکچ یا Sketch نیز یک نرم افزار ویژه ی سیستم عامل Mac است که برای طراحی رابط کاربری و حتی طراحی آیکن استفاده می‌شود. هر دوی این نرم افزارها مانند Adobe XD، بر پایه ی وکتور هستند.

Live Collaboration یا همکاری زنده نیز ویژگی مهم دیگری است که می‌تواند برای انتخاب نرم افزار طراحی رابط کاربری حائز اهمیت باشد. در نرم افزار Figma می‌توانید از این ویژگی بهره ببرید. در Adobe XD نیز استفاده از ویژگی همکاری زنده با Adobe ID به تازگی از طریق Zoom، ممکن شده است. اما در Sketch این ویژگی به صورت Native وجود ندارد و برای استفاده از آن، باید از پلاگین‌های خاصی استفاده کنید.

هزینه استفاده از XD، Sketch و Figma

از نظر قیمت، استفاده از Sketch حدودا ماهی 8 دلار هزینه دارد. به عبارت دیگر، تهیه ی License اسکچ برای یک سال، حدودا 99 دلار هزینه خواهد داشت ولی می‌توانید تا 30 روز، به صورت رایگان از آن استفاده کنید. Figma برای استفاده ی غیر تجاری، رایگان است و می‌توانید تا سه پروژه ی رایگان را در آن ایجاد کنید. برای شروع کار با Adobe XD نیز نیاز به پرداخت هزینه ای ندارید.

سیستم مورد نیاز برای Sketch ،Adobe XD و Figma 

نرم افزار Sketch فقط قابل نصب و استفاده بر روی سیستم عامل Mac است، اما Adobe XD هم روی Mac و هم روی ویندوز نصب می‌شود و حتی نسخه ی موبایل آن نیز موجود است. از طرفی، Figma بر روی مرورگر اجرا می‌شود؛ بنابراین ارتباطی با نوع سیستم عامل ندارد. هم چنین نسخه ی دسکتاپ آن موجود است که روی Mac و ویندوز قابل اجرا می‌باشد.

نرم افزارهای Sketch و XD به صورت آفلاین هم قابل استفاده اند، اما Figma فقط کاربری آفلاین را ساپورت نمی‌کند؛ هرچند این ویژگی قرار است به زودی به Figma اضافه شود. هم چنین، هرسه نرم افزار فوق از ویژگی Prototyping بهره می‌برند.

بیشتر بخوانید: آموزش فیگما : آموزش نصب نرم افزار Figma + معرفی پلاگین‌های کاربردی

برای طراحی رابط کاربری از Adobe XD یا Photoshop استفاده کنیم؟

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

مقایسه Adobe XD با Photoshop

XD بر پایه ی وکتور (Vector) و Photoshop بر پایه ی پیکسل (Pixel) است؛ در نتیجه، ایجاد اشکال و رسم در XD به مراتب ساده‌تر است. هم چنین هر دو نرم افزار از لایه‌ها یا Layers استفاده می‌کنند.

همان گونه که ذکر شد، کاربرد اصلی Photoshop ویرایش تصاویر است، در حالی که XD برای طراحی رابطه و تجربه ی کاربری ایجاد شده است.

XD از ویژگی Repeat Grid بهره می‌برد که با استفاده از آن می‌توانید یک بخش خاص از طراحی را به تعداد دلخواه، تکرار کنید. Photoshop فاقد این ویژگی است.

XD هم چنین از ویژگی Prototyping بهره می‌برد که به وسیله ی آن می‌توانید Artboardها را به هم متصل کنید و افکت Transition موردنظر خود را نیز بین آن‌ها اعمال کنید تا بهتر بتوانید شکل نهایی محصول را ببینید. در فوتوشاپ به ابزارهای 3rd-party برای Prototyping نیاز دارید.

در طراحی رابط کاربری با ایکس دی می‌توانید Prototype ایجاد شده را با سایر اعضای تیم به اشتراک بگذارید و از آن‌ها نظرخواهی کنید.

دانلود نرم افزار Adobe XD

برای دانلود نرم افزار Adobe X (به دلیل تحریم‌ها پیش از دانلود، IP خود را تغییر دهید) به صفحه ی دانلود Adobe XD در وب سایت رسمی Adobe مراجعه کنید و بر روی گزینه ی Start for free کلیک کنید. اگر Adobe Id ندارید، ابتدا یک اکانت در وب سایت Adobe ایجاد کنید.

آموزش طراحی سایت با adobe xd - نصب ادوبی ایکس دی

فایل کم حجم دانلود شده را اجرا کنید. وارد اکانت خود شده و بر روی گزینه ی Start installing کلیک کنید.

آموزش Adobe XD رایگان - طراحی رابط کاربری با Adobe XD

Adobe XD رابط کاربری کاربردی و ساده ای دارد. در ادامه ما با شما خواهیم بود تا بتوانید اولین Prototype خود را در Adobe XD ایجاد کنید.

آموزش Adobe XD رایگان - ایجاد یک پروژه ی Prototype

زمانی که Adobe XD را اجرا می‌کنید، صفحه ی Welcome و نوع پروژه ای که می‌خواهید انتخاب کنید، نمایش داده می‌شوند. برای مثال، iphone 6 را انتخاب کنید. سپس بر روی آیکون iphone کلیک کنید تا پروژه ایجاد شود. المنت‌های مربوط به رابط کاربری iphone را برای استفاده در پروژه، تهیه کنید. پس از ایجاد Artboard، بر روی نام Artboard دوبار کلیک کنید تا نام آن را تغییر دهید.

آموزش Adobe XD رایگان - ایجاد پس زمینه ی Prototype

بر روی Artboard کلیک کنید. خصوصیات آن در پنل Properties در سمت راست نرم افزار نمایش داده می‌شوند. سپس بر روی Fill Color کلیک کنید تا پنل انتخاب رنگ باز شود. در این بخش می‌توانید رنگ موردنظر خود را انتخاب کنید.

آموزش Adobe XD رایگان - ایجاد Header

منوی File را باز کنید و بر روی گزینه ی Import کلیک کنید. عکس موردنظر خود برای Header را انتخاب کنید. از کنترل‌های اطراف تصویر برای تغییر سایز استفاده کنید تا به اندازه ی Header موردنظرتان برسد. برای اصلاح تصویر بر روی آن دو بار کلیک کنید. ابزار Text را از پنل Text انتخاب کنید و کلمه ی دلخواه را وارد نمایید. بر روی متن دو بار کلیک کنید و از پنل Property در سمت راست، خصوصیات متن را به دلخواه تغییر دهید.

آموزش Adobe XD رایگان - ایجاد پس زمینه ی بخش محتوا

ابزار Rectangle از پنل Tool در سمت چپ را انتخاب کنید و در زیر Header، یک مستطیل ایجاد کنید. از پنل Properties در سمت راست، رنگ و سایر ویژگی‌های آن را به دلخواه انتخاب کنید.

آموزش Adobe XD رایگان - افزودن محتوا

با استفاده از روش‌های افزودن متن و تصویر که بالاتر ذکر شد، متن و تصویر دلخواهتان را به بخش محتوا اضافه کنید.

آموزش Adobe XD رایگان - ایجاد Grid

یکی از بهترین ابزارهای Adobe XD، ایجاد یک Grid از محتوای موجود، بدون نیاز به کپی کردن آن است. کلید Shift کیبورد را نگه دارید و بخش‌های مختلف محتوا را انتخاب کنید. سپس بر روی دکمه ی Repeat Grid در پنل Properties کلیک کنید. با انجام این کار، بخش‌های انتخاب شده، در Grid کپی می‌شوند. آیکون سبزرنگ پایینی را بکشید تا یک Grid عمودی ایجاد شود. با دو بار کلیک کردن بر روی محتوای تکراری، می‌توانید آن را به دلخواه خود تغییر دهید. در نهایت، محتوا را انتخاب کنید و بر روی Cancel Grid کلیک کنید تا ارتباط بین آن‌ها پایان یابد.

آموزش Adobe XD رایگان - ایجاد یک Artboard یا صفحه ی جدید

برای ایجاد یک صفحه ی Layout جدید، بر روی ابزار Artboard در پنل Tool کلیک کنید. سپس، برای مثال، قالب iphone 6 را از سمت راست انتخاب کنید تا یک صفحه ی جدید برای شما ایجاد شود. مرحله ی قبل را چند بار تکرار کنید تا بتوانید صفحات بیشتری ایجاد کنید.

آموزش Adobe XD رایگان - تعیین صفحه ی اصلی پروژه

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

آموزش Adobe XD رایگان - ایجاد ارتباط بین صفحات

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

آموزش Adobe XD رایگان - ایجاد تعامل

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

آموزش Adobe XD رایگان - پیش نمایش Prototype

بر روی آیکون Preview در گوشه ی بالا و سمت راست نرم افزار کلیک کنید. یک پیش نمایش با قابلیت مشاهده و هدایت بین صفحات برای شما نمایش داده خواهد شد. می‌توانید بر روی دکمه ی Record کلیک کنید تا حرکت بین صفحات ضبط شود و آن را در قالب QuickTime (MOV) ذخیره کنید.

آموزش Adobe XD رایگان - اشتراک گذاری Prototype

می توانیم صفحات ایجاد شده را با سایر اعضای تیم به اشتراک بگذاریم. بر روی دکمه ی Share در گوشه ی بالا و سمت راست نرم افزار کلیک کنید تا یک منو آبشاری ظاهر شود. با کلیک بر روی دکمه ی Create Link یک URL ایجاد می‌شود که می‌توانید آن را در اختیار سایر اعضای تیم قرار دهید.

آموزش Adobe XD رایگان - خروجی گرفتن از Adobe XD

برای خروجی گرفتن در طراحی رابط کاربری با Adobe XD، پس از کلیک بر روی آیکون همبرگر یا سه خطی بالا و سمت راست، بر روی گزینه ی Export کلیک کنید. سه فرمت برای گرفتن خروجی از Adobe XD وجود دارد: PNG، SVG و PDF که می‌توانید بنا به نیاز خود از هر کدام استفاده کنید.

آموزش Adobe XD رایگان - خط کش در Adobe XD

برای ایجاد خطوط راهنما یا خط کش در Adobe XD، نشانگر ماوس را بر روی یکی از لبه‌های Artboard ببرید تا زمانی که به دو پیکان تبدیل شود. سپس بر روی آن کلیک کنید، نگه دارید، به نقطه دلخواه بکشید و کلیک را رها کنید. این کار را برای ایجاد خطوط راهنمای افقی و عمودی با استفاده از لبه‌های افقی و عموی Artboard می‌توانید انجام دهید.

در سیستم عامل Mac، برای کپی کردن خطوط راهنما در یک Artboard دیگر، Artboard که خطوط راهنما دارد را انتخاب کرده و در منو بالایی، View و سپس Guides را انتخاب کنید و سپس بر روی Copy Guides کلیک کنید. سپس Artboard بدون خطوط راهنما را انتخاب کرده و در منو بالایی، پس از انتخاب View و Guides، بر روی Paste Guides کلیک کنید.

برای قفل کردن خطوط راهنما نیز می‌توانید پس از انتخاب View و Guides، بر روی گزینه ی Lock و برای باز کردن قفل، بر روی گزینه ی Unlock کلیک کنید. قفل کردن خطوط راهنما به این منظور انجام می‌گیرد که در حین کار، خواسته یا ناخواسته جابجا نشوند.

مرحله ی بعد از طراحی رابط کاربری با Adobe XD چیست؟

در مقاله ی آموزش طراحی رابط کاربری با Adobe XD، با نحوه کار با Adobe XD آشنا شدیم و توانستیم مقایسه ای بین ادوبی ایکس دی و سایر نرم افزارهای طراحی رابط کاربری نظیر Figma و Sketch داشته باشیم. هم چنین آن را با Photoshop مقایسه کردیم و برخی مزایای آن را در طراحی رابط و تجربه ی کاربری برشمردیم. هم چنین نحوه ی ایجاد Prototype را در ادوبی ایکس دی به صورت مقدماتی فرا گرفتیم تا بتوانیم در پروژه‌های طراحی UI / UX سایت و اپلیکیشن‌های خود از Adobe XD استفاده کنیم. امیدواریم که این مقاله برای شما مفید بوده باشد و توانسته باشیم در طراحی رابط کاربری با ایکس دی به شما کمک کنیم.

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

خوشحال می‌شویم نظرات، تجربیات و سوالات خود را در رابطه با طراحی رابط کاربری با Adobe XD، با ما و سایر کاربران سون لرن به اشتراک بگذارید.

اگر بین هنر و کامپیوتر گیر کردید، با UI تلفیقش کنید! UI یا طراحی رابط کاربری یکی از جذاب‌ترین رشته‌ها برای کسایی هست که با دید گرافیکی خوبشون بتوانند حس خوب را برای کاربران ایجاد کنند و روند استفاده از سایت را سهولت ببخشند. اگر شما هم از طرفداران هنر و گرافیک هستید. دوره متخصص طراحی رابط کاربری (UI) را به شما پیشنهاد می‌کنیم.