ورود به دنیای طراحی محصول نیازمند شناخت دقیق و ساختاری ابزارهاست. در این آموزش ادوبی ایکس دی یاد میگیرید چطور پایه و اساس پروژههای طراحی رابط کاربری خودتون رو به شکل اصولی بنا کنید. تسلط بر تنظیمات اولیه مثل ایجاد آرتبوردها، درک ویوپورت و پیادهسازی شبکهبندی (گرید) به شما کمک میکنه تا سرعت و دقت کارتون رو در پروژههای واقعی بالا ببرید.
در صورتی که فیلترشکن شما خاموش است می توانید ویدیو را در همین صفحه(یا در آپارات) و در زیر این پیام ببینید، در غیر اینصورت میتونید در یوتیوب آن را با بالاترین کیفیت مشاهده کنید.
نصب نرمافزار ادوبی ایکس دی و عبور از محدودیتها
برای نصب این برنامه در ایران، بهترین راه استفاده از سایتهای دانلود داخلی مثل سافت ۹۸ است تا درگیر قطعی اینترنت و تحریمها نشید. نسخه ویندوز با اجرای یک فایل ستاپ به راحتی نصب میشه، اما برای کاربران مک، پیدا کردن نسخه سازگار برای پردازندههای جدید سری M اپل کمی چالشبرانگیز است.
پس از نصب، حتماً دسترسی نرمافزار رو از طریق فایروال به اینترنت مسدود کنید تا لاینسن شما باطل نشه.
مزایا و معایب این روش: نقطه قوت دانلود از سرورهای داخلی، پایداری و دسترسی همیشگی به فایلهای فعالساز است. ریسک و نقطه ضعف این کار، احتمال تداخل این نسخهها با آپدیتهای جدید سیستمعامل و از کار افتادن موقت برنامه است.
ساخت اولین آرتبورد و استراتژی ذخیرهسازی محلی
آرتبورد (Artboard) بوم نقاشی دیجیتال شماست که با فشردن کلید A و انتخاب پریستهای آماده موبایل، تبلت یا وب در سمت راست صفحه ساخته میشه. ادوبی به صورت پیشفرض پروژهها رو در فضای ابری خودش ذخیره میکنه، اما شما باید از منوی همبرگری یا با کلیدهای ترکیبی Ctrl + Shift + S فایلتون رو به صورت لوکال (محلی) ذخیره کنید.
از اونجایی که ادوبی آیپیهای ایران رو تحریم کرده، ذخیره در فضای ابری یک ریسک جدی است و هر لحظه ممکنه دسترسی شما به فایلهای پروژهتون قطع بشه.
مزایا و معایب ذخیره محلی: مزیت اصلی امنیت کامل فایلها و عدم وابستگی به اتصال اینترنت است. عیب بزرگ این روش اینه که امکان استفاده از بخش Share برای پروتوتایپینگ تیمی رو از دست میدید و فقط میتونید در حالت Design و Prototype فردی کار کنید.
مدیریت رنگها و ساخت پالت اختصاصی
بخش Appearance در پنل تنظیمات، امکان کنترل کامل بر روی رنگ بکگراند آرتبورد و المانهای درون آن را به شما میدهد. شما میتوانید از رنگهای یکپارچه (Solid) استفاده کنید یا با انتخاب طیفهای رنگی، گرادیانتهای خطی (Linear) و شعاعی (Radial) بسازید.
برای اعمال رنگ، میتوانید از کد هگز (Hex)، مقادیر آرجیبی (RGB) یا سیستم اچاسبی (HSB) استفاده کنید. همچنین یک ابزار قطرهچکان در دسترس شماست تا رنگها را از روی تصاویر یا المانهای دیگر نمونهبرداری کنید. در پایین این پنل، بخشی وجود دارد که با کلیک روی نماد مثبت، میتوانید رنگهای پرکاربرد پروژه را ذخیره کنید تا همیشه یک پالت رنگی ثابت و در دسترس داشته باشید. در همین بخش میزان شفافیت یا آپاسیتی (Opacity) رنگها نیز قابل تنظیم است.
گایدلاینها و پیادهسازی سیستم گرید (Grid)
گایدلاینها خطوط راهنمایی هستند که با کشیدن موس از لبههای بالایی یا سمت چپ آرتبورد ایجاد میشوند و برای تراز کردن دستی المانها با تصاویر یا بخشهای خاص کاربرد دارند. برای مخفی کردن سریع این خطوط کلید Ctrl + ; را بزنید و برای جلوگیری از جابهجایی اشتباه، روی صفحه راستکلیک کرده و گزینه Lock All Guides را انتخاب کنید.
در پنل اینسپکتور، بخشی به نام Grid وجود دارد که با تیک زدن آن، شبکهبندی منظم روی آرتبورد فعال میشود. ادوبی ایکس دی دو حالت گرید دارد: شبکههای مربعی (Square) که برای طراحی آیکونها بسیار عالی هستند و شبکههای ستونی (Layout) که برای ساختاردهی به صفحات وب و موبایل استفاده میشوند. شما میتوانید عرض ستونها، فاصله بین آنها (Gutter) و رنگ این شبکهها را بسته به نیاز پروژه تغییر دهید.
استاندارد ۱۲-۸-۴ در شبکهبندی ریسپانسیو
بهترین و رایجترین الگو برای تنظیم ستونها در طراحی محصول، استفاده از سیستم ۱۲ ستونه برای حالت دسکتاپ است. این ساختار انعطافپذیری بالایی برای تقسیمبندی محتوا به شما میدهد.
بر همین اساس، برای طراحی نسخههای تبلت از گرید ۸ ستونه و برای صفحات موبایل از گرید ۴ ستونه استفاده میشود. اگرچه این یک قانون غیرقابلتغییر نیست و شما میتوانید این اعداد را در پروژههای خاص بشکنید، اما رعایت این الگو باعث میشود توسعهدهندگان فرانتاند بتوانند طرح شما را با دقت بسیار بالاتری کدنویسی کنند.
باز کردن فایلهای اسکچ و فتوشاپ
یکی از ویژگیهای بسیار کاربردی ادوبی ایکس دی، قابلیت اجرای مستقیم فایلهای نرمافزار اسکچ (Sketch) و فتوشاپ است. بدون نیاز به نصب هیچ پلاگینی، فقط با دابلکلیک روی یک فایل اسکچ، تمام لایهها، آرتبوردها و المانها در محیط ایکس دی باز میشوند.
این قابلیت دسترسی شما را به منابع عظیم کیتهای طراحی اسکچ در اینترنت باز میکند. البته باید در نظر داشته باشید که به دلیل تفاوت در موتورهای رندر این برنامهها، گاهی اوقات ممکن است سایز فونتها یا جایگاه بعضی المانها کمی به هم بریزد که با یک اصلاح دستی ساده برطرف خواهد شد.
لینک های مفید:
جامعترین دوره آموزش طراحی محصول Product Design Pro X
جامعترین دوره آموزش طراحی رابط کاربر UI Design
جامعترین دوره آموزش طراحی تجربه کاربر UX Design
