طراحی رابط کاربری و تجربه‌ی کاربری یکی از بخش‌های مهم توسعه‌ی هر وب‌سایت‌ و اپلیکیشن است که معمولا در فرآیند طراحی رابط کاربری با 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) را به شما پیشنهاد می‌کنیم.