درود به همه خوانندگان این مقاله
امروز داشتم کدای یکی از دوستانم رو میخوندم، ساختار و اسم پوشه ها رو که دیدم منو یاده سریال Breaking Bad انداخت میگی چرا چون اسم پوشه ها Atoms و Molecules و… بود که عجیب بود برام.
بهش پیام دادم که چرا اسم گذاری پوشه هات اینطوریه گفت که، به این ساختار و نحوه اسم گذاری Atomic Design میگن از اونجا که من خیلی طلب علم و دانشم رفتم یه چرخی تو یوتیوب و گوگل عزیز زدم و بنظرم جالب اومد و گفتم برای اینکه خودم بهتر یادش بگیرم یه مقاله ازش بندازم بیرون.
حالا من قراره چی بگم
قراره تو این مقاله یه سفر کوچیک و جذاب داشته باشیم تو دنیای طراحی اتمی. شاید اولش اسمش عجیب به نظر بیاد، ولی همین که شروع کنیم، می‌بینی چقدر خوب و کارآمده. می‌خوام یه جوری براتون توضیح بدم که نه تنها راحت بفهمید، بلکه به خودتون بگید “ای بابا چرا زودتر اینو نمی‌دونستم؟”.
ما از چیزای خیلی ساده شروع می‌کنیم؛ از اون دکمه کوچیک تو صفحه‌تون که شاید هیچ‌وقت بهش فکر نکرده بودید، تا برسیم به یه صفحه کامل که همه چیش به هم وصله و درست کار می‌کنه. هدفم اینه که به زبون ساده و خودمونی، فلسفه پشت این روش و مزیت‌هایی که براتون داره رو باز کنم. خب، آماده‌ای؟ بریم سراغش!
از کجا اومده و چرا؟
طراحی اتمی توسط آقای Brad Frost تو سال ۲۰۱۳ معرفی شد که هدف این روش، تقسیم رابط کاربری به اجزای کوچکتر و ساختاریافته‌تر است که به صورت سلسله مراتبی سازمان‌دهی می‌شوند. این روش از طبیعت و شیمی الهام گرفته و فرآیند طراحی را به پنج مرحله تقسیم میکند:
- اتم‌ها (Atoms)
- مولکول‌ها (Molecules)
- ارگانیسم‌ها (Organisms)
- قالب‌ها (Templates)
- صفحات (Pages)
دخول شیمی تو طراحی!
وقتشه شیمی خودمون تو طراحی رو قوی کنیم که خیلی کاربردیه
- اتم‌ها (Atoms)
اتم‌ها کوچک‌ترین و پایه‌ای‌ترین اجزای طراحی هستند که نمی‌توان آن‌ها را به اجزای ساده‌تر تقسیم کرد. این
اجزا شامل مواردی مانند دکمه‌ها، اینپوت ها، آیکون‌ها و.. هستند. هر اتم مستقل است و می‌تواند به‌صورت
مجزا استفاده شود.
- مولکول‌ها (Molecules)
مولکول‌ها از ترکیب دو یا چند اتم تشکیل می‌شوند تا یک عملکرد ساده و مستقل ارائه دهند. برای مثال، یک
فرم جستجو از یک فیلد ورودی (اتم) و یک دکمه جستجو (اتم دیگر) ساخته می‌شود.
- ارگانیسم‌ها (Organisms)
ارگانیسم‌ها از گروهی از مولکول‌ها تشکیل می‌شوند که با همدیگر یک بخش کاربردی‌تر و پیچیده‌تر طراحی را
ایجاد می‌کنند. برای مثال، هدر یک وب‌سایت که شامل لوگو (مولکول)، منو (مولکول)، و فرم جستجو
(مولکول) است.
- قالب‌ها (Templates)
قالب‌ها ساختار کلی صفحات را تعریف می‌کنند و بخش‌های مختلف (ارگانیسم‌ها) را کنار هم قرار می‌دهند.
قالب‌ها اغلب بدون محتوای واقعی هستند و فقط ساختار صفحات را نمایش می‌دهند.
- صفحات (Pages)
صفحات، بالاترین سطح در طراحی اتمی هستند که در آن‌ها قالب‌ها با محتوای واقعی ترکیب می‌شوند. این
مرحله برای ارزیابی سیستم طراحی و اطمینان از کارایی آن بسیار مهم است.
چرا باید از سیستم طراحی اتمی استفاده کنیم؟!
تا الان دیگه ساز و کار این سیستم دستتون اومده و حالا شاید بپرسید که خب چرا باید ازش استفاده کنیم و اصلا لازمه استفاده ازش؟! خب بذار بهت بگم دلایلش رو نخواستی استفاده نکن.
- استفاده مجدد از اجزا (Reusable Components)
طراحی اتمی به شما این امکان را می‌دهد که اجزای کوچکتر را به‌صورت مستقل طراحی کنید و سپس همان
اجزا را در بخش‌های مختلف استفاده کنید. این ویژگی باعث کاهش زمان طراحی و توسعه می‌شود. به زبان
ساده، یک بار طراحی می‌کنید و هر چند بار که بخواهید از آن استفاده می‌کنید.
- ایجاد و مدیریت آسان راهنمای استایل (Style Guide)
وقتی طراحی بر اساس اصول طراحی اتمی انجام شود، اجزای مختلف از ابتدا به‌صورت مستقل ساخته
می‌شوند. همین اجزا می‌توانند به‌عنوان راهنمای استایل برای سایر پروژه‌ها یا صفحات استفاده شوند. این
کار باعث یکپارچگی در طراحی می‌شود.
- درک بهتر کدها و طراحی‌ها
ساختار کدی که با طراحی اتمی ایجاد می‌شود، شفاف و واضح است. وقتی هر بخش از طراحی (اتم،
مولکول، یا ارگانیسم) به‌صورت مستقل تعریف شده باشد، کدهای پروژه به‌راحتی قابل فهم خواهند بود. این
ویژگی به ویژه برای کار با تیم‌های توسعه بزرگ یا ورود یک توسعه‌دهنده جدید بسیار مفید است.
- راحتی در نمونه‌سازی (Prototyping)
داشتن لیستی از اجزای طراحی‌شده (اتم‌ها و مولکول‌ها) قبل از شروع پروژه، فرآیند نمونه‌سازی را ساده‌تر و
سریع‌تر میکند. به جای ساخت نمونه‌های جدید از ابتدا، می‌توانید اجزای از پیش ساخته شده را ترکیب
کنید.
- به‌روزرسانی و نگهداری ساده‌تر
تغییرات یا به‌روزرسانی در طراحی تنها نیاز به اعمال تغییر در یک اتم یا مولکول دارد. این تغییرات به‌صورت
خودکار در کل پروژه منعکس می‌شوند. همچنین، حذف اجزای غیرضروری بسیار آسان است.
- طراحی سیستماتیک و سازگار
این روش به شما کمک میکند تا به‌صورت سیستماتیک و مرحله به مرحله طراحی کنید. طراحی نهایی نه
تنها زیباتر بلکه از نظر عملکرد و تجربه کاربری نیز بسیار کارآمدتر خواهد بود.
- راحت تر شدن همکاری بین طراحان و توسعه‌دهندگان
طراحی اتمی با فراهم کردن ساختارهای واضح، ارتباط میان طراحان و توسعه‌دهندگان را بهبود می‌بخشد.
این روش به هر دو گروه کمک میکند تا یک زبان مشترک برای تعریف اجزا و تعاملات پیدا کنند.
- کارآمدی در مقیاس بزرگ
برای پروژه‌های بزرگ که نیازمند طراحی صفحات متعدد هستند، این سیستم راه حلی ایده‌آل است. اجزای
مستقل باعث می‌شوند که افزودن ویژگی‌ها یا صفحات جدید ساده‌تر و سریع‌تر انجام شود.
- سازگاری در طراحی موبایل و دسکتاپ
طراحی اتمی ذاتاً (Responsive) است. با طراحی اجزا به‌صورت مستقل، می‌توانید به راحتی آن‌ها را برای
انواع دستگاه‌ها و صفحه‌نمایش‌ها تطبیق دهید.
جمع بندی
رسیدیم به انتهای ماجراجوییمون و وقت خداحافظی رسیده، تو این مقاله به معرفی طراحی اتمی پرداختیم و خوبی هاشو بررسی کردیم. این سیستم با فراهم کردن یه ساختار منظم و کارآمد، نه تنها فرآیند طراحی و توسعه را راحت تر میکند بلکه همکاری بین تیم‌های طراحی و توسعه را بهتر و موثر تر میکند.
