مشخصات طراحی ماده از گوگل در ابتدا در پلت فرم آندروید به عنوان یک راه برای نشان دادن یکپارچگی طراحی در پلت فرم است.
01 از 06
نحوه ایجاد یک کارت طراحی مواد در ادوبی تجربه طراحی CC
هنگامی که طراحان شروع به کشیدن آن و درک تفکر پشت آن کردند، Material Design بی سر و صدا تبدیل به یکی از مهمترین فلسفه های بصری در طراحی وب و موبایل شده است . همه چیزهایی که باید انجام دهید تا ببینید چه اتفاقی می افتد این است که جستجو در Material Design را در Pinterest انجام دهید و صدها نمونه و آزمایش روی دستگاه ها، قرص ها و حتی وب سایت ها را ببینید.
جنبه شگفت انگیزی از طراحی مواد این است که تفکر گوگل در مورد چگونگی نمایش برنامه ها و کار بر روی دستگاه های تلفن همراه، اما این مفاهیم در هر صفحه ای از هر اندازه بر روی هر پلت فرم اعمال می شود. همانطور که گوگل در بخش آغازین این مشخصات اظهار داشت، ما خود را برای ایجاد یک زبان بصری برای کاربران خود به چالش کشیدیم که اصول کلاسیک طراحی خوب را با نوآوری و امکان فناوری و علم تلفیق می کرد. این طراحی مادی است. این مشخصات یک سند زندگی است که به روز می شود، همانطور که ما همچنان به توسعه مفاهیم و مفهوم طراحی مواد ادامه می دهیم. "
مواد مورد بحث در مورد، به طور کلی به طور کلی، کاغذ و مشخصه طراحی مواد کارت است. فکر کنید یک نقشه شاخص بر روی سطح و شما در مسیر درست هستید. کارت یک عنصر حاوی عکس ها، فیلم ها، لینک های متنی و غیره است، اما در جایی که آنها با بیشتر طرح های تعاملی تفاوت دارند، این موضوع به یک موضوع اختصاص دارد. کارت ها دارای گوشه های گرد هستند، حاوی سایه های ضعیف هستند که نشان می دهد که آنها بالای سطح قرار دارند و اگر همه آنها در یک هواپیما باشند، آنها به عنوان "مجموعه" نامگذاری می شوند.
در این "چگونه" ما قصد داریم یک کارت بر اساس مشخصات ایجاد کنیم. به جای ایجاد کارت با انواع ابزارهای تصویربرداری و طراحی، ما قصد داریم به آن از جهت مختلفی برسیم. ما قصد داریم از این ابزار در طراحی تجربه Adobe استفاده کنیم که در حال حاضر در پیش نمایش عمومی فقط مکینتاش است و رایگان است. شما می توانید آن را اینجا دانلود کنید
بیا شروع کنیم.
02 از 06
ایجاد Artboard نمونه اولیه در Adobe Experience Design CC
هیچ روش واضح برای ایجاد صفحه نمایش اندرویدی از صفحه Start در تجربه طراحی CC (XD) وجود ندارد. آنچه که ما در هنگام باز کردن XD انجام دادیم این است که گزینه آیفون 6 را انتخاب کنیم و وقتی رابط باز می شود، ابزار Artboard را در پایین نوار ابزار انتخاب می کنیم و Android Mobile را از انتخاب پنل Properties به سمت راست انتخاب می کنیم. سپس ما را به ابزار انتخاب تغییر می دهیم، یک بار بر روی نام آیفون آیفون کلیک کرده و آن را حذف کنید. بیشتر نه.
در نسخه فعلی XD، یک آیکون کوچک در کنار آیفون 6 وجود دارد که هنگام کلیک روی یک منوی کشویی باز می شود. از آنجا نسخه Android Mobile را انتخاب کرده اید و گزینه Android Mobile در رابط کاربری باز می شود.
برای اطمینان از اینکه فضای مناسب صفحه نمایش برای کارت باز است، ما معمولا به Sketch 3 سر می رویم و نوار وضعیت، نوار ناوبری و نوار برنامه را از قالب طراحی مواد به داخل آچار برد کپی می کنیم. طرح 3.2 حاوی قالب طراحی مواد است ( File> New From Template> Design Material ) و یکی دیگر از ویژگی های خوب که واقعا خوب است از Kyle Ledbetter است که شما می توانید در اینجا بدست آورید. اگر Sketch ندارید، می توانید آنها را از برچسب های XD موجود در File> Open UI Kit> Google Material کپی کنید و آنها را جای گذاری کنید. شما همچنین می توانید آنها را از Google برای استفاده در Photoshop، Illustrator، After Effects و Sketch دانلود کنید.
03 از 06
اضافه کردن یک کارت طراحی مواد به ادوارد XD CD Artboard
یکی از ویژگی های مفید XD شامل استفاده از کیت های UI برای Apple iOS، Google Material و Microsoft Windows می باشد. در بسیاری از موارد، آنها واژه "Rapid" را به اصطلاح "Prototyping Rapid" اضافه می کنند. همچنین کار آنها را آسان تر می کند، زیرا عناصر UI معمولی مجبور نیستند به طور مداوم در یک برنامه طراحی مانند Photoshop، Illustrator یا طرح.
عنصر UI مورد نیاز ما یک کارت بود. برای رسیدن به آن، ما File> Open UI Kit> Google Material را انتخاب کردیم و کیت به عنوان یک سند جدید باز شد. عنصر مورد نیاز ما در رده Cards یافت شد.
آنچه که ما در مورد اینها دوست داریم، آنها مطابق با مشخصات طراحی مواد هستند، همانطور که در مشخصات بلوک محتوا و همچنین مشخصات قالب بندی متن و فاصله موجود در مشخصات تایپوگرافی مشخص شده است.
سبک کارت ما می خواستیم یکی در سمت چپ پایین بود. ما به سادگی با ماوس آن را می بندیم و آن را به کلیپ بورد کپی می کنیم. متاسفانه، XD یک رابط tabbed برای اسناد باز ندارد. چیزی که ما انجام می دهیم این است که پنجره سند باز را به سمت پایین بکشیم تا فاش شود که ما در حال کار بر روی آن هستیم، آن را انتخاب و چسباندیم. راه دیگر جابجایی سریع بین اسناد XD باز است که Command-'را فشار دهید .
04 از 06
نحوه ویرایش یک عنصر طراحی مواد در Adobe Experience Design CC
هنگامی که کارت در XD از کلیپ بورد وارد می شود، کار راحتی نمی کند. اولین کاری که باید انجام دهید این است که کارت را به صورت گروه بندی کنید زیرا شما نیاز به دسترسی به بیت و قطعه سازی کارت دارید. برای انجام این کار، کارت را انتخاب کنید و Object> Ungroup را انتخاب کنید یا Shift-Command-G را فشار دهید.
کارت شما اکنون شامل سه قطعه است:
- جعبه روشن خاکستری برای تصویر.
- جعبه خاکستری متوسط برای متن
- جعبه پشتی به عنوان پس زمینه استفاده می شود.
گام اول این است که جعبه خاکستری روشن را حذف کنید. تنها هدف آن این است که به عنوان یک حفره یا سوراخ برای تصویر عمل کند که اگر شما انتخاب کند، اختیاری است.
جعبه با متن در واقع یک خاکستری تیره با کدورت 50٪ است. این جعبه را می توان به عنوان پس زمینه متن استفاده کرد و می توانید رنگ و کدورت را تغییر دهید.
اگر چه فورا مشخص نیست، جعبه خاکستری روشن به ویژگی Design Design می پردازد که گوشه های بالای آن 2 پیکسل است. اگر تصویر را اضافه میکنید، این را در نظر بگیرید. این همچنین نیاز به گوشه های گرد دارد که می تواند به یک برنامه تصویربرداری یا XD اضافه شود.
دیدن این که چگونه حالت استراحت کارت است، نیاز به یک سایه دارد. این مشخصه را روشن می کند که افزایش ارتفاع کارت 2 پیکسل است. برای اضافه کردن این، شکل پس زمینه سیاه را انتخاب کنید و Y و B (Blur) را به 2 در پانل مشخصه تنظیم کنید.
05 از 06
نحوه اضافه کردن یک تصویر به کارت طراحی مواد در ادوبی XD CC
دانستن این کارت 344 پیکسل عرض است و سطح تصویر 150 پیکسل است ( نیمه ارتفاع جعبه خاکستری رنگی ) ما تصویر را در فتوشاپ باز کردیم، آن را به اندازه بزرگ کردیم و آن را با استفاده از گزینه @ 2x در گفتگوی صادراتی فتوشاپ ذخیره کردیم جعبه تصویر به ادوبی XD وارد شد.
سپس جعبه خاکستری روشن را بر روی تصویر روی صفحه نمایش کشیدیم و Object> Mask With Shape را انتخاب کردیم . نتیجه تصویر برداشتن گوشه های گرد شده از شکل بود. سپس تصویر را به موقعیت نهایی منتقل کردیم.
با تصویر در محل، پس از آن رنگ پس زمینه کادر متوسط خاکستری را تغییر دادیم، متن و رنگ متن پیوند را تغییر دادیم.
06 از 06
با استفاده از ویژگی شبکه GRID XD ادوبی
با کارت کامل باید در حال حاضر به درستی قرار داده شده با توجه به مشخصات طراحی مواد. این به این معنی است که 8 پیکسل در هر طرف کارت وجود دارد و کارت باید 8 پیکسل زیر نوار برنامه باشد. برای انجام این کار، یک بار بر روی نام مداد کلیک کنید و در پنل Properties Grid را انتخاب کنید. شبکه در بالای صفحه نمایش ظاهر می شود.
اندازه شبکه پیش فرض 8 پیکسل است که به همان اندازه شبکه برای طراحی مواد اتفاق می افتد. اگر شما نیاز به اندازه های مختلف دارید، مقدار را در منطقه Grid تغییر دهید. اگر میخواهید رنگ شبکه را تغییر دهید، روی تراشه رنگ کلیک کنید و یک رنگ از انتخاب رنگ نتیجه را انتخاب کنید.
با شبکه قابل مشاهده است، بر روی کارت کلیک کنید و آن را به موقعیت نهایی خود منتقل کنید.
برای پایان دادن به، ما کارت را انتخاب کردیم، دکمه تکرار را کلیک کردیم و فاصله بین کارت ها تا 8 پیکسل را تغییر دادیم.