همان طور که در هنر نقاشی سبک و ساختارهای مختلفی برای خلق یک اثر وجود دارد، در طراحی سایت یا محصولات دیجیتالی نیز این موضوع حائز اهمیت است. هر شرکت یا کسب‌وکاری متناسب با نیاز خود از سبک خاصی برای طراحی استفاده می‌کند. در این جلسه از دوره تجربه کاربری و رابط کاربری از آژانس نوآوری رسام قصد داریم مبحث دیزاین سیستم در ui را مورد بررسی قرار دهیم. پس از شما دعوت میکنیم تا پایان این قسمت ما را همراهی کنید.
تعریف دیزاین سیستم
دیزاین‌سیستم یک ساختار یکپارچه و مستقلی از المان‌های طراحی رابط کاربری است. شرکت‌های بزرگ دنیا دیزاین سیستم‌های اختصاصی دارند. در واقع آنها به سبک خاصی از طراحی اعتقاد داشته و مطابق با آن سبک، المان‌های متوع ui را می‌سازند و گاهی در اختیار طراحان برای طراحی سایت یا اپلیکیشن نیز قرار می‌دهند. مفهوم دیزاین‌سیستم از UIKit کلی‌تر است. مانند مقایسه پوشش رسمی به کت و شلوار. در واقع uikit می‌تواند یک یا بخشی از آن المان‌ها باشد.
درست است که دیزاین سیستم قبل از اجرای پروتوتایپ پروژه ساخته می‌شود. اما این به این مفهوم نیست که در طول پروژه نمی‌توان آن را تغییر داد. بدیهی است که در گذر زمان ممکن است نظر کارفرما عوض شود، نظر خودمان عوض شود، دانش ما بروز شود و یا هر دلیل دیگری. بنابراین ممکن است دیزاین سیستم در گذر زمان تغییر کند و بروز بشود.
چه چیزهایی در دیزاین سیستم وجود دارد؟
- استایل‌گاید یا راهنمای طراحی و اضافه کردن استایل‌ها به فیگما (که اگر خاطرتان باشد، شامل رنگ‌ها، تایپوگرافی، گریدسیستم، افکت‌ها می‌شود).
- طراحی uikitهای مورد نیاز پروژه مانند: دکمه‌ها، چک‌باکس، دکمه‌های رادیویی، سوئیچ‌باتن، فرم‌ها، تقویم و هر المان دیگری که در آن پروژه ممکن است آن را لازم داشته باشیم.
- آیکن‌ها نیز عضو دیگری از دیزاین سیستم هستند. ممکن است آنها را اختصاصی طراحی کنیم، ممکن است از یک پکیج آماده استفاده کنیم و یا حتی از پلاگین‌های فیگما. در هر حالت، باید در دیزاین سیستم وجود داشته باشند.
چرا باید دیزاین سیستم طراحی کنیم؟
البته شاید طراحی دیزاین سیستم برای همه پروژه‌ها انجام نشود. خصوصا پروژه‌های کوچک که با ساختن یک استایل‌گاید ساده و چند uikit ممکن است مشکل ما حل بشود. اما در پروژه‌های بزرگتر، خصوصا پروژه‌هایی که به صورت تیمی جلو می‌رود، این مقوله بسیار مهم است. حتی اگر پروژه تیمی هم نباشد، بالاخره ممکن است شما روزی از آن شرکت بروید و شخص دیگری بیاید. اگر دیزاین سیستم متناسب با برندبوک و پرسونای آن شرکت ساخته شده باشد، کارشناس جدید به سهولت می‌تواند کار را پیش ببرد. تحویل کار آسان‌تر شده و حتی سرعت اجرا نیز به صورت محسوسی، افزایش خواهد یافت.
فرض کنید شما برای دکمه‌ها بخواهید 4 پیکسل radius یا انحنا بگذارید. اگر دیزاین سیستم و uikit در کار نباشد، ممکن است سایر هم‌تیمی‌ها به خوبی آن را رعایت نکنند و این متفاوت شدن مقادیر، مشکلات بسیاری را برای کارفرما و برنامه‌نویسان، ایجاد کند. مطابق قاعده طراحی اتمی که در جلسات قبل توضیح داده شد، ابتدا باید عناصر کوچک را طراحی کنیم تا بتوانیم پروژه را به سهولت پیش ببریم. مثال ساخت آپارتمان با تجهیزات پیش‌ساخته را به یاد بیاورید. دلیل آنکه این ساختمان‌ها در چین، شاید در چند روز ساخته می‌شود این بود که آنها عناصر مورد نیاز خود را از قبل فراهم کرده بودند.
معرفی و تاریخچه سبک‌های مطرح طراحی در دنیا
شرکت‌های مطرح دنیا، دیزاین‌سیستم اختصاصی خود را داشته و در برخی موارد، به قدری این دیزاین سیستم‌ها مطرح و پر استفاده است که برخی شرکت‌ها، برای استخدام نیرو، دانش و تجربه کار با آن دیزاین سیستم را یک مزیت استخدام برای آن کارجو می‌دانند. پس توجه داشته باشید که دست‌کم باید به دیزاین سیستم متریال شرکت گوگل، تسلط متوسط رو به بالایی پیدا کنید.
اسکیومورفیسم – Skeuomorphism
این سبک از طراحی، اجرای المان‌های ui مطابق با آن چیزی است که کاربر آن را در دنیای واقعی درک کرده و یا حتی آن را لمس کرده است. این سبک در نسخه‌های قدیمی‌تر آیفون وجود داشت. در این سبک، افزایش زمان و هزینه طراحی، افزایش حجم سایت و کاهش سرعت، پیچیدگی پیاده‌سازی برای برنامه‌نویسان و مشکلات طراحی ریسپانسیو و … مطرح است.
طراحی تخت – Flat Design
شرکت ماکروسافت با ارائه ویندوز 8 سبک جدیدی از طراحی رابط کاربری را ارائه کرد. این سبک که flat design و بعدا با نام fluent مطرح شد، دیگر آن پیچیدگی‌های قبل را نداشت و با حذف انحنا، سایه، انیمیشن‌ها، رنگ‌های جیغ و… یک سبک بسیار ساده را پیش روی طراحان قرار داد.
البته ماکروسافت در گذر زمان و پس از ارائه ویندوز 10 و 11 دیزاین سیستم خود را تغییر داد و بروز کرد.
متریال دیزاین گوگل – Google Material Design
استدلال شرکت گوگل کمی تفاوت داشت. گوگل طراحی فلت را پذیرفت اما مدعی بود شرکت ماکروسافت در حذف عناصر اسکیومورفیسم کمی زیاده‌روی کرده است.
گوگل معتقد است که می‌توان با متریال که خودش بر پایه طراحی فلت است، ui جذاب‌تری را ارائه کرد. در واقع متریال از سایه‌ها، انیمیشن‌ها و انحنا بیشتر از ماکروسافت استفاده کرد.
سایر دیزاین سیستم‌ها
دیزاین سیستم‌های متنوع دیگری از شرکت‌های بزرگ دنیا نیز ارائه شدند. دیزاین سیستم base از شرکت اوبر، دیزاین سیستم‌های آمازون، اطلسین، ماه، شاپیفای و در راس خیلی از آنها، دیزاین سیستم شرکت اپل و کلی دیزاین سیستم دیگر. افزون بر این، دیزاین سیستم‌های ایرانی مانند دیزاین سیستم ماه (ترجمه شده از نسخه انگلیسی)، دیزاین سیستم Morph، دیزاین سیستم سنت که مربوط به کافه بازار (دیوار) است.
از کجا دیزاین سیستم دریافت کنیم
وب سایتی تحت عنوان designsystemsforfigma.com وجود دارد که شما با استفاده از آن، می‌توانید دیزاین سیستم‌های معروف فیگما را مشاهده و آنها را به فیگما اضافه کنید. البته توجه کنید که این وب‌سایت صرفا لینک دیزاین سیستم‌ها را در سایت خود گذاشته و لینک‌ها همه در خود سایت فیگما هستند. بنابراین، شما آنها را از community خود فیگما و جستجو در گوگل نیز می‌توانید بیابید. برای یادگیری بهتر این برنامه می‌توانید به آموزش رایگان نرم افزار فیگما در آژانس نوآوری رسام مراجعه کنید. یک سایت ایرانی نیز وجود دارد که می‌توانید در آن دیزاین‌سیستم فارسی و انگلیسی دریافت کنید.
انتخاب مناسب دیزاین سیستم در ui
بدون شک با انتخاب درست دیزاین سیستم در طراحی ui می توانید طرح خود را متناسب با برندبوک کسب وکار بهتر و سریع تر پیش ببرید. در این قسمت از دوره آنلاین ui ux آموزش و معرفی دیزاین سیستم و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
حالا که ویدئو دیزاین سیستم را دیدید و با مفاهیم مرتبط با آن آشنا شدید، حتما از دو لینک بالا، دیزاین‌سیستم‌های معروف و رایج را در دو زبان فارسی و غیرفارسی به فیگما اضافه کنید و بخش‌های مختلف آن را ببینید و در گذر زمان سعی کنید کامپوننت‌های آنها را بسازید و تمرین کنید. چند مقاله جذاب نیز برای شما درج کردیم که پیشنهاد میکنیم، بی عذر و بهانه و با عشق و اشتیاق، آنها را مطالعه کرده و هر سوالی داشتید از ما بپرسید.
https://www.nngroup.com/articles/design-systems-101
https://www.nngroup.com/articles/design-systems-vs-style-guides
https://www.uxpin.com/studio/blog/best-design-system-examples
52 پاسخ
سلام خدمت استاد گرامی، ببخشید می‌خواستم بدونم اینکه مثلا فرمودید دیزاین متریال رو بلد باشید، یعنی دقیقا چطوری؟ یعنی چه انتظاری کارفرما از من داره؟ و مورد بعدی اینکه اون مواردی که توی سایت متریال نشون دادید از نظر اندازه و فاصله‌گذاری و این موارد، مطالعه‌شون مفیده ولی تقریبا مطمئنم به ذهنم سپرده نمیشه. باید در حین پروژه تمرینی زدن ازشون استفاده کنم تا موندگار بشه در ذهن یا چندین بار مطالعه کنم تا بمونن توی ذهنم؟ ممنون از لطف همیشگی شما
درود بر شما دوست گرامی، وقت شما بخیر
متریال دیزاین سیستم بسیار خوب و کاملی هست. عناصر پر کاربردی دارد. اسامی به کار رفته در آن، به عنوان الگویی برای سایر دیزاین سیستم‌ها و حتی خود طراحان است. مثلا Leading icon. مثلا Caret و… باید این عناصر را بشناسیم و بدانیم کجاها استفاده می‌شوند. می‌توانیم نسخه جدید آن را در فیگما باز کنیم و باهاش کار کنیم. State های مختلف آن را ببینیم. خصوصا کامپوننت‌هایی مثل فرم را تلاش کنیم خودمان مشابه‌اش رو بسازیم. فرض کنید پزشک یا دامپزشک هستید و قرار است یک جسد رو بردارید و قیمه قیمه‌اش کنید تا یاد بگیرید. خوشبختانه نیازی به این همه خشونت نیست البته. آن جسد محترم اینجا همان متریال دیزاین است. به قول شاعر آن را شرحه شرحه کنید و آناتومی آن را مورد بررسی قرار بدهید و سعی کنید طراحی کنید تا بهش مسلط بشوید. مطمئن باشید گذر زمان باعث می‌شود به فاصله‌گذاری‌های آن نیز مسلط بشوید.
موفق باشید.
سلام وقتتون بخیر متشکرم فراوان از تدریس عالیتون
من سایت m3.material.io روبررسی کردم از واحد اندازه گیری بنام dp برای نشان دادن فواصل استفاده کرده که متوجه شدم برای طراحی ریسپانسیو هست. حالا سوالم این هست می‌تونیم همین مقادیر رو به صورت پیکسل برای طراحی استفاده کرد؟
یا باید تبدیل خاصی صورت بگیره؟
درود بر شما دوست گرامی، وقت شما بخیر
مهرناز جان من یه توضیح کلی خدمتتان می‌نویسم امیدوارم مفید واقع بشه. پیکسل روی یک موبایل Full HD و یک موبایل HD، یک px اندازه‌ی متفاوتی روی صفحه دارد. اما dp یک واحد منطقیه که گوگل تعریف کرده تا طراحی مستقل از تراکم پیکسل باشد. به طور پیش‌فرض، ۱ dp ≈ ۱ px روی نمایشگری با تراکم 160 dpi (mdpi). روی نمایشگرهای با تراکم بالاتر، سیستم عامل خودش تبدیل میکنه (مثلاً روی 320 dpi، هر ۱ dp = ۲ px).
در فیگما می‌توانی مقادیر dp را همان px وارد کنی، چون ابزار طراحی با px کار می‌کند. اما باید در ذهن داشته باشی که این px در طراحی معادل dp در اندروید است و توسعه‌دهنده هنگام پیاده‌سازی، آن را به dp تفسیر می‌کند. به بیان ساده: در طراحی گرافیکی = px، در توسعه اندروید = dp. مهم این است که مقیاس نسبی را درست رعایت کنید.
موفق باشید.
عرض سلام و احترام دارم
ابتدا از لطفی که در تولید و ارائه سخاوتمندانه این دوره آموزشی داشتید دوباره تشکر میکنم.
جناب استاد من یک سوال کمی دور دارم. همونطور که میدونید کدنویس‌ها از کتابخونه‌های آماده خیلی استفاده میکنن. لذا این کار طراحی رو خیلی متاثر میکنه. برای مثال من یک date picker خوشگل یا استاندار طراحی میکنم اما کتابخونه‌ای که کدنویس ورداشته و استفاده میکنه چندان منعطف نیست که مطابق طرح من سازگارش کنه لذا یا اصلا طرح من رو پیاده نمیکنه یا نهایتا من باید طرح رو مطابق ساختار اون کتابخونه تغییر بدم. این مساله خیلی پیش میاد. این آدم رو توی طراحی گاهی محدود و حتی گاهی مایوس میکنه. نظرتون چیه؟ راهنمایی بفرمایید.
درود بر شما دوست گرامی، وقت شما بخیر
سپاس از لطف و همراهی شما. کاملا درست می‌فرمائید و من زیاد مواجه شدم با چنین مسئله‌ای. حتی گاهی اصل نرم‌افزار رو سال‌ها قبل نوشتند و ممکنه الان کلی مشتری خصوصی و دولتی داشته باشد و به‌خاطر همین نتوان یهویی آن را تغییر داد. ببینید اگر پروژه داره از صفر کلید می‌خوره، شما یا یک دیزاین سیستم آماده انتخاب می‌کنید یا دیزاین سیستم اصلا براش طراحی می‌کنید که هر دو روش به فراخور پروژه خوب هستند. فرض رو بر این گذاشتم که پروژه متوسط به بالا هست و دیزاین سیستم لازم دارد. حالا موقع شروع فرآیند ui خیلی وقت‌ها در جلسات از تیم برنامه‌نویسی هم مشورت و کمک گرفته می‌شود. مثلا از آنها می‌پرسیم ما فلان دیزاین سیستم را می‌خواهیم استفاده کنیم. این هماهنگی کمک می‌کند مسائل بهتر و آسان‌تر جلو بروند. در نهایت، در جمع‌بندی صحبت‌های کارفرما و برنامه نویس و تیم ui بالاخره دیزاین سیستمی انتخاب می‌شود که نزدیک‌ترین و مناسبت‌ترین مورد به انتخاب‌های آن تیم باشد.
حالا اینکه دیگر آنها مجبور بشوند برخی عناصر را کاستوم کنند این دیگر اجتناب ناپذیر هست و لازم است. چون همه چیز هم که در فرانت لایه‌باز هست. ممکن است کمی سخت بشود گاهی اما ناممکن که نیست. بنابراین وقتی انتخاب خوبی در دیزاین سیستم داشته باشیم این مسائل کمتر می‌شود اما نمی‌توان گفت که اصلا تغییری لازم نمی‌شود. تغییر لازم خواهد بود و طبیعتا آنها باید انجامش بدهند. حتی اگر دیزاین سیستمی مشابه Tailwind را انتخاب کرده باشیم، کلی از عناصر شبیه هم هستند (هم فایل ui آن وجود دارد و هم کامپوننت‌های پیاده‌سازی آن در فرانت). بنابراین صرفا شخصی‌سازی‌هایی لازم می‌شود که آنقدرها هم دشوار نیستند.
موفق باشید.
سلام وقتتون بخیر .من ویدیو این جلسه رو کامل دیدم و خیلی مفید بود تشکر از شما.یه سوال داشتم اگر قرار باشه ما از یه دیزاین سیستم مثل متریال استفاده کنیم و صرفا تغییرش بدیم یکم خب پس ما کار خاصی انجام نمیدیم دیگه؟اخه همه رو از جاهای دیگه برداشتیم.و اینکه چقدر احتمال داره یه شرکت از ما بخواد براش یه دیزاین سیستم بسازیم؟(بیشتر چه جاهایی لازم میشه؟)
و بعد باید یک چیزی تو ابعاد متریال و مایکروسافت و…بسازیم؟اکثر اگهی هایی که دیدم میگن باید دیزاین سیستم بلد باشین.حس میکنم ممکنه از پسش برنیام باید چیکار کرد؟
درود بر شما دوست گرامی، وقت شما بخیر
نه لزوماً. چون همان پروژه‌ای هم که دیزاین سیستم متریالی داره، همه کامپوننت‌های مورد نیازش در متریال ممکنه نباشه. اونجاست که دیزاینر باید مطابق با متریال، کامپوننت‌های جدیدش رو بسازه. این بخش از کارش آسان می‌شود که برخی فواصل، اندازه‌ها، سایه‌ها، آیکون، دکمه و… رو دیگه داره. اما این داشتن به معنی آن نیست که لازم نمیشه کامپوننت جدید بسازه. حتی مواردی که آماده در متریال هست رو هم باید راستچین کنه، فارسی کنه، فونت و رنگ‌ها و برخی چیزها رو ممکنه لازم بشه تغییر بده. دلیل اینکه کارفرمایان و شرکت‌ها دوست دارند ما متریال دیزاین گوگل رو مسلط بشویم این هست که در این دیزاین سیستم استانداردها و فواصل، خوب رعایت شده. مثلا قواعد متریال برای آیکون‌ها واقعا خوب هست. چه در اپ موبایل چه در وب‌سایت‌ها. در برخی پروژه‌ها هم ممکن است کلا دیزاین سیستم رو بخواهند که از صفر بسازیم. معمولا افرادی در دیزاین سیستم قوی می‌شوند که ابتدا با دیزاین سیستم‌های رایگان و مطرح مثل متریال دیزاین، اپل، فلوئنت ماکروسافت و… سر و کله زدن و طراحی کردند ابتدا. این شروع خیلی خوبی می‌تونه باشه.
موفق باشید.
سلام. وقت شما بخیر.
اول از همه خیلی تشکر میکنم بابت دوره‌تون.
دوم اینکه خیلی وقت‌ها شرکت‌ها با فریم‌ورک‌های مشخصی مثل tailwind کار میکنن و انتظار دارند که ما با این فریم‌ورک‌ها آشنا باشیم.
سوالی که من دارم اینه که دقیقا باید چیکار کنیم؟ یعنی از کامپوننت‌های اونا استفاده کنیم یا مثل استفاده از دیزاین‌سیستم‌ها از اصولشون استفاده کنیم، یا چی؟ فرض کنیم از صفر می‌خوایم بر اساس یک فریم‌ورکی دیزاین رو شروع کنیم، چه نکاتی رو باید مدنظر قرار بدیم دقیقا؟ این موضوع کلا برای من مبهمه.
خیلی ممنون از شما.
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم از لطف و همراهی شما. من با این موضوع زیاد مواجه شدم. گاهی نرم‌افزار برنامه‌نویسی شده از قبل ایجاد شده و تغییر فریم‌ورک فرانت آن زمان‌بر است. در این مواقع گاهی از تیم دیزاین می‌خواهند که جهت تناسب کار و سرعت بالا، از فریم‌ورک مدنظر آنها (مثلا Tailwind) استفاده بشه. این لزوماً چیز بدی نیست و گاهی ممکن است انجام بشود. البته بستگی به ذینفعان و کارفرمایان هم دارد. با مشورت با آنها و بیان نقاط مثبت و منفی آن، تصمیم‌گیری آسان می‌شود. چون اینطوری دیگر کارفرما در جریان این تصمیم قرار می‌گیرد و خودش انگار این موضوع را می‌پذیرد. نکته دیگر اینکه دیزاین سیستم‌های مدنظر برنامه‌نویسان نیز اغلب وجود دارد. مثلا Tailwind و… در فیگما وجود دارد و کامپوننت‌های فیگمایی آن نیز وجود دارد.
موفق باشید.
سلام خوبین من یک سؤالی فکرم رو خیلی مشغول کرده
اینکه تفاوت بین Design Guide | Style Guide چیه؟ چون استایل گاید(راهنمای استایل) رو شنیده بودم داخل المنتور به اشتباه تنظیمات سایت معنی کرده‌اند. در نهایت با توجه به تعریف این دو مورد اونوقت دیزاین سیستم چه معنی ای داره؟
درود بر شما دوست گرامی. وقت شما بخیر
استایل‌گاید راهنمای عناصری مثل رنگ، تایپوگرافی، فاصله‌گذاری، سایه‌ها و افکت‌ها، گریدسیستم و عمدتا عناصر مبتنی بر ui هستند. در صورتی که دیزاین‌گاید گسترده‌تر هست و راهنمایی جامع‌تر از فرآیند و اصول طراحی را شامل می‌شود و حتی موارد تجربه کاربری را هم در خود دارد. مثلا فلوها، دسترسی‌پذیری و کلی‌تر اگر بگوئیم فرآیند تفکر طراحی. اما هیچ کدام اینها دیزاین‌سیستم نیستند. چون دیزاین‌سیستم هم شامل استایل‌گاید می‌شود و هم کامپوننت‌های پروژه را در خودش دارد. چون با توجه به کامنت دیگری که درج فرمودید و من آن را خواندم، کمی این مباحث را دارید با هم اشتباه می‌گیرید. مثلا متریال دیزاین یک دیزاین سیستم است. درسته که مفاهیم کلی‌تر دیزاین توسط گوگل و ماکروسافت و اپل مطرح شده (به قول شما دیزاین استایل). اما نمی‌توان گفت اینها دیزاین سیستم نیستند. درسته که در دید کلی یک سبک طراحی هستند اما دقیقا با همین نام‌ها، ازشون دیزاین سیستم هم وجود دارد. خود این شرکت‌ها میگن دیزاین سیستم هست اونوقت شما می‌گوئید نیست؟ خود سایت متریال دیزاین گوگل رو ببینید. این همه آگهی شغلی استخدامی داخلی و خارجی و حتی خود آگهی‌هایی که برای شرکت گوگل هست رو ببینید.
بنابراین متریال دیزاین رو حتی اگر مفهوم گسترده‌ای براش در نظر بگیریم نمی‌تونیم بگیم دیزاین سیستم نیست. چرا؟ چون به عنوان دیزاین سیستم و با تعاریف دیزاین سیستم هم توسط گوگل ارائه شده و قابل دریافته. همین روند برای Fluent و Apple و… نیز وجود دارد. منابع داخلی رو بخونید بد هم نیستند. اما خب حتما منابع رسمی رو هم مطالعه کنید. داکیومنت‌های خود گوگل را هم ببینید. ویدئویی که ما در این جلسه گذاشتیم کل دانش مربوط به دیزاین سیستم رو که ارائه نکرده. صرفاً در حد این دوره اومده دیزاین سیستم‌های خوب و معروف رو معرفی کرده. ویدئو یک ساعت هم نیست. خود بحث دیزاین سیستم می‌تونه یک دوره باشه به تنهایی. در برخی آموزشگاه‌های داخلی هست و من سال‌ها تدریس کردم در برخی از آنها. مباحثی که نام بردید رو که نمی‌توان در یک ویدئو یک ساعته بیان کرد. این صرفا یک Overview هست از دیزاین سیستم‌های معروف که شخصی که یادگیری را آغاز کرده، بتواند مسیرش را پیدا کند. هیچ دانشی هم با یک دوره 30 ساعته تکمیل و به پایان نمی‌رسد.
موفق باشید.
سلام استاد عزیز وقت بخیر
من توی کامینیتی فیگما Material 3 Design Kit (Community) و Windows UI kit (Community) رو سرچ و در نهایت اد کردم ولی صفحاتش مثل صفحات شما کامل نیست و کامپوننت هارو نداره .
درود بر شما دوست گرامی. وقت شما بخیر
فایل‌های زیادی در کامیونیتی فیگما هست. برخی شون رسمی نیستند. از پیج رسمی خود متریال دیزاین در فیگما بردارید. در این لینک تمام فایل‌های مربوط به متریال دیزاین گوگل وجود دارد. figma.com/@materialdesign
موفق باشید.
سلام مجدد استاد
من دارم متریال دیزان گوکل رو طبق پیشنهادتون بررسی می کنم. تو صفحه example که در مورد گرید لایوت‌ها هست، سطرهاش رو یه جور خاصی گذاشته! متوجه نمیشم چرا! مثلا کلا سطر نذاشته، یا برای دسکتاپ‌های بزرگ اومده ستون‌ها رو از راست چیده و سمت چپ دوباره یه ستون رنگی دیگه گذاشته
اینطوری تو طراحی‌ها مشکل پیش نمیاد؟ وقتی سطر نداریم، عناصر جاشون خوب مشخص نمیشه! یا انگار اون ستون رنگی چپ رو طبق مثالی که داره فقط واسه سایدبار ها کمکه. این نوع طراحی چطور درسته؟
درود بر شما دوست گرامی. وقت شما بخیر
درج سطر لزوما توی همه گریدسیستم‌ها وجود نداره. الزامی نیست. البته بودنش مثبت و کمک‌کننده است. در واقع ستون هست که خیلی ضرورت داره در قدم اول. گریدهایی که مشاهده فرمودید که با رنگ متفاوت مقداری رو درج کرده اون رنگ متفاوت در واقع یه جورایی حکم سایدبار رو داره. چون گریدسیستم در نسخه دسکتاپ ممکن است برای داشبورد، متفاوت تعریف شود و مثلا سایدبار داشته باشد. جلسه گریدسیستم این دوره رو هم حتما ببینید. آنجا من درباره ساخت گرید سایدبار و داشبورد هم صحبت کردم.
موفق باشید.
ممنونم خیلی لطف کردید. علاوه بر اینکه یه دوره پر بار رو رایگان در اختیار همه قرار دادید، با حوصله و خیلی سریع جواب همه سوالات رو می‌دین. از لطف و سخاوت شماست.
امیدوارم همیشه سلامت و شاد و موفق باشید.
درود بر شما دوست گرامی. وقت شما بخیر
سپاسگزارم از لطف و مهربانی شما. شاد و سلامت باشید همیشه.
موفق باشید.
سلام وقتتون بخیر استاد
یه سوالی برام پیش اومده. تو چه شرایطی میشه از دیزاین سیستم های اماده استفاده کرد؟ طبق توضیحاتتون و کامنتها برداشت من این شد که بستگی به هزینه مالی و زمانی کارفرما داره. مثلا اگر زمان کم باشه بودجه کم باشه بخوایم تو یه پروزه زیر 10 صفحه از دیزاین سیستم اماده مثل متریال دیزاین گوگل استفاده کنیم اونوقت کل پروژه رو باید کپی کنیم یا هر کامپوننتی که نیاز داریم. اخه میشه مثلا add کرد تو پروژه، مثل uikit های آماده که از تب asset میشه اد کرد، این اد کردن ها پروژه رو سنگین نمیکنه؟ اگر پروژه بزرگ باشه چی؟ یا همین سوال تو بخش ایکون ها هم هست، میایم یه کتابخونه رو اد میکنیم ولی در حد 10 تا 15 تا آیکون استفاده میشه، سنگین نیست؟ مثلا اینجا فقط برخی فایل ها رو کپی کنیم کافی نیست؟
راستی من هرچقدر تیک ارسال ایمیل تو اراسل نظر و دیدگاه رو میزنم اینجا، بازم برام تو ایمیل نمیاد.
درود بر شما دوست گرامی. وقت شما بخیر
بله درست فرمودید کمی به این مسئله بستگی دارد که چقدر کارفرما هزینه می‌کند و واقعا اصلا چقدر لازم هست این موضوع. چون مثلا اگر پروژه 10 صفحه باشد اصلا دیزاین سیستم لازم نمی‌شود (مگر اینکه قرار باشد بعدا آن پروژه را توسعه دهنده و بزرگترش کنند). مثلا پروژه‌ای که 10 صفحه بیشتر نیست و مثلا یک سایت شرکتی هست، می‌توان صرفاً استایل‌گاید و uikit های ضروری پروژه را بسازیم و نیازی به دیزاین سیستم (حتی دیزاین سیستم آماده) نیست. مگر اینکه بخواهیم برخی از uikit های آن دیزاین سیستم را برداریم و استفاده کنیم اما نیازی به همه آن نیست. اشکالی نداره که از uikit هایی که در library فیگما هست استفاده کنیم. مثلا برخی از uikit های متریال دیزاین. در واقع عرض کلی من این هست که در پروژه‌های کوچک، نیازی به یک دیزاین سیستم کامل و بزرگ مثل (اعم از آماده و از صفر دیزاین شده) نداریم و صرفا ساختن uikit های ضروری پروژه کافی است. حالا همین uikit های ضروری پروژه هم عیبی ندارد که از برخی دیزاین سیستم ها برداشته بشود ولی لازم نیست کل دیزاین سیستم را برداریم چون پروژه کوچک است و آن همه uikit را لازم ندارد.
من موضوعی که در خصوص ارسال نشدن ایمیل اطلاع رسانی کامنت هست را پیگیر می‌شوم.
سپاس از شما. موفق باشید.
سلام. وقتتون بخیر. من یه استادی داشتم که خیلی اصرار داشتن که طراحی باید بر اساس دیزاین سیستم باشه و هر کسی نمیتونه که خارج از دیزاین سیستم بر اساس استاندار ها طراحی کنه.
سوال من اینه که میشه برای رزومه کاری و نمونه کار از دیزاین سیستم ها استفاده کرد؟ نظر شما در این رابطه چیه؟
ممنون ازتدریس واقعا خوبتون
درود بر شما. وقت شما بخیر
درست فرمودند به نظرم. خصوصا در پروژه‌های بزرگ که صفحات و کامپوننت‌های زیادی دارند، استفاده از دیزاین سیستم آماده و یا طراحی آن، ضروری است و مفید. اگر پروژه کوچک باشد مثلا فرض کنید یک پروژه چند صفحه‌ای باشد (مثلا یک سایت شرکتی) اینجا دیگر نیازی به دیزاین سیستم پیچیده نداریم. عملا استایل‌گاید و uikit یا همان کامپوننت‌های لازم رو می‌سازیم.
موفق باشید.
سلام، وقت بخیر
داشتم دیزاین سیستم گوگل رو بررسی میکردم، چیزی که برام عجیب بود، خود طراحان، خیلی جاها فواصلشون اعشاری شده، آیکون‌ها با نسبت 24 و با فاصله (که میشه 48) نیستن، ابعاد منظورم نیست، نسبتی که بیان کردید و بطور کلی پدینگ دکمه‌ها از بغل و گوشه ها که الزاما دو برابر نیست، نشون میده خیلی جاها با این استدلال رفتن جلو که به چه شکل از لحاظ بصری بهتر بنظر میاد. حالا نمیدونم، این موارد اشتباهشون بوده (که بعیده)، یا واقعا یه سری جاها قاعده رو کنار میذارن و اون‌چیزی که به چشم زیباتر میاد رو انتخاب میکنن.
میتونم نتیجه گیری کنم، اون چیزی که مهمه، یکسان بودنش توی تمام پروژه است، نه قاعده خاص.
درود بر شما. وقت شما بخیر
دیزاین سیستم رسمی گوگل رو مواظب باشید ببینید فایل توی کامیونیتی زیاد هست. خود دیزاین سیستم رسمی گوگل در ورژن‌های جدید، خیلی مقادیر و اندازه‌های استاندارد و خوبی دارد. ما بارها در ویدئوها توضیح دادیم که قواعد مرز خشک و مطلقی ندارند. احتمالا تمام ویدئوها را ندیدید. مثلا در جلسه دکمه‌ها خودمان هم یکی از اندازه دکمه‌ها را با نسبت دو برابر طراحی نکردیم. یعنی پدینگ دو طرف چپ و راست لزوما دو برابر بالا و پائین نبود (مثلا یک و نیم برابر). بیان کردیم آنجا که ممکن است گاهی رخ بدهد. چون اصلا ارتفاع دکمه را با مقادیر نسبت 8 اغلب تعیین می‌کنند که مقادیر زوج باشند. یا مثلا برخی عبارت‌ها مانند: “پروژه با پروژه، فونت با فونت، فارسی با انگلیسی و… فرق داره باهم” بار ها بیان شده توسط بنده. مثلا در زمینه تایپوگرافی گفتیم با اینکه سایز h1 باید یک درصدی از h2 بزرگتر باشد، مثال نقض‌اش را هم در دیجی کالا زدیم که چون h1 فاصله زیادی با h2 داشت هم سایز بودن و این باعث اشکال نمی‌شد. چون بلاگ نبود که همه متون زیر هم باشند.
این قواعد که بیان شدند همگی درست هستند و تا جای ممکن باید رعایت‌شان کنیم. اما برخی موارد ممکن است به دلایلی که بارها در دوره توضیح دادیم، ممکن است به آن شکل رعایت نشوند. رعایت این موارد هست اتفاقا که باعث می‌شود پروژه‌ها هم از نظر بصری بهتر دیده بشوند. اگر ده ها دیزاین سیستم را ببینید اغلب این را رعایت کردند. فرض کنید 95 جا ببینید رعایت شده و 5 جا هم ببینید برخی اصول رعایت نشده. کدام را بهتر است بپذیریم و جلو ببریم؟ نه اینکه آن 5 جا هم اشتباه باشد. اما کلا در تمام شاخه‌های دیزاین ممکن است گاهی از اون اصول، فاصله بگیریم اما این برخلاف چیزی که فکر می‌کنید، باعث نقض اصول کامل‌تر آن شاخه علمی و هنری نمی‌شود. مثلا اصل قاعده نسبت 8 چیز خوبی هست. ممکن است کسی رعایتش نکند در برخی موارد اما علی‌رغم این موضوع، در پروژه‌های حرفه‌ای، رعایت این پله‌های فاصله‌گذاری بسیار بهتر از رعایت نکردن آن هست.
موفق باشید.
عالی بود، فقط یک سوال دارم.
توی پروژه‌های معمولی که سایت‌های کوچیک هستن، یعنی نیاز به طراحی ui kit از اول نیست. درسته؟ ما می‌تونیم بریم و از دیزاین سیستم‌های معروف برای طراحی سایت اشخاص استفاده کنیم، مثل گوگل.
درود بر شما. وقت شما بخیر
حتی در پروژه‌های بزرگ هم ممکنه از دیزاین سیستم رایگان و آماده استفاده کنند و این اصلا چیز بدی نیست. البته برخی موارد هم ممکن است دیزاین سیستم را به‌صورت اختصاصی طراحی کنند که این موضوع بستگی به بودجه آن سازمان دارد. در پروژه‌های کوچک و زیر 10 صفحه عمدتا از یک دیزاین سیستم کامل استفاده نمی‌کنند و صرفاً uikit های ضروری را می‌سازند. تقریبا مشابه همین پروژه‌ای که ما اجرا کردیم.
موفق باشید.
سلام وقت بخیر
گفتید میشه از دیزاین سیستم‌های آماده هم استفاده کرد و تغییرشون داد متناسب با پروژه؟ اگر میشه چجوری باید اینکارو کرد من به عنوان مثال چند تا فایل دیزاین سیستم که button های مختلف دارن رو از کامیونیتی فیگما پیدا کردم ولی وقتی کپی میکنم میارم تو پروژه خودم نمیشه تغییرشون داد و ادیت زد.
درود بر شما ملیکا جان. وقت شما بخیر
بله می‌توان چنین کاری کرد. البته خب به هرحال هماهنگ کردن آنها با هم، از ما وقت خواهد گرفت که طبیعی هم هست. مثلا می‌توان کامپوننت مدنظر رو کپی کنیم در پروژه خودمان. حالا می‌توانیم به عنوان مثال، رنگ و افکت و استروک و… را متناسب با پروژه خودمان تغییر بدهیم. اینکه فرمودید قابل تغییر نیست شاید به این دلیل است که کامپوننت فرزند را کپی کردید که قابل ویرایش نیست. باید Main Component رو کپی کنید که بتوانید در پروژه خودتان، آن را ویرایش کنید.
موفق باشید.
سلام استاد عزیز 🌹 با سپاس از زحمات شما 🙏
سوالی داشتم خدمتتون
چگونه بتونم دیزاین سیستم های دیفالتی که فیگما در قسمت Assets قرار داده(مثلا متریال دیزاین گوگل) را در تب File بازکنم؟(مثل ویدیو شما که در تب فایل، دیزاین سیستم رو باز میکردید)
چون اگر بخوام از طریق کامیونیتی بازش کنم این پیام رو میده :
This UI Kit is already available within Figma
You can find it in the assets panel of any design file
درود بر شما بهار جان. وقت شما بخیر
فیگما بخشی تحت عنوان Library داره که من یکم بهش اشاره کردم توی دوره. ولی زیاد در موردش حرف نزدم. در این بخش سه تا دیزاین‌سیستم آماده وجود داره که متریال، ماکروسافت و اپل هستن که این سه تا رو میشه از همین Library ها استفاده کرد. اما به هر حال فایل شون رو هم میشه به کامیونیتی اضافه کرد. چون موقع Add کردن دو گزینه داره. حتی فایل fig اش رو هم دانلود کنید می‌تونید در فیگما import کنید.
موفق باشید.
سلام استاد عزیز
من یه سوال داشتم. چرا وقتی از یه پروژه دیگه دیزاین سیستم‌های ساخته شده مثل کالرگرافی یا تایپوگرافی و… رو کپی میکنیم و داخل یه پروژه دیگه پیست میکنیم اونجا شناسایی نمیشن؟ به عنوان مثال روی رنگ دیزاین سیستم شده که کلیک میشه قسمت fill میزنه مثلا neutral 01 ولی وقتی یه فریم جدید ساخته میشه و می‌خواهیم از رنگ‌های دیزاین سیستم پروژه قبلی که اینجا الحاق کردیم بهش رنگ بدیم دیگه اون رنگ ها نیستن و باید دوباره تک تک add کرد.
درود بر شما. وقت بخیر
درسته. به همین شکل که فرمودید هست. در بین پروژه‌های تیم، میشه استایل‌ها رو منتقل کرد ولی مسئله اینجاست که در ساخت تیم، محدودیت‌هایی وجود دارد در نسخه‌های رایگان. برای آسان‌تر شدن، می‌توانید از پلاگین Copy Styles هم استفاده کنید.
موفق باشید.
میشه از کامپوننت ها و کارت های این دیزاین سیستم ها مستقیم کپی پست کنیم و در ui kit پروژه خودمون بذاریم و فقط تغییرات مورد نظر رو روشون اعمال کنیم؟ یا اینکه از نو باید خودمون بسازیمشون برای پروژمون ولی طبق این دیزاین سیستم ها باشه؟
درود بر شما. وقت بخیر
بله می‌توان حتی به‌صورت کامل از یک دیزاین سیستم و uikitهای داخل آن استفاده کرد. اما خب گاهی لازم می‌شود همان‌ها را هم مقداری تغییر بدهیم. مثال بزنم. فرض کنید فونت به‌کار رفته در دیزاین سیستم انگلیسی، فونت inter باشد. برای فارسی واقعا جالب نمی‌شود. به خاطر همین مجبور می‌شویم تایپوگرافی‌ها را تغییر بدهیم و فونت‌ها را پارسی کنیم. نکته دیگر آنکه رنگ‌های به کار رفته شده در دیزاین سیستم ممکن است با پروژه شما تطابق نداشته باشد و مجبور بشوید رنگ‌ها را هم تغییر بدهید. پس موضوعی که فرمودید شدنی هست اما ادیت کردن هم نیاز دارد.
نتیجه: هم می‌توانیم از یک دیزاین سیستم استفاده کنیم، هم می‌توانیم از ترکیب دیزاین سیستم‌ها استفاده کنیم و هم می‌توانیم از صفر تا صد دیزاین سیستم اختصاصی خودمان را طراحی کنیم. هیچ کدام این روش ها بد نیستند اما به فراخور زمان‌بندی پروژه، هزینه‌ها و درخواست کارفرما، ممکن است روش مدنظر آن پروژه را انتخاب کنیم. همانطور که بیان شد در هر کدام از این سه روش، نیاز هست تغییراتی بدهیم. مانند تغییر فونت، رنگ و …
موفق باشید.
سلام استاد، خسته نباشین.
معمولا در پروژه هامون میشه مستقیما از این دیزاین سیستم ها استفاده کرد و UI Kit نساخت یا اینکه این دیزاین سیستم ها صرفا برای تمرین یا الهام گرفتن هستن؟
درود بر شما. وقت بخیر
برخی از دیزاین سیستم‌ها کاربرد بیشتری دارند. مثلا متریال، به جز اینکه در اغلب محصولات گوگل استفاده شده، در سایر محصولات هم در دفعات زیاد (اعم از داخلی و خارجی) استفاده می‌شوند. بله می‌توان حتی به‌صورت کامل از یک دیزاین سیستم و uikitهای داخل آن استفاده کرد. اما خب گاهی لازم می‌شود همان‌ها را هم مقداری تغییر بدهیم. مثال بزنم. فرض کنید فونت به‌کار رفته در دیزاین سیستم انگلیسی، فونت inter باشد. برای فارسی واقعا جالب نمی‌شود. به خاطر همین مجبور می‌شویم تایپوگرافی‌ها را تغییر بدهیم و فونت‌ها را پارسی کنیم. نکته دیگر آنکه رنگ‌های به کار رفته شده در دیزاین سیستم ممکن است با پروژه شما تطابق نداشته باشد و مجبور بشوید رنگ‌ها را هم تغییر بدهید. پس موضوعی که فرمودید شدنی هست اما ادیت کردن هم نیاز دارد.
موفق باشید.
سلام و خسته نباشید
بسیاربسیاردوره خوبی بود خیلی کمکم کرد ممنون از زحماتتون
درود بر شما. وقت بحیر
تبریک به شما دوست عزیز. شاد و سلامت باشید همیشه.
موفق باشید.
سلام دیزاین سیستم رو چطور میشه به پروژه اضافه کرد و استایل ها و فونت هاش رو تو فایل طراحی خودمون بیاریم از سمت ASSET ها بعضی از دیزاین سیستم ها کتابخانشون پیدا و اضافه نمیشه
درود بر شما. وقت بحیر
هر بخشی از دیزاین سیستم را می‌توانیم کپی پیست کنیم و به پروژه خودمان بیاوریم. مثلا کامپوننت‌ها و… همچنین با قابلیت جدیدی که به فیگما اضافه شده، شما می‌توانید روی استایل‌های Add شده داخل Local Style های فیگما (که در سایدبار سمت راست است) کلیک راست کرده و آنها را cut یا copy کنید و به پروژه مدنظر خود ببرید. طبیعتا داخل پروژه خودتان می‌توانید همه آنها را ویرایش کنید. مثلا یک کامپوننت را به شکلی که مدنظر دارید شخصی سازی کنید.
موفق باشید.
سلام استاد حمداللهی بسیار ممنونم بابت این دوره پرکاربرد و جامعتون که در خدمت ما گذاشتین
یک سوال داشتم این دیزاین سیستم هایی ک معرفی کردین از کجا باید بدونیم کدمش مناسب اپلیکیشن ها است کدوما برای سایت مناسبه؟ و اینکه سبک های مدرن امروزی چه نام دارند؟
درود بر شما. وقت بخیر
سپاس از شما. عناصر و uikit های دیزاین سیستم متفاوت هستند. می‌توان مواردی رو انتخاب کرد که برای اپ موبایل uikit های مرتبط و بیشتری دارند و طراحی آنها بیشتر مطابق میل ما باشد. لیست دیزاین سیستم‌ها در سایت designsystems.ir وجود دارد.
موفق باشید.
سلام استاد
ما اولش که توی پروژه دوره داشتیم uikit میساختیم انگار داشتیم دیزاین سیستم اختصاصی میساختیم درسته؟
کلن کی خوبه از دیزاین سیستم استفاده کنیم و کی خودمون طراحی کنیم؟
شما فرض کنید یک سایت فرش ایرانی میخواین طراحی کنین از دیزاین سیستم بهتره کمک گرفتن یا خودمون طراحی کنیم؟
درود بر شما. وقت بخیر
در واقع uikit ها بخشی از دیزاین‌سیستم به حساب می‌آیند. موارد دیگری مثل استایل‌گاید و آیکن و… هم هستند. اگر پروژه خیلی بزرگ باشد و صفحات و عناصر بسیار زیادی داشته باشد نیاز هست که دیزاین سیستم طراحی کنیم و یا دست کم از یک دیزاین سیستم آماده استفاده کنیم و آن را تغییر داده و استفاده کنیم. فرقی نمی‌کند. موضوع چه فرش باشد و چه نباشد، در پروژه‌های بزرگ بیشتر این مقوله لازم می‌شود. در پروژه‌های کوچک هم صرفاً uikit های ضروری را می‌سازند و لزوماً یک دیزاین سیستم بزرگ برای آن نمی‌سازند.
موفق باشید.
خیلی خیلی ممنونم از پاسخ کاملتون. ممنون که درکنار اینهمه آموزش عالی وکامل، از راهنمایی های بیشتر دریغ نمی‌کنید و قدم به قدم همراهمون هستین.
درود بر شما. وقت بخیر
در خدمت هستم. سپاس از لطف شما.
موفق باشید.
سلام و خسته نباشد.ممنون از آموزش
برای چه پروژه هایی بهتره از دیزاین سیستم به طور کامل استفاده کنیم و از اول همه چیزو طراحی نکنیم؟ مثلا اگه دولوپر بخواد از بوت استرپ یا متریال دیزاین استفاده کنه ما هم از اول با همینا طراحی کنیم؟ یا برای وردپرس و قالب های مشخص؟ یا اینکه کار درستی نیست اینطوری؟
بعد میشه مثل حالتی که آیکن‌ها رو به پروژه اضافه می‌کردیم کل دیزاین سیستم رو هم اد کنیم به پروژه‌مون؟
درود بر شما. وقت بخیر
بله شما می‌توانید مشابه آیکن‌ها حتی کل یک دیزاین سیستم را مورد استفاده قرار بدهید. این بد نیست. حتی در برخی رزومه‌های سطح بالای UI/UX هم نوشته شده که اصلا از ما متریال دیزاین را می‌خواهند. این بد نیست حتی به نظر من در شروع کار خوب هست. چون باعث می‌شود ما با uikit های شناخته شده و پرکاربرد بیشتر آشنا بشویم. آناتومی آنها را بهتر بشناسیم. خصوصا متریال برای این کار خیلی خوب است. کلا انتخاب دیزاین سیستم با تیم UI است. اما خب این یک فرهنگ بالای کاری هست که ما با تیم برنامه نویسی هم مشورت کنیم. قطعا آنها نیز تجربیات خوبی در پیاده‌سازی و بهینه شدن از نظر سرعت و سئو دارند. بنابراین مشورت و گفتگو با آنها قبل از انتخاب دیزاین سیستم، بسیار خوب هست.
مسئله دیگر، بهبود UI پروژه‌هایی هست که از قبل نوشته شده‌اند. مثلا فرض کنید UI Designer یک پورتال سازمانی هستید و امسال استخدام شده‌اید. در صورتی که این پورتال شش سال قبل نوشته شده است. خب در این شش سال هم فرض کنید که از همان بوت استرپ استفاده می‌شده. بنابراین تیم برنامه نویسی نمی‌تواند یکباره کل نرم‌افزار را تغییر بدهد. بنابراین اینطور مواقع بهتر است با آنها تعامل کنیم و با همان دیزاین سیستم جلو برویم. نهایتا ایرادات UI/UX را برطرف کنیم و دیزاین‌های بهتری با همان دیزاین سیستم را اجرا کنیم. بعد در طرح‌های بلندمدت، پیشنهاد تغییر دیزاین سیستم را بدهیم که اگر ذینفعان پروژه قبول کردند این اتفاق در گذر زمان رخ بدهد.
تازه این را هم باید گفت که گاهی ممکن است اصلا نیازی هم به تغییر دیزاین سیستم نباشد و همان انتخاب، با اینکه چند سال قبل انجام شده، انتخاب خوبی باشد. به طور کل فعالیت کردن در تیم، بسیار ارزشمند است و کلی تجربه گروهی به ما می‌دهد و با این مسائل مواجه خواهیم شد.
موفق باشید.
سپاس از شما استاد
درود و سپاس از لطف و همراهی شما.
سلام و خسته نباشید
دوره هاتون عالی بود با اینکه رایگان بود ولی هیچ وقفه یا پرتی نداشت ممنونم
درود و سپاس از لطف و مهربانی شما