طراحی اتمی (Atomic design)

ما صفحات را طراحی نمی کنیم، بلکه سیستمی از کامپوننت‌ها را طراحی می کنیم.
Stephen Hay

این مطلب ترجمه‌ و خلاصه‌ای است از Atomic Design، روشی برای طراحی دیزاین سیستم‌ها بر پایه اجزای سازنده آن که Brad Frost تهیه کرده است و در بسیاری از موارد مخصوصا به عنوان یک روش، فلسفه و چارچوب برای رسیدن به یک دیزاین سیستم کارگشاست. «بِرَد فِراست» کتابی به همین نام دارد که در آن توضیح داده وقتی به دنبال ایده‌ای برای نظم دادن به تولید کامپوننت‌های سازنده یک رابط کاربری بوده به فکر استفاده از روشی افتاده که در شیمی برای دسته‌بندی عناصر استفاده می‌شود، در این روش با ترکیب عناصر ساده می‌توان عناصر پیچیده‌تر ساخت و از آن پس این فلسفه به عنوان سنگ بنای یک متدولوژی برای ساخت دیزاین سیستم‌های متفاوت قرار گرفت.

رابط‌های کاربری از اجزای کوچکتری ساخته شده‌اند. این بدان معنی است که ما می‌توانیم کل رابط‌ها را به ساختمان بلوک‌های اساسی شکسته و از آنجا کار را شروع کنیم. این اصلی ترین ویژگی طراحی اتمی است.

طراحی اتمی (Atomic design)چیست؟

طراحی اتمی روشی (methodology) است برای ساخت سیستم‌های طراحی (Design Systems)، این روش دارای پنج سطح مشخص است :

1. اتم‌ها (Atoms)
2. مولکول‌ها (Molecules)
3. ارگانیسم‌ها (Organisms)
4. قالب‌ها (Templates)
5. صفحه‌ها (Pages)

اتم‌ها (Atoms)

اتم‌ها عناصر پایه در ساخت هر عنصر هستند. در رابط‌کاربری یک وب‌سایت می‌توان از تگ‌های HTML مانند لیبل، ورودی‌ها یا دکمه‌ها به عنوان اتم نام برد.

اتم‌ها همچنین می توانند شامل عناصر انتزاعی‌تر مانند پالت‌های رنگی ، قلم‌ها و جنبه‌های حتی نامرئی‌تر یک رابط‌کاربری مانند انیمیشن‌ها باشند.

درست همانند اتم‌های موجود در طبیعت، آنها کاملاً انتزاعی هستند و اغلب به‌تنهایی مفید نیستند. با اینحال به عنوان یک مرجع خوب در جدول یک کتابخانه الگو (pattern library) می توانید کلیت سیستم را در آن‌ها ببینید.

مولکول‌ها (Molecules)

وقتی شروع به ترکیب اتم‌ها با هم می‌کنیم ، همه‌چیز جالب‌تر و ملموس‌تر می‌شوند. در واقع مولکول‌ها گروه‌هایی از اتم هستند که به هم پیوسته‌اند و کوچکترین واحد اساسی یک ترکیب (component) هستند. این مولکول‌ها خاصیت خاص خود را دارند و به عنوان ستون فقرات سیستم‌های طراحی (Design systems) ما عمل می‌کنند.

به عنوان مثال ، یک برچسب فرم(label)، ورودی (input) یا دکمه، به خودی خود و تنهایی چندان مفید و کاربردی به نظر نمی‌رسند، اما وقتی آنها را به عنوان یک «فرم» ترکیب کنید دارای «کاربرد» می‌شوند.

«استیو جابز» : "یک کار را انجام بده؛ و آن کار را خوب انجام بده." و این همان کاری است که حاصل ترکیب اتم‌ها با هم به عنوان یک مولکول کاربردی انجام می‌دهد، که این ما را دلگرم می‌کند. در حالی که مولکول‌ها در یک نگاه پیچیده به نظر می‌رسند، ولی با یک نگاه دقیق، آنها فقط ترکیب نسبتاً ساده‌ای از اتم‌ها هستند که برای «استفاده مجدد» ساخته شده‌اند.

ارگانیسم‌ها (Organisms)

مولکول‌ها، آجرها و بلوک‌های ساختمانی را در اختیار ما می‌گذارند تا بتوانیم با آنها کار کنیم، اکنون می‌توانیم آن‌ها را با هم ترکیب کنیم تا ارگانیسم‌ها تشکیل شوند. ارگانیسم‌ها گروه‌هایی از مولکول‌ها هستند که به یکدیگر متصل می‌شوند تا یک بخش نسبتاً پیچیده‌تر و همچنین مستقل از کل رابط‌کاربری را تشکیل دهند.

اکنون در حال شروع مرحله‌ای هستیم که هرچه بیشتر ما را در راه رسیدن به یک نتیجه ملموس کمک می‌کند. کارفرما یا مشتری ممکن است زیاد با مولکول‌های طراحی شده در سیستم طراحی شما ارتباط برقرار نکند! اما ما با ساختن ارگانیسم‌ها شروع به شکل دادن به شمایل نهایی رابط‌کاربری می‌کنیم که برای کارفرما هم ملموس‌تر و قابل دیدن است.

ارگانیسم‌ها می توانند از انواع مولکول‌های مشابه و یا متفاوت تشکیل شوند. به عنوان مثال، ارگانیسم قسمت بالای یک وب سایت (Masthead) ممکن است از اجزای متنوعی مانند لوگو، نوار پیمایش (navigation bar)، فرم جستجو و حتی لیست کانال‌های رسانه‌های اجتماعی تشکیل شود. اما یک ارگانیسم جهت نمایش "محصولات" (product grid) ممکن است از یک مولکول (احتمالاً حاوی تصویر محصول ، عنوان محصول و قیمت) تشکیل شود که بارها و بارها تکرار می شود.

فرآیند ساختن ارگانیسم‌ها از مولکول‌ها، باعث تشکیل کامپوننت‌های مستقلی با ویژگی‌های همچون قابلیت جابجایی (portable) و همچنین استفاده مجدد (reusable) می‌گردد.

قالب ها (Templates)

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

قالب‌ها (templates) اغلب گروهی ارگانیسم‌ها هستند که با کنار هم قرار گرفتن، صفحات را تشکیل داده‌اند. اینجاست که در عمل ما طرح را می‌بینیم و به چیدمان (lay out) آن پی می‌بریم.

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

صفحه‌ها (Pages)

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

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

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

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

چرا طراحی اتمی (Atomic design) ؟

از خیلی از جهات ما خیلی از این کارها را همیشه انجام می‌دهیم حتی اگر این عمل آگاهانه و از روی انتخاب این روش نباشد.

طراحی اتمی روش روشنی برای دستیابی به سیستم های طراحی (Design Systems) فراهم می کند. مشتریان و اعضای تیم قادرند با دیدن مراحل انجام شده در پیش روی خودشان، مفهوم سیستم‌های طراحی را بهتر درک کنند.

طراحی اتمی به ما قابلیت گذر از انتزاع به واقعیت ملموس را می دهد. به همین دلیل ما را قادر به ساختن سیستم هایی با ثبات (consistency) و قابلیت مقیاس پذیری (scalability) می‌کنند در حالی که هم‌زمان می‌توان چگونگی نمایش و عملکرد محتوای واقعی در خروجی‌نهایی را در آن شبیه‌سازی کرد. و مونتاژ (assembling) به جای ساختارشکنی (deconstructing)، یعنی ما از همان لحظه شروع در حال ساختن سیستم هستیم و منتظر نمی‌مانیم که در آخر پاییز جوجه ها را بشماریم.

این متن به طور خلاصه می‌تواند ساختار این متدولوژی را روشن سازد ولی من پیشنهاد می‌کنم با توجه به در دسترس بودن این کتاب، با مطالعه کامل آن بیشتر با جزییات این روش آشنا شوید.

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

در پایان و در صورتی که به این موضوع علاقه‌مند هستید پیشنهاد می‌کنم مقاله‌ای را که به 10 دلیل برای استفاده از این روش در ساختن دیزاین سیستم‌ها اشاره کرده مطالعه کنید و یا این مقاله که نگاهی انتقادی به این روش داشته است، و همچنین این گفتگو که به بعضی مشکلات این روش اشاره کرده که خود آقای Frost هم در قسمتی از آن پاسخ داده است.

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