طراحی پروتوتایپ UI با استفاده از نرم‌افزار Adobe XD
از لحاظ تاریخی، نرم افزار Adobe Creative Cloud نتوانسته ابزاری را برای طراحان فراهم کند تا به سرعت و به طور کارآمد طراحی‌های اولیه را انجام داده یا قبل از طراحی نهایی UI (رابط کاربری) فیدبک‌‌هایی از طرف همکاران دریافت کنند. Adobe XD از رابطی بسیار ساده و در عین حال کارآمد استفاده می‌کند، ویژگیای که در اپلیکیشن همتای آن در پکیج Creative Cloud نیز قابل مشاهده است. علاوه بر این، در این صفحه به چند گزینه دسترسی خواهید داشت که می‌توانند نقطه‌ی شروعی برای کسب اطلاعات بیشتر درباره‌ی اپلیکیشن، المان‌های طراحی رابط کاربری (UI) در دستگاه‌های الکترونیکی نظیر iOS و اندروید و دسترسی به منابع آنلاین مانند خودآموز‌ها و … باشند. فضای کار Adobe XD از دو بخش تشکیل شده است؛ Design و Prototype که از سمت راست و بالای اپلیکیشن قابل دسترسی هستند. ، طراحان می‌توانند از ابزارها و ویژگی‌های مختلفی برای ایجاد المان‌های طرح استفاده کنند، آرت‌بوردها (artboard) را برای نمایش چندین صفحه طراحی اضافه کرده و منابع را از دیگر اپلیکیشن‌ها مانند طراحان می‌توانند المان‌های طرح را مستقیما از این اپلیکیشن‌ها کپی کرده و آنها را در آرت‌بورد انتخاب شده به عنوان تصاویر وکتوری یا برداری پیست کنند. است که به طراحان اجازه می‌دهد تا میان آرت‌بوردها (صفحات) لینک ایجاد کرده و روابط میان آنها را بر اساس تاثیری که بر روی یکدیگر دارند تعریف کنند. زمانی که پروژه به اتمام می‌رسد، طراحان می‌توانند با کلیک کردن بر روی آیکون preview در سمت بالا و راست صفحه آن را ببینند یا طرح را از طریق یک لینک اینترنتی با اعضای تیم به اشتراک بگذارند. اولین قسمت این آموزش Adobe XD به ایجاد یک طرح در حالت نمایش Design در Adobe XD می‌پردازد. پس از باز کردن Adobe XD، صفحه‌ی Welcome ظاهر شده و شما می‌توانید نوع پروژه را انتخاب کنید. سپس بر روی آیکون iphone کلیک کنید تا پروژه ایجاد شود. از طریق Apple iOS می‌توانید به المان‌های رابط کاربری آیفون که در پروتوتایپ قابل استفاده هستند دسترسی پیدا کنید. بر روی آرت‌بورد کلیک کنید تا خصوصیات آن در پنل Properties واقع در سمت راست اپلیکیشن نشان داده شود، سپس بر روی رنگ Fill کلیک کنید تا پنجره‌ی Colors باز شود. از کادرهای کنترل اطراف تصویر برای تغییر اندازه‌ی آن استفاده کنید تا کاملا هم‌اندازه‌ی هدر صفحه شود. ابزار Tool را از پنل Tools انتخاب کنید، جایی در ناحیه‌ی هدر کلیک کرده و «Nature» را تایپ کنید. بر روی متن دو بار کلیک کرده و از پنل Properties در سمت راست «Helvetica» را انتخاب کنید، ضخامت (weight) را بر روی «bold» و سایز را بر روی ۳۲ تنظیم کنید. از پنل Properties در سمت راست، رنگ Fill را بر روی خاکستری تیره تنظیم کنید و تیک گزینه‌ی Border را بردارید تا خط دور کادر حذف شود. برای بریدن تصویر، بر روی آن دوبار کلیک کرده و از چهار گوشه‌ی تصویر برای برش استفاده کنید. را از روی صفحه‌کلید فشار داده و تصویر، پس‌زمینه‌ی محتوا و متنی که در مرحله قبل وارد شد را انتخاب کنید. سپس می‌توانید بر روی محتوای تکرارشده دو بار کلیک و آن را اصلاح کنید. برای ساختن یک صفحه‌ی طراحی جدید، بر روی ابزار را از سمت راست انتخاب کنید تا صفحه جدیدی ایجاد شود. قبل از ایجاد ارتباط میان صفحات، باید یک صفحه‌ی اصلی یا homepage برای پروژه در نظر بگیریم. برای انجام این کار بر روی آیکون خانه ( برای ایجاد لینک میان صفحات، صفحه‌ی اصلی را انتخاب کرده و بر روی پیکان آبی رنگ در سمت راست کلیک کنید. صفحه‌ی بعدی را انتخاب کرده و شکل تحرک (transition animation) را تنظیم کنید (برای مثال ). این مرحله را برای ایجاد لینک میان صفحات دیگر انجام دهید. بنابراین، اولین بلوک محتوا را انتخاب کرده و بر روی پیکان آبی رنگ در سمت راست کلیک کنید و به همان روشی که در مرحله‌ی ۱۰ توضیح دادیم بلوک را تنظیم کنید. با انجام این کار صفحه‌ی پیش‌نمایش ظاهر می‌شود که می‌توانید از طریق آن صفحات مختلف را مشاهده کنید. در بالا و سمت راست نرم‌افزار کلیک کنید. در بالا و سمت راست نرم‌افزار کلیک کنید. این نرم‌افزار به آنان اجازه می‌دهد تا المان‌های طرح را از سایر اپلیکیشن‌ها نظیر Adobe Illustrator وارد کنند در حالی که فرمت برداری و قابل ویرایش آن حفظ می‌شود. مطابق با گفته‌های برنامه‌نویسان این نرم‌افزار در نسخه‌های بعدی Adobe XD شاهد ویژگی‌های بیشتری خواهیم بود، مانند رنگ‌های متنوع‌تر، قابلیت افزودن لایه‌ها، روش‌های بیشتری برای به اشتراک گذاشتن پروژه، قابلیت اسکرول کردن و افزودن المان‌های ارتباطی بیشتر به حالت نمایش پروتوتایپ. در صورتی که آموزش Adobe XD مقدماتی برای شما مفید بوده است:
متن کامل نوشته در سایت فرانش
نظرات