درود به همه خوانندگان این مقاله
امروز داشتم کدای یکی از دوستانم رو میخوندم، ساختار و اسم پوشه ها رو که دیدم منو یاده سریال Breaking Bad انداخت میگی چرا چون اسم پوشه ها Atoms و Molecules و... بود که عجیب بود برام.
بهش پیام دادم که چرا اسم گذاری پوشه هات اینطوریه یاکل المشروب یا ولد؟ گفت که نه، به این ساختار و نحوه اسم گذاری Atomic Design میگن از اونجا که من خیلی طلب علم و دانشم رفتم یه چرخی تو یوتیوب و گوگل عزیز زدم و بنظرم جالب اومد و گفتم برای اینکه خودم بهتر یادش بگیرم یه مقاله ازش بندازم بیرون.
قراره تو این مقاله یه سفر کوچیک و جذاب داشته باشیم تو دنیای طراحی اتمی. شاید اولش اسمش عجیب به نظر بیاد و به خودم بگید یاکل المشروب یا ولد؟، ولی همین که شروع کنیم، می‌بینی چقدر خوب و کارآمده. می‌خوام یه جوری براتون توضیح بدم که نه تنها راحت بفهمید، بلکه به خودتون بگید "ای بابا چرا زودتر اینو نمی‌دونستم؟".
ما از چیزای خیلی ساده شروع می‌کنیم؛ از اون دکمه کوچیک تو صفحه‌تون که شاید هیچ‌وقت بهش فکر نکرده بودید، تا برسیم به یه صفحه کامل که همه چیش به هم وصله و درست کار می‌کنه. هدفم اینه که به زبون ساده و خودمونی، فلسفه پشت این روش و مزیت‌هایی که براتون داره رو باز کنم. خب، آماده‌ای؟ بریم سراغش!
طراحی اتمی توسط آقای Brad Frost تو سال 2013 معرفی شد که هدف این روش، تقسیم رابط کاربری به اجزای کوچکتر و ساختاریافته‌تر است که به صورت سلسله مراتبی سازمان‌دهی می‌شوند. این روش از طبیعت و شیمی الهام گرفته و فرآیند طراحی را به پنج مرحله تقسیم میکند:
وقتشه شیمی خودمون تو طراحی رو قوی کنیم که خیلی کاربردیه
اتم‌ها کوچک‌ترین و پایه‌ای‌ترین اجزای طراحی هستند که نمی‌توان آن‌ها را به اجزای ساده‌تر تقسیم کرد. این
اجزا شامل مواردی مانند دکمه‌ها، اینپوت ها، آیکون‌ها و.. هستند. هر اتم مستقل است و می‌تواند به‌صورت
مجزا استفاده شود.
مولکول‌ها از ترکیب دو یا چند اتم تشکیل می‌شوند تا یک عملکرد ساده و مستقل ارائه دهند. برای مثال، یک
فرم جستجو از یک فیلد ورودی (اتم) و یک دکمه جستجو (اتم دیگر) ساخته می‌شود.
ارگانیسم‌ها از گروهی از مولکول‌ها تشکیل می‌شوند که با همدیگر یک بخش کاربردی‌تر و پیچیده‌تر طراحی را
ایجاد می‌کنند. برای مثال، هدر یک وب‌سایت که شامل لوگو (مولکول)، منو (مولکول)، و فرم جستجو
(مولکول) است.
قالب‌ها ساختار کلی صفحات را تعریف می‌کنند و بخش‌های مختلف (ارگانیسم‌ها) را کنار هم قرار می‌دهند.
قالب‌ها اغلب بدون محتوای واقعی هستند و فقط ساختار صفحات را نمایش می‌دهند.
صفحات، بالاترین سطح در طراحی اتمی هستند که در آن‌ها قالب‌ها با محتوای واقعی ترکیب می‌شوند. این
مرحله برای ارزیابی سیستم طراحی و اطمینان از کارایی آن بسیار مهم است.
تا الان دیگه ساز و کار این سیستم دستتون اومده و حالا شاید بپرسید که خب چرا باید ازش استفاده کنیم و اصلا لازمه استفاده ازش؟! خب بذار بهت بگم دلایلش رو نخواستی استفاده نکن.
طراحی اتمی به شما این امکان را می‌دهد که اجزای کوچکتر را به‌صورت مستقل طراحی کنید و سپس همان
اجزا را در بخش‌های مختلف استفاده کنید. این ویژگی باعث کاهش زمان طراحی و توسعه می‌شود. به زبان
ساده، یک بار طراحی می‌کنید و هر چند بار که بخواهید از آن استفاده می‌کنید.
وقتی طراحی بر اساس اصول طراحی اتمی انجام شود، اجزای مختلف از ابتدا به‌صورت مستقل ساخته
می‌شوند. همین اجزا می‌توانند به‌عنوان راهنمای استایل برای سایر پروژه‌ها یا صفحات استفاده شوند. این
کار باعث یکپارچگی در طراحی می‌شود.
ساختار کدی که با طراحی اتمی ایجاد می‌شود، شفاف و واضح است. وقتی هر بخش از طراحی (اتم،
مولکول، یا ارگانیسم) به‌صورت مستقل تعریف شده باشد، کدهای پروژه به‌راحتی قابل فهم خواهند بود. این
ویژگی به ویژه برای کار با تیم‌های توسعه بزرگ یا ورود یک توسعه‌دهنده جدید بسیار مفید است.
داشتن لیستی از اجزای طراحی‌شده (اتم‌ها و مولکول‌ها) قبل از شروع پروژه، فرآیند نمونه‌سازی را ساده‌تر و
سریع‌تر میکند. به جای ساخت نمونه‌های جدید از ابتدا، می‌توانید اجزای از پیش ساخته شده را ترکیب
کنید.
تغییرات یا به‌روزرسانی در طراحی تنها نیاز به اعمال تغییر در یک اتم یا مولکول دارد. این تغییرات به‌صورت
خودکار در کل پروژه منعکس می‌شوند. همچنین، حذف اجزای غیرضروری بسیار آسان است.
این روش به شما کمک میکند تا به‌صورت سیستماتیک و مرحله به مرحله طراحی کنید. طراحی نهایی نه
تنها زیباتر بلکه از نظر عملکرد و تجربه کاربری نیز بسیار کارآمدتر خواهد بود.
طراحی اتمی با فراهم کردن ساختارهای واضح، ارتباط میان طراحان و توسعه‌دهندگان را بهبود می‌بخشد.
این روش به هر دو گروه کمک میکند تا یک زبان مشترک برای تعریف اجزا و تعاملات پیدا کنند.
برای پروژه‌های بزرگ که نیازمند طراحی صفحات متعدد هستند، این سیستم راه حلی ایده‌آل است. اجزای
مستقل باعث می‌شوند که افزودن ویژگی‌ها یا صفحات جدید ساده‌تر و سریع‌تر انجام شود.
طراحی اتمی ذاتاً (Responsive) است. با طراحی اجزا به‌صورت مستقل، می‌توانید به راحتی آن‌ها را برای
انواع دستگاه‌ها و صفحه‌نمایش‌ها تطبیق دهید.
رسیدیم به انتهای ماجراجوییمون و وقت خداحافظی رسیده، تو این مقاله به معرفی طراحی اتمی پرداختیم و خوبی هاشو بررسی کردیم. این سیستم با فراهم کردن یه ساختار منظم و کارآمد، نه تنها فرآیند طراحی و توسعه را راحت تر میکند بلکه همکاری بین تیم‌های طراحی و توسعه را بهتر و موثر تر میکند.
