https://virgool.ir/feed/@parviz.21.jFront End Developerfa2026-11-12 06:52:33https://files.virgool.ir/upload/users/1593843/avatar/sKHpK4.jpeghttps://virgool.ir/@parviz.21.jhttps://virgool.ir/@parviz.21.j/atomic-design-znsqssjg5zpjاتومیک دیزاین یا طراحی اتمی چیست !طراحی اتمی روشی است که توسط برد فراست ایجاد شده است و به دنبال ارائه هدفی در سیستم های طراحی رابط کاربری عمدی تر و با نظم و سلسله مراتب صریح است. برای فهم بهتر آن اول بگوییم منظور از اتومیک چیست ؟جهان از یک مجموعه ثابت از “عناصر اتمی” تشکیل شده است  که برای بسیاری از ما به عنوان جدول تناوبی عناصر شناخته شده است. این عناصر عناصر سازنده همه چیزهای اطراف ما هستند.در شیمی ، این عناصر اتمی دارای خصوصیات ثابتی هستند که آنها را تعریف می کند. اکسیژن و هیدروژن به خودی خود اتمهایی با خواص مستقل هستند. اما وقتی این عناصر ترکیب می شوند ، مولکولهایی ایجاد می کنند که خصوصیات منحصر به فرد خود را از اتمهای موجود در آنها به دست می آورند. در مورد هیدروژن و اکسیژن ، جفت شدن دو اتم هیدروژن با اکسیژن ، چیزی را ایجاد می کند که به عنوان مولکول آب می شناسیم.ارتباط شیمی و طراحی چه چیزی است ؟همان طور که از اسم atomic Design پیداست این مدل از طراحی الهام گرفته شده است از شیمی و ما نیز رابط کاربری خود را به اجزای جزی تر تقسیم میکنیم و به اصطلاح از پایین به بالا شروع به طراحی میکنیم این همان اصول طراحی اتمی است.عناصر طراحی اتمی (Atomic Design) ؟پنج مرحله متمایز از روش طراحی اتمی وجود دارد که سه مرحله اول براساس معادل های آن ها در دنیای شیمی مدلسازی شده است. هر مرحله بر اساس مرحله قبلی ساخته می شود ، و به عنوان مجموع اقلام مراحل قبل عمل می کند.اتم هامولکول هاارگانیزم تمپلت هاصفحاتاتم (Atoms) ؟درست مثل شیمی ، اتم ها کوچکترین عناصر سازنده سیستم ما هستند. ما در طراحی به جای اتم هایی مانند اکسیژن یا هیدروژن ، دکمه ها ، ورودی ها ، برچسب ها ,پالت های رنگی ,انیمیشن هاو سایر عناصر کوچک را داریم که در طول طراحی ما مورد استفاده قرار می گیرند. آیکونوگرافی در این دسته قرار می گیرد ، چه یک نماد منو باشد ، چه آواتار ، زیرا عناصر کوچکی هستند که برای تشکیل مرحله بعدی – مولکول ها ، کنار هم قرار می گیرند.مولکول ها ؟در مرحله مولکول ، ما عناصر طراحی اتمی مستقل خود را که هر کدام دارای ویژگی ها ، سبک ، قالب خاص خود هستند ، می گیریم و شروع به جمع آوری آنها در گروه های جدید می کنیم. به عنوان مثال اتم آواتار ما را در نظر بگیرید. اگر اتم آواتار را با نام و برچسب عنوان ، عناصر اتمی دیگر ترکیب کنیم ، می توانیم یک مولکول نمایه ایجاد کنیم. هر اتم خصوصیات منحصر به فرد خود را در گروهی حمل کرده است که به تنهایی دارای خصوصیات متمایز است.درست مثل شیمی ، ما می توانیم اتم های مشابه را به روش های مختلف با هم ترکیب کنیم و مولکول های منحصر به فردی برای استفاده در طراحی خود ایجاد کنیم. اگرچه در این مرحله گروه بندی ها هنوز مجموعه های نسبتاً ساده ای هستند.به مولکول ها همان Component هم میگویند.ارگانیزم (Organisms) ؟ارگانیزم ها متشکل از چندین مولکول مختلف یا همسان می باشند که یه بخش کلی و کاربردی از صفحه را تشکیل میدهند. همان طور که در صورت پایین میبینید ، منو از چندین مولکول ساخته شده است. به طور مثال ، بخش نمایش مطالب مرتبط که شامل چند مطلب است و هر مطلب یک مولکول است که خود از اتم هایی مثل نام مطلب ، تصویر مطلب تشکیل شده است.تمپلت ها (templets) ؟تمپلت یا همان الگو یا قالب اولین مرحله از روش طراحی اتمی است که با یک مرحله در جهان مولکولی همسو نیست ، اما برای طراحی اتمی مهم است. یک الگوی جایی است که ما شروع به تربیت ارگانیزم ها و سایر عناصر خود می کنیم تا یک طرح منسجم داشته باشیم.شما در مرحله ارگانیزم مشاهده کردید که عناصر شروع به تشکیل بلوک های قابل استفاده از محتوا می کنند و این عناصر شروع به جمع شدن در قالب الگویی از بلوک ها می کنند.که می توانند در صفحات مختلف مورد استفاده قرار گیرند. الگوها را به عنوان طرح اصلی برای طراحی صفحه پایان یافته ما در نظر بگیرید. در این مرحله ، آنها هنوز هم عناصر هستند و حاوی داده های واقعی نخواهند بود – دقیقاً مانند یک قاب سیم.با استفاده از ارگانیزم ما برای صفحه نمایه ، الگوی ما اکنون شامل یک ارگانیزم آماری است که برخی جزئیات مربوط به نمایه را نشان می دهد این می تواند اقدامات انجام شده ، سطح مهارت و غیره باشد. همچنین یک ارگانیزم تماس وجود دارد که در پایین متصل می شود. با استفاده از این ، اکنون الگویی برای صفحات داریم. این الگو در سرتاسر برنامه ما قابل استفاده مجدد است.صفحه (Pages) ؟ صفحات نمونه واقعی قالب ها می باشند که محتوای واقعی شامل متون و تصاویر و … در آن قرار گرفته است. ظاهری که از هر وب سایت یا اپلیکیشن موبایل میبینید مرحله آخر این روند یعنی صفحات میباشد.چرا از طراحی اتمی استفاده کنیم ؟در کنار تمام ویژگی هایی که در این طراحی گفته شد، طراحی اتمی شما را در رسیدن به یک هدف خاص دنبال می کند: طراحان به سادگی می توانند حقیقت مربوط به یک پروژه طراحی را متوجه شوند – آنها می توانند از کیفیت المنت های استفاده شده در پروژه شان حتی در زمان ساخت آن آگاهی پیدا کنند.طراحی وب اتمی با فراهم آوردن یک متدولوژی مناسب برای طراحان، اجازه می دهد تا یک تجربه کاربری خوب ارائه شود. براساس این طراحی طراحان می توانند همزمان با نگه داری خلاقیت خود از هرگونه مشکل و کلنجاری با توسعه دهنده محفوظ بمانند.کار توسعه دهندگی کاری بیشتر منطقی است و خط و شیوه مخصوص خود را دارد اما کار طراحی بیشتر جنبه هنری قضیه است به همین دلیل طراح ممکن است با ایده ای همراه شود که خیلی با منطق و چهارچوب توسعه دهنده همخوانی نداشته باشد، در این حال طراحی اتمی به طراح کمک می کند تا از این مشکل بیرون بیاید و رابط کاربری خود را مطابق با سلیقه خود و منطبق با چهارچوب توسعه دهنده بسازد. این کار مشکلات بین طراح و توسعه دهنده را کاهش می دهد و زمان بسیاری را ذخیره می کند.وقتی که از طراحی اتمی استفاده کنید زبان جدیدی در تعامل با پروژه ها به وجود می آید. این زبان موجودی رابط نام دارد و کمک می کند تا توسعه دهنده و طراح بتوانند براساس مشکلات قدیمی‌شان راه حل های جدید‌تری بیابند.موجودی رابط به توسعه دهنده کمک می کند تا براساس رابط ساخته شده منطبق با طراحی اتمی المان های رابط کاربری را تغییر دهد. این کار می تواند بدون مراجعه به طراح صورت بگیرد. برای مثال تصور کنید در حال ساختن یک فرم تماس باما هستید. شما المان های طراحی را در اختیار دارید و چینش آنها نیز قرار گرفته حال اگر با مشکلی روبرو باشید با کمک طراحی اتمی وب به سادگی می توانید این مشکل را حل کنید.استفاده از فلسفه طراحی اتمی وب در ضمانت کیفیت وبسایت و المنت ها نیز استفاده می شود. در چنین شرایطی این فلسفه نقشی شبیه به یک ابزار کمکی را ایفا می کند.جمع بندی :)طراحی اتمی برای قلب های ضعیف نیست! برای طراحان و توسعه دهندگان استفاده از این حالت نیازمند فکر و تفکر مجدد روی کل پروسه طراحی وب است. طراحی اتمی کاری منظم است و نیازمند ریزه‌کاری های بسیاری است. جزئیات بسیاری دارد که باید به آن توجه کرد. از زمانی که شما شروع به ساخت یک اتم و مولکول می کنید تا انتهای انجام کار این فرایند ادامه دارد.استفاده از طراحی اتمی باعث می شود توسعه دهنده و طراح روی یک صفحه باقی بمانند و کارشان را هماهنگ با همدیگر انجام دهند. البته اینکار صرفا برای هماهنگ سازی و بالا بردن کیفیت وبسایت نیست با استفاده از آن می توانید نمونه های اولیه سریع تری نیز بسازید.اگر شما در ابتدای انجام یک پروژه هستید پایه کاری‌تان را براساس این فلسفه بنا کنید. مطمئن باشید که در نهایت از کاری که کرده‌اید بسیار خرسند خواهید شد.p.jahangirip.jahangiriThu, 14 Apr 2022 20:41:19 +0430https://virgool.ir/@parviz.21.j/storybookjs-zadbt11kk0n7 storybook استوری بوک چیست !استوری بوک از ابزارهای کارآمد برای طراحی ، تست و پیاده سازی UI پروژه شماست. کتابخانه بزرگ و قدرتمندی که با زبان جاواسکرپیت و به صورت open source منتشر شده.همانطور که از اسم آن پیداست استوری بوک یعنی کتاب داستان و به شما این قابلیت را میدهد که هر یک از کامپوننت های اپلیکیشن را در یک صفحه از این کتاب داستان نمایش دهیم .توضیحات تکمیلیابزاری است که به شما این امکان را می دهد که یک محصول تحت وب را که می تواند یک وب سایت شخصی یا یک وب اپلیکیشن باشد را به اجزای کوچک تری تبدیل کنید و سپس هر کدام از این اجزا را در یک محیط ایزوله بسازید. ساخت یک جزء در یک محیط ایزوله این مزیت را دارد که فقط بر روی آن جزء تمرکز می کنید بدون این که تاثیر بقیه المان های سیستم بر روی آن جزء را در نظر بگیرید. همچنین این ابزار به صورت خودکار هر جزء را مستندسازی می کند و محیطی را در اختیار شما قرار می دهد که هر جزء را تست و بررسی کنید و ورودی های آن را تغییر دهید و نتیجه را بررسی کنید و این مزیت باعث می شود افراد مختلف با مهارت های مختلف مانند: UX/UI Designer, Backend Developer و دیگر Frontend Developerهای تیم بتوانند بدون درگیر شدن با پیاده سازی، یک جزء را تست و بررسی کنید.از دیگر قابلیت های این ابزار علاوه بر مستندسازی و محیط تست و بررسی می توان به پشتیبانی از کتابخانه و فریم ورک های متعدد مثل: React JS, VUE JS, Angular, React Native اشاره کرد.ویژگی‌های استوری بوک چیست؟‌۱- توسعه کامپوننت های UI به صورت جداگانه و غیر وابسته به سایر کامپوننت ها۲- اجرا خارج از محیط برنامه اصلی (کاهش نگرانی در مورد کدهای پروژه و ...)۳- افزونه های قدرتمند به همراه API بسیار ساده برای شبیه سازی و توسعه کامپوننت ها ( لینک - نویگیشن - کلیک و ... )۴- افزایش کارایی کامپوننت های نوشته شده۵- داشتن قسمتی در پروژه برای دیدن همه کامپوننت های ساخته شده۶- کمک به داکیومنت نویسی پروژه۷- اجرای تست های مختلف بر روی کامپوننت (یونیت تست - اینتگریشن - اسنپ شات و ... )۸- اشتراک گذاری کامپوننت ها۹- دوباره استفاده کردن از کامپوننت های موجود و کاهش کدها و پیچیدگی پروژهاین همه ویژگی های این فریمورک نیست و بقیه موارد در حین کار بهتر قابل درک خواهد بود.باید تو جه داشته باشید که استوری بوک فقط در حالت توسعه قابل مشاهده است و بعد از build گرفتن هیچ خبری از آن نیست . استوری بوک و همه افزونه هاش در قسمت devDependencies نصب میشوند.در زیر ما فقط به یک نمونه از استفاده های استوری بوک در یک پروژه نکست اشاره میکنیم شما میتوانید بسته به نیاز خود و مطالعه بیشتر به داکیومنت آن مراجعه کنید . روش نصب ؟# Add Storybook: npx sb initبعد از نصب برای مشاهده تغییرات # Starts Storybook in development mode yarn storybookmyComponent :stories MyComponent :حالا برای مشاهده نتیجه دستور آن را وراد کنید مشاهده خواهید کرد که به راحتی یک کامپوننت با قابلیت تست با پراپس های فیکی که استوری بوک به ما داده را توانستیم بسازیم.و باید بدانید که استوری بوک بعد از اضافه شدن در روت پروژه شما فولدری به نام .storybook برای خود اضافه میکند که میتواند آن را براساس نیازهای خود کانفیک کنیدو همچنین فولدری به نام stories که شامل مثال هایی از نحوه استفاده استوری بوک هست.جمع بندیاستوری بوک ابزار پیشرفته و قدرتمندی هست که توصیه میشه همه توسعه دهندگان فرانت اند حداقل یکبار ازش استفاده کنن و باهاش آشنا بشن. p.jahangirip.jahangiriThu, 14 Apr 2022 18:30:42 +0430