آموزش adobe xd مقدماتی تا پیشرفته

Adobe XD چیست ؟

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

آموزش Adobe XD مقدماتی

آموزش Adobe XD پیشرفته

آموزش Adobe XD را چرا باید یاد بگیریم؟

طراحی Adobe XD با سرعت فکر

Adobe XD چه در مراحل اولیه طراحی یک ایده باشید ، چه در آخرین مراحل طراحی طرح های آماده تولید ، مجهز به ویژگی هایی است که به شما در بیان موثر این ایده ها کمک می کند.

اجزا و بخش ها در Adobe XD

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

 

پشته و پدینگ

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

Padding یک ویژگی طرح بندی آگاهانه محتوا است که فاصله بین محتوای یک گروه و محدوده بیرونی یا پس زمینه را حفظ می کند. با تغییر پدینگ ، با تغییر برچسب دکمه یا افزودن محتوا به یک گروه ، فاصله بیرونی درون آن گروه ثابت می ماند. هربار که برچسب call to action به روز می شود دیگر تنظیمات پیکسلی مزاحم وجود ندارد.

 

Stacks از قدرت Padding استفاده می کند و اجازه می دهد تا گروه های محتوا با یک کلیک و کشیدن ساده تنظیم مجدد شوند. آیا می خواهید عناصر بیشتری را به گروه اضافه کنید؟ فاصله بین عناصر به طور خودکار حفظ می شود و می تواند به صورت جداگانه یا کلی در سراسر Stack تنظیم کنید.

تکرار شبکه ای

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

Repeat Grid در اینجا برای کمک به شما آماده شده است. با کلیک روی یک دکمه می توانید فرایند خسته کننده تکرار محتوا را خودکار کنید. پس از فعال شدن ، هر شی یا گروهی از اشیاء را می توان به صورت افقی و عمودی تکرار کرد. با کشیدن تصاویر و فایل های متنی بر روی Repeat Grid ، انتقال متن و تصاویر را می توان نادیده گرفت و انتقال از wireframe به طرح های با صداقت بیشتر را آسان کرد.

تبدیل سه بعدی در Adobe XD

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

کتابخانه های قابل اشتراک گذاری

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

کتابخانه های قابل اشتراک

استفاده از ریسپانسیو در Adobe XD

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

افزونه ها Adobe XD

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

نمونه های اولیه تعاملی قوی در Adobe XD طراحی کنید

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

خود متحرک Auto-Animate

با باز کردن قفل هوش داخلی Adobe XD ، Auto-Animate به شما ابزارهایی می دهد تا حرکت و تعاملات کوچک را در طرح های خود استفاده کنید. یک طرح ثابت را زنده کنید ، واقع گرایی را به آزمایش کاربر اضافه کنید و بازخورد بصری را در جریانات کاربر با Auto-Animate ارائه دهید.

پیمایش گروه ها

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

 

لینک های لنگر

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

نمونه سازی صوتی در Adobe XD

Adobe XD به عنوان اولین پلتفرم طراحی تجربه کاربری که قابلیت تعامل صوتی را ارائه می دهد ، شما را قادر می سازد تا تجربه های صوتی غنی را برای طراحی دستیارهای صوتی ، برنامه های قابل دسترسی و موارد دیگر ایجاد کنید. در Adobe XD ، می توان یک کل جریان کاربر را فقط برای صدا طراحی کرد و از دستورات صوتی با پخش گفتار و صدا استفاده کرد. اگر در حال ایجاد مهارت یا گردش کار برای Alexa یا Google Assistant هستید ، می توانید این نمونه های اولیه را مستقیماً در دستگاه سازگار مشاهده کنید.

نمونه سازی صوتی در Adobe XD

پیش نمایش زمان زنده

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

آنچه را که نیاز دارید در Adobe XD به اشتراک بگذارید

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

اشتراک گذاری سفارشی لینک ها

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

تاریخچه اسناد

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

Adobe XD برای چه مواردی استفاده می شود؟

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

وایت برد و دنبال کردن کاربر

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

وایر فریم wireframe

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

طراحی رابط کاربری

از ایجاد جزئیات رابط کاربری خوب مانند شمایل نگاری و تایپوگرافی ، تا ایجاد تعادل کامل در چیدمان ، Adobe XD به طراحان UI ابزارهایی را می دهد که برای انجام بهترین کار خود نیاز دارند. با ادغام با سایر برنامه های Creative Cloud ، مانند Photoshop و Illustrator ، می توانید طرح ها را به راحتی طراحی کرده و در Adobe XD قرار دهید. از راهنماهای داخلی XD برای دستیابی به دقت طراحی خود استفاده کنید.

انیمیشن و طراحی تعاملی

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

طراحی تجربه کاربری

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

نمونه سازی

از طراحی ایستا به نمونه اولیه شبیه به حالت واقعی مستقیماً از داخل Adobe XD بروید. با ویژگی های غنی مانند Auto-Animate و Voice ، ایجاد یک نمونه اولیه که کاربران بتوانند با آن حرکت کرده و با آن تعامل داشته باشند ، کار کمتری را صرف می کند و منجر به تجربه  بهتر تست کاربر می شود.

واگذاری به توسعه دهنده

از مراحل اولیه ایده پردازی ، حالت های اشتراک گذاری Adobe XD شما را قادر می سازد تا از روز اول با تیم های توسعه همکاری کنید. این که آیا در حال طراحی خود با ضبط صدا هستید یا ویژگی های توسعه را به اشتراک می گذارید ، XD شما را از نزدیک در ارتباط با توسعه دهنده نگه می دارد.

همکاری تیمی

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

مدیریت سیستم های طراحی

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

با Adobe XD چه چیزی می توانید طراحی کنید؟

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

طراحی وب سایت

از معماری اطلاعات گرفته تا طرح و نمونه سازی ، طراحی وب سایت و Adobe XD یک همکار عالی هستند. با استفاده از ویژگی های بهره وری مانند Stacks ، Padding و Repeat Grid ، مفاهیم و ایده ها را می توان با سهولت برای بیان الگوهای ناوبری ، پیمایش و موارد دیگر برای وب سایت شما جمع آوری کرد.

طراحی اپلیکیشن

طراحی برنامه های کاربردی برای تلفن های همراه ، برنامه های دسکتاپ یا حتی برنامه های وب شامل تعاملات پویا ، الگوهای ناوبری مختلف و طیف وسیعی از اندازه های صفحه نمایش است. Adobe XD به لطف ویژگی هایی مانند Responsive Resize ، اندازه های پیش ساخته Artboard برای دستگاه های معمولی و ویژگی های نمونه اولیه مانند Auto-Animate و drag triggers ، کار ساده ای در زمینه ایجاد تجربه برنامه برای پروژه بعدی شما انجام می دهد.

طراحی دستیار صوتی

کنترل های صوتی قدرتمند ، همراه با ادغام با Amazon Alexa و Google Assistant که به شما امکان می دهد تجربیات را پیش نمایش کنید ، Adobe XD را به یک همراه ضروری برای هر کسی که دستیار مجازی یا مهارت هایی را برای همراهی محصولات و خدمات طراحی می کند ، تبدیل می کند.

کمپین های بازاریابی

استفاده از اجزای سازنده ، تغییر اندازه پاسخگو و ویژگیهای طرح بندی محتوا مانند Stacks و Padding ، طراحی کمپین بازاریابی بعدی شما در Adobe XD را بسیار راحت کرده و در وقت و انرژی شما صرفه جویی می کند. به راحتی دارایی ها را از Illustrator و Photoshop وارد کنید و همه چیز را از تبلیغات اجتماعی گرفته تا بنرهای دیجیتال و صفحات فرود تنظیم کنید. نگه داشتن همه محصولات قابل تحویل در یک مکان و همزمان ، تکرار را ساده کرده و ثبات را در پیام تضمین می کند.

طراحی بازی

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

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

سوالات متداول

Adobe XD که از ابتدا با کارایی بالا ساخته شده است ، به شما کمک می کند تا نمونه های اولیه ای از نرم افزار بسازید که در ظاهر واقعی به نظر می رسند ، بنابراین می توانید چشم انداز طراح نهایی خود را به کارفرما و یا مدیر خود نشان دهید

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

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

برای یادگیری Adobe Xd نیازی به یادگیری فتوشاپ وجود ندارد.

نظرات کاربران

نظر یا سوال خود را در اینجا بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

4 نظر

  1. سلام مهندس آموزش طراحی رابط کاربری با ادوب xd خیلی عالی بود
    لطفا چندتا آموزش پروژه محور دیگه تهیه کنید
    ممنون

    1. سلام. خواهش می کنم.
      بله. حتما. آموزش های پروژه محور برای ادوبی xd باز هم تهیه می کنیم و در سایت قرار میدیم.

  2. سلام
    من میخوام برنامه نویسی اندروید و طراحی اپلیکیشن کار کنم فرقش با ادوبی xd چیه؟
    شما توی آموزشتون اصلا کد نزدید در حالی که برای طراحی اپ با اندروید استدیو لازمه کد زده بشه دقیقا من متوجه نمیشم فرقش با هم چیه؟
    اگه برای طراحی اپلیکیشن با ادوب xd نیازی به کد زدن نیست چرا باید به فرض زبان جاوا رو یاد بگیریم؟
    ممنون میشم منو راهنمایی کنید

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