https://virgool.io/feed/@mahanuix طراح محصول. طراح رابط کاربری و طراح تجربه کاربری fa 2026-06-10 13:03:47 https://files.virgool.io/upload/users/9402/avatar/APK8Q2.png?height=120&width=120 https://virgool.io/@mahanuix https://virgool.io/uistore/7-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%DA%A9%D9%87-%D9%85%DB%8C-%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF-%D8%A7%D8%B2-%D8%A2%D9%86%D9%87%D8%A7-%D8%A7%DB%8C%D8%AF%D9%87-%D8%A8%DA%AF%DB%8C%D8%B1%DB%8C%D8%AF-oikabkdfwupp سلام و درود، توی این مقاله قراره چندتا سایت که خودم هم کلی ازشون استفاده می کنم و میتونن برای شروع طراحی یک پروژه الهام بخش باشن و کلی ایده جالب بگیرید رو معرفی می کنم. البته سایت های زیادی در رابطه با ایده گرفتن وجود داره، مثل Dribbble ، Behance، Pinterest و ... اما خوب سایت هایی که معرفی می کنم توی این مقاله ممکنه کمتر دیده باشید.اولی mobbin.designاین وب سایت واقعا عالی هستش که تمام صفحات برنامه های مختلف رو جمه کرده و به شما نشون میده. هنگام جستجوی نمونه هایی برای الگوهای طراحی فوق العاده مفید هست.دومی siteinspire.comتمرکز این وب سایت بر روی طراحی‌های مینیمال هست. تایپوگرافی زیبا و مناسب landing page شرکتی که طراحی بصری در آنها بسیار مهم است و برای system UI ها خیلی مفید نیست.سومی sitesee.coسایتی زیبا و با یک تجربه کاربری ساده و تمیز. می‌تونید مجموعه ای سایت های مفید رو مرور کنید. به نظرم ارزش دیدن دارند.چهارمی uimovement.comاین سایت گالری از UI transitions  و animations است. بسیار پرکاربرد برای طراحی در این زمینه  است.پنجمی onepagelove.comتوی این سایت نمونه وبسایت‌های زنده و خوبی رو می‌توونید مشاده کنید. در کل دیدنش خالی از لطف نیست، بعضی الهامات خوبی میتونید پیدا کنید.ششمی awwwards.comشخصا به این سایت علاقه ای ندارم. بسیاری از سایت ها با سبک خوش ذوقی تولید شده اند. و ارزش لحظه ای دیدن را دارند و از لحاظ تجربه کاربری خیلی قوی نیستند.هفتمی ecomm.designتمرکز این سایت بر سایت‌های فروشگاه دیجیتال (ecommerce sites) هست. اگر در این بخش کار می‌کنید، این سایت رو یه نگاه بندازید.و در آخرکلی سایت دیگه هست که از حوصله این مقاله بیشتر می شه، میتونید به آدرس زیر برید و اونها رو ببینید:اینجا کلی سایت دیگه برای ایده گرفتن معرفی شدهاگه شما هم سایت خوبی می شناسید توی بخش نظرات حتما معرفی کنید. Mahan Sharifi Mahan Sharifi Sun, 17 May 2020 03:32:24 +0430 https://virgool.io/uistore/add-multiple-images-in-adobe-xd-o3wurxvkvhit در این آموزش ما نحوه جایگزین کردن عکس‌ها به صورت دسته جمعی روی المان‌های مورد نظر را یاد خواهیم گرفت که کمک خواهد کرد طراح رابط کاربری حرفه‌ای تری شویم، با ما همراه باشید. با انتخاب Android Mobile از صفحه شروع یک سند جدید ایجاد کنید. ابزار (Rectangle(R را انتخاب کنید و Shift را برای کشیدن یک مربع که تمام عرض صفحه خود را پر می‌کند، نگه دارید. همچنین می‌توانید عرض و ارتفاع ۳۶۰ پیکسل را در سمت راست وقتی که شکل انتخاب شده، وارد کنید، و داخل مربع را با یک رنگ دلخواه پر کنید.عرض Artboard یا صفحه طراحی 360 پیکسل است، و برای اینکه پایین این مربع ۳ ردیف عکس بگذاریم باید عرض را تقسیم بر سه کنیم تا سایز ردیف عکس ها به دست بیایند(۳۶۰/۳ = ۱۲۰).خوب دوباره R را بزنید و Shift را نگه دارید و یک مربع با طول و عرض ۱۲۰ پیکسل درست کنید. موقعیت این مربع دقیقا زیر مربع بزرگتر سمت چپ Artboard هست. مربع کوچک را انتخاب کنید و روی دگمه Repeat Grid {برای کار با این ابزار می توانید به مقاله آموزش Repeat Grid در Adobe XD رجوع کنید} در سمت راست صفحه طراحی کلیک کنید. می‌بیند که اطراف المان مورد نظرتون یک حاشیه سبز رنگ ایجاد شده است، لغزنده (Slider) سمت راست را انتخاب کنید و آن را به سمت راست بکشید تا مربع تکرار شود، و سه مکان برای عکس ایجاد کنید.وقتی که از ابزار Repeat Grid استفاده می‌کنید، ادوبی XD به صورت اتماتیک بین اشیا مختلف تکرارشده یک شکاف (فاصله) ایجاد می‌کند. با انتخاب و کلیک کردن در داخل این فضا (شکاف در بین اشیا)، خواهید دید که برخی راهنماهای صورتی ظاهر می‌شوند، که به شما امکان می‌دهد فاصله بین لبه‌ها را تنظیم کنید. برای این آموزش، فاصله بین اشیا را به صفر کاهش دهید، سپس کشویی سبز را به سمت راست بکشید تا سه مکان برای عکس کامل شود.بعد، نوار لغزنده سبز پایین را بکشید و مرحله بالا را تکرار کنید و فاصله شکاف(Gap) را به صفر برسانید. مربع بزرگتر را انتخاب کنید و از پوشه تصاویرتان{برای داشتن تصاویری عالی به سایت www.unsplash.com مراجعه کنید}، تصویر ویژه خود را به داخل مربع بکشید و این تصویر را به صورت خودکار وارد سند می‌کند تا این فضا را اشغال کند. بعد، Shift را نگه دارید و عکس‌های دیگر را که می‌خواهید وارد کنید را انتخاب کنید و آنها را روی اولین مربعی کوچکی که ایجاد کردیم بکشید. سپس ادوبی XD به طور خودکار تمام مربع‌های کوچک دیگر را با تصاویر انتخاب شده شما پر می‌کند(حتی اگر تعداد تصاویر کمتر از تعداد مربع‌ها باشد خود‌به‌خود با تصاویر تکراری پر می‌شوند). به یاد داشته باشید، که ترتیب وارد کردن عکس‌ها به ادوبی XD، اینگونه است که وقتی یکی از عکس های انتخابی را Drag and Drop می‌کنید روی المان‌ها به ترتیب بعد از عکس انتخابی چیده خواهند شد. این هم تصویر نهایی که شما خواهید ساخت :ما را در اینستاگرام دنبال کنید : https://www.instagram.com/uistore.ir Mahan Sharifi Mahan Sharifi Tue, 16 Apr 2019 22:05:29 +0430 https://virgool.io/uistore/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A7%D8%B2-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-repeat-grid-%D8%AF%D8%B1-adobe-xd-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-qatuhsvxuzlt با همین چند مرحله ساده می‌توانید کاملاً ابزار 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 مراجعه کنید و آموزش دلخواه خود را از ما بخواهید و ما برای شما آموزش را ارائه خواهیم داد. Mahan Sharifi Mahan Sharifi Thu, 04 Apr 2019 20:38:53 +0430