طراحی اتمی چیست و چرا باید از آن استفاده کنیم؟

8 سال از کشف این روش طراحی می گذرد و ما هنوز هم به عنوان روشی مفید از آن در پروژه های بی شماری استفاده می کنیم. اما چگونه همه چیز آغاز شد؟ این ایده از کجا آمد؟ چگونه برد فراست آن را پیدا کرد؟ بله Brad Frost شخصی بود که برای اولین بار ایده طراحی اتمی را پیشنهاد داد و سپس آن را گسترش داد. او سخنران، طراح، توسعه دهنده، مشاور سیستم های طراحی و نویسنده بود. خاطرات همین فرد از کلاس های شیمی دبیرستان موجب ظهور این روش شد. ذراتی کوچک و بی معنی که با ترکیب با یکدیگر به اجزای معناداری تبدیل می شوند. یک الگوی قابل پیش بینی…
یک جزء کوچک و ساده به یک جزء بزرگتر و پیچیده تر تبدیل خواهد شد. مثلا یک دکمه را در نظر بگیرید، همین دکمه بدون هیچ گونه برچسبی به کار شما نخواهد آمد، نمی دانید چه کاربردی دارد و شما را به کجا خواهد برد، این دکمه همان جزء کوچک است. براد یک سیستم منعطف پذیر را به همه طراحان معرفی کرد.

چرا از اصطلاح طراحی اتمی استفاده می کنیم؟

همانطور که در سرتاسر این مقاله بحث خواهیم کرد نحوه نام گذاری هر چیز بر نحوه درک و استفاده از آن تاثیر زیادی دارد. نام ( Atomic Design ) هر کدام از ما را به خاطرات گذشته نشستن پشت میزها در کلاس درس شیمی می برد، واکنش های شیمیایی که با معادلات شیمیایی نمایش داده می شدند و اغلب نشان می دادند چگونه عناصر اتمی با هم ترکیب شده و مولکول ها را تشکیل می دهند. همانطور که هیدروژن و اکسیژن با هم ترکیب می شوند و مولکول های آب را تشکیل می دهند.
در دنیای طبیعی عناصر اتمی با هم ترکیب می شوند و مولکول ها را تشکیل می دهند. این مولکول ها می توانند بیشتر با هم ترکیب شوند و ارگانیسم های نسبتا پیچیده ای را تشکیل دهند. برای توضیح بیشتر می توان به این صورت شرح داد که اتم ها بلوک های اساسی ساختمان همه مواد هستند. هر عنصر شیمیایی دارای ویژگی های متمایزی است و نمی توان آن ها را بدون از دست دادن معنای خود بیشتر تجزیه کرد ( بله درست است که اتم ها حتی از بیت های کوچک تری مانند پروتون و الکترون و نوترون تشکیل شده اند. اتم ها کوچک ترین واحد عملکردی هستند ) مولکول ها گروه هایی متشکل از دو یا چند اتم هستند که توسط پیوندهای شیمیایی به هم متصل می شوند.
ترکیب اتم ها، ویژگی های منحصر به فردی به خود را می گیرند و نسبت به Atom ها ملموس تر و کاربردی تر می شوند. ارگانیسم ها مجموعه ای از مولکول ها هستند که به عنوان یک واحد با هم عمل می کنند. این ساختارهای نسبتا پیچیده می توانند از موجودات تک سلولی گرفته تا موجودات بسیار پیچیده مانند انسان را در بر گیرند. اگر بخواهیم به طور خلاصه بیان کنیم، اتم ها با هم ترکیب می شوند تا مولکول ها را تشکیل دهند و مولکول ها نیز با هم ترکیب شده و ارگانیسم ها را تشکیل می دهند. این نظریه اتمی به این معنی است که تمام مواد موجود شناخته شده در جهان را می توان به مجموعه محدودی از عناصر اتمی تجزیه کرد.

شاید به همه این توضیحات اضافه گویی به نظر بیاید و شما کمی کلافه شده باشید، ولی صبر کنید قرار است به نکته های مهم تری برسیم.
توضیح دادیم که چگونه همه مواد موجود در جهان را می توان به مجموعه محدودی از عناصر اتمی تجزیه کرد، به همین صورت هم می توان طراحی یک سایت را به یک مجموعه محدود مشابه عناصر تشبیه کرد. در واقع همان فرآیندی را که در دنیای طبیعی اتفاق می افتد برای طراحی و توسعه رابط های کاربری ( UI ) خود نیز اعمال می کنیم.

طراحی اتمی چیست؟

برخی از UI Designer ها طراحی خود را از بالا به پایین انجام می دهند. به این صورت که ابتدا المان های اولیه و کلی را قرار می دهند و در آخر جزئیات ریز تر و دقیق تر را طراحی می کنند که طراحی خطی نام دارد. در مقابل آن ها طراحانی وجود دارند که بالعکس عمل می کنند، یعنی از پایین به بالا آغاز به کار می کنند، از کوچکترین المان ها و جزئیات شروع کرده و سپس به طرح کلی می رسند، این طراحی روش دوم، که دقیقا طراحی مد نظر ماست طراحی اتمی، ذره ای یا Atomic Design نام دارد. در این روش می توان المنت های HTML را با هم ترکیب کرد و یک طراحی پویا و متحرک ساخت. این طراحی لازمه داشتن نگاهی بسیار عمیق به المنت های اولیه است.
Brad frost با بررسی طبیعت پیرامون و الهام از ساختار مواد که به صورت مایع، جامد و گاز و یا ترکیب های ساده یا مخلوط یا … هستند، این سبک را معرفی کرده است و یکی از رایج ترین متدهای طراحی است که متشکل از 5 مرحله مجزاست تا UI را به شیوه ای آگاهانه و سلسله مراتب وار یا Hierarchy ایجاد کنند.

این 5 مرحله به صورت زیر تعریف می شود:

• اتم ها (Atoms)
• مولکول ها (Molecules)
• ارگانیسم ها (Organisms)
• قالب ها (Templates)
• صفحات (Pages)

این طراحی در واقع عبارت است از اتم ها، مولکول ها، ارگانیسم ها، قالب ها و صفحات که به طور همزمان با هم کار می کنند تا به مناسب ترین UI برای صفحات سایت شما برسند. این روش یک فرآیند خطی نمی باشد، بلکه یک مدل تماما ذهنی است که باعث می شود ما UI خود را به عنوان یک کل منسجم و مجموعه ای از قطعات در آن واحد بدانیم. هر کدام از مراحل بالا نقش بسزایی در سلسله مراتب فرآیند ما دارند، در این جا هر کدام را برای شما به صورت جداگانه تشریح خواهیم کرد تا به یک مدل ذهنی کامل و جامع دست یابید.

اتم ها

دقیقا همانند اتم های درس شیمی…
کوچکترین عناصر، سازنده این سیستم هستند. در طراحی سایت به جای استفاده از اکسیژن یا هیدروژن از دکمه ها، برچسب ها، ورودی ها، عنوان فرم ها، لینک ها و سایر عناصر کوچکتر و همچنین عناصر انتزاعی مانند رنگ، فونت، و حتی انیمیشن ها استفاده می کنیم. آیکونوگرافی هم در این دسته قرار می گیرد. همه این ها عناصری هستند که برای تشکیل مرحله بعدی که همان مولکول هاست کنار هم قرار می گیرند. و دقیقا مانند خاصیت اتم ها در طبیعت اگر پیوندی بین این ذرات صورت نگیرد به تنهایی خود معنا دار نخواهند بود.

مولکول ها

شروع به ترکیب اتم ها کنید، همه چیز ملموس تر می شود و معنا پیدا می کند. مولکول ها گروه هایی از اتم های متصل به هم هستند و کوچکترین واحد اصلی یک ترکیب به شمار می آیند، مولکول ها خواص خود را حفظ می کنند. آن ها در واقع همانند ستون فقرات و اسکلت اصلی UI شما هستند.
آن ها می توانند ساده یا پیچیده باشند ولی قاعده کلی مولکول ها ترکیب تقریبا ساده ای از اتم هاست. مثلا وقتی یک اتم آواتار و یک اتم اسم و یک برچسب عنوان با هم ترکیب شوند یک مولکول نمایه خواهند ساخت. درست شبیه درس شیمی اتم ها به روش های مختلف با هم ترکیب شده و مولکول های منحصر به فردی ایجاد می کنند. البته هنوز به گروه بندی های اصلی تر نرسیده ایم.

ارگانیسم ها

در این مرحله هنوز به طراحی کامل نرسیده ایم، اما یک جزء است که می تواند در بین طرح ها یا الگوهای چیدمان دوباره مورد استفاده قرار گیرد. با ترکیب مولکول ها، ارگانیسم ها به دست می آیند که بخشی مجزا و نسبتا پیچیده از شکل ظاهری وب را تشکیل می دهند. با تشکیل ارگانیسم ها شکل ظاهری وب سایت شما شروع به شکل گیری می کند.
یک نمومه ارگانیسم نتایج جستجو را در نظر بگیرید که از مولکول های جستجو، نتیجه جستجو، فیلتر و دکمه نمایش نتایج بیشتر، تشکیل شده است. در این قسمت مولکول نتیجه جستجو، می تواند چندین بار تکرار شود و اگر نیاز به اصلاح داشت فقط می توانید به مولکول این بخش رجوع کنید و طراحی جدیدی را از سر بگیرید.
این ارگانیسم ها می توانند همچنین از ملکول های متنوع و یا همسان تشکیل شوند، به این صورت که حتی می توانند از تکرار چندین مولکول همسان تشکیل شوند.

قالب ها

قالب ها (الگوها) در طراحی اتمی با استفاده از گروه ارگانیسم های متصل به هم و دیگر عناصر یک طراحی منسجم تشکیل می شوند. این مرحله در واقع آغاز یک طراحی اصلی می باشد که دیگر از دنیای شیمی فاصله گرفته است و مرحله مهمی محسوب می شود. یک الگو از جایی آغاز می شود که ما با استفاده از ارگانیسم ها و عناصر خود شروع به ایجاد یک طرح کلی و منسجم می کنیم.
قالب ها را مانند یک بلوپرینت یا وایرفریم از طرح نهایی صفحه ای که می خواهیم در آخر آن را طراحی کنیم در نظر بگیرید. در این مرحله قالب ها هنوز یک المنت هستند و اطلاعات اصلی هنوز در آن ها قرار نگرفته است.
زمانی که آغاز به دیدن رابط کاربردی یک وب سایت کردیم، در واقع با مفهوم قالب ها مواجه هستیم. الگو ها در واقع طرح اصلی ما برای طراحی یک صفحه پایان یافته، است.

صفحه ها

در نهایت صفحات از طبقه بندی قالب ها بوجود می آیند که نشان دهنده رابط کاربری کلی و نتیجه ترکیب همه المان های اولیه است. این آخرین مرحله است. مرحله ای که شما نمونه های مختلف از تمپلیت ها را ایجاد و در کنار هم قرار می دهید. قسمتی لازم و ضروری، مرحله ای که نمونه تکامل یافته و واقع گرایانه قالب هاست. آن ها محلی هستند که در آن بیشترین مشتریان و ذینفعان داخلی در حال بررسی طرح هستند زیرا همه چیز به طور کلی در یک جا مشاهده می شود و همچنین بیشتر تست های کاربرد پذیری و تجربه های کاربران در این مرحله صورت می پذیرد.
به عنوان نمومه برای هر فرد یک ماژول از تمپلیت پروفایل ساخته می شود و اطلاعات آن ها جایگزین می شود. ممکن است در نمونه هایی که ایجاد می کنید از همه ارگانیسم ها در یک تمپلیت استفاده نکنید، چون ممکن است برای یک کاربر آن ارگانیسم فعال نباشد و یا اینکه به آن نیاز نداشته باشد. ولی خب صفحه ها مکانی هستند که شما مشخص می کنید کدام تمپلیت ها باید نمایش داده شوند. طراح در این مرحله می تواند با انجام تست هایی از مشکلات طرح کلی آگاهی پیدا کند و با یک دید کلی از طرح تکمیلی به عقب بازگردد و با ایجاد تغییرات در مولکول ها و ارگانیسم ها یا حتی قالب، Ui را بهبود بخشد.
به اشتراک گذاری در مرحله الگوها هم شاید عاقلانه باشد اما یک طرح تکمیل شده و جامع هم نقاط قوت شما را نمایان خواهد کرد و هم باعث خواهد شد بتوانید مشکلات و عیوب را بشناسید و برطرف کنید.

دلایل استفاده از طراحی اتمی چیست؟

درک بهتر و بیشتر در لایه بندی ها، عبور از مفاهیم انتزاعی و رسیدن به مطالب واقعی تر، ارائه روش روشنی از ساخت سیستم های طراحی، سازگاری و قابل کنترل بودن طرح ها، ثبات بیشتر، مقیاس پذیری مفید تر، بازگشت ساده تر به اشتباهات اولیه جزئی و اصلاح راحت تر آن ها، افزایش سرعت، کاهش اصلاحات گرافیکی، صرفه جویی در زمان و هزینه، کد نویسی ساده تر، درک بهتر و ملموس تر توسعه دهندگان تازه وارد، کاهش ریسک نوشتن کد های تکراری و به حداقل رساندن این موضوع، یافتن ساده کد های مبدا و ابتدایی، در دسترس داشتن لیستی کامل از اتم ها، قابلیت بروز رسانی سریع و حذف ویژگی های معین شده طراحی، آگاه شدن سریع و راحت از تغییرات Ui با تغییر یا حذف یک المنت، اطلاع کامل طراحان از حقیقت اصلی یک پروژه، آگاهی از کیفیت المنت های استفاده شده در پروژه و مزایای بسیار دیگر که با استفاده از این مدل طراحی، شما از آن برخوردار خواهید شد.

سخن آخر

Atomic Design با فراهم کردن یک متدولوژی مناسب برای طراحان وب این فرصت را به آن ها می دهد تا یک تجربه کاربری خوب ارائه دهند. با استفاده از طراحی اتمی، طراحان می توانند علاوه بر حفظ خلاقیت خود از هر گونه مشکلی در امان باشند. چون توسعه وب سایت ها بیشتر یک کار منطقیست و روش مخصوص به خود را دارد، در صورتی که کار طراحی بیشتر جنبه هنری دارد و ممکن است طراح بین برقراری ارتباط بین طراحی صفحات و توسعه دهندگی آن به مشکل بر بخورد. این روش مشکلات بین طراح و توسعه دهنده را کاهش می دهد و بین آن ها ارتباط برقرار می کند. همچنین زمان بسیار زیادی ذخیره خواهد شد.