طراح محصول. طراح رابط کاربری و طراح تجربه کاربری
چگونه از ابزار Repeat Grid در Adobe XD استفاده کنیم؟
با همین چند مرحله ساده میتوانید کاملاً ابزار Repeat Grid را بشناسید.
در این مرحله ما در نرم افزار XD دو صفحه طراحی (یا Artboard) میسازیم.
خوب یک سند جدید با انتخاب گزینه Android Mobile در صفحه شروع برنامه میسازیم.
و برای ایجاد صفحه دوم ابزار Artboard را انتخاب میکنیم (یا کلید A کیبورد را فشار داده تا ابزار فعال شود)، در صفحه سمت راست در انتهای اسکرول یکی از صفحات وب را انتخاب میکنیم.
با انتخاب ابزار Rectangle (یا کلید R کیبورد را فشار دهید) یک مستطیل طبق شکل زیر در هر دو صفحه ایجاد میکنیم. با همان ابزار Rectangle و فشردن کلید Shift در هنگام رسم یک مربع طبق شکل زیر در هر دو صفحه رسم کنید.
ابزار Text را انتخاب کنید (یا T در کیبورد را فشار دهید) و با کلیک کردن در هر جای صفحه طراحی، طبق شکل در هر صفحه یک متن به دلخواه ایجاد کنید. لایه متن ایجاد شده را با کلیک راست روی لایه مورد نظر (اگه لایه ها را نمیبینید با فشردن Ctrl + Y لایه ها در سمت چپ نمایش داده میشوند) و انتخاب گزینه Duplicate (یا فشردن Ctrl + D) کپی کنید و طبق شکل زیر متن دلخواهی برای آن بنویسید.
با درگ کردن موس تمام المان هایی ایجاد شده در گامهای ۲-۵ را در یک صفحه انتخاب کنید و سپس در سمت راست روی دگمه Repeat Grid کلیک کنید (یا فشردن دگمه های Ctrl + R).
* برای غیر فعال کردن Repeat Grid روی المان قبلی کافیه روی Ungroup Grid که به جای دگمه Repeat Gird ایجاد شده کلیک کنید (یا فشردن دگمه های ترکیبی Shift + Ctrl + G).
بعد از کلیک روی دگمه نوار سبز رنگی در اطراف المان های انتخاب شده ایجاد میشود و نوار لغزنده پایین را انتخاب کنید و آن را بکشید تا محتوای شما تکرار شوند.
هنگام استفاده از ابزار Repeat Grid، ادوبی XD به طور خودکار بین اشیا مختلفی که تکرار شده اند، یک قلاب (یا فاصله) ایجاد میکند. با انتخاب و کلیک کردن در داخل این فضا (شکاف در بین اشیاء)، راهنماهای صورتی رنگی ظاهر می شوند، که به شما امکان می دهد فاصله بین لبهها را تنظیم کنید. برای این آموزش، فاصله را بین ۱۰ تا ۳۰ پیکسل تنظیم کنید.
در آخر تمام سوالهای که در مورد این آموزش دارید در زیر همین پست کامنت کنید تا به شما پاسخ دهم.
برای آموزشهای بیشتر و تخصصیتر، میتوانید به سایت uistore.ir مراجعه کنید و آموزش دلخواه خود را از ما بخواهید و ما برای شما آموزش را ارائه خواهیم داد.
مطلبی دیگر از این انتشارات
7 سایت برای رابط کاربری که می توانید از آنها ? ایده بگیرید
مطلبی دیگر از این انتشارات
آموزش طراحی UI : چگونه به سرعت چندین عکس را به المانهای جایگزین عکس در ادوبی XD اضافه کنیم؟
بر اساس علایق شما
بار دیگر: مَا رَأَیْتُ إِلَّا جَمِیلًا